Skip to content

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.

Notifications You must be signed in to change notification settings

Dinesh2510/Jetpack-Compose-UI-Components-Material-3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Jetpack-Compose-UI-Components-Material-3

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)

Text Row & Column Box & Button
IMAGE IMAGE IMAGE
Card & Image LazyColumn & LazyRow TextField (EditText)
IMAGE IMAGE IMAGE
Text Marquee Splash Screen AlertDialog
IMAGE IMAGE IMAGE
Scaffold TopAppBar BottomAppBar
IMAGE IMAGE IMAGE
FloatingActionButton Snackbar Switch
IMAGE IMAGE IMAGE
ToolTips ToolTip CheckBox
IMAGE IMAGE IMAGE
Chips Custom Alert Spacers
IMAGE IMAGE IMAGE
Divider Dashed Divider DropDown Menu
IMAGE IMAGE IMAGE
IconButton State Mangement Navigation Drawer
IMAGE IMAGE IMAGE
Custom Lists Grid Lists Bottom Sheets
IMAGE IMAGE IMAGE
Bottom Navigation Bar Bottom Navigation Bar With Badge Animated BottomNavigationBar
IMAGE IMAGE IMAGE
Tabs Layout using TabRow Tabs Layout With Pages Custom Horizontal Pager
IMAGE IMAGE IMAGE
Animation in Jetpack compose DatePicker TimePicker
IMAGE IMAGE IMAGE

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages