I was trying to study android jetpack compose and I have found some errors in my code.
Modifier has .align attributes but it doesn't work.
Other modifiers like padding, clip, etc are working right.
I use
Android Studio Arctic Fox | 2020.3.1 Patch 3
Build #AI-203.7717.56.2031.7784292, built on October 1, 2021
Runtime version: 11.0.10+0-b96-7249189 amd64
Kotlin 1.6.0
My full code:
package com.joung.week2_layout
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.joung.week2_layout.ui.theme.Week2LayoutTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Week2LayoutTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
NameTag()
}
}
}
}
}
#Composable
fun NameTag() {
Row{
Surface(
modifier = Modifier
.size(50.dp)
.padding(all = 4.dp),
shape = CircleShape,
color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
) {
// image url
}
}
Column (
modifier = Modifier
.padding(all = 8.dp)
.align(Alignment.CenterVertically)
.clip(RoundedCornerShape(4.dp))
){
Text(text = "Joung", fontWeight = FontWeight.Bold)
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(text = "PHONE NUMBER", style = MaterialTheme.typography.body2)
}
}
}
#Preview(showBackground = true)
#Composable
fun CardPreview() {
Week2LayoutTheme {
NameTag()
}
}
Not all modifiers can be used with any composable. They are specific to the type or "scope" of the composable. The align modifier cannot be used with the Column composable. To align your content in a Column, use the verticalArrangement or horizontalAlignment parameters. To center vertically, use verticalArrangement = Arrangement.Center. Also, you are not setting the size of the Column. You should set this. In this example, I set it to fillMaxSize. And finally, on a side note, you should be using only the official version of Kotlin. Currently it is 1.5.31 and not 1.6. Using a newer version can cause major issues if Google hasn't been using it yet:
Column (
verticalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxSize()
.padding(all = 8.dp)
.clip(RoundedCornerShape(4.dp))
){
}
}
align() is defined inside RowScope or ColumnScope which essentially means you must have a parent Row or Column containing the composable where align is being used so that it can align w.r.t the parent. Moreover for Column align will be in the horizontal direction and vice versa.
I am not sure about the difference with align() but there is a horizontalAlignment (for Columns) and horizontalArrangement (for Rows) attribute as well for your help. For example:
Column {
Column(
modifier = Modifier
.padding(all = 8.dp).clip(RoundedCornerShape(4.dp)).align(Alignment.CenterHorizontally),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Joung", fontWeight = FontWeight.Bold)
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(text = "PHONE NUMBER", style = MaterialTheme.typography.body2)
}
}
}
Related
Card Corner Curve Design
I want to create a design like this in jetpack compose, but I don't know how to make it.
My main concern is a blue color curve on both corners, which I don't know how to make it. Can someone help to draw me this design?
You can try this code as per your usage and implement this on your code.
package com.example.myapplication
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
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.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
.padding(20.dp)) {
Card(
elevation = 4.dp,
shape = RoundedCornerShape(20.dp)
) {
Column(modifier = Modifier.padding(10.dp)) {
Text("AB CDE", fontWeight = FontWeight.W700)
Text("+0 12345678")
Text("XYZ city.", color = Color.Gray)
}
}
Spacer(modifier = Modifier.height(30.dp))
Card(
elevation = 4.dp,
) {
Column(modifier = Modifier.padding(10.dp)) {
Text("AB CDE", fontWeight = FontWeight.W700)
Text("+0 12345678")
Text("XYZ city.", color = Color.Gray)
}
}
}
}
}
}
}
I'm currently working on a button, which has 3 elements: An icon (with a fixed size), a title (f.e Buy Now!) and the price of the item.
The price which should be displayed is adaptive, this could be €2,00 or €2000,00. The title is supposed to be centered, based on the Button itself, rather than the area it can occupy.
The price of object has the priority within the button, and should always be fully displayed with a set style. Due to this, the size of this object is variable, and can not be determined beforehand.
When the length of the price object increases, naturally the available space of the title decreases. However, when attempting to center the text, I could only get it to center based on the available space, which resulted in the text being off-center.
How could one approach this issue, allowing for the text to be centered based on the parent (button), rather than the available text size?
I tried to prepare an understandable example for you, if it was useful, please select my answer as the correct answer
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import stackoverflow.answers.ui.theme.StackOverflowAnswersTheme
#Composable
private fun StandardToolbar(
onProfileButtonClick: () -> Unit,
onFilterButtonClick: () -> Unit,
onBackButtonClick: () -> Unit
) {
val constraintSet = ConstraintSet {
val startReference = createRefFor("startReference")
val endReference = createRefFor("endReference")
val titleReference = createRefFor("titleReference")
constrain(startReference) {
start.linkTo(parent.start, 16.dp)
top.linkTo(parent.top, 16.dp)
bottom.linkTo(parent.bottom, 16.dp)
width = Dimension.value(48.dp)
}
constrain(endReference) {
end.linkTo(parent.end, 16.dp)
top.linkTo(parent.top, 16.dp)
bottom.linkTo(parent.bottom, 16.dp)
width = Dimension.value(48.dp)
}
constrain(titleReference) {
start.linkTo(startReference.end, 8.dp)
end.linkTo(endReference.start, 8.dp)
top.linkTo(parent.top, 16.dp)
bottom.linkTo(parent.bottom, 16.dp)
width = Dimension.fillToConstraints
}
}
Surface(
elevation = AppBarDefaults.TopAppBarElevation,
shape = RoundedCornerShape(
bottomStart = 50f,
bottomEnd = 50f
),
color = Color(0XFF2F364E),
modifier = Modifier
.fillMaxWidth()
.height(72.dp)
) {
ConstraintLayout(
modifier = Modifier.fillMaxSize(),
constraintSet = constraintSet
) {
Box(
modifier = Modifier
.layoutId("startReference")
.size(48.dp)
.background(Color.Blue)
) {
}
Text(
modifier = Modifier
.layoutId("titleReference"),
text = "Title",
style = MaterialTheme.typography.h5.copy(fontWeight = FontWeight.Bold),
color = Color.White,
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Center,
maxLines = 1
)
Box(
modifier = Modifier
.layoutId("endReference")
.size(48.dp)
.background(Color.Green)
) {
Text(text = "E 20,000", modifier = Modifier.align(Alignment.Center), style = MaterialTheme.typography.caption)
}
}
}
}
#Composable
#Preview
fun StandardToolbarPreview() {
CompositionLocalProvider(
LocalLayoutDirection provides LayoutDirection.Ltr
) {
StackOverflowAnswersTheme {
StandardToolbar(
onProfileButtonClick = { },
onFilterButtonClick = { },
onBackButtonClick = {}
)
}
}
}
You can try this:
Button(
modifier = Modifier
.wrapContentHeight()
.padding(horizontal = 8.dp),
onClick = {}
) {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceAround
) {
Box(
modifier = Modifier.weight(1f),
contentAlignment = Alignment.TopStart
) {
Icon(
imageVector = Icons.Default.ImageSearch,
contentDescription = null
)
}
Box(
modifier = Modifier.weight(1f),
contentAlignment = Alignment.Center
) {
Text(
text = "Buy Now"
)
}
Box(
modifier = Modifier.weight(1f),
contentAlignment = Alignment.TopEnd
) {
Text(
text = "€ 2.00"
// text = "€ 2000.00"
)
}
}
}
The Button has a content parameter you can use to set its content, in this case we use a Row to set contents in the horizontal axis.
Note that each of the components, Icon Text and Text are wrapped inside a Box with a weight of 1f, making each those boxes as their container that also takes equal divided space of the parent Row.
The middle Box positions its child in the center, while the first and last Box positions their children (i.e Icon and Text) in TopStart and TopEnd alignment, though you don't need to worry the "top" positioning as its neglected here because the parent Row aligns all its children center-vertically
If we put a background color on each Box,
Modifier.background(Color.LightGray/Gray/DarkGray)
we can clearly see their equal width
A lot of errors showing on API ,
Showing Error in LazyVerticalGrid section :
This foundation API is experimental and is likely to change or be removed in the future.
In weekdays section :
Field requires API level 26 (current min is 21): `java.time.DayOfWeek#SUNDAY`
In months section there is this error:
Field requires API level 26 (current min is 21): `java.time.Month#JULY`
This is my code below .
package com.example.android.weatherapp.ui.components
import android.os.Build
import androidx.annotation.DrawableRes
import androidx.annotation.RequiresApi
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.GridCells
import com.example.android.weatherapp.R
import androidx.compose.foundation.lazy.GridItemSpan
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Card
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.android.weatherapp.ui.theme.WeatherAppTheme
import java.time.DayOfWeek
import java.time.format.TextStyle
import java.util.*
data class Month(
val title : String ,
val dateForecasts: List<DateForeCast>
)
data class DateForeCast(
val date: String,
val highTemperature: String,
#DrawableRes val icon: Int
)
#Composable
fun Calendar(
months : List<Month>,
modifier: Modifier = Modifier
){
val gridCellNumber = 7
LazyVerticalGrid(
modifier = modifier ,
cells = GridCells.Fixed(gridCellNumber)
){
months.forEach { month ->
item(
span = { GridItemSpan(gridCellNumber) }
) { MonthLabel(month = month.title) }
items(month.dateForecasts){
DateCard(dataForecasts = it )
}
}
}
}
#Composable
fun MonthLabel(
month: String,
modifier: Modifier = Modifier
){
val weekdays = listOf(
DayOfWeek.SUNDAY,
DayOfWeek.MONDAY,
DayOfWeek.TUESDAY,
DayOfWeek.WEDNESDAY,
DayOfWeek.THURSDAY,
DayOfWeek.FRIDAY,
DayOfWeek.SATURDAY
).map{
it.getDisplayName(TextStyle.SHORT, Locale.getDefault())
}
Column(
modifier = modifier.fillMaxWidth()
) {
Text(
text = month ,
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
style = MaterialTheme.typography.h5.copy(fontWeight = FontWeight.SemiBold)
)
Row(modifier = Modifier.fillMaxWidth() ){
weekdays.forEach{
Text(
text = it,
textAlign = TextAlign.Center,
style = MaterialTheme.typography.body2,
modifier = Modifier.weight(1f,true)
)
}
}
}
}
#Preview(
showBackground = true
)
#Composable
fun CalendarPreview(){
val months = listOf(
Month(
title = "July",
dateForecasts = List(java.time.Month.JULY.length(false)){
DateForeCast(
date = "$it + 1",
highTemperature = "70",
icon = R.drawable.cloud_cloudy_day_forecast_sun_icon
)
}
),
Month(
title = "August",
dateForecasts = List(java.time.Month.AUGUST.length(false)){
DateForeCast(
date = "$it + 1",
highTemperature = "70",
icon = R.drawable.cloud_cloudy_day_forecast_sun_icon
)
}
)
)
WeatherAppTheme {
Calendar(months = months )
}
}
#Composable
fun DateCard(
dataForecasts: DateForeCast,
modifier: Modifier = Modifier
) = Card (
modifier = modifier,
){
Column (
modifier = Modifier.padding(8.dp),
verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.CenterHorizontally
){
Text(
text = dataForecasts.date,
style = MaterialTheme.typography.overline,
color = Color.Blue
)
Icon(
painter = painterResource(id = dataForecasts.icon ),
contentDescription = null,
modifier = Modifier
.padding(vertical = 16.dp)
.size(24.dp),
tint = Color.Unspecified
)
}
}
This is mainly the issue of SDK, but still its not working properly.
I tried the inbuild suggestions to remove the error but it's still no progress.
I have the solution for this.
You just have to change your compileSDK and targetSDK to 33 in gradle build.
Then just clear the cache and your build will work properly .
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I can not do it. One mistake for: TextField, Text, IconButton.
#Composable invocations can only happen from the context of a #Composable function
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.withStyle
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavController
import ru.exemple.app.R
import ru.exemple.app.presentation.components.StandardTextField
import ru.exemple.app.ui.theme.SpaceMedium
import ru.exemple.app.ui.theme.SpaceSmall
#Composable
fun LoginScreen(
navController: NavController,
viewModel: LoginViewModel = hiltViewModel()
) {
Box(modifier = Modifier.fillMaxSize()) {
Column(
verticalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxSize()
.padding(horizontal = SpaceMedium)
.align(Alignment.Center)
) {
Text(
text = stringResource(id = R.string.login)
)
Spacer(modifier = Modifier.height(SpaceSmall))
StandardTextField(
text = viewModel.usernameText.value,
onValueChange = {
viewModel.setUsernameText(it)
},
hint = stringResource(id = R.string.login_hint)
)
Spacer(modifier = Modifier.height(SpaceSmall))
StandardTextField(
text = viewModel.passwordText.value,
onValueChange = {
viewModel.setPasswordText(it)
},
hint = stringResource(id = R.string.password_hint),
keyboardType = KeyboardType.Password
)
}
Text(
text = buildAnnotatedString {
append(stringResource(id = R.string.dont_have_an_account_yet))
append("")
val signUpText = stringResource(id = R.string.sign_up)
withStyle(
style = SpanStyle(
color = MaterialTheme.colors.primary
)
) {
append(signUpText)
}
},
style = MaterialTheme.typography.body1,
modifier = Modifier
.align(Alignment.BottomCenter)
)
}
}
}
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.ui.text.input.KeyboardType
import ru.exemple.app.R
import androidx.compose.runtime.Composable
#Composable
fun StandardTextField(
text: String = "",
hint: String = "",
isError: Boolean = false,
keyboardType: KeyboardType = KeyboardType.Text,
onValueChange: (String) -> Unit
) {
val isPasswordToggleDisplayed by remember {
mutableStateOf(keyboardType == KeyboardType.Password)
}
var isPasswordVisible by remember {
mutableStateOf(false)
}
TextField(
value = text,
onValueChange = onValueChange,
placeholder = {
Text(text = text)
},
isError = isError,
keyboardOptions = KeyboardOptions(
keyboardType = keyboardType
),
sigleLine = true,
trailingIcon = {
if (isPasswordToggleDisplayed) {
IconButton(onClick = {
isPasswordVisible = !isPasswordVisible
}) {
Icon(
imageVector = if (isPasswordVisible) {
Icons.Filled.VisibilityOff
} else {
Icons.Filled.Visibility
},
contentDescription = if (isPasswordVisible) {
stringResource(id = R.string.password_visible_content_description)
} else {
stringResource(id = R.string.password_hidden_content_description)
}
)
}
}
},
modifier = Modifier.fillMaxSize()
)
}
dependencies {
implementation 'androidx.compose.ui:ui:1.0.5'
// Tooling support (Previews, etc.)
implementation 'androidx.compose.ui:ui-tooling:1.0.5'
// Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
implementation 'androidx.compose.foundation:foundation:1.0.5'
// Material Design
implementation 'androidx.compose.material:material:1.0.5'
// Material design icons
implementation 'androidx.compose.material:material-icons-core:1.0.5'
implementation 'androidx.compose.material:material-icons-extended:1.0.5'
// Integration with activities
implementation 'androidx.activity:activity-compose:1.3.1'
// Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
// Integration with observables
implementation 'androidx.compose.runtime:runtime-livedata:1.0.5'
implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.5'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.5'
}
I've been trying to figure this out for the last 15 minutes, and couldn't wrap my head around it.
It looks like there was a typo:
sigleLine = true,
Not sure why it doesn't catch those.
Hope that helped!
I want to reduce padding of a single tab. Following image shows what I want:
What I am getting:
I am currently using the "accompanist-pager" and "accompanist-pager-indicators" with version 0.16.0.
Code:
#Composable
fun Tabs(tabNames: List<String>, pagerState: PagerState, scrollToPage: (Int) -> Unit) {
TabRow(
selectedTabIndex = pagerState.currentPage,
backgroundColor = Color.White,
contentColor = Color.Black,
divider = {
TabRowDefaults.Divider(
thickness = 4.dp
)
},
indicator = { tabPositions ->
TabRowDefaults.Indicator(
modifier = Modifier.customTabIndicatorOffset(tabPositions[pagerState.currentPage]),
height = 4.dp,
color = EmeraldTheme.colors.primary
)
}
) {
tabNames.forEachIndexed { index, name ->
Tab(
text = {
Text(
text = name,
maxLines = 1,
style = globalSearchDefaultTextStyle,
fontWeight = if (pagerState.currentPage == index) FontWeight.Bold else FontWeight.Normal,
color = if (pagerState.currentPage == index) EmeraldColor.Black100 else colorResource(globalSearchR.color.darkGrey20),
)
},
selected = pagerState.currentPage == index,
onClick = {
scrollToPage(index)
}
)
}
Row { Spacer(Modifier.weight(1f, true)) }
}
}
With the current version of TabRow (or ScrollableTabRow) you will not be able to do it. You will need to create your own TabRow composable.
Also, you should probably use a ScrollableTabRow instead of TabRow because TabRow evenly distributes the entire available width for its Tabs. So the content padding for that doesn't matter that much.
You can pretty much copy-paste the entire code for ScrollableTabRow, but modify the bit that sets up the tabConstraints.
It should no longer use the minTabWidth:
val minTabWidth = ScrollableTabRowMinimumTabWidth.roundToPx()
Custom tab is the way to go.
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material.Tab
import androidx.compose.material.Text
Tab(selected, onClick) {
Column(
Modifier.padding(10.dp).height(50.dp).fillMaxWidth(),
verticalArrangement = Arrangement.SpaceBetween
) {
Box(
Modifier.size(10.dp)
.align(Alignment.CenterHorizontally)
.background(color = if (selected) Color.Red else Color.White)
)
Text(
text = title,
style = MaterialTheme.typography.body1,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
}
}
https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Tab(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)
You can use java reflection to change the value of ScrollableTabRowMinimumTabWidth.
And you can upvote here -> https://issuetracker.google.com/issues/226665301
try {
Class
.forName("androidx.compose.material3.TabRowKt")
.getDeclaredField("ScrollableTabRowMinimumTabWidth").apply {
isAccessible = true
}.set(this, 0f)
} catch (e: Exception) {
e.printStackTrace()
}