Jetpack Compose

Module Practice Tasks & Challenges

Your personalized roadmap from Module 2 to Module 27

Difficulty Legend
🟢 Beginner 🟡 Intermediate 🔴 Advanced

Module 2 Fundamental Concepts

Difficulty: Beginner | Topics: Composable Functions, Resource Access

📖 Key Concepts to Revise

• @Composable annotation and how functions become UI
• Calling composables inside composables (composition tree)
• Previewing UI with @Preview
• Accessing strings, colors, drawables from res/

✅ Practice Tasks
• Create a composable called ProfileCard() that shows a name and job title
• Use @Preview to see it without running the app
• Create a composable GreetingBanner(name: String) and pass your name to it
• Load a string from [Link] and display it in a Text composable
• Load a color from [Link] and apply it as a background

🚀 Mini App Challenge: Personal Bio Card

Build a screen with your name, bio, and a fun fact — all text loaded from [Link]
resources. Use at least 2 custom composable functions.
Module 3 Core Components
Difficulty: Beginner | Topics: Text, TextField, Button, Image, Interactions

📖 Key Concepts to Revise

• Text styling: fontSize, fontWeight, color, textAlign
• OutlinedTextField with value/onValueChange pattern
• Button with onClick and enabled state
• Image with painterResource and contentScale
• State changes on user interaction

✅ Practice Tasks
• Style a Text with custom font size, bold weight, and a color from your theme
• Create a TextField that shows a greeting when you type your name
• Create a Button that toggles between 'ON' and 'OFF' text when clicked
• Display a local image from drawable with rounded corners using clip modifier
• Create a counter: show a number, + and - buttons to change it

🚀 Mini App Challenge: Simple Login Screen

Build a login UI with an email TextField, password TextField, and a Login Button. When
clicked, show a welcome message with the entered name below the button.

Module 4 Layouts
Difficulty: Beginner | Topics: Column, Row, Box, ConstraintLayout, LazyColumn/Row, Modifiers

📖 Key Concepts to Revise

• Column (vertical), Row (horizontal), Box (overlap) arrangements
• Alignment and Arrangement inside layouts
• ConstraintLayout for complex positioning
• LazyColumn/LazyRow for scrollable lists
• Modifier chain: padding, size, background, clip, clickable
✅ Practice Tasks
• Build a Row with an avatar image on the left and name + subtitle on the right
• Use Box to overlay a badge label on top of an image
• Use ConstraintLayout to pin a button to the bottom-center of the screen
• Build a LazyColumn with 20 dummy contact items
• Apply a modifier chain: padding + rounded background + clickable ripple to a card-like
layout

🚀 Mini App Challenge: Contact List App

A scrollable list of contacts using LazyColumn. Each item (Row) shows a circular avatar,
name, and phone number. Tapping an item shows the contact's name in a Toast/Text at the
bottom.

Module 5 Bottom Sheet

Difficulty: Intermediate | Topics: ModalBottomSheet, SheetState

📖 Key Concepts to Revise

• ModalBottomSheetLayout setup
• rememberModalBottomSheetState()
• Show/hide with coroutines ([Link])
• Custom content inside the sheet

✅ Practice Tasks
• Create a button that opens a bottom sheet with 3 menu options
• Add a 'Close' button inside the sheet that dismisses it
• Show different content in the sheet based on which button was pressed

🚀 Mini App Challenge: Options Sheet

A screen with a 'Share' button. Tapping it opens a bottom sheet with 3 share options (Copy,
WhatsApp, Email). Selecting one closes the sheet and shows which option was picked.
Module 6 Cards
Difficulty: Beginner | Topics: Card, ElevatedCard, OutlinedCard

📖 Key Concepts to Revise

• Card vs ElevatedCard vs OutlinedCard
• elevation, shape, colors parameters
• Clickable cards with ripple

✅ Practice Tasks
• Build a product card with image, title, price, and a Buy button inside
• Create a row of 3 clickable ElevatedCards that change color when selected
• Use OutlinedCard with a dashed border for a 'Add New' placeholder card

