Как показать текст на ImageButton?

У меня есть ImageButton, и я хочу показать на нем текст и изображение. Но когда я пробую эмулятор:

<ImageButton 
    android:text="OK" 
    android:id="@+id/buttonok" 
    android:src="@drawable/buttonok"
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" />

Я получаю изображение, но без текста. Как мне показать текст? Пожалуйста помогите!


person Võ Quang Hòa    schedule 16.12.2010    source источник


Ответы (12)


Поскольку вы не можете использовать android:text, я рекомендую вам использовать обычную кнопку и использовать один из составных чертежей. Например:

<Button 
    android:id="@+id/buttonok" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/buttonok"
    android:text="OK"/>

Вы можете разместить его где угодно, используя: drawableTop, drawableBottom, drawableLeft или drawableRight.

ОБНОВЛЕНИЕ

Для кнопки это тоже отлично работает. Ставить android:background нормально!

<Button
    android:id="@+id/fragment_left_menu_login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_bg"
    android:text="@string/login_string" />

У меня была эта проблема, и я отлично работаю.

person Cristian    schedule 16.12.2010
comment
Этот вариант работает лучше всего, если вам не нужен какой-то сумасшедший макет кнопок, например изображение, зажатое двумя текстовыми окнами. Первоначально я пробовал объект макета, определенный как widget.button, затем поместил в него изображение и текст, но после профилирования этого и макета кнопки выше я сэкономил почти 30% времени измерения, 50% времени макета и 15 -20% времени прорисовки на моем FramLayout и уменьшилось с 38 объектов до 26. Это довольно значительная экономия. - person Evan R.; 13.09.2012
comment
В чем разница между drawableTop, bottom и т. Д.? - person shim; 25.10.2012
comment
@shim drawableTop разместит drawable вверху кнопки, drawableRight внизу и т. д. - person Cristian; 25.10.2012
comment
Есть ли способ программно поставить drawableLeft? - person Renan Bandeira; 13.01.2014
comment
@RenanBandeira да, используйте setCompoundDrawables*() методы - person Cristian; 16.01.2014
comment
Как масштабировать изображение по размеру кнопки? Или он автоматически настроит изображение, чтобы оно соответствовало кнопке. - person Alston; 25.04.2014
comment
Тот же вопрос, что и у @Stallman, как совместить изображение с кнопкой и установить его влево? - person appiconhero.co; 21.09.2015
comment
Используйте android:drawableStart в сочетании с android:drawableLeft, чтобы вы также могли поддерживать макет RTL. (android:drawableStart был введен только в API 17, поэтому, если вы хотите поддерживать более старые версии, вам все равно необходимо предоставить запасной вариант для android:drawableLeft) - person Akshay Agarwal; 08.10.2015
comment
если вы хотите использовать VECTOR (srcCompat) в качестве объекта для рисования (drawableLeft, drawableRight и т. д.), вам необходимо переопределить класс Button, иначе приложение выйдет из строя на api ниже 19 stackoverflow.com/a/40250753/2163045 - person murt; 16.02.2017
comment
@EvanR. Не думаю, что изображение и текст размещаются в центре рядом друг с другом - это безумие. Это решение помещает значок в начало кнопки и выравнивает текст по центру. Безумие - это основная команда Android, которой плевать на такой простой компонент - person Farid; 03.04.2021

Технически возможно добавить подпись к ImageButton, если вы действительно этого хотите. Просто поместите TextView поверх ImageButton, используя FrameLayout. Только не забудьте сделать Textview кликабельным.

Пример:

<FrameLayout>
    <ImageButton
        android:id="@+id/button_x"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@null"
        android:scaleType="fitXY"
        android:src="@drawable/button_graphic" >
    </ImageButton>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clickable="false"
        android:text="TEST TEST" >
    </TextView>
</FrameLayout>
person UncleIstvan    schedule 19.07.2011
comment
Похоже, это не работает на Lollipop, хотя отлично работает на других. - person Hong; 18.07.2015
comment
Проблема с этим подходом заключается в том, что на текст не влияет состояние кнопки (отключено и т. Д.) ... если вы не сделаете это вручную. - person TheOperator; 13.07.2016

Ребята, мне нужно разработать кнопку настройки и выхода, я использовал приведенный ниже код. введите описание изображения здесь

    <Button
        android:id="@+id/imageViewLogout"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/size_30dp"
        android:layout_alignParentLeft="true"
        android:text="Settings"
        android:drawablePadding="10dp"
        android:background="@android:color/transparent"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/logout" />
person Naveed Ahmad    schedule 05.07.2017

Фактически, android:text не является аргументом, принимаемым ImageButton, но, если вы пытаетесь получить кнопку с указанным фоном (не по умолчанию для Android), используйте атрибут android:background xml или объявите его из класса с .setBackground();

person Samuel    schedule 16.12.2010

Вы можете использовать LinearLayout вместо Button, это расположение, которое я использовал в своем приложении

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="@color/mainColor"
        android:orientation="horizontal"
        android:padding="10dp">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/ic_cv"
            android:textColor="@color/offBack"
            android:textSize="20dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="@string/cartyCv"
            android:textColor="@color/offBack"
            android:textSize="25dp" />

    </LinearLayout>
