Android Studio Button, Text View & Count Down Timer

bundet

Tutorial ini dibuat dalam rangka berbagi setelah beres memenuhi #Tugas3 pada mata kuliah Pemrograman Mobile, yang dibimbing oleh Bp. Untung Subagyo, S.Kom. Aplikasi ini dibuat menggunakan Android Studio.

Figure 1. Antarmuka Pertama dan CountDown Berjalan

Penyelesaian

Langkah 1:

Open Android Studio

Langkah 2:

Pilih New Project >> buat nama project suka-suka, misalnya "Tugas3" >> Next.

Langkah 3:

Pilih Target Device >> Check Phone and Tablet >> API14: Android 4.0 (IceCreamSandwich) >> Next.

Langkah 4:

Pilih Empty Activity, sebagai layout utama >> Sesuaikan nama Activity & Layout / (default) >> Finish.

Langkah 5:

Pilih tabulasi activity_main.xml >> mode Design.

Langkah 6:

Drag & Drop TextView ke Layout, kemudaian sesuaikan posisinya.

Langkah 7:

Drag & Drop Button sebanyak 4 buah, kemudian sesuaikan posisinya.

Langkah 8:

Atur size semua Buttton dengan cara aktifkan mode text, lalu ubah:

android:layout_width="300px"
android:layout_height="300px"

Langkah 9:

Ubah Properties TextView paling atas, ID menjadi "soal" dan text menjadi "200 + 21"

Langkah 10:

Ubah warna background keempat Button suka-suka, misalkan "merah, kuning, hijau, biru" >> via properties.

Langkah 11:

Ubah ID keempat Button suka-suka, misalkan "b1, b2, b3, b4" >> via properties.

Langkah 12:

Ubah text keempat Button suka-suka, namun tetap menyediakan jawaban untuk soalnya. Misal punya saya "212"(benar), "71", "36", "50".

Langkah 13:

Ubah default TextView paling bawah menjadi "Result" dan ID nya "result".

Langkah 14:

Drag & Drop TextView dan letakan ke pojok kiri atas, ubah ID(cd), ubah size (50x30dp), text(s), background(black), text color(white) melalui properties.

Langkah 15:

Delarasikan beberapa variabel untuk button, textView dan countdown ke dalam class MainActivity. Yang mana sudah dipersiapkan sebelumnya di dalam layout.

Langkah 16:

Definisikan variabel-variabel tersebut di dalam method onCreate, yang mana "txt" sebagai widget dengan id "result", btn1 = widget dengan id "b1", btn2 = widget dengan id "b2", btn3 = widget dengan id "b3", btn4 = widget dengan id "b4" dan timer = widget dengan id "lets".

Langkah 17:

Tambahkan implements View.OnClickListener pada class MainActivity.

Langkah 18:

Definisikan method onClick() seperti berikut:

@Override
    public void onClick (View v) {
        if (v.equals(btn4)) {
            /*memangil aset color yang telah didefinisikan di app\res\values\color.xml*/
            txt.setTextColor(getResources().getColor(R.color.colorRight));
            txt.setText("Excellentt (y)(y)");
            timer.cancel();
        }
        else{
            txt.setTextColor(getResources().getColor(R.color.colorWrong));
            txt.setText("Wrong Answer!");
        }
    }

Langkah 19:

Kembali ke tabulasi activity_main.xml dengan mode Design.

Langkah 20:

Aktifkan fitur onClick semua button melalui properties >> dan pilih method onClick().

Langkah 21:

Jalankan Project via AVD.

Berikut Hasil / Capturenya

Figure 2. Antarmuka Saat CountDown Habis

Figure 3. Antarmuka Saat Menekan Tombol Salah

Figure 4. Antarmuka Saat Menekan Tombol Benar

Paket Lengkapnya

Dikarenakan file projectnya cukup besar, maka saya memilih dropbox sebagai sarana sharingnya, berikut tautannya:

Projectnya → http://tinyium.com/2476008/tugas3-rar
Aplikasinya → http://tinyium.com/2476008/tugas3-apk
Laporannya → http://tinyium.com/2476008/tugas3-pdf