🚀 Mini App Challenge: Movie Cards Screen

Display 5 movie cards in a LazyColumn. Each card shows a poster image, title, and rating.
Tapping a card highlights it (changes border color).

Module 7 CheckBox
Difficulty: Beginner | Topics: Checkbox, TriStateCheckbox

📖 Key Concepts to Revise

• Checkbox with checked/onCheckedChange
• Linking Checkbox to a state variable
• TriStateCheckbox for select-all pattern

✅ Practice Tasks
• Build a to-do list with 5 checkboxes; completed items show strikethrough text
• Add a 'Select All' TriStateCheckbox at the top that controls all items
• Show a count of checked items below the list
🚀 Mini App Challenge: Grocery Checklist
A grocery list of 8 items with checkboxes. A 'Select All' toggle at top, checked items appear
with strikethrough, and a summary at the bottom shows '3/8 items checked'.

Module 8 Input Chips

Difficulty: Intermediate | Topics: InputChip, FilterChip, AssistChip

📖 Key Concepts to Revise

• InputChip with label and onDismiss to remove
• FilterChip for toggle selection
• AssistChip for action hints
• Dynamic chip lists with state

✅ Practice Tasks
• Build a tag input: type a word, press Enter, it appears as a removable InputChip
• Create 5 FilterChips for categories (Sports, Music, Art, etc.) — allow multi-select
• Show selected filters as a summary text below the chips

🚀 Mini App Challenge: Interest Selector

An onboarding screen where users pick their interests using FilterChips (min 3 categories). A
'Continue' button enables only when at least 2 are selected. Show selected count.

Module 9 Alert Dialog

Difficulty: Beginner | Topics: AlertDialog, Dialog

📖 Key Concepts to Revise

• AlertDialog with title, text, confirmButton, dismissButton
 • Controlling visibility with a Boolean state
• Custom Dialog composable

✅ Practice Tasks
• Show a confirmation dialog before deleting an item
• Build a dialog with a TextField inside to rename something
• Create a dialog that only closes when you type 'CONFIRM' and press OK

🚀 Mini App Challenge: Delete Confirmation Flow

A list of 5 notes. Tapping the delete icon shows an AlertDialog ('Are you sure?'). Confirming
removes the item; cancelling keeps it. List updates in real-time.

Module 10 Floating Action Button

Difficulty: Beginner | Topics: FloatingActionButton, ExtendedFAB

📖 Key Concepts to Revise

• FloatingActionButton with icon and onClick
• ExtendedFloatingActionButton with text + icon
• FAB inside Scaffold (proper placement)

✅ Practice Tasks
• Add a FAB with a + icon that adds a new item to a list
• Use ExtendedFAB that collapses to just an icon when scrolling down
• Place FAB correctly inside Scaffold and connect it to a list

🚀 Mini App Challenge: Note Adder

A simple notes screen. FAB at bottom-right opens a dialog to type a new note. Notes appear
in a LazyColumn above. Each note has a delete button.
Module 11 Menus
Difficulty: Intermediate | Topics: DropdownMenu, DropdownMenuItem, ExposedDropdown

📖 Key Concepts to Revise

• DropdownMenu anchored to a composable
• Opening/closing with expanded state
• ExposedDropdownMenuBox for form-style selectors

✅ Practice Tasks
• Add a 3-dot menu icon that shows Edit, Share, Delete options
• Build a country selector using ExposedDropdownMenuBox
• Change the displayed content based on the selected dropdown option

🚀 Mini App Challenge: Profile Settings Screen

A settings screen with a dropdown to choose your country and another for language.
Selections are saved and displayed as summary text. Include a 3-dot overflow menu with
Logout option.

Module 12 Scaffold
Difficulty: Intermediate | Topics: Scaffold, TopAppBar, BottomBar, FAB, Snackbar

📖 Key Concepts to Revise

