Кнопка со значком и текстом по центру

Я хочу иметь кнопку со значком и текстом рядом со значком в центре. Мне удалось сделать это с помощью отступов, но, поскольку у Android много разных размеров экрана, он плохо работает на маленьких экранах. Это мой код:

 <Button
        android:id="@+id/scanbtn"
        android:text="@string/scan_btn_text"
        android:textAlignment="center"
        android:fontFamily="@font/open_sans_light"
        android:drawableStart="@drawable/ic_photo_camera"
        android:paddingStart="100dp"
        android:paddingEnd="120dp"
        android:textAllCaps="false"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_marginEnd="15dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="25dp"
        android:background="@drawable/border"
        android:textColor="@color/white"
        android:textSize="19sp"
        android:transitionName="use/scanbtn"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="parent" />

вот так выглядит моя кнопка. Я хочу, чтобы она выглядела именно так, но с этим кодом она не работает на устройствах меньшего размера

Это моя кнопка. Пожалуйста, покажите мне другой (лучший) способ сделать эту кнопку одинаковой на всех размерах экрана.


android android-button material-design material-components-android material-components
person Kratos    schedule 28.07.2019    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Просто оберните TextView с помощью FrameLayout и используйте Framelayout как кнопку.

<FrameLayout
        android:background="#E06666"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:background="@null"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/icon"
            android:text="Scan"
            android:layout_gravity="center"
            android:gravity="center"
            />
 </FrameLayout>

Вот мой результат:

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

person TaQuangTu    schedule 28.07.2019
comment
Ой, приятель, если вы можете сделать пробел между значком и текстом, я принимаю ваш ответ. таким образом это выглядит очень некрасиво, потому что текст и значок почти касаются друг друга - person Kratos; 28.07.2019
comment
хм, может быть, я могу добавить отступы для рисования .. дайте мне посмотреть - person Kratos; 28.07.2019
comment
да, я не могу поместить текст в центр и значок слева от текста, как на моем изображении. android:drawablePadding заставляет текст и значок идти с противоположных сторон, а центр кнопки остается пустым. Вы знаете, как мы можем это решить? - person Kratos; 28.07.2019
comment
Решил это, добавив android:paddingRight в framelayout и drawableppadding в Textview. Если кому-то еще нужно - person Kratos; 28.07.2019

arrow_upward
1
arrow_downward

Сохраняйте отступы кнопок на разных размерах экрана.

--- Создать папки с разными значениями

values, values-sw350dp, values-sw480dp, values-sw600dp, values-sw720dp

-- Добавьте файл dimens.xml в каждую папку.

-- Добавить измерение с одинаковым именем, но разными значениями в каждый файл

<!-- Add this to dimens.xml in values folder -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="button_padding_start">100dp</dimen>
</resources> 

<!-- Add this to dimens.xml in values-sw350dp folder -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="button_padding_start">150dp</dimen>
</resources>

<!-- Do the same for all other folders and keep increasing the value of button_padding_start -->

Затем укажите значение из вашего макета вместо использования фиксированного dp и позвольте Android выбрать лучший выбор в зависимости от размера экрана, чтобы сохранить одинаковый вид на разных устройствах.

<!-- paddingEnd may not be necessary -->
android:paddingStart="@dimen/button_padding_start"

Узнайте больше о поддержке различных экранов здесь

person Giddy Naya    schedule 28.07.2019
comment
Да, приятель, это выглядит как хорошая идея! Постараюсь реализовать это, и если это сработает, я приму и поддержу ваш ответ. Ваше здоровье - person Kratos; 28.07.2019
comment
Нашел лучший ответ для этого, но поддержит вашу идею, она умная - person Kratos; 28.07.2019

arrow_upward
0
arrow_downward

Используйте следующий код и удалите все отступы из XML кнопки: android:drawableLeft="@drawable/image

Надеюсь, вы получите ответ. Пожалуйста, выберите правильный ответ.

person Dharmik Raval    schedule 28.07.2019
comment
drawableStart в моем коде - это то же самое, что и ваш drawableStart - person Kratos; 28.07.2019
comment
Это не запуск, это drawableLeft, это встроенная функция из Android XML. - person Dharmik Raval; 28.07.2019
comment
чувак, прочитай мой комментарий еще раз и погугли об этом. DrawableLeft == DrawableStart - person Kratos; 28.07.2019
comment
Если вы хотите, чтобы оба находились в центре, а затем не использовали drawablestart , вы можете сделать это, применив гравитацию к центру. - person Dharmik Raval; 28.07.2019
comment
Пожалуйста, четко сформулируйте свой вопрос, что именно вы хотите. - person Dharmik Raval; 28.07.2019
comment
Если вы хотите, чтобы он поместил значок слева, не используйте начало отступа. - person Dharmik Raval; 28.07.2019
comment
все в порядке, я нашел решение. ты в любом случае - person Kratos; 28.07.2019

arrow_upward
0
arrow_downward

Просто используйте MaterialButton< /strong> с атрибутом app:iconGravity.
Используйте значение textStart или textEnd.

    <!-- Icon gravity textStart -->
    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/...."
        app:iconGravity="textStart"
        android:text="@string/..."
        .../>

    <!-- Icon gravity textEnd -->
    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/..."
        app:iconGravity="textEnd"
        android:text="@string/...."/>

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

person Gabriele Mariotti    schedule 29.09.2019