Как выставить текст по центру в кнопке на AndroidTV

Question

Достаточно простая задача, мне нужно сделать кнопку, которая будет иметь минимальную ширину независимо от того, какой текст она содержит.

Также задана максимальная ширина, то есть, если текст короткий, кнопка занимает Х ширины, если текст длиннее, чем минимальная ширина кнопки, то кнопка растягивается, чтоб поместить весь текст до того, как упрется в максимальную свою ширину.

Проблема в том, что короткий текст сдвинут влево.

Данный код отображает кнопки,

...
import androidx.tv.material3.Button  
...


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestFocusRequestTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Test2()
                }
            }
        }
    }
}

@Composable
fun Test2() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(
            modifier = Modifier.widthIn(min = 288.dp, max = 488.dp),
            onClick = { }
        ) {
            Text(
                modifier = Modifier,
                text = "Short text",
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(16.dp))

        Button(
            modifier = Modifier.widthIn(min = 288.dp, max = 488.dp),
            onClick = { }
        ) {
            Text(
                modifier = Modifier,
                text = "!! Long long long long long long long long text !!",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(16.dp))

        Button(
            modifier = Modifier.widthIn(min = 288.dp, max = 488.dp),
            onClick = { }
        ) {
            Text(
                modifier = Modifier,
                text = "!! Long long long long long long long long long long long long long long long long long long long long text !!",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                color = Color.White
            )
        }
    }
}

которые выглядят вот так:

А нужно вот так:

На скриншоте видно, что вторая и третья кнопки работают так, как и ожидается, но первая почему-то выставляет выравнивание текста по левому краю, а не по центру.
Есть идеи, как это исправить?

P.S. Кнопка из import androidx.tv.material3.Button -> implementation("androidx.tv:tv-material:1.0.0")

Answer 1

Добавьте в разметку кнопки это: android:gravity="center" Должно помочь

Answer 2

Попробуй добавить для кнопки следующий модификаторы

textAlign = TextAlign.Center, 
modifier = Modifier.fillMaxWidth()

Если проблема останется, проверь нет ли каких-то конфликтных модификаторов которые не дают выровнять кнопку по центру.

Answer 3

Не знаком с tv, и предоставленный код на desktop работает как и предполагается.

Однако, думаю, что это поможет

    Button(
        modifier = Modifier.widthIn(min = 288.dp, max = 488.dp),
        onClick = { }
    ) {
        Text(
            modifier = Modifier.align(Alignment.CenterVertically),
            textAlign = TextAlign.Center,
            text = "Short text",
            color = Color.White
        )
    }

БЛОГ НА HUSL

Как выставить текст по центру в кнопке на AndroidTV

Ответы (3 шт):