Create Top App Bar in Jetpack Compose

Create Top App Bar in Jetpack Compose
Top app bars display information and actions at the top of a screen. This Top App Bar has slots for a title, navigation icon, and actions.

title - the title to be displayed in the top app bar.

navigation Icon - the navigation icon displayed at the start of the top app bar. This should typically be an Icon Button or Icon Toggle Button.

actions - the actions displayed at the end of the top app bar. This should typically be Icon Buttons. The default layout here is a Row, so icons inside will be placed horizontally.

Scaffold

The Scaffold widget implements the basic material design visual layout structure in a jetpack compose application. Scaffold widget provides API to insert several material components to construct app screen such as Top App Bar, Bottom App Bar, Floating Action Button, etc. So that, we can show a Floating Action Button in our jetpack compose application using the Scaffold ‘floating Action Button’ parameter. Simply we can pass a Floating Action Button instance to this parameter to show a floating action button on our mobile device screen. 

Also Read     How to create compose check box


MainAcivity.kt

Copy this code →

package com.example.collapsingtoolbarcompose

import...
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackCompose3Theme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                 MainContent()
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackCompose3Theme {
      MainContent()
    }
}

}

      

MainContent


Copy this code →

  
 package com.example.collapsingtoolbarcompose
  
 import....

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainContent(){
    val result = remember { mutableStateOf("") }
    val selectedItem = remember { mutableStateOf("share")}
    val fabShape = RoundedCornerShape(50)

 Scaffold(
   topBar = {
       TopAppBar(
          title = {
             Text(text = "Bottom app bar + FAB")
                },
            navigationIcon = {
            IconButton(
            onClick = {
             result.value = "Drawer icon clicked"
               }
          ) {
Icon(imageVector =Icons.Filled.Menu, 

contentDescription = "")
                    }
                },
            )
        },

      content = {
         Box(
          Modifier
              .background(Color(0XFFE3DAC9))
              .padding(16.dp)
              .fillMaxSize(),
    ) {
     Text(
        text = result.value,
        fontSize = 22.sp,
        fontFamily = FontFamily.Serif,
        modifier = Modifier.align(Alignment.Center)
           )
          }
        },

 floatingActionButton = {
  FloatingActionButton(
   onClick = {result.value = "FAB clicked"},
    shape = fabShape,
 

) { Icon(Icons.Filled.Add,"")
     }
  

},
floatingActionButtonPosition = FabPosition.End,

 bottomBar = {
  BottomAppBar(
      //cutoutShape = fabShape,
          content = {
            NavigationBarItem(
             icon = {
              Icon(Icons.Filled.Favorite , "")
                 

},
label = { Text(text = "Favorite")},
    selected = selectedItem.value == "favorite",
    onClick = {
      result.value = "Favorite icon clicked"
          selectedItem.value = "favorite"
              

},
  alwaysShowLabel = false
                    )

    NavigationBarItem(
      icon = {
         Icon(Icons.Filled.Share ,  "")
               },

        label = { Text(text = "Share")},
        selected = selectedItem.value == "share",
        onClick = {
        result.value = "Share icon clicked"
        selectedItem.value = "share"
           },
             alwaysShowLabel = false
                    )
                }
            )
        }
    )
}

@Preview
@Composable
fun ComposablePreview(){
    MainContent()
}
 
      

OUTPUT :-


Create Top App Bar in Jetpack Compose Output
Previous Post Next Post

Contact Form