Module 2 of 3 in Android User Interface Development

Create Composables with Jetpack Compose

Sep 10 2024, Kotlin 1.9, Android 14, Android Studio Jellyfish | 2023.3.1
Leave a rating/review

In this module, you will learn about Jetpack Compose from the ground up and how you can use it to create UI in Android. It will introduce you to the idea of composables used in Jetpack Compose. You will learn how to create composables using existing composables. And later on, you will also learn modify them to change their layout, appearance, and interactivity. Finally, you will tie your learnings together to create truly custom theme for your app using composables and Material Design 3. By Prateek Prasad.

Start learning for free
 
EXPERIENCE
Beginner level
EST TIME TO COMPLETE
1 hr, 16 mins
CONTENT
6 lessons
Share
Save for later

Module outcomes

  • Able to create a Jetpack Compose user interface
  • Understand the layout groups and compose controls
  • Able to style elements
  • Understand the purpose of Material Design with Jetpack Compose

Covered concepts

  • Able to define custom composables
  • Understand how previewing works in Android Studio
  • Knowledge of all the various Jetpack Compose controls
  • Able to use composables to build a user interface
  • Able to style individual composable

Module content

1
Define a Composable Lesson (10 mins)

Dive into the fundamentals of building UI components in Jetpack Compose by creating your first composable. Learn the syntax of defining a composable, the different components of a composable function and how to use the preview feature to preview your work right inside Android Studio

 Start
Introduction • Start Reading · 4 mins
Instruction Reading · 3 mins
Demo Video · 3 mins
Conclusion Reading · 1 min
Quiz: Define a Composable 5 questions
2
Modify Composables Lesson (12 mins)

Learn about modifiers in compose and how you can use them to alter the look and behaviour of your composables. Learn about modifier chaining and how it can help you truly customize your components.

 Start
Introduction • Start Reading · 1 min
Instruction Reading · 8 mins
Demo Video · 3 mins
Conclusion Reading · 1 min
Quiz: Modify Composables 6 questions
3
Building Layout with Composables Lesson (12 mins)

Learn how to structure and arrange UI elements using layout composables. Learn the compose equivalents of common viewgroups like FrameLayout, Linear Layout etc and learn about the different properties available with these composables to achieve the desired result.

 Start
Introduction • Start Reading · 1 min
Instruction Reading · 7 mins
Demo Video · 4 mins
Conclusion Reading · 1 min
Quiz: Building Layouts with Compose 6 questions
4
Use Text Lesson (14 mins)

Learn how to style and manipulate text composables in your Android project using the built-in properties, modifiers, and different customization options.

 Start
Introduction • Start Reading · 1 min
Exploring BasicText and Text in Compose Reading · 11 mins
Using Text Composable in App Video · 2 mins
Conclusion Reading · 1 min
Quiz: Use Text 4 questions
5
Leverage Components Lesson (14 mins)

Composability is the core premise jetpack compose is built on top of. Learn how to break up your UI into components to facilitate reuse, and how to utilize built-in basic components that Compose is shipped with to create your UIs.

 Start
Introduction • Start Reading · 1 min
Instruction Reading · 8 mins
Demo Video · 3 mins
Conclusion Reading · 1 min
Quiz: Leverage Components 4 questions
6
Use Material Design Lesson (15 mins)

Tie your learnings together and create a truly custom theme for your app. Define colors for dark and light modes and typography styles and reuse them on your screens. Consolidate all styling logic in one place for easy modification.

 Start
Introduction • Start Reading · 1 min
Instruction Reading · 9 mins
Demo Video · 5 mins
Conclusion Reading · 1 min
Quiz: Use Material Design 4 questions