Click here to Skip to main content
15,886,873 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
Kotlin
<pre>
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Drawer() {

    val items = listOf(

    DrawerItem(
        Icons.Default.Favorite,
        "Favourite"
    ),
    DrawerItem(
        Icons.Default.Add,
        "Add"
    ),
    DrawerItem(
        Icons.Default.AccountBox,
        "Account"
    )
)


    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val selectedItem = remember{
        mutableStateOf(items[0])
    }
    
    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
                        ModalDrawerSheet{
                            Image(
                                painter = painterResource(id = R.drawable.globologo),
                                contentDescription = "Header Image",
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .height(150.dp).padding(all = 10.dp),
                                contentScale = ContentScale.Inside
                            )
                            Spacer(modifier = Modifier.height(10.dp))
                            items.forEach{
                                    item ->
                                NavigationDrawerItem(
                                    label = {
                                       Text(text = item.title)
                                    },
                                    selected = selectedItem.value == item,
                                    icon = {
                                        Icon(
                                            imageVector = item.imageVector,
                                            contentDescription = item.title
                                        )
                                           },
                                    onClick = {
                                        scope.launch {
                                            selectedItem.value = item
                                            drawerState.close()
                                        }
                                    }
                                )
                            }
                        }
        },

        content = {
            Box(
                modifier = Modifier.size(24.dp)
            ){
                IconButton(onClick = {
                    scope.launch {
                        drawerState.open()
                    }
                }
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.hamburgermenu),
                        contentDescription = "Menu",
                        modifier = Modifier.size(24.dp)
                    )
                }
            }

        }


    )


}




data class DrawerItem(
    val imageVector : ImageVector,
    val title: String
)


What I have tried:

I want to have just the icon for add it later in the TopAppBar,

I've tried to add the Drawer Function to the TopAppBar Row didn't work, as it appears like the first image and hide the TopAppBar. Thank you Previously!
Posted
Updated 28-Jul-23 5:24am
v2
Comments
David Crow 26-Jul-23 8:19am    
Is this a dynamic menu created at runtime or a static one defined in an XML file? If the latter, have you tried adding:
android:icon="@android:drawable/btn_star"

1 solution

To add a menu 'IconButton' to your 'TopAppBar' while using your existing 'Drawer' function, you can wrap the existing 'Drawer' function within a 'Scaffold' composable - you can follow a full tutorial at - Jetpack Compose: What’s a Scaffold?[^]

You can adjust teh code I used below to suit your need as you did not give a lot of information -
Kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DrawerContent() {
    val items = listOf(
        DrawerItem(
            Icons.Default.Favorite,
            "Favourite"
        ),
        DrawerItem(
            Icons.Default.Add,
            "Add"
        ),
        DrawerItem(
            Icons.Default.AccountBox,
            "Account"
        )
    )

    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val selectedItem = remember { mutableStateOf(items[0]) }

    ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                Image(
                    painter = painterResource(id = R.drawable.globologo),
                    contentDescription = "Header Image",
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(150.dp)
                        .padding(all = 10.dp),
                    contentScale = ContentScale.Inside
                )
                Spacer(modifier = Modifier.height(10.dp))
                items.forEach { item ->
                    NavigationDrawerItem(
                        label = {
                            Text(text = item.title)
                        },
                        selected = selectedItem.value == item,
                        icon = {
                            Icon(
                                imageVector = item.imageVector,
                                contentDescription = item.title
                            )
                        },
                        onClick = {
                            scope.launch {
                                selectedItem.value = item
                                drawerState.close()
                            }
                        }
                    )
                }
            }
        },
        content = {
            TopAppBar(
                title = { Text(text = "App Title") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            drawerState.open()
                        }
                    }) {
                        Image(
                            painter = painterResource(id = R.drawable.hamburgermenu),
                            contentDescription = "Menu",
                            modifier = Modifier.size(24.dp)
                        )
                    }
                }
            ) {
                //Add more actions here if needed...
            }
        }
    )
}

@Composable
fun NavigationDrawerItem(
    label: @Composable () -> Unit,
    selected: Boolean,
    icon: @Composable () -> Unit,
    onClick: () -> Unit
) {
    //Your current use of the NavigationDrawerItem...
}

@Composable
fun DrawerItem(imageVector: ImageVector, title: String) {
    //Your current implementation of the DrawerItem...
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900