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]