Jetpack Compose Text and Image get overlapped inside Column layout issue

Question

I am using Jetpack Compose for designing dynamic Layout inside android app. Column layout is used to place elements like Vertical layout. This kind of behaviour is achieved using LinearLayout orientation Vertical usage without compose. Inside Column I have added one Image on top and one text I want to display below it. But after placing the Text inside the Compose Column layout it is getting overlapped. How to resolve this. The code for adding Image and Text is as follows

@Composable
fun GreetingSectionExperimental(
    name: String = "Philipp"
) {
    //var text by remember { mutableStateOf(TextFieldValue("")) }
    Column(
        verticalArrangement = Arrangement.Top,
        modifier = Modifier.fillMaxSize()
    ) {
        Image(
            painterResource(id = R.drawable.ic_launcher_background),
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp).offset(0.dp,35.dp),
            alignment = Alignment.Center,
            contentDescription = ""
        )
        Text(
            text = "Login / Sign Up",
            Modifier.padding(10.dp).align(CenterHorizontally),
            color = textColor, fontSize = 18.sp,
            fontWeight = FontWeight.SemiBold
        )
    }
}

I am getting output as

How to resolve this ? Inside the current what is missing or Column does not support different kind of elements.

Answer 1

You need to remove the property "Offset" from your image the code should looks like

@Composable
fun GreetingSectionExperimental(
    name: String = "Philipp"
) {
    //var text by remember { mutableStateOf(TextFieldValue("")) }
    Column(
        verticalArrangement = Arrangement.Top,
        modifier = Modifier.fillMaxSize()
    ) {
        Image(
            painterResource(id = R.drawable.ic_launcher_background),
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp), //Remove the offset here
            alignment = Alignment.Center,
            contentDescription = ""
        )
        Text(
            text = "Login / Sign Up",
            Modifier.padding(10.dp).align(CenterHorizontally),
            color = textColor, fontSize = 18.sp,
            fontWeight = FontWeight.SemiBold
        )
    }
}

Answer 2

Best solution is to use Spacer(modifier = Modifier.height(20.dp)). It will create space between the those Elements this in between this is added.