Change Button Background Color with Clicked

created by : Nanda Adisaputra, S.Kom

Berjumpa lagi dengan Saya Nanda Adisaputra, S.Kom. Pada kesempatan kali ini Saya akan sharing mengenai bagaimana cara membuat UX (User Experience) dari sebuat button ketika di tekan. Nah sebelum Kita memasuki materi tersebut, Saya mau tanya nih teman -teman. Apakah kalian pernah menjumpai aplikasi dimana ketika buttonnya di klik, maka akan berubah warna menjadi lebih gelap dan ketika di lepas maka akan kembali ke warna semula ? Pasti pernah dong, sebagai user Kita jadi tahu nih kalau button tersebut sudah Kita klik. Kemudian Kita tidak jadi merasa kebingungan karena terdapat perbadaan antara button yang sudah diklik dengan yang belum diklik. Yuk langsung saja Kita bahas.

1. Pertama -tama Kita tambahkan warna ke resource colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 ..........................................
...........................................
    <color name="blue">#5454ff</color>
    <color name="blueindigo">#5948BC</color>
    <color name="indigo">#5e3b78</color>
...........................................
...........................................
</resources>

2. Kemudian Kita tambahkan file resource bg_button.xml di dalam drawable.

Klik kanan pada package drawable -> New -> Drawable Resource File

Beri nama file bg_button , kemudian klik OK

Kemudian tambahkan source code dibawah ini didalam file bg_button.xml yang telah berhasil dibuat.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    //ketika button diklik maka akan menampilkan warna biru
    
   <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <corners android:radius="50dp" />
        </shape>
    </item>
    //ketika button tidak diklik maka akan menampilkan warna indigo
    
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/indigo" />
            <corners android:radius="50dp" />
        </shape>
    </item>

</selector>

3. Kemudian, Kita buat dulu layout button nya di activity main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <TextView
        android:layout_width="180dp"
        android:layout_height="50dp"
        android:background="@drawable/bg_button"
        android:onClick="button"
        android:gravity="center"
        android:textSize="24sp"
        android:textColor="@color/white"
        android:text="@string/click_here"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bedah Source code

//Untuk memberikan background dari bg_button.xml yang telah Kita buat di package drawable
android:background="@drawable/bg_button" 
//Untuk memberikan aksi klik
android:onClick="button"
//Untuk membuat teks berada di tengah button
android:gravity="center"
//Untuk memberikan ukuran teks
android:textSize="24sp"

//Untuk memberikan warna teks        android:textColor="@color/white"

//Untuk memberika teks di dalam button        android:text="@string/click_here"

4. Kemudian setelah membuat layout, Kita tambahkan fungsi button didalam MainActivity.kt seperti dibawah ini.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    //function button
    fun button(view: View) {

    }
}

Penamaan function harus sama dengan string yang berada pada atribut onClick di layout activity_main.xml

android:onClick=”button”

Jika di string di dalam atribut onClick bernama button maka function didalam MainActivity.kt juga button. Jika

android:onClick=”menu” maka di dalam MainActivity.kt function nya adalah

fun menu(view:View){

}

Sekarang kalian sudah paham kan pastinya. Oke, sekarang Kita langsung saja running aplikasinya. Cekidot

Ketika tidak ada aksi klik

Ketika ada aksi klik pada button

Sekian tutorial singkat dari Saya. Jika ada pertanyaan silahkan tinggal kan kalimat di kolom komentar, semoga bermanfaat.