Отзывчивый текст и значок на кнопке

Я попытался добавить текст и значок на кнопках, используя «android: text» и «android: drawableTop», но результат, который я получил, не совсем правильный. Текст и значок не центрированы, и если я попробую использовать приложение в альбомной ориентации или изменить размер экрана, текст исчезнет, ​​а значок немного погаснет из кнопки.

Это макет без "android: text" и "android: drawableTop":

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/redButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#FF0000"
        app:layout_constraintBottom_toTopOf="@+id/blueButton"
        app:layout_constraintEnd_toStartOf="@+id/yellowButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/greenButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#00FF00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/blueButton"
        app:layout_constraintTop_toBottomOf="@+id/yellowButton" />

    <Button
        android:id="@+id/blueButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#0000FF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/greenButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/redButton" />

    <Button
        android:id="@+id/yellowButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#FFFF00"
        app:layout_constraintBottom_toTopOf="@+id/greenButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/redButton"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Интересно, есть ли способ сделать текст и значки адаптивными, потому что я также пытался использовать значки svg, но они не отображались.

В результате я получаю:

Портрет & Пейзаж

Любая помощь будет оценена, спасибо.


android responsiveness android-drawable
person Matteo Trevisan    schedule 04.12.2018    source источник
comment
пожалуйста, выложите скриншот, как это происходит и как вы хотите, чтобы это было?   -  person nimi0112    schedule 04.12.2018
comment
Вы проверили это   -  person Rajen Raiyarela    schedule 04.12.2018

Ответы (2)


arrow_upward
0
arrow_downward

Настройка кнопок в Android может быть очень неприятной. Предлагаю вам взглянуть на эту популярную библиотеку для Android под названием FancyButton. Он предлагает вам широкий спектр возможностей для создания нужной кнопки, просто используя простые свойства XML в вашем макете.

Например, с помощью этого фрагмента кода:

<mehdi.sakout.fancybuttons.FancyButton
    android:id="@+id/btn_spotify"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="10dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    fancy:fb_borderColor="#FFFFFF"
    fancy:fb_borderWidth="1dp"
    fancy:fb_defaultColor="#7ab800"
    fancy:fb_focusColor="#9bd823"
    fancy:fb_fontIconResource="&#xf04b;"
    fancy:fb_iconPosition="left"
    fancy:fb_radius="30dp"
    fancy:fb_text="SHUFFLE PLAY"
    fancy:fb_textColor="#FFFFFF" />

Вы можете получить эту кнопку с текстом и значком по центру:

введите описание изображения здесь

person dglozano    schedule 04.12.2018

arrow_upward
0
arrow_downward

Рисунки и текст на изображениях правильно центрированы по горизонтали.
Очевидно, что выбранный вами объект для рисования очень велик, поэтому в альбомной ориентации нет места для текста, а в альбомной ориентации текст сдвигается вниз.
Попробуйте использовать другой рисунок меньшего размера, и вы увидите и текст, и рисунок.
Вы можете установить:

android:padding="8dp"

так что drawable не совсем на верхнем краю кнопки.

person forpas    schedule 04.12.2018