https://github.com/dinesh2510/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.
https://github.com/dinesh2510/jetpack-compose-ui-components-material-3
jetpack jetpack-android jetpack-compose jetpack-compose-android jetpack-compose-example jetpack-compose-tutorial jetpack-compose-tutorials jetpack-compose-ui jetpack-compose-ui-layout jetpack-compose-ui-material-3 jetpack-lifecycle-components jetpack-navigation jetpack-pagination jetpackcompose jetpackcomposecourse materialcomponents
Last synced: 6 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/dinesh2510/jetpack-compose-ui-components-material-3
- Owner: Dinesh2510
- Created: 2023-08-29T16:58:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-28T06:33:11.000Z (10 months ago)
- Last Synced: 2024-07-28T07:37:12.117Z (10 months ago)
- Topics: jetpack, jetpack-android, jetpack-compose, jetpack-compose-android, jetpack-compose-example, jetpack-compose-tutorial, jetpack-compose-tutorials, jetpack-compose-ui, jetpack-compose-ui-layout, jetpack-compose-ui-material-3, jetpack-lifecycle-components, jetpack-navigation, jetpack-pagination, jetpackcompose, jetpackcomposecourse, materialcomponents
- Language: Kotlin
- Homepage: http://pixeldev.in/
- Size: 3.59 MB
- Stars: 28
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Jetpack-Compose-UI-Components-Material-3
.png?raw=true)
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 |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=xlNVM_8UGmk) | [](https://www.youtube.com/watch?v=urSIT2ik3NU) | [](https://www.youtube.com/watch?v=s3zRbq_ggRI)|
| Card & Image | LazyColumn & LazyRow | TextField (EditText) |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=_kyX8foNDfI) | [](https://www.youtube.com/watch?v=85vXFRqdMtU) |[](https://www.youtube.com/watch?v=8jpIDyblF0U) |
| Text Marquee | Splash Screen | AlertDialog |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=2SCYFycb_jY) | [](https://www.youtube.com/watch?v=_nle7vPnI1Q) |[](https://www.youtube.com/watch?v=3WmAj8r6iJo) |
| Scaffold | TopAppBar | BottomAppBar |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=cVtzO2CAGgo) | [](https://www.youtube.com/watch?v=Q2gF8yYR2LQ) |[](https://www.youtube.com/watch?v=Ul3k5doYzfk) |
| FloatingActionButton | Snackbar | Switch |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=DBTxo2D6pT0) | [](https://www.youtube.com/watch?v=F4XY9S2dfaA) |[](https://www.youtube.com/watch?v=KRmOpXayfXY) |
| ToolTips | ToolTip | CheckBox |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=kmAxy1SOJbA) | [](https://www.youtube.com/watch?v=0nnAx0g-6oc) |[](https://www.youtube.com/watch?v=HDewISB_1k0)|
| Chips | Custom Alert | Spacers |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=qDwxuVZ5e-A) | [](https://www.youtube.com/watch?v=zzTp6zmOkTU) |[](https://www.youtube.com/watch?v=9VKHJLf0wgQ)|
| Divider | Dashed Divider | DropDown Menu |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=EZhDu8kYEJg) | [](https://www.youtube.com/watch?v=z7ooiCMtPLc) |[](https://www.youtube.com/watch?v=1ABTACV_dqA)|
| IconButton | State Mangement | Navigation Drawer |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=mRyb9GDUE3g) | [](https://www.youtube.com/watch?v=v56BmC-PVSQ) |[](https://www.youtube.com/watch?v=-CIbqSab1yY)|
| Custom Lists | Grid Lists | Bottom Sheets |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=_BNtw6QLoLg) | [](https://www.youtube.com/watch?v=z3BTJGL8kU8) |[](https://www.youtube.com/watch?v=ME4MRY0grhw)|
| Bottom Navigation Bar | Bottom Navigation Bar With Badge | Animated BottomNavigationBar |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=/-4kWwTDOyTo) | [](https://www.youtube.com/watch?v=GXyXDYtD8Yw) |[](https://www.youtube.com/watch?v=XqCCEZeYq-Y)|
| Tabs Layout using TabRow | Tabs Layout With Pages | Custom Horizontal Pager |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=/9bPU8di_3bU) | [](https://www.youtube.com/watch?v=7CAQtvXAnmo) |[](https://www.youtube.com/watch?v=JzFOLrVAuqk)|
| Animation in Jetpack compose | DatePicker | TimePicker |
| ------------- | ------------- | ------------- |
| [](https://www.youtube.com/watch?v=/JwvXht9Cb3w) | [](https://www.youtube.com/watch?v=fWUqQjj34vY) |[](https://www.youtube.com/watch?v=Ndp6RyDwPYs)|