TopAppBar in Android using Jetpack Compose
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 |
---|---|
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.
Kotlin
import android.graphics.drawable.shapes.Shape import android.media.Image import android.os.Bundle import android.widget.Toast import androidx.appcompat.app.AppCompatActivity import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.Image import androidx.compose.foundation.InteractionState import androidx.compose.foundation.Text import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.AccountCircle import androidx.compose.material.icons.filled.Info import androidx.compose.material.icons.filled.Menu import androidx.compose.material.icons.filled.Phone import androidx.compose.runtime.* import androidx.compose.runtime.savedinstancestate.savedInstanceState import androidx.compose.ui.Alignment import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.setContent import androidx.compose.ui.res.imageResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.gfgapp.ui.GFGAppTheme import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.platform.ContextAmbient import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.colorResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.input.* import androidx.compose.ui.unit.Dp import 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 ) @Composable fun DefaultPreview() { GFGAppTheme { // we are passing our composable // function to display its preview. ToolbarWidget(); } } @Composable fun 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 = "Beginner for Beginner" , // 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.
Contact Us