• Scaffold as the screen structure skeleton
• topBar, bottomBar, floatingActionButton slots
• SnackbarHost inside Scaffold
• Combining multiple components properly

✅ Practice Tasks
• Build a Scaffold with a TopAppBar showing screen title and a back icon
• Add a BottomBar with 3 icon tabs inside the same Scaffold
 • Trigger a Snackbar message from a FAB click inside Scaffold

🚀 Mini App Challenge: Full Screen Template

A complete Scaffold screen with: TopAppBar (title + menu icon), FAB (adds item to list),
BottomBar (Home, Search, Profile tabs), and a Snackbar that appears when FAB is pressed.

Module 13 Navigation Drawer

Difficulty: Intermediate | Topics: ModalNavigationDrawer, DrawerState

📖 Key Concepts to Revise

• ModalNavigationDrawer with drawerContent
• DrawerState open/close with coroutines
• NavigationDrawerItem for menu items
• Hamburger icon toggling the drawer

✅ Practice Tasks
• Build a drawer with 4 navigation items (Home, Profile, Settings, Logout)
• Highlight the currently selected drawer item
• Close drawer automatically when an item is tapped

🚀 Mini App Challenge: News App Shell

A news app layout with a Navigation Drawer. Drawer has sections: Top Stories, Sports, Tech,
Entertainment. Selecting a section changes the main content area heading.

Module 14 Circular Progress Indicator

Difficulty: Beginner | Topics: CircularProgressIndicator, LinearProgressIndicator
📖 Key Concepts to Revise
• Indeterminate vs determinate progress
• Controlling progress value with state
• Showing/hiding loading indicators

✅ Practice Tasks
• Show a loading spinner for 3 seconds, then display content
• Build a file upload simulation with a LinearProgressIndicator filling up
• Create a circular timer showing countdown progress

🚀 Mini App Challenge: Fake Loader Screen

A screen that simulates loading data. Shows CircularProgressIndicator for 3 seconds, then
reveals a list of 10 items. Add a Retry button that resets the loading state.

Module 15 Pull to Refresh

Difficulty: Intermediate | Topics: PullToRefreshBox, rememberPullToRefreshState

📖 Key Concepts to Revise

• PullToRefreshBox wrapping a list
• isRefreshing state and onRefresh callback
• Simulating data reload with delay

✅ Practice Tasks
• Wrap a LazyColumn in PullToRefreshBox and simulate a refresh with 2s delay
• Update the list with new random items after refresh
• Show a timestamp of last refresh below the app bar

🚀 Mini App Challenge: Live Feed Screen

A feed of posts that refreshes when pulled down. Each refresh 'loads' 5 new dummy posts
(use random numbers/text). Show 'Last updated: X seconds ago' text.
Module 16 Search Bar
Difficulty: Intermediate | Topics: SearchBar, DockedSearchBar

📖 Key Concepts to Revise

• SearchBar with query state and onSearch
• Active/inactive search state
• Filtering a list based on query
• Search suggestions

✅ Practice Tasks
• Build a SearchBar that filters a list of 20 country names in real-time
• Show 'No results found' when nothing matches
• Add 3 recent search suggestions that appear when the bar is focused

🚀 Mini App Challenge: App Search Screen

A settings-style search screen. SearchBar at top filters a list of 15 settings options as you type.
Tapping a result shows a Snackbar with the selected setting name.

Module 17 Segmented Button

Difficulty: Beginner | Topics: SingleChoiceSegmentedButtonRow,
MultiChoiceSegmentedButtonRow

📖 Key Concepts to Revise

• SingleChoiceSegmentedButtonRow for exclusive selection
• MultiChoiceSegmentedButtonRow for multiple picks
• SegmentedButton with icon and label

✅ Practice Tasks
 • Build a 3-option single-choice segment: Day / Week / Month
• Create a multi-choice segment for text formatting: Bold, Italic, Underline
• Show different content based on which segment is selected

🚀 Mini App Challenge: Stats View Toggle

