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
)
}
}
How to resolve this ? Inside the current what is missing or Column
does not support different kind of elements.
CodePudding user response:
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.
CodePudding user response:
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
)
}
}