VOOZH about

URL: https://www.geeksforgeeks.org/android/topappbar-in-android-using-jetpack-compose/

⇱ TopAppBar in Android using Jetpack Compose - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

TopAppBar in Android using Jetpack Compose

Last Updated : 23 Jul, 2025

TopAppBar is similar to that of the Action Bar widget in Android. This is one of the most UI components in Android. The action bar is used to represent the app name and action items in Android. In this article, we will take a look at the implementation of the TopAppBar in Android using Jetpack compose

Attributes of Top App Bar Widget

Attributes

Description

titlethis is use to represent the title for our action bar. 
navigationIconthis is use as a leading icon which is use to open navigation drawer. 
backgroundColorthis is use to represent backgroundColor of our top app bar. 
contentColorthis color is use to give color to our contents of our action bar.
elevationthis is use to give elevation to our top app bar. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.

Step 2: Working with the MainActivity.kt file

After adding this image navigates to the app > java > MainActivity.kt and add the below code to it. Comments are added inside the code to understand the code in more detail.

Now run your app and see the output of the app. 

Output:

👁 TopAppBar in Android using Jetpack Compose Output
Comment

Explore