Android Material Design — Components, Theming, Material You

Material Overview

Material Design is Google's design system for creating intuitive, beautiful interfaces. On Android, the Material Components library provides ready-made widgets — buttons, cards, text fields, navigation — that follow Material 3 guidelines.

Material 3 Stack ──────────────── Design tokens (color, type, shape) ↓ Theme.Material3 (XML) / MaterialTheme (Compose) ↓ Material Components (Button, Card, TextInputLayout, FAB) ↓ Your screens — consistent look & accessible UX

Concept	Purpose
Color roles	Semantic colors — primary, surface, error — not raw hex everywhere
Typography scale	headline, title, body, label — consistent text hierarchy
Shape	Corner radius family — rounded cards, buttons, sheets
Motion	Shared axis, fade, container transform transitions
Elevation	Shadow depth showing component hierarchy

1Material Components

Add the Material library and use components instead of basic widgets for a polished, accessible UI out of the box.

Gradle dependency

Kotlin — app/build.gradle.ktsdependencies {
    implementation("com.google.android.material:material:1.12.0")
}

MaterialButton & TextInputLayout

XML — activity_login.xml<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.button.MaterialButton
    android:id="@+id/btnLogin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Sign In" />

MaterialCardView

XML — item_product.xml<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardElevation="2dp"
    app:cardCornerRadius="12dp">

    <LinearLayout
        android:padding="16dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView android:text="Product Name" ... />
    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

Snackbar

KotlinSnackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_LONG)
    .setAction("Undo") { viewModel.undoDelete() }
    .show()

2Theming

Material themes define color roles, typography, and shapes. Extend Theme.Material3 and reference semantic attributes in layouts.

themes.xml (Material 3)

XML — res/values/themes.xml<style name="Theme.MyApp" parent="Theme.Material3.Light.NoActionBar">
    <item name="colorPrimary">@color/md_theme_primary</item>
    <item name="colorOnPrimary">@color/md_theme_on_primary</item>
    <item name="colorSurface">@color/md_theme_surface</item>
    <item name="colorOnSurface">@color/md_theme_on_surface</item>
    <item name="colorError">@color/md_theme_error</item>
</style>

Using theme attributes in layouts

XML<TextView
    android:textColor="?attr/colorOnSurface"
    android:background="?attr/colorSurface"
    android:textAppearance="?attr/textAppearanceBodyLarge" />

MaterialToolbar

Kotlin — MainActivity.ktsetSupportActionBar(binding.toolbar)
supportActionBar?.apply {
    title = "My App"
    setDisplayHomeAsUpEnabled(true)
}

3Material You

Material You (Android 12+) generates personalized color schemes from the user's wallpaper using dynamic color.

Enable dynamic color

Kotlin — MainActivity.ktoverride fun onCreate(savedInstanceState: Bundle?) {
    DynamicColors.applyToActivitiesIfAvailable(this)
    super.onCreate(savedInstanceState)
    // ...
}

Material Theme Builder

Use Material Theme Builder to generate a complete color scheme, then export colors.xml and themes.xml for light and dark variants.

Tip: Dynamic color works best when your theme uses Material 3 color roles (colorPrimary, colorSecondary, colorTertiary) rather than hard-coded hex values in every layout.

4Typography & Elevation

Material typography uses a type scale. Elevation creates visual hierarchy through shadows and layering.

Text style	Typical use
`textAppearanceHeadlineMedium`	Screen titles
`textAppearanceTitleMedium`	Section headers, list titles
`textAppearanceBodyLarge`	Primary body text
`textAppearanceLabelLarge`	Buttons, tabs, chips

FAB with CoordinatorLayout

XML<androidx.coordinatorlayout.widget.CoordinatorLayout ...>
    <!-- main content -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:contentDescription="Add item"
        app:srcCompat="@drawable/ic_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

5Navigation Patterns

Material recommends clear navigation for top-level destinations — bottom navigation for mobile, navigation drawer for many sections.

BottomNavigationView

XML — activity_main.xml<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_nav_menu" />

Wire to Navigation Component

Kotlinval navController = findNavController(R.id.nav_host)
binding.bottomNav.setupWithNavController(navController)

6Hands-On Exercises

1

Migrate an app theme to Theme.Material3 and apply generated color roles from Material Theme Builder.

2

Replace plain Button and EditText with MaterialButton and TextInputLayout.

3

Add a FAB that opens a new screen; use contentDescription for accessibility.

4

Enable dynamic color with DynamicColors.applyToActivitiesIfAvailable on Android 12+.

5

Build a list with MaterialCardView rows and consistent typography scale.

6

Add BottomNavigationView connected to Jetpack Navigation with 3 top-level destinations.

7

Bonus: Compare the same screen in Jetpack Compose Material3 using MaterialTheme and Scaffold.

Material Design MCQ Practice

10 Basic MCQs 10 Advanced MCQs

10 Basic Material Design MCQs

1

Material Design is?

ASQL library

BGoogle design system for UI/UX

CNetwork protocol

DGradle plugin

Explanation: Unified guidelines for layout, motion, color, typography.

2

Material Components library provides?

AGPS only

BDatabase ORM

CPre-built Material widgets for Android

DAPK signer

Explanation: com.google.android.material:material dependency.

3

Theme.Material3 uses?