Berikut Demonya

https://youtu.be/ltVolLay5W0

Source Codenya

Barangkali Anda hanya ingin mengadopsi source codenya saja. Saya sediakan di bawah ini.

Aktifitasnya - MainActivity.java

package com.gatewan.tugas3;
/*Author Profile
Wawan Chahyo Nugroho
NIM: 12131294
 */
import android.os.Bundle;
import android.os.CountDownTimer;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
   /* Deklarasi variabel atau object */
    Button btn4;
    Button btn3;
    Button btn2;
    Button btn1;
    TextView txt;
    CountDownTimer timer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        txt = (TextView) findViewById(R.id.result); //variabel txt dialokasikan untuk TextView dengan id "result"
        final TextView lets = (TextView) findViewById(R.id.cd);
        btn4 = (Button) findViewById(R.id.b4);
        btn4.setOnClickListener(this);
        btn3 = (Button) findViewById(R.id.b3);
        btn3.setOnClickListener(this);
        btn2 = (Button) findViewById(R.id.b2);
        btn2.setOnClickListener(this);
        btn1 = (Button) findViewById(R.id.b1);
        btn1.setOnClickListener(this);

        timer = new CountDownTimer(5000, 1000) { //mendefinisikan hitung mundur dengan tempo 5 detik

            public void onTick(long millisUntilFinished) {
                lets.setText(millisUntilFinished / 1000+"s");
            }

            public void onFinish() {
                txt.setText("Do Something!"); //untuk respon saat tempo 5 detik telah habis

            }
        }.start();

    }

    @Override
    public void onClick (View v) {
        if (v.equals(btn4)) {
            /*memangil aset color yang telah didefinisikan di app\res\values\color.xml*/
            txt.setTextColor(getResources().getColor(R.color.colorRight));
            txt.setText("Excellentt (y)(y)");
            timer.cancel();
        }
        else{
            txt.setTextColor(getResources().getColor(R.color.colorWrong));
            txt.setText("Wrong Answer!");
        }
    }

}

Layoutnya - activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.gatewan.tugas3.MainActivity">

    <TextView
        android:text="Result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/result"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:textSize="30sp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintVertical_bias="0.89"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp" />

    <Button
        android:text="212"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:id="@+id/b4"
        android:background="@android:color/holo_green_light"
        android:textSize="36sp"
        android:layout_above="@+id/result"
        android:layout_alignLeft="@+id/b2"
        android:layout_alignStart="@+id/b2"
        android:onClick="onClick (MainActivity)"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.81"
        app:layout_constraintVertical_bias="0.19" />

    <Button
        android:text="36"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:id="@+id/b3"
        android:background="@android:color/holo_blue_dark"
        android:textSize="36sp"
        android:layout_alignBaseline="@+id/b4"
        android:layout_alignBottom="@+id/b4"
        android:layout_toLeftOf="@+id/b4"
        android:layout_toStartOf="@+id/b4"
        android:onClick="onClick (MainActivity)"
        android:layout_marginStart="48dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="48dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintVertical_bias="0.52" />

    <Button
        android:text="50"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:id="@+id/b2"
        android:background="@android:color/holo_orange_dark"
        android:textSize="36sp"
        android:layout_above="@+id/b4"
        android:layout_toRightOf="@+id/soal"
        android:layout_toEndOf="@+id/soal"
        android:layout_marginTop="72dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        app:layout_constraintHorizontal_bias="0.8"
        android:onClick="onClick (MainActivity)"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintVertical_bias="0.41" />

    <Button
        android:text="71"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:id="@+id/b1"
        android:textSize="36sp"
        android:background="@android:color/holo_red_dark"
        android:layout_alignBaseline="@+id/b2"
        android:layout_alignBottom="@+id/b2"
        android:layout_toLeftOf="@+id/b2"
        android:layout_toStartOf="@+id/b2"
        android:onClick="onClick (MainActivity)"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintVertical_bias="0.19"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        app:layout_constraintHorizontal_bias="0.19" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="200 + 12 = ?"
        android:id="@+id/soal"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textSize="24sp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintVertical_bias="0.0"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        app:layout_constraintGuide_begin="10dp"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="10dp" />

    <TextView
        android:text="s"
        android:layout_width="50dp"
        android:id="@+id/cd"
        android:background="@android:color/background_dark"
        android:layout_height="35dp"
        android:textColor="@android:color/background_light"
        android:textSize="25sp"
        android:textAlignment="center"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp" />

