Кнопка Android со значком и текстом


92

В моем приложении есть такие кнопки:

    <Button
        android:id="@+id/bSearch"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="Search"
        android:textSize="24sp" />

Я пытаюсь создать такую ​​же кнопку с текстом и значком. android: drawableLeft у меня не работает (может быть, но я не знаю, как установить максимальную высоту значка).

Итак, я создал LinearLayout с ImageView и TextView и заставил его действовать как кнопку:

    <LinearLayout
        android:id="@+id/bSearch2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/btn_default"
        android:clickable="true"
        android:padding="16dp"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:adjustViewBounds="true"
            android:maxHeight="30dp"
            android:maxWidth="30dp"
            android:scaleType="fitCenter"
            android:src="@drawable/search_icon" />

        <TextView
            android:id="@+id/tvSearchCaption"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textSize="24sp"
            android:paddingRight="30dp"
            android:gravity="center"
            android:text="Search" />
    </LinearLayout>

Моя новая кнопка - это именно то, что я хочу (размер шрифта, значок и размещение текста). Но это не похоже на мои кнопки по умолчанию:

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

Итак, я попытался изменить фон и цвет текста моей новой кнопки:

Button Search = (Button) findViewById(R.id.bSearch);
LinearLayout bSearch2 = (LinearLayout) findViewById(R.id.bSearch2);
bSearch2.setBackground(bSearch.getBackground());
TextView tvSearchCaption = (TextView)findViewById(R.id.tvSearchCaption);
tvSearchCaption.setTextColor(bSearch.getTextColors().getDefaultColor());

Это дает странный результат, моя старая кнопка перепуталась:

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

Когда я меняю порядок этих двух кнопок в XML, так что «новая кнопка» идет первой, получается еще один странный результат:

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

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

Любые идеи?

Ответы:


283

Попробуй это.

<Button
    android:id="@+id/bSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:text="Search"
    android:drawableLeft="@android:drawable/ic_menu_search"
    android:textSize="24sp"/>

3
Это выглядит именно так, как я хочу, но я хочу использовать свои собственные значки, а не стандартные значки Android. Мои значки большего размера. Означает ли это, что мне нужно создавать растровые изображения меньшего размера для каждого разрешения? Есть ли какой-то параметр, который позволяет мне контролировать размер значка?
Душан

Это правильно. Вам нужно создать изображение разного размера для каждого разрешения
Liem Vo

Хорошо, спасибо за вашу помощь, но теперь у меня есть еще один вопрос ... Мои значки светлые, потому что текст белый на темной кнопке, как вы можете видеть на изображениях в моем вопросе. Приложение настроено на использование темы, доступной в версии для Android. Мои примеры взяты из android 4.3. Когда приложение работает на Android 2.3.3, кнопки по умолчанию светлые с темным текстом. Что-то вроде кнопки на моем первом изображении. Есть ли способ предоставить альтернативное растровое изображение для значка, работающего на старых устройствах. Надеюсь, вы поняли мой вопрос :)
Душан

Это хороший вопрос. Вы можете определить другой стиль для своего значка, текстовый кулер в стиле для каждого уровня API (это означает версию ОС Android). Вы можете увидеть папки values-v11, values-v14.
Liem Vo

2
Вы также можете добавить отступы к значку android: drawablePadding = ""
Асад Мирза

15

Чтобы добавить изображение слева, справа, сверху или снизу, вы можете использовать такие атрибуты:

android:drawableLeft
android:drawableRight
android:drawableTop
android:drawableBottom

Пример кода приведен выше. Вы также можете добиться этого, используя относительную компоновку.


Как мне сделать это программно
Суджай ООН

1
Вы могли бы сказать android:drawableStartвместо Left и android:drawableEndвместо Right.
Simão Garcia

@ SimãoGarcia * должен. Начало должно заменять правое, а конец должно заменять левое во всех местах. Это необходимо для обеспечения возможности чтения справа налево и слева направо, поскольку в некоторых других странах читается по-другому.
Carson J.

11

Для тех, кто хочет делать это динамически, тогда setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)на кнопках объект поможет.

Образец

Button search = (Button) findViewById(R.id.yoursearchbutton);
search.setCompoundDrawables('your_drawable',null,null,null);

5
Использование setCompoundDrawables не отразилось на пользовательском интерфейсе. Вместо этого использовал setCompoundDrawablesWithIntrinsicBounds, и это сработало.
Aldo

5

Это то, чего вы действительно хотите.

<Button
       android:id="@+id/settings"
       android:layout_width="190dp"
       android:layout_height="wrap_content"
       android:layout_gravity="center_horizontal"
       android:background="@color/colorAccent"
       android:drawableStart="@drawable/ic_settings_black_24dp"
       android:paddingStart="40dp"
       android:paddingEnd="40dp"
       android:text="settings"
       android:textColor="#FFF" />

4

Вы можете использовать Библиотеку компонентов материала и MaterialButtonкомпонент.
Используйте app:iconи app:iconGravity="start"атрибуты.

Что-то типа:

  <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/..."
        app:iconGravity="start"
        ../>

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


Обратите внимание, что если у вас есть тема материального дизайна для вашего приложения, стандартный виджет Button автоматически раздувается как MaterialButton. За здесь - material.io/develop/android/components/buttons
dodgy_coder

2

Ответ @Liem Vo правильный, если вы используете android.widget.Button без какого-либо переопределения. Если вы переопределяете свою тему с помощью MaterialComponents, это не решит проблему.

Так что если ты

  1. Используя com.google.android.material.button.MaterialButton или
  2. Переопределение темы приложения с использованием компонентов материала

Используйте параметр app: icon .

<Button
    android:id="@+id/bSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:text="Search"
    android:textSize="24sp"
    app:icon="@android:drawable/ic_menu_search" />
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.