Android: menggabungkan teks & gambar pada Tombol atau ImageButton

Saya mencoba memiliki gambar (sebagai latar belakang) pada tombol dan menambahkan secara dinamis, tergantung pada apa yang terjadi selama waktu berjalan, beberapa teks di atas / di atas gambar.

Jika saya menggunakan, ImageButtonsaya bahkan tidak memiliki kemungkinan untuk menambahkan teks. Jika saya menggunakan Buttonsaya dapat menambahkan teks tetapi hanya mendefinisikan gambar dengan android:drawableBottomdan atribut XML yang sama seperti yang didefinisikan di sini .

Namun atribut ini hanya menggabungkan teks & gambar dalam dimensi x dan y, artinya saya dapat menggambar gambar di sekitar teks saya, tetapi tidak di bawah / di bawah teks saya (dengan sumbu z didefinisikan sebagai keluar dari tampilan).

Ada saran tentang cara untuk melakukan hal ini? Satu ide adalah memperluas Buttonatau ImageButtonmenimpa draw()-metode. Tetapi dengan tingkat pengetahuan saya saat ini, saya tidak benar-benar tahu bagaimana melakukan ini (rendering 2D). Mungkin seseorang dengan pengalaman lebih tahu solusi atau setidaknya beberapa petunjuk untuk memulai?

Anda dapat memanggil setBackground()a Buttonuntuk mengatur latar belakang tombol.

Teks apa pun akan muncul di atas latar belakang.

Jika Anda mencari sesuatu yang serupa di xml ada: android:backgroundatribut yang berfungsi dengan cara yang sama.

Untuk pengguna yang hanya ingin meletakkan Background, Ikon-Gambar dan Teks dalam satu Button dari file yang berbeda: Atur pada Buttonlatar belakang, drawableTop / Bottom / Rigth / Kiri dan atribut padding .

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/home_btn_test"
        android:drawableTop="@drawable/home_icon_test"
        android:textColor="#FFFFFF"
        android:id="@+id/ButtonTest"
        android:paddingTop="32sp"
        android:drawablePadding="-15sp"
        android:text="this is text"></Button>

Untuk pengaturan yang lebih canggih, Anda juga dapat menggunakan RelativeLayout(atau tata letak lainnya) dan membuatnya dapat diklik.

Tutorial: Tutorial hebat yang mencakup kedua kasus: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx

Ada solusi yang jauh lebih baik untuk masalah ini.

Hanya mengambil normal Buttondan menggunakan drawableLeftdan gravityatribut.

<Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/my_btn_icon"
  android:gravity="left|center_vertical" />

Dengan cara ini Anda mendapatkan tombol yang menampilkan ikon di sisi kiri tombol dan teks di situs kanan ikon yang berpusat vertikal .

     <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:background="@drawable/home_button"
            android:drawableLeft="@android:drawable/ic_menu_edit"
            android:drawablePadding="6dp"
            android:gravity="left|center"
            android:height="60dp"
            android:padding="6dp"
            android:text="AndroidDhina"
            android:textColor="#000"
            android:textStyle="bold" />

Cukup gunakan LinearLayout dan anggap itu Button- pengaturan backgrounddan dapat diklik adalah kuncinya:

<LinearLayout
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:drawable/btn_default"
    android:clickable="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:src="@drawable/image" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:text="Do stuff" />
</LinearLayout>

ganti saja

android:background="@drawable/icon"

dengan

android:background="@android:color/transparent"
android:drawableTop="@drawable/[your background image here]"

izz trik yang cukup bagus ..;)

Saya mengambil pendekatan yang berbeda dari yang dinyatakan di sini, dan itu bekerja dengan sangat baik, jadi saya ingin membagikannya.

Saya menggunakan Style untuk membuat tombol kustom dengan gambar di sebelah kiri dan teks di kanan-tengah. Cukup ikuti 4 "langkah mudah" di bawah:

I. Buat 9 tambalan Anda menggunakan setidaknya 3 file PNG berbeda dan alat yang Anda miliki di: /YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch. Setelah ini, Anda harus memiliki:

button_normal.9.png, button_focused.9.png dan button_pressed.9.png

Kemudian unduh atau buat ikon PNG 24x24.

ic_your_icon.png

Simpan semua dalam folder / drawable di proyek Android Anda.

II Buat file XML bernama button_selector.xml di proyek Anda di bawah drawable / folder. Negara harus seperti ini:

<item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
<item android:state_focused="true" android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />

AKU AKU AKU. Buka nilai / folder dan buka atau buat file styles.xml dan buat kode XML berikut:

<style name="ButtonNormalText" parent="@android:style/Widget.Button">
    <item name="android:textColor" >@color/black</item>
    <item name="android:textSize" >12dip</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:height" >44dip</item>
    <item name="android:background" >@drawable/button_selector</item>
    <item name="android:focusable" >true</item>
    <item name="android:clickable" >true</item>
</style>

<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
    <item name="android:drawableLeft" >@drawable/ic_your_icon</item>
</style>

ButtonNormalTextWithIcon adalah "gaya anak" karena memperluas ButtonNormalText ("gaya induk").

Perhatikan bahwa mengubah drawableLeft dalam gaya ButtonNormalTextWithIcon menjadi drawableRight, drawableTop atau drawableBottom Anda dapat menempatkan ikon di posisi lain sehubungan dengan teks.

