Explore the various UI components available in Jetpack Compose and how to use them in your applications.
| App Bar | Bottom Navigation | Button |
|---|---|---|
 |
 |
 |
App bar provides a consistent layout for the top of the screen, typically used for branding, navigation, and actions. Find examples of how app bar can be implemented with different styles.
- Simple App Bar with no actions
- App Bar with Left icon action
- App Bar with Right icon action
- App Bar with Right amd Left icon action
- App Bar with multiple Right icon action
- Custom App Bar with Left icon action and Title text in Center
A navigation component placed at the bottom of the screen, allowing users to quickly switch between primary destinations in an app.
| Checkbox | Dialog | Dropdown |
|---|---|---|
 |
 |
 |
A component that allows users to make a binary choice, typically used in forms and lists.
This example demonstrates implementing two types of dialogs in Jetpack Compose: a standard AlertDialog and a customizable dialog. The DialogActivity manages dialog states, such as whether the dialog can be dismissed with a back press or outside click. The UI provides options to open these dialogs and showcases how to customize them, including setting titles, content, and buttons.
This code demonstrates various dropdown menu implementations in Jetpack Compose. It includes simple dropdowns, dropdowns with custom background colors, dropdowns with icons, and disabled dropdowns. The DropDownMenuActivity manages the state of these dropdowns and displays them with different configurations, offering examples of how to customize their appearance and behavior.
| FAB | Modal Drawer | Bottom Drawer |
|---|---|---|
 |
 |
 |
The code showcases different styles of Floating Action Buttons (FABs) in Jetpack Compose, including simple, custom-colored, square-shaped, and extended FABs with or without icons. It uses a Scaffold layout in FloatingActionButtonActivity to manage these FABs and demonstrates customization and user interaction handling in the FabButtons composable.
- Simple FAB
- FAB custom color
- Square FAB
- Simple FAB with custom content (similar of Exntended FAB)
- Extentded FAB
- Extentded FAB wihout icon
- Extentded FAB wihout square shape
A drawer that slides in from the side and overlays the content, typically used for navigation.
A drawer that slides up from the bottom of the screen, providing additional content or actions.
| Radio Button | Slider | Text |
|---|---|---|
 |
 |
 |
- Simple Radio Button with Label
- Disabled Radio Button
- Disabled selected Radio Button
- Custom selected color Radio Button
- Custom unselected color Radio Button
The SliderActivity demonstrates various types of sliders in Jetpack Compose, including continuous, discrete, and range sliders with custom styling. It uses remember and mutableStateOf to manage slider states within a themed UI.
The Text Styles showcases different text styles in Jetpack Compose, featuring various font sizes, weights, and colors. Dive into expressive typography with headers, captions, and body text, all styled dynamically to enhance readability and visual appeal.
| Textfield | Theme | ZoomView |
|---|---|---|
 |
 |
 |
A text field that enables users to input and edit text, offering a versatile component for various forms and data entry tasks.
- Basic Textfield which does not contain placeholder or any decorations
- Simple textfield With label and placeholder
- Textfield with different coloured text input
- Simple Outlined textfield without placeholder
- Phone number textfield with max length as 10
- Outlined Password textfield Without label
ThemeActivity allows users to select a color theme for the screen. It features a grid of color options that update the app's theme on selection, providing a visual preview with a checkmark to indicate the current selection.
ZoomViewActivity provides an interactive zoomable image view. Users can pinch to zoom and drag to pan across the image, with changes in scale and position reflected in real-time.
| MagnifierView | TabBar | DatePicker |
|---|---|---|
 |
 |
 |
The MagnifierViewActivity demonstrates an image with a magnifier effect that adjusts based on user touch. It uses pointerInteropFilter to update the magnifier's size and position, with a zoom factor of 2x. The magnifier follows the user's touch, enlarging the image in the touched area and disappearing when the touch is lifted.
This code demonstrates various implementations of tab bars using Jetpack Compose, including simple text tabs, icon tabs with indicators, and more complex layouts with text, icons, indicators, and dividers. It includes both fixed and scrollable tab bars with customizable appearance and behavior.
A component that lets users select a date from a calendar view.
| TimePicker | ImagePicker | ParallaxEffect |
|---|---|---|
 |
 |
 |
A component that allows users to select a specific time.
A component for selecting images from the device's gallery or camera.
A visual effect where background content moves at a different speed than foreground content, creating a sense of depth.
| Compose views in Xml | XML views in Compose |
|---|---|
 |
 |
We might need to migrate from XML to Jetpack Compose, but doing so all at once may not be feasible. We can achieve this gradually by embedding Compose components within XML layouts and XML views within Compose, allowing for a seamless transition.
Similar to Compose in XML we can use XML views in Compose.
Checkout some other cool stuff for components of Jetpack Compose.