person mxml    schedule 06.01.2017
comment
Отличное решение! onClick отлично работает и с LinearLayout. Не вижу причины, по которой мы должны использовать Button или ImageButton - person Sam; 17.06.2017

вместо этого вы можете использовать обычный Button и атрибут android: drawableTop (или left, right, bottom).

person Nathan Schwermann    schedule 16.12.2010
comment
Я нашел этот ответ для меня самым быстрым и эффективным решением для добавления изображения, такого как значок, рядом с текстом кнопки. - person mcfisty; 06.07.2021

Я решил это, поместив ImageButton и TextView внутрь LinearLayout с вертикальной ориентацией. Работает отлично!

<LinearLayout
    android:id="@+id/linLayout"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/camera_ibtn"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:background="@drawable/camera" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/take_pic"
        android:textColor="#FFFFFF"
        android:textStyle="bold" />

</LinearLayout>
person Rafael Dvl    schedule 03.05.2015

Лучший способ:

<Button 
android:text="OK" 
android:id="@+id/buttonok" 
android:background="@drawable/buttonok"
android:layout_width="match_parent" 
android:layout_height="wrap_content"/>
person eloytxo    schedule 18.10.2012
comment
Это не похоже на то, что изначально пробовал OP. - person PhonicUK; 18.10.2012
comment
Извините, я ошибся своим кодом. Это был не ImageButton, а просто Button. - person eloytxo; 19.10.2012

Вот хороший пример круга:

drawable/circle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#ff87cefa"/>

    <size
        android:width="60dp"
        android:height="60dp"/>
</shape>

А затем кнопку в вашем xml файле:

<Button
    android:id="@+id/btn_send"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/circle"
    android:text="OK"/>
person basickarl    schedule 10.05.2015

Вот решение

<LinearLayout
    android:id="@+id/buttons_line1"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageButton
        android:id="@+id/btn_mute"
        android:src="@drawable/btn_mute"
        android:background="@drawable/circle_gray"
        android:layout_width="60dp"
        android:layout_height="60dp"/>
    <ImageButton
        android:id="@+id/btn_keypad"
        android:layout_marginLeft="50dp"
        android:src="@drawable/btn_dialpad"
        android:background="@drawable/circle_gray"
        android:layout_width="60dp"
        android:layout_height="60dp"/>
    <ImageButton
        android:id="@+id/btn_speaker"
        android:layout_marginLeft="50dp"
        android:src="@drawable/btn_speaker"
        android:background="@drawable/circle_gray"
        android:layout_width="60dp"
        android:layout_height="60dp"/>
</LinearLayout>
<LinearLayout
    android:layout_below="@+id/buttons_line1"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_marginTop="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:text="mute"
        android:clickable="false"
        android:textAlignment="center"
        android:textColor="@color/Grey"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>
    <TextView
        android:text="keypad"
        android:clickable="false"
        android:layout_marginLeft="50dp"
        android:textAlignment="center"
        android:textColor="@color/Grey"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>
    <TextView
        android:text="speaker"
        android:clickable="false"
        android:layout_marginLeft="50dp"
        android:textAlignment="center"
        android:textColor="@color/Grey"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>
</LinearLayout>
person Black Shaman    schedule 22.09.2020

Лучший способ показать Text на button (с изображением)

пример текста на кнопке с фоном изображения

Ваш вопрос: как показать text на imagebutton?

Ответ: нельзя отображать text с imageButton. Метод, указывающий в Принятый ответ, также не работает.

так как

Если вы используете android:drawableLeft="@drawable/buttonok", вы не можете установить drawable в center из button.

Если вы используете android:background="@drawable/button_bg", то color вашего drawable будет изменено.

В мире Android есть тысячи вариантов сделать это. Но здесь я предлагаю лучшую альтернативу, с моей точки зрения. (увидеть ниже)

Решение: используйте cardView с LinearLayout

Ваш drawable/image используется в LinearLayout, потому что он показан в центре. А с помощью textView вы можете установить text на это. Мы делаем cardView фон для transparent.

<androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="99dp"
                android:layout_margin="16dp"
                app:cardBackgroundColor="@android:color/transparent"
                app:cardElevation="0dp"
                app:cardUseCompatPadding="true">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/your_selected_image"
                    >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Happy Coding"
                        android:textSize="33sp"
                        android:gravity="center"
                        >
                    </TextView>

                </LinearLayout>
            </androidx.cardview.widget.CardView>

здесь я объясняю некоторые термины:

app:cardBackgroundColor="@android:color/transparent" для создания прозрачного фона cardView

app:cardElevation="0dp" для скрытия линий рельефа вокруг cardView

app:cardUseCompatPadding="true" это обеспечивает фактический размер cardView. Всегда используйте это, когда используете cardView

установите свой image/drawable в LinearLayout в качестве фона.

Извините за мой плохой английский.

Удачного кодирования :)

person AG-Developer    schedule 06.12.2020

ImageButton не может иметь text (или, по крайней мере, android:text не указан в его атрибутах).

Уловка заключается в следующем:

Похоже, вам нужно использовать Button (и посмотрите drawableTop или setCompoundDrawablesWithIntrinsicBounds(int,int,int,int)).

person Ajay Venugopal    schedule 22.12.2014