IV. Buka tata letak / folder tempat Anda memiliki XML untuk UI dan buka Tombol tempat Anda ingin menerapkan gaya dan buat tampilannya seperti ini:

<Button android:id="@+id/buttonSubmit" 
android:text="@string/button_submit" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
style="@style/ButtonNormalTextWithIcon" ></Button>

Dan ... voila! Anda mendapatkan tombol Anda dengan gambar di sebelah kiri.

Bagi saya, ini adalah cara yang lebih baik untuk melakukannya! karena melakukannya dengan cara ini Anda dapat mengelola ukuran teks tombol secara terpisah dari ikon yang ingin Anda tampilkan dan menggunakan latar belakang yang sama untuk beberapa tombol dengan ikon berbeda yang menghormati Pedoman Android UI menggunakan gaya.

Anda juga dapat membuat tema untuk Aplikasi Anda dan menambahkan "gaya induk" ke dalamnya sehingga semua tombol terlihat sama, dan menerapkan "gaya anak" dengan ikon hanya di mana Anda membutuhkannya.

 <Button android:id="@+id/imeageTextBtn" 
        android:layout_width="240dip"
        android:layout_height="wrap_content"
        android:text="Side Icon With Text Button"
        android:textSize="20sp"
        android:drawableLeft="@drawable/left_side_icon"         
        />   

Anda dapat menggunakan drawableTop(juga drawableLeft, dll) untuk gambar dan mengatur teks di bawah gambar dengan menambahkangravity left|center_vertical

<Button
            android:id="@+id/btn_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableTop="@drawable/videos"
            android:gravity="left|center_vertical"
            android:onClick="onClickFragment"
            android:text="Videos"
            android:textColor="@color/white" />

Pembaruan Penting

Jangan gunakan normal android:drawableLeftdll ... dengan drawable vektor, kalau tidak akan crash di versi API yang lebih rendah . (Saya telah menghadapinya di aplikasi langsung)

Untuk digambar vektor

Jika Anda menggunakan gambar vektor, maka Anda harus

• Sudahkah Anda bermigrasi ke AndroidX? jika tidak, Anda harus bermigrasi ke AndroidX terlebih dahulu. Sangat sederhana, lihat apa itu androidx, dan bagaimana cara bermigrasi?

• Itu dirilis dalam versi 1.1.0-alpha01, jadi versi appcompat harus setidaknya 1.1.0-alpha01. Versi terbaru saat ini adalah 1.1.0-alpha02, gunakan versi terbaru untuk keandalan yang lebih baik, lihat catatan rilis - tautan .

  implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'

• Gunakan AppCompatTextView/ AppCompatButton/AppCompatEditText

• Gunakan app:drawableLeftCompat, app:drawableTopCompat, app:drawableRightCompat, app:drawableBottomCompat, app:drawableStartCompatdanapp:drawableEndCompat

Untuk drawable biasa

Jika Anda tidak perlu digambar vektor, maka Anda bisa

• penggunaan android:drawableLeft, android:drawableRight, android:drawableBottom,android:drawableTop
• Anda dapat menggunakan kelas reguler TextView, Button& EditTextatau AppCompat.

Anda dapat mencapai Output seperti di bawah ini -

Mungkin solusi saya cocok untuk banyak pengguna, saya harap begitu.

Yang saya sarankan adalah membuat TextView dengan gaya Anda. Ini berfungsi dengan baik untuk saya, dan telah mendapatkan semua fitur, seperti tombol.

Pertama-tama mari kita buat gaya tombol, yang dapat Anda gunakan di mana-mana ... Saya membuat button_with_hover.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#8dbab3" />
            <gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F"  />
        </shape>

        <!--#284682;-->
        <!--border-color: #223b6f;-->
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#284682" />
            <solid android:color="#284682"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="@color/ControlColors" />
            <gradient android:angle="-90" android:startColor="@color/ControlColors" android:endColor="@color/ControlColors" />
        </shape>
    </item>

</selector>

Kedua, Mari kita buat tombol textview.

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dip"
    android:layout_gravity="right|bottom"
    android:gravity="center"
    android:padding="12dip"
    android:background="@drawable/button_with_hover"
    android:clickable="true"
    android:drawableLeft="@android:drawable/btn_star_big_off"
    android:textColor="#ffffffff"
    android:text="Golden Gate" />

Dan ini hasilnya. Kemudian gaya tombol kustom Anda dengan warna atau properti dan margin lainnya. Semoga berhasil

<Button
     android:id="@+id/groups_button_bg"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="Groups"
     android:drawableTop="@drawable/[image]" />


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

http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-android/

Kode ini berfungsi dengan baik untuk saya

<LinearLayout
    android:id="@+id/choosePhotosView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clickable="true"
    android:background="@drawable/transparent_button_bg_rev_selector">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/choose_photo"/>

     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:text="@string/choose_photos_tv"/>

</LinearLayout>

Anda bisa menggunakan ini:

  <Button
                    android:id="@+id/reset_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Reset all"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/undo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Undo"
                    android:textColor="#ffffff" />

karena saya telah menempatkan gambar backgrounddan juga menambahkan teks ..!

<Button android:id="@+id/myButton" 
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="Image Button"
    android:drawableTop="@drawable/myimage"         
    />  

Atau Anda dapat secara terprogram:

Drawable drawable = getResources.getDrawable(R.drawable.myimage);
drawable.setBounds(0, 0, 60, 60);
myButton.setCompoundDrawables(null, drawable, null, null);//to the Top of the Button

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/temp"
        />