Welcome to the "Jetpack Compose Essentials in the Wallet Sample Project" guide! This document is crafted for Android developers, especially those transitioning from traditional XML-based UI development to Jetpack Compose. Jetpack Compose is Android's modern toolkit for building native UIs. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.
In this guide, you'll learn about various Jetpack Compose components used in the Wallet Sample project. We will cover each file, highlighting the native Jetpack Compose elements, their purpose, and where they are used in the project. For each element, a link to the official documentation is provided for deeper understanding.
This file defines the UI components for displaying bill options.
- Jetpack Compose Elements:
Column
: Used for vertical layouts. DocumentationText
: Displays text. DocumentationButton
: Represents a clickable button. Documentation
Handles the bottom navigation bar of the app.
- Jetpack Compose Elements:
BottomNavigation
: Container for the bottom navigation bar. DocumentationBottomNavigationItem
: Individual items in the navigation bar. Documentation
Manages the UI for displaying credit card information.
- Jetpack Compose Elements:
Box
: A container for stacking elements. DocumentationImage
: Displays images. Documentation
Defines the header section of the home screen.
- Jetpack Compose Elements:
Row
: Used for horizontal layouts. DocumentationIcon
: Displays icons. Documentation
Creates the UI components for loan card details.
- Jetpack Compose Elements:
Card
: A card layout. DocumentationDivider
: A horizontal dividing line. Documentation
The main UI for the home screen of the app.
- Jetpack Compose Elements:
Scaffold
: A layout structure for Material Design. Documentation
Manages the primary screen of the app.
- Jetpack Compose Elements:
NavHost
: Manages navigation within the app. Documentation
Handles the logic and data for the home screen.
- Note: This file primarily deals with ViewModel logic and may not directly involve Jetpack Compose UI components.
By going through this guide, you should have gained a fundamental understanding of various Jetpack Compose elements and their applications in a real-world project. The Wallet Sample project serves as a practical example to see these components in action. Remember, the official documentation is an invaluable resource for further exploration and deepening your understanding of Jetpack Compose.