Jetpack Compose Exercises

A group of exercise projects implementing different areas of native Android development with Kotlin and Jetpack Compose. Can help anyone who is just starting to learn Android development with Kotlin.

#1. Basic Navigation

• Simple navigation between two screens with passing values using Jetpack Compose.
• Allow entering only letters on the TextField.

#2. Viewmodel Sharing

• Sharing a View Model between composables inside Jetpack Compose Navigation.
• Providing a numeric keyboard for number input.
• Showing number format conditionally based on the floating point digits (0.0 or 0).

#3. Lazy Column Scrolling

• Display a simple scrollable list using Lazy Column.
• Loading images from internet using the Coil library.
• Applying text and background color.

#4. LazyColumn Sync

• Sync list on a LazyColumn after adding and deleting items.

• Using TopAppBar, Button with an icon, built-in icons.

• Filling up the whole remaining space by an UI element.

• Hiding keyboard on enter press and on button click.

• Case insensitive check for a word on a list.

• Make a word sentence case.

• Allow entering only letters on the TextField.

• TopAppBar icon change on click (ascending/descending order).

• Delete items from LazyColumn on click.

• Show leading icon on TextField.

• Show trailing icon on TextField based on error.

• Show separate error message with TextField based on error.

• FIXME: Strange sorting bug. Keeps the new words separate while sorting.

#5. State Hoisting

• Implementing state hoisting to manage a list of people and their age.
• Row click handling by removing the item from a LazyColumn.
• Input validation (name & age).
• Replace multiple spaces from an input.
• Capitalize first character of each word in a sentence.
• Hiding keyboard on enter press and on button click.
• Generating unique ID as model field.

#6. LazyVerticalGrid

• Making a grid layout using the experimental LazyVerticalGrid composable.
• Column vertical scroll.
• Using Scaffold with TopAppBar and NavHost.
• Navigation back button on TopAppBar.
• Change TopAppBar title dynamically in different screens (using a shared view model).

#7. Image Sources

• Show user-selected image from the gallery.

• Show user-entered image from a web URL.

• TODO: Verify image exists on provided URL before showing.

• TODO: Show the previous image in case of an non-existing image on the URL.

• TODO: Display image from the camera when the Camera API from Compose arrives.

#8. Room Basics

• Add, show, edit, and delete data from a Room database using Jetpack Compose.
• TextField background color change.
• Keep only one edit form open at a time.

#9. Room CRUD

• Scaffold with TopAppBar and FAB.
• Set title dynamically from different screens by raising event.
• Turn on/off FAB in different screens by raising event.
• Show alert dialog to confirm an action.

#10. Retrofit Basics

• Call an external API using the Retrofit library and get the returned JSON.
• Handle loading/error/done status of the API call.
• Use query to filter the results of the API call.
• Convert JSON to Kotlin object using the Moshi library.
• Display images from remote URLs using the Coil library.
• Replace part of a string with a new value.
• Custom property on a data class.
• Currency format from number.
• Get color from hex code.
• Dropdown menu on TopAppBar (options menu).

#11. Offline Caching

This project demonstrates the offline caching of REST API data in the local database. It fetches earthquake data from the United States Geological Survey department's server using REST API, stores it on the local database, and displays it.

Data is filtered to show only the earthquakes of 4 magnitudes or higher, with a 400 km radius from the Bangladeshi capital Dhaka, in the past 12 months.

Every time the app is opened, it checks for any new earthquake data on the server that is more recent than locally stored. If any new data is found, it fetches all the data, deletes everything from the database, and stores the latest data for displaying. Also sync data once in a day by running a background work using WorkManager.

Takeaways

• Fetch data from API using the Retrofit library.
• Convert JSON data to Kotlin objects using the Moshi library.
• Cache all data from API to local database and display from there.
• Sync data once in a day by running background work using WorkManager.
• Date/Time formatting from Unix Epoch (Util.kt).
• Support java.time API (26+) in legacy projects (21).
• Splitting string to a list of different parts (Util.kt).
• Generating background color conditionally (Util.kt).
• Subtract 1 year from today.
• Window background (avoid showing the white screen flickering during app loading).
• Splash screen.

#12. Ad Network

Display AdMob ads on Android apps using Jetpack Compose.

Takeaways

• Show AdMob traditional banner, adaptive banner, and inline adaptive banner.
• Show AdMob interstitial ad on button click from a composable.
• Extension function to get the current activity from any composable.

#13. Notifications

Show different types of notifications using Jetpack Compose.