TopAppBar in Android using Jetpack Compose - GeeksforGeeks

25 Feb, 2021
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
Description
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.
Kotlin
import android.graphics.drawable.shapes.Shapeimport android.media.Imageimport android.os.Bundleimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivityimport androidx.compose.foundation.BorderStrokeimport androidx.compose.foundation.Imageimport androidx.compose.foundation.InteractionStateimport androidx.compose.foundation.Textimport androidx.compose.foundation.layout.*import androidx.compose.foundation.shape.CircleShapeimport androidx.compose.foundation.shape.RoundedCornerShapeimport androidx.compose.foundation.text.KeyboardOptionsimport androidx.compose.material.*import androidx.compose.material.icons.Iconsimport androidx.compose.material.icons.filled.AccountCircleimport androidx.compose.material.icons.filled.Infoimport androidx.compose.material.icons.filled.Menuimport androidx.compose.material.icons.filled.Phoneimport androidx.compose.runtime.*import androidx.compose.runtime.savedinstancestate.savedInstanceStateimport androidx.compose.ui.Alignmentimport androidx.compose.ui.layout.ContentScaleimport androidx.compose.ui.platform.setContentimport androidx.compose.ui.res.imageResourceimport androidx.compose.ui.tooling.preview.Previewimport androidx.compose.ui.unit.dpimport com.example.gfgapp.ui.GFGAppThemeimport androidx.compose.ui.Modifierimport androidx.compose.ui.draw.clipimport androidx.compose.ui.graphics.Colorimport androidx.compose.ui.graphics.SolidColorimport androidx.compose.ui.platform.ContextAmbientimport androidx.compose.ui.platform.testTagimport androidx.compose.ui.res.colorResourceimport androidx.compose.ui.text.TextStyleimport androidx.compose.ui.text.font.FontFamilyimport androidx.compose.ui.text.input.*import androidx.compose.ui.unit.Dpimport androidx.compose.ui.unit.TextUnit  class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            GFGAppTheme {                // A surface container using the 'background' color from the theme                Surface(color = MaterialTheme.colors.background) {                    // at below line we are calling                      // our function for toolbar.                    ToolbarWidget();                }            }        }    }}  // @Preview function is use to see preview// for our composable function in preview section.@Preview(showBackground = true)@Composablefun DefaultPreview() {    GFGAppTheme {          // we are passing our composable        // function to display its preview.        ToolbarWidget();    }}  @Composablefun ToolbarWidget() {    // theme for our app.    Scaffold(        // below line we are         // creating a top bar.        topBar = {            TopAppBar(                // in below line we are                 // adding title to our top bar.                title = {                    // inside title we are                     // adding text to our toolbar.                    Text(                        text = "Geeks for Geeks",                        // below line is use                         // to give text color.                        color = Color.White                    )                },                navigationIcon = {                    // navigation icon is use                    // for drawer icon.                    IconButton(onClick = { }) {                        // below line is use to                        // specify navigation icon.                        Icon(Icons.Filled.Menu)                    }                },                // below line is use to give background color                backgroundColor = colorResource(id = R.color.purple_200),                  // content color is use to give                // color to our content in our toolbar.                contentColor = Color.White,                  // below line is use to give                // elevation to our toolbar.                elevation = 12.dp            )        }, bodyContent = {            // bodyContent()        })}
Now run your app and see the output of the app. 
Android-Jetpack
Technical Scripter 2020
Android
Kotlin
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
Android UI Layouts
Kotlin Array
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Kotlin Setters and Getters