Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

TopAppBar in Android using Jetpack Compose

  • Last Updated : 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 of Top App Bar Widget

Attributes

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

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.

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 = "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. 

Output:

TopAppBar in Android using Jetpack Compose Output




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!