Since I am new to Kotlin, I would like to know which Icon properties hold the indention and alignment of the icons? I want a way to display every icon in line in the bottom bar so I can choose what to do with the qr code.

Here is my code for the Vector:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="512dp"
    android:height="512dp"
    android:viewportWidth="512"
    android:viewportHeight="512">
    <path
        android:pathData="M0,0h512v512h-512z"
        android:fillColor="#008080"/>
    <path
        android:pathData="M118.96,128L393.04,128A40.96,40.96 0,0 1,434 168.96L434,343.04A40.96,40.96 0,0 1,393.04 384L118.96,384A40.96,40.96 0,0 1,78 343.04L78,168.96A40.96,40.96 0,0 1,118.96 128z"
        android:fillColor="#fff"/>
    <path
        android:pathData="M434,128L269,292c-7,8 -19,8 -26,0L78,128m0,256l129,-128m227,128L305,256"
        android:strokeWidth="20"
        android:fillColor="#00000000"
        android:strokeColor="#008080"/>
</vector>

And now, I want to insert it to the bottomBar as a Floating Action Button. However, it overlaps with my QR icon. Here’s how I did it:

    @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LTBMODataTrackerV2Theme {
                Scaffold(
                    bottomBar= {
                        BottomAppBar(
                            actions = {},
                            floatingActionButton = {
                                FloatingActionButton(onClick = { checkCameraPermission(this@MainActivity) }) {
                                    Icon(
                                        painter = painterResource(id = R.drawable.qr_scan),
                                        contentDescription = "QR Scanner",
                                    )
                                }
                                FloatingActionButton(onClick = { }) {
                                    Icon(
                                        painter = painterResource(id = R.drawable.email),
                                        contentDescription = "QR Scanner",
                                    )
                                }


                            },


                            )
                    },
                ) {
                    innerPadding ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally,
                    ) {
                        Image (
                            painter = painterResource(id = R.drawable.qr_scan),
                            modifier = Modifier.size(100.dp),
                            contentDescription = "QR"
                        )

                        Text(
                            text = textResult.value,
                            fontSize = 30.sp,
                            fontWeight = FontWeight.Bold
                            )
                    }

                }

            }

        }
    }

Is there a way to know the exact position of the icon so I can make the bottom bar display each item with indention? I want them to display as one line of icons. It would be all the functionality of my qr scanner.

Basically, I want them to be displayed at the bottom bar as one line.

Thank you so much.

Since I am new to Kotlin, I tried copying the way how I did the first icon, but it just overlaps the icon and now my qr scan icon is not visible.