How to remove default padding between Text() and SearchBar() in Jetpack Compose?

Question

I'm creating a contact list app using Kotlin and Jetpack Compose.

I'm having an issue where there is a space between two composable components that doesn't show on the preview. The unexpected space is between a Text() composable and SearchBar() composable.

I have tried forcing the padding in both components to be 0.dp. I searched documentation and other online questions, but haven't found anything that helps.

Here is the code that I have and a link for the picture of both the preview and the app running (unexpected space highlighted in red):

import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.tooling.preview.Preview

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ContactsList() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 12.dp, vertical = 36.dp)
    ) {
        // Top row with add button
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.End
        ) {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "add contact button",
                    modifier = Modifier.size(32.dp)
                )
            }
        }

        // Header with Contacts title and SearchBar
        Column(
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(
                text = "Contacts",
                modifier = Modifier.fillMaxWidth(),
                fontSize = 36.sp,
                fontWeight = FontWeight.Bold
            )

            var searchQuery by remember { mutableStateOf("") }

            SearchBar(
                modifier = Modifier.padding(0.dp),
                query = searchQuery,
                onQueryChange = { searchQuery = it },
                onSearch = { /* Handle search action */ },
                active = false,
                onActiveChange = { },
                leadingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = null) },
                placeholder = { Text(text = "Search") },
                colors = SearchBarDefaults.colors(containerColor = Color(0xFFF1F1F1)),
            ){}
        }

        // Clickable contact row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 12.dp)
                .clickable { /* Handle row click */ },
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = null,
                modifier = Modifier.size(80.dp)
            )

            Text(
                text = "You",
                fontSize = 28.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier.padding(start = 8.dp),
                fontWeight = FontWeight(400)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewContactsList() {
    ContactsList()
}

Preview on the left and app running on the right:

How to remove default padding between Text() and SearchBar() in Jetpack Compose?

Answers (1)

Related Questions