Как да покажа текста на 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. Не мисля, че изображението и текстът да бъдат поставени в центъра, един до друг, е лудост. Това решение поставя икона в началото на бутона и подравнява текста в средата. Craziness е основният екип на 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 (или ляво, дясно, долу).

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