Tutorial Membuat Jam Digital Menggunakan Aplikasi Android Studio

1. Buat Project Baru, lalu beri nama project kamu. Disini saya beri nama Jam Digital sesuai project yang akan kita buat.

2. Selanjutnya pilih perangkat yang bisa menjalankan aplikasi yang kamu buat. Disini kita membuat aplikasi untuk phone dan tablet. Jadi silahkan pilih Phone dan tablet. Kemudian klik Next.

3. Kemudian pilih activity pada mobile. Pilih saja yang Empty activity. Jika sudah klik Next.
 

4. Selnjutnya, isi nama activity sesuai keinginan mu, atau biarkan default. Lalu klik Next.

5. Sekarang, kamu masukkan komponen-komponen berikut dan sesuaikan ID nya sesuai gambar berikut: (Gunakanlah RelativeLayout).  Atur posisi komponen yang ada seperti ini:

 

6. Sehingga hasilnya akan seprti ini, atau anda bisa kreasikan sendiri. Asal ID nya masih sama dengan saya.

7. Anda juga bisa mendesain tamilan melalu koding caranya klik tab TEXT yang berada di bawah atau di samping DESIGN. Lalu ketikkan lah koding berikut:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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.bacacoding.jamdigital.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jam Digital Bacacoding"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textSize="18sp"
        android:textColor="@android:color/holo_red_light" />
    <TextView
        android:text="Sekarang Jam :"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="45dp"
        android:id="@+id/textView2"
        android:textSize="18sp"
        android:textColor="@android:color/holo_blue_light" />
    <TextClock
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/jam1"
        android:layout_alignBaseline="@+id/textView2"
        android:layout_alignBottom="@+id/textView2"
        android:layout_toRightOf="@+id/textView2"
        android:layout_toEndOf="@+id/textView2"
        android:layout_marginLeft="27dp"
        android:layout_marginStart="27dp" />
    <Button
        android:text="TAMPILKAN JAM"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/jam1"
        android:layout_marginTop="49dp"
        android:id="@+id/btn_tampil"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:onClick="showTextClock" />
    <TextClock
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:id="@+id/jam2"
        android:layout_below="@+id/btn_tampil"
        android:layout_centerHorizontal="true"
        android:textStyle="normal|bold"
        android:textSize="18sp" />
    <TextView
        android:text="Thank You"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="34dp"
        android:id="@+id/textView3"
        android:layout_below="@+id/jam2"
        android:layout_centerHorizontal="true"
        android:textSize="18sp"
        android:textColor="?attr/colorControlActivated" />
    <Button
        android:text="EXIT"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView3"
        android:layout_alignLeft="@+id/btn_tampil"
        android:layout_alignStart="@+id/btn_tampil"
        android:layout_marginTop="37dp"
        android:id="@+id/btn_exit"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:onClick="keluar" />
</RelativeLayout>

8. Selanjutnya kita masuk ke tab MainActivity.Java. silahkan kamu ketikkan kodeing berikut:

package com.firmansyah.jamdigital;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextClock;
public class MainActivity extends AppCompatActivity {
    TextClock jamdigital;
    Button tampiljam;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextClock jaml = (TextClock) findViewById(R.id.jam1);
        jamdigital = (TextClock)findViewById(R.id.jam2);
        jamdigital.setVisibility(View.INVISIBLE);
        tampiljam = (Button)findViewById(R.id.btn_tampil);
    }
    public void showTextClock(View view){
        jamdigital.setVisibility(view.VISIBLE);
        tampiljam.setText("Menampilkan Jam Digital");
    }
    public void keluar (View view){
        finish();
    }
}

9. Jika sudah. Sekrang coba kamu RUN program kamu. Dan hasilnya akan seprti ini:

Tampilan Awal dari Jam Digital

Tampilan Ketika Tombol Anda Klik

Salam WriteCode..Mungkin Hanya itu saja yang bisa saya sampaikan pada postingan kali ini..  Jika ada kesalahan saya mohon maaf. Jangan lupa berkunjung dan Share artikel ini . Dan tetap semangat dalam menjalankan aktivitasnya .