Tombol Android dengan ikon dan teks

93

Saya memiliki beberapa tombol seperti ini di aplikasi saya:

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

Saya mencoba membuat tombol yang sama dengan teks dan ikon. android: drawableLeft tidak berfungsi untuk saya (Mungkin bisa, tapi saya tidak tahu cara menyetel ketinggian maksimal ke ikon).

Jadi saya membuat LinearLayout dengan ImageView dan TextView dan membuatnya berfungsi seperti tombol:

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

Tombol baru saya persis seperti yang saya inginkan (ukuran font, ikon dan penempatan teks). Tetapi tidak terlihat seperti tombol default saya:

masukkan deskripsi gambar di sini

Jadi saya mencoba, untuk mengubah latar belakang dan warna teks Tombol baru saya:

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());

Ini memberikan hasil yang aneh, tombol lama saya, menjadi kacau:

masukkan deskripsi gambar di sini

Ketika saya mengubah urutan kedua tombol ini dalam XML, jadi "tombol baru" berjalan lebih dulu, itu membuat hasil yang aneh:

masukkan deskripsi gambar di sini

Sekarang saya perhatikan, bahwa ketika saya mencoba menekan tombol lama, yang baru ditekan.

Ada ide?

android android-layout android-button Dusan
sumber

Jawaban:

284

Coba yang ini.

<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"/>
Liem Vo
sumber
3
Itu terlihat persis seperti yang saya inginkan, tetapi saya ingin menggunakan ikon saya sendiri, bukan yang Android default. Ikon saya berukuran lebih besar. Apakah itu berarti, saya perlu membuat bitmap yang lebih kecil untuk setiap resolusi? Apakah ada parameter yang memungkinkan saya mengontrol ukuran ikon?
Dusan
Itu betul. Anda perlu membuat ukuran gambar yang berbeda untuk setiap resolusi
Liem Vo
Ok, terima kasih atas bantuannya, tapi sekarang saya punya pertanyaan lain ... Ikon saya terang, karena teksnya putih pada tombol gelap, seperti yang Anda lihat pada gambar di pertanyaan saya. Aplikasi disetel, untuk menggunakan tema yang tersedia di versi android. Contoh saya berasal dari android 4.3. Saat aplikasi berjalan di Android 2.3.3, tombol default berwarna terang dengan teks gelap. Agak seperti tombol di gambar pertama saya. Apakah ada cara untuk memberikan bitmap alternatif untuk ikon yang berjalan di perangkat lama. Saya harap Anda memahami pertanyaan saya :)
Dusan
Itu pertanyaan yang bagus. Anda dapat menentukan gaya yang berbeda untuk ikon Anda, teks lebih dingin dalam gaya untuk setiap tingkat API (itu berarti versi OS Android). Anda dapat melihat folder values-v11, values-v14.
Liem Vo
2
Anda juga dapat menambahkan padding ke ikon android: drawablePadding = ""
Asad Mirza
15

Untuk menambahkan gambar ke kiri, kanan, atas atau bawah, Anda dapat menggunakan atribut seperti ini:

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

Kode sampel diberikan di atas. Anda juga dapat melakukannya dengan menggunakan tata letak relatif.

pengguna3515854
sumber
Bagaimana Saya melakukan ini secara programatik
Sujay UN
1
Anda bisa mengatakan android:drawableStartsebagai pengganti Kiri, dan android:drawableEndbukannya Kanan.
Simão Garcia
@ SimãoGarcia * seharusnya. Mulai harus mengganti kanan dan ujung harus menggantikan kiri di semua tempat. Ini untuk memastikan bahwa bacaan dari kanan ke kiri serta dari kiri ke kanan tersedia karena beberapa negara lain membaca dengan cara yang berbeda.
Carson J.
11

Untuk siapapun yang ingin melakukan ini secara dinamis maka setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)pada objek tombol akan membantu.

Sampel 

Button search = (Button) findViewById(R.id.yoursearchbutton);
search.setCompoundDrawables('your_drawable',null,null,null);
Kennedy Nyaga
sumber
5
Penggunaan setCompoundDrawables tidak mencerminkan UI. Gunakan setCompoundDrawablesWithIntrinsicBounds sebagai gantinya, dan itu berhasil.
Aldo
5

Inilah yang Anda inginkan. 

<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" />
Stackoverflower
sumber
4

Anda dapat menggunakan Perpustakaan Komponen Material dan MaterialButtonkomponen.
Gunakan atribut app:icondan app:iconGravity="start".

Sesuatu seperti:

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

masukkan deskripsi gambar di sini

Gabriele Mariotti
sumber
Perhatikan bahwa jika Anda memiliki tema desain material untuk aplikasi Anda, widget Tombol standar meningkat secara otomatis sebagai MaterialButton. Per di sini - material.io/develop/android/components/buttons
dodgy_coder
2

Jawaban @Liem Vo benar jika Anda menggunakan android.widget.Button tanpa menimpa. Jika Anda mengganti tema Anda menggunakan MaterialComponents, ini tidak akan menyelesaikan masalah.

Jadi, jika Anda

  1. Menggunakan com.google.android.material.button.MaterialButton atau
  2. Mengganti AppTheme menggunakan MaterialComponents

Gunakan app: parameter ikon .

<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" />
Chamin Wickramarathna
sumber