Ticker

6/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

Tips Membuat Background Tombol Gradasi Warna Pada Android Studio

 Sebuah tombol pada Aplikasi umumnya sangat berperan penting sebagai bagian navigasi dari aplikasi tersebut.  Tampilan muka tombol defaultnya adalah berwarna abu-abu dengan teks warna hitam terkesan sangat standar dan kurang menarik.  Untuk mensiasatinya biasanya developer memberikan warna latar  atau gambar pada tombol tersebut sesuai dengan disain yang mereka buat.

Salah satu tips yang harus diperhatikan adalah terkait kontrasnya warna tombol dengan warna latar atau obyek lain yang ada disekitarnya agar tombol tersebut jelas terlihat agar mudah untuk ditekan atau disentuh.

Salah satu cara yang dilakukan adalah dengan membuat background/latar belakang dalam bentuk berkas XML, hal ini umumnya lebih disukai dibandingkan menggunakan gambar terkait memori penyimpanan serta pemanggilan gambar saat aplikasi dijalankan sedikit lebih lama.

Berikut adalah tips/cara-cara membuat latar untuk menjadi background pada tombol dalam bentuk berkas XML.  Latar ini bisa jadi untuk latar belakang lain selain tombol.

1.  Buat/ buka project Android Studio kamu.

2. Di bagian folder Drawable buat "Drawable Resource File" baru dengan cara klik kanan di folder "Drawable"-"New"-"Drawable Resource File".

Drawable Resource File

3 Lalu akan muncul layar untuk mengisi "Nama Berkas" dan "Elemen Dasar" dari berkas anda. Untuk nama isi dengan nama yang ingin anda pakai dan untuk Elemen Dasar isi dengan "shape".

Nama Berkas dan Elemen Dasar

4. Akan muncul berkas XML kosong yang siap diisi dengan Tag tag yang sesuai misal seperti ini.:


<solid
android:color="@color/white"/>

Tag "SOLID" adalah untuk memberi warna latar secara menyeluruh sesuai warna yang dipilih.

<corners
android:radius="25dp"
/>

Tag "CORNER" untuk memberi efek sudut melengkung di empat penjuru persegi yang dibuat.  Besar lengkungannya bisa disesuaikan dengan kebutuhan atau keperluan dalam aplikasi.

<stroke
android:color="@color/purple_700"
android:width="2dp"
/>

Tag "STROKE" untuk memberi warna garis tepi dari persegi yang dibuat dengan tebal yang bisa disesuaikan.

<gradient
android:startColor="@color/purple_700"
android:endColor="#2edd43"
android:centerColor="#ffe3"
android:angle="270"
android:gradientRadius="5dp"

/>

Tag "GRADIENT" adalah untuk memberi efek gradasi pada persegi yang dibuat.

-startColor = adalah warna awal/ dasar dari bidang.

-endColor = adalah warna akhir/ ujung dari bidang.

-centerColor = adalah warna di bagian tengah bidang.

-angle = adalah besaran sudut gradasi.

-gradientRadius = adalah cakupan jangkauan dari gradasi yang dibuat.

PENERAPAN

Kamu bisa menggunakan salah satu, beberapa atau semua tag tersebut untuk kemudian diterapkan pada aplikasi yang sedang anda kerjakan. Misal letakan berkas latar itu pada tombol. 

<android.widget.Button
android:id="@+id/btn_start"
android:layout_width="wrap_content"
android:layout_below="@id/txt_deskripsi_splash"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Klik disini"
android:padding="10dp"
android:background="@drawable/latar"
android:textSize="24sp"
android:textStyle="bold"
android:layout_height="60dp"/>

*) untuk Android Versi Terbaru metode background ini tidak bisa diterapkan di tag<Button> jadi harus menambahkan tag android.widget menjadi <android.widget.Button> seperti diatas.

Untuk memasang berkas yang tadi sudah dibuat cukup tambahkan kode berikut didalam tag yang kamu buatt.

android:background="@drawable/latar"

Hasilnya bisa terlihat di preview layar Android Studio kamu.


Itulah tips membuat background gradasi warna yang bisa diterapkan pada elemen tombol atau elemen lainnya yang bisa menggunakan background/ latar belakang.

Post a Comment

0 Comments

Daftar Pemain Yang Di Blacklist