Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Create Top App Bar in Jetpack Compose

Create Top App Bar in Jetpack Compose - Coding Bihar

Bottom App Bar in Jetpack Compose

Top App bar


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
 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!