Penampilan Button terkadang sangat membosankan karena ya hanya menampilkan button tanpa aksesoris. Nah pada postingan kali ini akan membahas tentang bagaimana memadukan antara Button, Image dan Text. Ya jadi didalam sebuah button terdapat image dan text. Bagaimana menarik bukan? Berikut contohnya:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.android.buttonimagetext.MainActivity" android:orientation="horizontal" android:background="@drawable/back"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button with Image and Text" /> <LinearLayout android:paddingTop="100dp" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="300dp" android:layout_height="wrap_content" android:drawableLeft="@drawable/oke1" android:background="#a486c6" android:text="android:drawableLeft" /> <Button android:layout_width="300dp" android:layout_height="wrap_content" android:drawableTop="@drawable/oke2" android:background="#ccf0e2" android:text="android:drawabletop" /> <Button android:layout_width="300dp" android:layout_height="wrap_content" android:drawableBottom="@drawable/oke3" android:background="#FFF" android:text="android:drawablebottom"/> <Button android:layout_width="300dp" android:layout_height="wrap_content" android:drawableRight="@drawable/oke4" android:background="#eb6f6f" android:text="android:drawableright"/> </LinearLayout> </RelativeLayout>
Bingung dengan source code diatas? Berikut penjelasannya:
Jadi yang menjadi fokus disini ialah sub-elemen drawable. "drawable-left" atau "drawable-right" ataupun yang lainnya digunakan untuk memasukkan image yang akan digunakan untuk suatu tombol. Hal ini dapat dikombinasikan dengan text. Saya memadukan warna masing dasar foto dari folder res/drawable/ dengan background sehingga akan menjadi seperti ini.
Seperti itulah penjelasan singkatnya. Sekian Terima Kasih.
Refrensi diperoleh dari berbagai sumber
ConversionConversion EmoticonEmoticon