Material You Components Cheat Sheet for Android Developers

Material You Components Cheat Sheet for Android Developers

Material You (Material 3) Components List - Jetpack Compose 2025

🧱 Basic UI Components

ComponentDescription
TextDisplays text
IconShows vector icons
ImageDisplays an image
DividerHorizontal line separator
SpacerEmpty space

🧩 Buttons

ComponentDescription
ButtonFilled button
OutlinedButtonButton with border
TextButtonNo border or background
ElevatedButtonButton with elevation
FilledTonalButtonSubtle variant of Button
IconButtonButton for icons
FloatingActionButtonCircular action button
ExtendedFloatingActionButtonFAB with text + icon

🧭 Navigation

ComponentDescription
NavigationBarBottom nav bar
NavigationBarItemItem inside bottom nav bar
NavigationDrawerDrawer layout (not yet official in Compose)
NavigationRailVertical sidebar for large screens
NavigationRailItemItem in rail
TabRow / ScrollableTabRowHorizontal tabs
TabTab item

🗃️ Surfaces & Containers

ComponentDescription
CardSurface with elevation & shape
SurfaceCore container for elevation & theme
ScaffoldLayout structure with top bar, FAB, etc.
Sheet / ModalBottomSheetBottom drawer/modal sheet

🧭 Top App Bars

ComponentDescription
TopAppBarCollapsing/centered or small bars
CenterAlignedTopAppBarCentered title
MediumTopAppBarMedium height
LargeTopAppBarLarge height, collapsible

📋 Lists & Items

ComponentDescription
LazyColumnVertical scrolling list
LazyRowHorizontal scrolling list
LazyGridGrid layout (experimental/Accompanist)
ListItemPre-styled row item

🔲 Input Components

ComponentDescription
TextFieldSingle-line input
OutlinedTextFieldInput with outlined border
CheckboxBoolean toggle
RadioButtonSingle choice among group
SwitchOn/off toggle
SliderContinuous numeric value
RangeSliderSelect numeric range
DropdownMenuPopup list of choices
ExposedDropdownMenuBoxMaterial 3 dropdown input

🧭 Dialogs & Menus

ComponentDescription
AlertDialogConfirmation dialogs
DialogCustom modal
DropdownMenuPopup menu
MenuItemItem in a dropdown menu
BottomSheetScaffoldPersistent bottom sheet

🎨 Theming

Component / APIDescription
MaterialThemeAccess colors, typography, shapes
ColorSchemeM3 color palette
TypographyFont styles
ShapeComponent shapes
dynamicLightColorScheme / dynamicDarkColorSchemeDynamic color


Previous Post Next Post

Contact Form