ANo dark mode

BHollywood theme

CAPI 1 only

DMaterial Design 3 color roles and shapes

Explanation: Material 3 (M3) is current generation with dynamic color.

4

FloatingActionButton (FAB)?

APrimary promoted action circular button

BBanner ad

CSQL query

DService

Explanation: FAB for main screen action — e.g. compose email.

5

TextInputLayout wraps?

AImageView

BEditText with Material hint and error

CRecyclerView

DMapView

Explanation: Outlined/filled box styles with floating labels.

6

Snackbar from Material?

ADatabase

BFull screen ad

CBrief bottom message with optional action

DPermission

Explanation: Snackbar.make(coordinator, text, LENGTH).show()

7

MaterialToolbar replaces?

ARetrofit

BFragmentManager

CRoom

DActionBar/Toolbar with Material styling

Explanation: Set as supportActionBar for app bar navigation.

8

Elevation in Material?

AShadow depth indicating hierarchy

BGPS altitude

CAPK version

DSQL index

Explanation: Higher elevation components appear above others.

9

colorPrimary in theme?

AText color only

BBrand primary color for app bar etc.

CError color

DGradle color

Explanation: Theme attributes reference @color roles.

10

BottomNavigationView?

AKeyboard

BSQL bottom table

CBottom tab navigation for top-level destinations

DLogcat filter

Explanation: 3-5 primary destinations with icons and labels.

10 Advanced Material Design MCQs

11

Material You dynamic color?

AFixed purple only

BWallpaper-derived color scheme Android 12+

CiOS feature

DDeprecated

Explanation: DynamicColors.applyToActivitiesIfAvailable for personalized palette.

12

ShapeAppearanceModel?

AVector path only

BSQL shape

CCustomize corner radius and cuts on Material widgets

DLint

Explanation: Rounded corners family small/medium/large.

13

MotionMaterial shared axis?

AGradle

BGPS motion

CSensor only

DFragment transition patterns in Material motion

Explanation: MaterialContainerTransform for hero transitions.

14

MaterialCardView?

ACard with stroke, elevation, checked state

BListView

CService card

DADB card

Explanation: Rounded card container for list items and panels.

15

Theme overlay?

AReplace entire app theme always

BApply partial theme to subtree of views

CNight only ban

DManifest

Explanation: ThemeOverlay.Material3.Button for localized styling.

16

Ripple drawable in Material?

AWater effect only API

BNetwork ripple

CTouch feedback animation on clickable views

DProGuard

Explanation: ?attr/selectableItemBackgroundBorderless for ripples.

17

Material3 color roles?

ARandom

BRGB only

COne color

Dprimary, secondary, tertiary, surface, error containers

Explanation: Semantic roles ensure accessible contrast pairs.

18

Catalog Material Components?

Amaterial-components-android.github.io catalog app

BPlay Store only paid

CDoes not exist

DFirebase

Explanation: Reference app showing all component variants.

19

Compose Material3?

AXML only forever

Bandroidx.compose.material3 MaterialTheme

CDeprecated

DSeparate from Material

Explanation: MaterialTheme(colorScheme, typography) in Compose.

20

Accessibility in Material?

AIgnored

BOptional always

CMin 48dp touch targets, contrast ratios, content descriptions

DAPI 34 only

Explanation: Material guidelines include accessible color and touch sizing.

Click an option to select, then check answers.

Material Design Interview Q&A

15 topic-focused questions for interviews and revision.

1What is Material Design?easy

Answer: Google's design language — components, motion, theming for consistent beautiful apps.

2Add Material dependency.easy

Answer: implementation("com.google.android.material:material:1.x.x") and Theme.Material3 parent.

3Setup MaterialToolbar.easy

Answer: XML MaterialToolbar; setSupportActionBar(toolbar); menu inflate.

4TextInputLayout example.easy

Answer: TextInputLayout > TextInputEditText with hint, error, counter attributes.

5FAB with Scaffold.medium

Answer: FloatingActionButton onClick in Scaffold fab parameter — Compose or CoordinatorLayout.

6Material 3 vs Material 2.medium

Answer: M3: dynamic color, updated components, tonal palettes, expressive shapes.

7Apply dynamic color.medium

Answer: DynamicColors.applyToActivitiesIfAvailable(this) in Activity onCreate.

8Bottom nav with Navigation.medium

Answer: BottomNavigationView menu IDs match nav graph destinations; setupWithNavController.

9Material color roles explained.medium

Answer: primary brand actions; surface backgrounds; onPrimary text on primary; error for mistakes.

10Snackbar vs Toast Material.easy

Answer: Snackbar Material-styled, action button, Coordinator behavior.

11Card elevation and stroke.easy

Answer: app:cardElevation, app:strokeColor, app:strokeWidth on MaterialCardView.

12Dark theme Material.medium

Answer: values-night/themes.xml override color roles; DayNight theme parent.

13Motion transitions.hard

Answer: MaterialSharedAxis, MaterialFade for fragment transitions in Navigation.

14Compose Material3 theme.medium

Answer: MaterialTheme { Surface { AppContent() } } with light/dark colorScheme.

15Material design review checklist.hard

Answer: Consistent typography scale, 8dp grid, accessible contrast, meaningful motion, proper hierarchy.

Material Design

Table of Contents