A stats screen where a Segmented Button switches between Daily, Weekly, Monthly views.
Each view shows different dummy numbers. Multi-choice filter chips below let you toggle data
types.

Module 18 Slider
Difficulty: Beginner | Topics: Slider, RangeSlider

📖 Key Concepts to Revise

• Slider with value/onValueChange
• valueRange and steps parameters
• RangeSlider for min-max selection

✅ Practice Tasks
• Build a volume slider (0–100) that shows the current value
• Create a font size preview: slider changes Text size in real-time
• Build a price range filter with RangeSlider ($0–$500)

🚀 Mini App Challenge: Settings Panel

A settings screen with: brightness slider (0–100%), a volume slider with icon, and a price
range slider for a shop filter. All values display live as you drag.

Module 19 Snackbar
Difficulty: Beginner | Topics: Snackbar, SnackbarHost, SnackbarDuration
📖 Key Concepts to Revise
• SnackbarHostState and showSnackbar()
• Snackbar with action button
• Duration: Short, Long, Indefinite
• Integrating inside Scaffold

✅ Practice Tasks
• Show a Snackbar when a button is tapped with message 'Item saved!'
• Add an UNDO action to the Snackbar that reverts a deletion
• Show an indefinite Snackbar with a 'Retry' button for a failed action

🚀 Mini App Challenge: Undo Delete List

A list of 8 items. Swiping (or tapping delete) removes an item and shows a Snackbar with
'UNDO'. Pressing UNDO restores the item back to the list.

Module 20 Badges
Difficulty: Beginner | Topics: BadgedBox, Badge

📖 Key Concepts to Revise

• BadgedBox wrapping an icon
• Showing count badges (numbers)
• Dot badge for unread indicators

✅ Practice Tasks
• Add a notification badge with a count on a bell icon
• Show a dot badge on a profile icon when there's an update
• Clear the badge count when the icon is tapped

🚀 Mini App Challenge: Notification Bar

A top bar with 3 icons (Notifications, Messages, Cart) each with a badge showing counts.
Tapping each icon decrements its count to 0 and shows a Snackbar.

Module 21 Switch
Difficulty: Beginner | Topics: Switch, state toggling

📖 Key Concepts to Revise

• Switch with checked/onCheckedChange
• Enabling/disabling features with switch
• Styling switch with thumbContent

✅ Practice Tasks
• Build a settings toggle for Dark Mode that changes the background color
• Create 4 switches for notification preferences; disabled ones are grayed out
• Show a summary text that updates based on which switches are on

🚀 Mini App Challenge: App Settings Screen

A settings page with 5 toggle switches: Dark Mode, Notifications, Auto-save, Location,
Analytics. Dark Mode switch actually changes the screen background color.

Module 22 Date Picker

Difficulty: Intermediate | Topics: DatePicker, DatePickerDialog, DatePickerState

📖 Key Concepts to Revise

• rememberDatePickerState()
• DatePickerDialog with confirm/dismiss
• Converting millis to readable date
• Restricting selectable date range
✅ Practice Tasks
• Build a 'Pick a Date' button that opens DatePickerDialog and shows selected date
• Restrict selectable dates to the future only (for a booking app)
• Display the selected date in 'Mon, 4 Mar 2026' format

🚀 Mini App Challenge: Event Planner Card

A form to create an event with a title TextField and a date picker. Once both are filled, a
preview card appears below showing the event name and formatted date.

Module 23 Time Picker

Difficulty: Intermediate | Topics: TimePicker, TimePickerDialog, TimeInput

📖 Key Concepts to Revise

• rememberTimePickerState()
• TimePicker (clock) vs TimeInput (text input)
• Building a custom TimePickerDialog
• Formatting hours/minutes with AM/PM

✅ Practice Tasks
• Create a 'Set Alarm' button that opens a TimePicker and shows the set time
• Show TimeInput mode and let users switch between dial and input
• Display time in 12-hour format with AM/PM

🚀 Mini App Challenge: Alarm Setter Screen

