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
|title||this is use to represent the title for our action bar.|
|navigationIcon||this is use as a leading icon which is use to open navigation drawer.|
|backgroundColor||this is use to represent backgroundColor of our top app bar.|
|contentColor||this color is use to give color to our contents of our action bar.|
|elevation||this 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.