GitPedia

Jetpack Compose UI Components Material 3

Material Components Jetpack Compose offers an implementation of Material Design, a comprehensive design system for creating digital interfaces. Material Components such as buttons, cards, and switches, and layouts like Scaffold are available as composable functions.

From Dinesh2510·Updated June 9, 2026·View on GitHub·

Jetpack Compose is a modern Android UI toolkit that simplifies UI development on the Android platform. Here is a list of some commonly used Jetpack Compose UI components as of my last knowledge update in September 2021. Please note that Jetpack Compose evolves rapidly, and there may have been additions or changes since then. The project is written primarily in Kotlin, first published in 2023. Key topics include: jetpack, jetpack-android, jetpack-compose, jetpack-compose-android, jetpack-compose-example.

Jetpack-Compose-UI-Components-Material-3

<img src="https://github.com/Dinesh2510/Jetpack-Compose-UI-Components-Material-3/blob/main/PDF%20Book.png?raw=true" width="750">

Jetpack Compose is a modern Android UI toolkit that simplifies UI development on the Android platform. Here is a list of some commonly used Jetpack Compose UI components as of my last knowledge update in September 2021. Please note that Jetpack Compose evolves rapidly, and there may have been additions or changes since then.

  1. Text: Text composable is used to display text on the screen. It supports various text styling options.

  2. TextField: TextField allows users to input text. It's often used for forms and user input.

  3. Button: Button composable creates interactive buttons with customizable text and click behavior.

  4. Image: Image composable displays images in your app. It supports various image sources and content modes.

  5. Column: Column is a composable that arranges its children vertically, one after another.

  6. Row: Row is a composable that arranges its children horizontally, side by side.

  7. Box: Box is a versatile composable for creating complex layouts and applying transformations.

  8. Spacer: Spacer is a simple composable used for adding space between other composables.

  9. Surface: Surface is used for theming and applying background colors to composables.

  10. Card: Card is a material design component used for displaying content in a contained, elevated box.

  11. AlertDialog: AlertDialog displays a modal dialog with a title, message, and customizable buttons.

  12. Snackbar: Snackbar displays a brief message at the bottom of the screen.

  13. BottomSheet: BottomSheet creates a modal bottom sheet that slides up from the bottom of the screen.

  14. Drawer: Drawer is used to create a navigation drawer that slides in from the edge of the screen.

  15. TopAppBar: TopAppBar is a top app bar for navigation and actions.

  16. FloatingActionButton: FloatingActionButton creates a button for primary actions.

  17. Navigation: Jetpack Compose includes a navigation component for managing navigation between composables.

  18. LazyColumn: LazyColumn is a vertically scrolling list that loads items on-demand, suitable for long lists.

  19. LazyRow: LazyRow is a horizontally scrolling list that loads items on-demand.

  20. TabRow: TabRow is used for creating tabs in your app.

  21. CheckBox: CheckBox creates a checkbox for selecting options.

  22. RadioButton: RadioButton is used to select a single option from a group of options.

  23. Switch: Switch creates an on/off switch.

  24. ProgressIndicator: ProgressIndicator displays various types of progress indicators, such as circular or linear.

  25. Slider: Slider allows users to select a value from a range by sliding a thumb.

  26. DatePicker: DatePicker displays a date picker dialog.

  27. TimePicker: TimePicker displays a time picker dialog.

  28. VideoView: VideoView is used for displaying videos in your app.

  29. WebView: WebView integrates a web browser view into your app.

  30. Canvas: Canvas provides a drawing surface for creating custom graphics.

  31. Gesture Detection: Composables like Modifier.clickable and Modifier.swipeable enable gesture recognition.

  32. Animation: Jetpack Compose provides tools for creating animations, including animate* modifiers.

  33. Accessibility: Composables support accessibility features with Modifier.semantics and related APIs.

Please keep in mind that Jetpack Compose is actively developed, and new features and components may have been added since my last knowledge update. It's essential to refer to the official Android documentation and release notes for the most up-to-date information on Jetpack Compose components and best practices.

Demo (click on Image for more details)

TextRow & ColumnBox & Button
IMAGEIMAGEIMAGE
Card & ImageLazyColumn & LazyRowTextField (EditText)
IMAGEIMAGEIMAGE
Text MarqueeSplash ScreenAlertDialog
IMAGEIMAGEIMAGE
ScaffoldTopAppBarBottomAppBar
IMAGEIMAGEIMAGE
FloatingActionButtonSnackbarSwitch
IMAGEIMAGEIMAGE
ToolTipsToolTipCheckBox
IMAGEIMAGEIMAGE
ChipsCustom AlertSpacers
IMAGEIMAGEIMAGE
DividerDashed DividerDropDown Menu
IMAGEIMAGEIMAGE
IconButtonState MangementNavigation Drawer
IMAGEIMAGEIMAGE
Custom ListsGrid ListsBottom Sheets
IMAGEIMAGEIMAGE
Bottom Navigation BarBottom Navigation Bar With BadgeAnimated BottomNavigationBar
IMAGEIMAGEIMAGE
Tabs Layout using TabRowTabs Layout With PagesCustom Horizontal Pager
IMAGEIMAGEIMAGE
Animation in Jetpack composeDatePickerTimePicker
IMAGEIMAGEIMAGE

Contributors

Showing top 1 contributor by commit count.

View all contributors on GitHub →

This article is auto-generated from Dinesh2510/Jetpack-Compose-UI-Components-Material-3 via the GitHub API.Last fetched: 6/29/2026