Bagaimana cara menunjukkan teks pada ImageButton?

127

Saya punya ImageButtondan saya ingin menunjukkan teks dan gambar di atasnya. Tetapi ketika saya mencoba emulator:

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

Saya mendapatkan gambar tetapi tanpa teks. Bagaimana saya bisa menampilkan teks? Tolong bantu aku!

android imagebutton

— Võ Quang Hòa
sumber

271

Karena Anda tidak dapat menggunakan, android:textsaya sarankan Anda untuk menggunakan tombol normal dan menggunakan salah satu drawable majemuk. Misalnya:

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

Anda dapat menempatkan ditarik dimanapun Anda inginkan dengan menggunakan: drawableTop, drawableBottom, drawableLeftataudrawableRight .

MEMPERBARUI

Untuk sebuah tombol, ini juga berfungsi dengan sangat baik. Puting android:backgroundbaik-baik saja!

<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" />

Saya baru saja mengalami masalah ini dan bekerja dengan sempurna.

— Cristian
sumber

2

Opsi ini berfungsi paling baik, kecuali jika Anda memerlukan semacam tata letak tombol yang terlihat gila, seperti gambar pasir yang diklik oleh dua tampilan teks. Saya awalnya mencoba objek tata letak yang didefinisikan sebagai widget.button, lalu meletakkan tampilan gambar dan tampilan teks di dalamnya, tetapi setelah membuat profil itu, dan tata letak Tombol di atas, saya menghemat hampir 30% dalam waktu pengukuran, 50% dalam waktu tata letak, dan 15 -20% di Draw time pada FramLayout saya, dan beralih dari 38 objek ke 26. itu penghematan yang cukup besar.

— Evan R.

3

@shim drawableTop akan menempatkan drawable di bagian atas tombol, drawableRight di bagian bawah, dll.

— Cristian

1

@RenanBandeira ya, uset setCompoundDrawables*()methods

— Cristian

6

Bagaimana saya bisa mengatur skala gambar agar pas dengan tombol? Atau secara otomatis akan menyesuaikan gambar agar sesuai dengan tombol.

— Alston

3

Pertanyaan yang sama dengan @Stallman, bagaimana cara menyesuaikan gambar dengan tombol, dan mengaturnya ke kiri?

— Khuong

63

Secara teknis dimungkinkan untuk menempatkan teks pada ImageButtonjika Anda benar-benar ingin melakukannya. Hanya menempatkan TextViewatas ImageButtonmenggunakan FrameLayout. Ingatlah untuk tidak membuat Textviewklik.

Contoh:

<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>

— UncleIstvan
sumber

Ini tampaknya tidak bekerja pada Lollipop meskipun bekerja dengan baik pada orang lain.

— Hong

2

Masalah dengan pendekatan ini adalah bahwa teks tidak terpengaruh oleh status tombol (dinonaktifkan dll.) ... kecuali Anda melakukannya secara manual.

— TheOperator

9

Guys saya perlu mengembangkan tombol pengaturan dan logout, saya menggunakan kode di bawah ini.

    <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" />

— Naveed Ahmad
sumber

4

Sebenarnya, android:textbukan argumen yang diterima oleh ImageButton tetapi, Jika Anda mencoba untuk mendapatkan tombol dengan latar belakang yang ditentukan (bukan Android bawaan) gunakan android:backgroundatribut xml, atau deklarasikan dari kelas dengan.setBackground();

— Samuel
sumber

4

Anda dapat menggunakan LinearLayoutdaripada menggunakan Buttonitu adalah pengaturan yang saya gunakan di aplikasi saya

 <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>

— mxml
sumber

Solusi bagus! onClick berfungsi dengan baik di LinearLayout juga. Tidak melihat alasan mengapa kita harus menggunakan Tombol atau ImageButton

— Sam

2

Anda dapat menggunakan Buttonatribut regular dan android: drawableTop (atau kiri, kanan, bawah).

— Nathan Schwermann
sumber

2

Cara terbaik:

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

— eloytxo
sumber

2

Tampaknya ini tidak berbeda dengan apa yang awalnya dicoba OP.

— PhonicUK

Maaf, saya keliru kode saya. Bukankah ImageButton, hanya Button.

— eloytxo

2

Saya memecahkan ini dengan meletakkan ImageButtondan TextViewdi dalam LinearLayoutdengan orientasi vertikal. Bagus sekali!

<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>

— Rafael Dvl
sumber

1

Inilah contoh lingkaran yang bagus:

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>

Dan kemudian tombol di file xml Anda:

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

— K - Toksisitas dalam SO meningkat.
sumber

0

ImageButtontidak dapat memiliki text(atau, setidaknya,android:text tidak tercantum dalam atributnya).

Triknya adalah:

Sepertinya Anda perlu menggunakan Button(dan melihat drawableTopatau setCompoundDrawablesWithIntrinsicBounds(int,int,int,int)).

— Ajay Venugopal
sumber