Membuat Interaksi dengan Widget Button
Aplikasi Interaktif adalah aplikasi yang dapat merespon tindakan user seperti menekan tombol, menekan menu navigasi dan banyak lagi. Pada tutorial ini kita akan belajar mengenal cara membuat aplikasi yang dapat merespon interaksi dari user melalui button. Setelah tutorial ini, kita akan juga membuat project aplikasi Kalkulator Sederhana untuk mempelajari cara mengambil nilai input dari user dan merespon kembali hasil perhitungan kepada user.
Rancangan Aplikasi Click Counter
Kita akan membuat aplikasi yang dapat menghitung jumlah click dari sebuah widget button dan menampilkan kembali ke widget Textview. Tampilan dari aplikasi yang akan kita buat seperti gambar di bawah.
Buka Android Studio dan buat project baru seperti biasa. Pada window choose your project pilih Empty Activity dan selanjutnya di jendela Configure your project ikuti seperti berikut :
- Name: "Click Counter"
- Package name: "com.teknorial.clickcounter"
- Language: Java
- Biarkan opsi lain sebagaimana adanya.
Membuat Tampilan UI Aplikasi Click Counter.
Setelah project berhasil dibuat. Kita akan memodifikasi layout MainActivity di direktori res/layout/activity_main.xml dengan menambahkan widget button dan textview. Modifikasi activity_main.xml seperti kode dibawah.
<?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:id="@+id/tv_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:text="0"
android:textSize="100sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btn_click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_number" />
</androidx.constraintlayout.widget.ConstraintLayout>
Kita dapat melihat tampilan layout activity_main.xml terdapat widget TextView dengan nilai awal 0 .
Membuat Click Listener Terhadap Widget Button.
Sekarang kita akan membuat nilai 0 menjadi bertambah dengan melakukan klik pada widget Button. Kita akan melakukan deklarasi dan inisialisasi widget TextView dan Button. Buka MainActivity.java dan ketik kode seperti di bawah.
package com.teknorial.clickcounter;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
//import widget
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
//deklarasi variable
private TextView mTextNumber;
private Button mButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//inisialisasi
mTextNumber = findViewById(R.id.tv_number);
mButton = findViewById(R.id.btn_click);
}
}
Dalam kode di atas kita dapat melihat bawah kita telah mengimport dua class yaitu Button dan TextView, kemudian melakukan deklarasi variabel dengan nama mTextNumber dan mButton. Untuk mengakses widget dari layout, kita perlu melakukan inisialisasi variabel dengan id dari widget tersebut.
Sekarang kita akan membuat click listener pada Button dengan menggunakan method setOnClickListener. Tambahkan click listener di bawah variabel mButton seperti kode berikut ini.
package com.teknorial.clickcounter;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
//import widget
import android.widget.Button;
import android.widget.TextView;
import android.view.View;
public class MainActivity extends AppCompatActivity {
//deklarasi variable
private TextView mTextNumber;
private Button mButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//inisialisasi
mTextNumber = findViewById(R.id.tv_number);
mButton = findViewById(R.id.btn_click);
//click listener
mButton.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view) {
}
});
}
}
Pada method onClick, kita akan membuat TextView menampilkan jumlah klik dari widget Button. Buat variabel baru bernama mCount untuk menampung nilai klik, kemudian tambahkan variabel tersebut setiap jumlah klik dan tampilkan nilai mCount ke dalam TextView dengan method setText(). Modifikasi MainActivity.java seperti kode berikut :
package com.teknorial.clickcounter;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
//import widget
import android.widget.Button;
import android.widget.TextView;
import android.view.View;
public class MainActivity extends AppCompatActivity {
//deklarasi variable
private TextView mTextNumber;
private Button mButton;
//mCount menampung nilai awal dengan 0
private int mCount = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//inisialisasi
mTextNumber = findViewById(R.id.tv_number);
mButton = findViewById(R.id.btn_click);
//click listener
mButton.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view) {
//mCount akan ditambah dengan 1 setiap klik
mCount = mCount + 1;
//mTextNumber akan menampilkan nilai dari mCount
mTextNumber.setText(String.valueOf(mCount));
}
});
}
}
Selanjutnya, klik run ‘app’ untuk melihat hasil dari aplikasi yang telah kita buat. Jika kode aplikasi kita tidak bermasalah, maka aplikasi akan berjalan seperti video berikut.
Kita telah berhasil membuat click listener pada widget Button dan mengubah nilai dari Text. Demikian tutorial Membuat Interaksi dengan Widget Button. Selanjutnya kita akan Latihan Membuat Aplikasi Kalkulator Sederhana dengan menggunakan click listener dan melakukan kalkulasi berdasarkan nilai input dari user. Terima kasih.
Source Code : [https://github.com/rflash95/ClickCounterAndroid]