</android.support.constraint.ConstraintLayout>

Versi Teman Saya a/n Krisna Pandu Wibowo

Paket projectnya bisa Anda download di SINI, atau di bawah ini jika Anda hanya perlu source codenya saja.

Aktifitasnya - MainActivity.java

package com.worker.ecoframe.aplikasisoal;

import android.content.DialogInterface;
import android.content.Intent;
import android.os.CountDownTimer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements android.view.View.OnClickListener {
    public CountDownTimer timer;
    public TextView hasil;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextView text = (TextView) findViewById(R.id.tv);
        final Button b1 = (Button) findViewById(R.id.button);
        b1.setOnClickListener(this);
        final Button b2 = (Button) findViewById(R.id.button2);
        b2.setOnClickListener(this);
        final Button b3 = (Button) findViewById(R.id.button3);
        b3.setOnClickListener(this);
        final Button b4 = (Button) findViewById(R.id.button4);
        b4.setOnClickListener(this);

        timer = new CountDownTimer(5000, 1000) {

            public void onTick(long millisUntilFinished) {
                text.setText(millisUntilFinished / 1000 + "S");
            }
            public void onFinish() {
                Intent intent = new Intent(MainActivity.this, ResultActivity.class);
                MainActivity.this.startActivity(intent);
            }
        }.start();
    }

    @Override
    public void onClick(View v){
        hasil = (TextView) findViewById(R.id.textView3);
        switch(v.getId()) {
            case R.id.button:
                hasil.setText("Wrong Answer!!!");
                break;
            case R.id.button2:
                hasil.setText("Wrong Answer!!!");
                break;
            case R.id.button3:
                hasil.setText("Wrong Answer!!!");
                break;
            case R.id.button4:
                hasil.setText("Correct!!!");
                timer.cancel();
                break;
        }
    }

}

Aktifitasnya - ResultActivity.java

package com.worker.ecoframe.aplikasisoal;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class ResultActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_result);

        final TextView message = (TextView) findViewById(R.id.tMessage);
        final Button btn = (Button) findViewById(R.id.button5);

        message.setText("WAKTU HABIS");

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(ResultActivity.this, MainActivity.class);
                ResultActivity.this.startActivity(intent);

            }
        });

    }
}

Layoutnya - activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.worker.ecoframe.aplikasisoal.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="16+19"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.123"
        android:id="@+id/textView2" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorYellow"
        android:text="TextView"
        android:textAlignment="center"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.106"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.085" />

    <Button
        android:id="@+id/button"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:text="24"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.201"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintVertical_bias="0.174" />

    <Button
        android:id="@+id/button2"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="8dp"
        android:background="@android:color/holo_green_light"
        android:text="37"
        android:textSize="36sp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintHorizontal_bias="0.716"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/button4"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintVertical_bias="1.0" />

    <Button
        android:id="@+id/button3"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="118dp"
        android:background="@color/colorAccent"
        android:text="4"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.201"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintVertical_bias="0.368" />

    <Button
        android:id="@+id/button4"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:layout_marginRight="53dp"
        android:background="@android:color/holo_blue_bright"
        android:text="35"
        android:textSize="36sp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="52dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="0.878"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintVertical_bias="0.729" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintVertical_bias="0.863" />

</android.support.constraint.ConstraintLayout>

Layoutnya - activity_result.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.worker.ecoframe.aplikasisoal.ResultActivity">

    <TextView
        android:id="@+id/tMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.378" />

    <Button
        android:id="@+id/button5"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/holo_blue_dark"
        android:text="TRY AGAIN"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tMessage" />
</android.support.constraint.ConstraintLayout>

Mission Completed!!!