Coding Bihar

Android Jetpack Compose Tutorial

Android Jetpack Compose Tutorial - Coding Bihar
Android Jetpack Compose Tutorial

What is Android Studio?

Android Studio is the IDE(integrated development environment) specially to develop Android App. It was launched in May 2013. That time it supported Java language but in 2019 Kotlin was introduced and replaced Java. In 2024 Android Studio Jellyfish is launched wit great features like AI.

Know more about Android Studio click on Latest Android Studio Release.
Download the latest version of Android Studio click on Download Android Studio.

Latest Android Studio Release


What is Jetpack Compose?

Jetpack compose is a latest toolkit to build UI of an Android App that support Kotlin language. It was announced in May 2019 at the Google I/O conference and released in October 2019. Google Play Store itself uses it. We use functions annotated  with the @Composable annotation to define a user interface. Jetpack Compose support Material Design.

What is Material Design?

Material Design is a open source design tool developed by Google in 2014. In 2018. It is an open source design system to build and design beautiful Android Apps.
Material Design 2 was launched with the updated guidelines rounded corners, colorful icons, and bottom navigation bars.
Material Design 3 also known as "Material You" is launched in 2021 with custom UI themes to be generated from the user's wallpaper.

Basic of jetpack compose and Android Studio

Here is the list that you should learn to build an android app using jetpack compose if you are a beginner 

Basic Of Jetpack Compose

  1. Download and install Android Studio on windows devices
  2. Column Row and List
  3. Splash Screen in jetpack compose 
  4. App Icon or launcher icon of an app
  5. Top App bar in jetpack compose 
  6. Bottom App bar in jetpack compose 
  7. Text 
  8. How to add Image in an android app 
  9. Button in Jetpack Compose
  10. Segmented Button in jetpack compose
  11. Radio Button in jetpack compose 
  12. Create a Menu using jetpack compose 
  13. FAB (Floating Action Button)
  14. Extended FAB
  15. Bottom sheets in jetpack compose 
  16. Carousel
  17. Cards in jetpack compose 
  18. Dialogs in jetpack compose 
  19. Horizontal Divider
  20. Side sheets
  21. Navigation bar
  22. Navigation Drawer 
  23. Navigation rail
  24. Search Tabs
  25. Check box
  26. Chips
  27. Sliders
  28. Switch
  29. Date pickers
  30. Time pickers
  31. Text fields
  32. Snack bar
  33. Tooltips
  34. Progress indicators
  35. Badges
  36. Animation in Jetpack Compose

Some small project to learn basic of jetpack compose 

1. Simple Counter App
Features: A button to increment a counter, displaying the count value.
Learning Goals: Basic composable functions, state management.
Components: Text, Button, remember { mutableStateOf(0) }.

2. To-Do List
Features: Add, display, and delete tasks.
Learning Goals: List handling, state management, input fields.
Components: LazyColumn, TextField, Button.

3. Color Picker
Features: Choose a color from a palette and apply it to a component.
Learning Goals: UI interactions, dynamic UI updates.
Components: Color, Box, Button.

4. Basic Calculator
Features: Perform basic arithmetic operations.
Learning Goals: Layouts, state management, text input.
Components: Text, Button, TextField, Row, Column.

5. Weather App
Features: Display current weather based on a static dataset.
Learning Goals: Working with data models, dynamic UI updates.
Components: Card, Text, Image, Column.

6. Login Screen
Features: It contains two textfields for email and password input.
Learning Goals: Form handling, input validation.
Components: TextField, Button, Column.

7. Stopwatch
Features: Start, stop, and reset timer.
Learning Goals: Timers, state management.
Components: Text, Button, LaunchedEffect.

8. Recipe List
Features: Display a list of recipes with images and descriptions.
Learning Goals: List handling, images, complex layouts.
Components: LazyColumn, Card, Image, Text.

9. Profile Screen
Features: Display user information with an editable profile picture.
Learning Goals: Images, layout management, user interactions.
Components: Image, Text, Button, Row.

10. Music Player UI
Features: Display controls for play, pause, and skip.
Learning Goals: Handling media controls, UI state.
Components: Button, Text, Row.

11. Fitness Tracker
Purpose: Learn how to use sensor data reading and interactive charts.
Features: Track steps, distance, and calories burned. Visualize data in charts.
Advanced: Integrate Google Fit or Health API for broader data access.

12. Chat Application
Purpose: Work with real-time data and interactive UI.
Features: Send and receive messages in real-time. Use LazyColumn for chat bubbles.
Advanced: Implement push notifications for new messages.

13. Image Gallery
Features: Display a grid of images.
Learning Goals: Grid layouts, image handling.
Components: LazyVerticalGrid, Image, Card.

14. Unit Converter

Features: Convert values between different units (e.g., meters to feet).
Learning Goals: Input handling, basic calculations.
Components: TextField, Button, Column.

15. BMI Calculator

Features: Calculate Body Mass Index (BMI) from height and weight.
Learning Goals: Form handling, input validation, basic calculations.
Components: TextField, Button, Text.

16. Digital Clock
Features: Display current time in digital format.
Learning Goals: Timers, dynamic UI updates.
Components: Text, LaunchedEffect.

17. Language Translator (Basic)
Features: Basic translation using predefined phrases.
Learning Goals: Handling text, switching between languages.
Components: TextField, Button, Text, DropdownMenu.

18. Theme Switcher
Features: Switch between light and dark themes.
Learning Goals: Theming, state management.
Components: Switch, Box, Text.

19. Book List
Features: Display a list of books with titles, authors, and ratings.
Learning Goals: List handling, image loading, layout management.
Components: LazyColumn, Card, Text.

20.Temperature Converter

Features: Convert temperatures between Celsius and Fahrenheit.
Learning Goals: Input handling, basic calculations.
Components: TextField, Button, Column.

21. E-Commerce App
Purpose: Build a complex UI with multiple screens and navigation.
Features: Product listing, product details, cart, and checkout process.
Advanced: Integrate payment processing and user authentication.

 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!