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 (50×30dp), 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:
Berikut Demonya
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>
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!!!
