I am using Android Studio Electric Eel | 2022.1.1.
I am fairly new. I was trying out the checkbox in Compose with Material3 in Android. I am not able to align the text next to check box. Please help. Here is the code and an screenshot image of the emulator screen.
buildscript {
ext {
compose_version = '1.2.0'
}
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
id 'com.android.application' version '7.4.0' apply false
id 'com.android.library' version '7.4.0' apply false
id 'org.jetbrains.kotlin.android' version '1.7.0' apply false
}
plugins {
id 'com.android.application'
id 'org.jetbrains.kotlin.android'
}
android {
namespace 'com.example.test'
compileSdk 33
defaultConfig {
applicationId "com.example.test"
minSdk 27
targetSdk 33
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
vectorDrawables {
useSupportLibrary true
}
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion '1.2.0'
}
packagingOptions {
resources {
excludes += '/META-INF/{AL2.0,LGPL2.1}'
}
}
}
dependencies {
implementation 'androidx.core:core-ktx:1.7.0'
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
implementation 'androidx.activity:activity-compose:1.3.1'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation 'androidx.compose.material3:material3:1.0.0-alpha11'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
}
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TestTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Test()
}
}
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Test() {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.padding(0.dp)
) {
Row(
modifier = Modifier.padding(3.dp)
)
{
Checkbox(
checked = true,
onCheckedChange = { },
modifier = Modifier.absoluteOffset((-12).dp, 0.dp)
)
Text(
text = "Check me",
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
textAlign = TextAlign.Left
)
}
TextButton(
onClick = { },
modifier = Modifier.padding(end = 0.dp)
) {
Text(
text = "Right text",
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
textAlign = TextAlign.Right
)
}
}
}
I have attached a screen shot of the emulator screen to show how the text is aligned.
Question:
Please help.
I tried to place text next to checkbox in my android studio material 3 project. The text is not aligned in line with the checkbox.
You can you this guide to align: https://developer.android.com/jetpack/compose/layouts/alignment-lines
I was playing around with your code, and here is what I get:
fun Modifier.firstBaselineToTop(
firstBaselineToTop: Dp
) = layout { measurable, constraints ->
// Measure the composable
val placeable = measurable.measure(constraints)
// Check the composable has a first baseline
check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
val firstBaseline = placeable[FirstBaseline]
// Height of the composable with padding - first baseline
val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
val height = placeable.height + placeableY
layout(placeable.width, height) {
// Where the composable gets placed
placeable.placeRelative(0, placeableY)
}
}
@Composable
fun Test() {
Row(
horizontalArrangement = Arrangement.Start,
modifier = Modifier.padding(0.dp)
) {
Row {
Checkbox(
checked = true,
onCheckedChange = { },
modifier = Modifier.absoluteOffset((-12).dp, 0.dp)
)
Text(
text = "Check me",
Modifier.padding(vertical =10.dp),
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
textAlign = TextAlign.Left
)
}
TextButton(
onClick = { },
modifier = Modifier.padding(end = 0.dp)
) {
Text(
text = "Right text",
Modifier.firstBaselineToTop(16.dp),
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
textAlign = TextAlign.Right
)
}
}
}