A screen with 3 alarm slots. Each has a TimePicker button. Once set, the time shows next to a
toggle switch to enable/disable it. Looks like a real alarm app.

Module 24 Bottom Bar

Difficulty: Intermediate | Topics: NavigationBar, NavigationBarItem

📖 Key Concepts to Revise

• NavigationBar with NavigationBarItem
• Selected state tracking
• Icons with labels
• Connecting bottom bar to screens

✅ Practice Tasks
• Build a 4-tab bottom navigation: Home, Search, Favorites, Profile
• Highlight the selected tab and show its screen name in the body
• Add badge counts on the Notifications tab

🚀 Mini App Challenge: Social App Shell

A 4-tab app shell (Feed, Explore, Notifications, Profile). Each tab shows a different
background color and screen title. Notifications tab has a badge showing '5'.

Module 25 Top App Bar

Difficulty: Beginner | Topics: TopAppBar, CenterAlignedTopAppBar, LargeTopAppBar

📖 Key Concepts to Revise

• TopAppBar with title, navigationIcon, actions
• CenterAlignedTopAppBar for centered title
• LargeTopAppBar with scroll behavior (collapse)
• Colors and styling

✅ Practice Tasks
• Build a CenterAlignedTopAppBar with a title and a search icon action
• Add a LargeTopAppBar that collapses when scrolling down a list
• Put a back arrow as navigationIcon and show a Snackbar when tapped
🚀 Mini App Challenge: Article Reader Screen
A long article screen with LargeTopAppBar (showing article title). The bar collapses as you
scroll. Actions: bookmark icon (toggles filled/outlined) and share icon (shows Snackbar).

Module 26 Navigation
Difficulty: Advanced | Topics: NavHost, NavController, Routes, Arguments

📖 Key Concepts to Revise

• NavController and rememberNavController()
• NavHost with composable() routes
• navigate() and popBackStack()
• Passing arguments between screens
• Back stack management

✅ Practice Tasks
• Build a 3-screen app: Home → Detail → Settings with back navigation
• Pass a user name from Home screen to the Detail screen via route argument
• Navigate to a screen and clear the back stack (like after login)

🚀 Mini App Challenge: Mini Recipe App

Home screen shows a list of 5 recipes (LazyColumn). Tapping one navigates to a Recipe
Detail screen showing name, ingredients, and steps. A back button returns to the list. Pass
recipe ID as nav argument.

Module 27 Animation
Difficulty: Advanced | Topics: AnimatedVisibility, animateFloatAsState, Crossfade,
AnimatedContent
 📖 Key Concepts to Revise
• AnimatedVisibility with enter/exit transitions
• animateFloatAsState / animateDpAsState
• Crossfade between two composables
• AnimatedContent for state-driven changes
• rememberInfiniteTransition for looping

✅ Practice Tasks
• Use AnimatedVisibility to slide in a panel when a button is clicked
• Animate a button's size with animateDpAsState on press
• Use Crossfade to switch between two icons smoothly
• Build a pulsing 'Live' indicator using rememberInfiniteTransition

🚀 Mini App Challenge: Animated Onboarding Screen

A 3-step onboarding flow. Each step fades in using AnimatedContent. Progress dots animate
between steps. A 'Next' button slides out the current step and slides in the next. Final step has
a bouncing 'Get Started' button.

🏆 Grand Final Project

TaskFlow — A Full-Featured To-Do App
Build a complete productivity app combining everything you learned:
• Scaffold with TopAppBar, BottomBar (Home, Search, Profile tabs)
• FAB to add new tasks → opens a ModalBottomSheet with a form
• Tasks displayed in LazyColumn with Checkbox to mark complete
• AlertDialog to confirm task deletion with Snackbar UNDO
• Date & Time Picker to set task due date and reminder time
• SearchBar to filter tasks, FilterChips for categories
• Navigation to a Task Detail screen passing task ID
• Animated transitions between screens and AnimatedVisibility for filters
• Switch in Profile tab for Dark Mode toggle
• Circular Progress showing % of completed tasks