Programming

4 Langkah Mudah Membangun Aplikasi jam Sederhana di Android Studio

Avatar photo
Written by Techfor Id

Dalam tutorial ini, kamu akan belajar cara membuat aplikasi Android pertamamu. Saat melakukannya, nantinya kamu juga akan mempelajari konsep penting dalam membangun aplikasi android seperti Layout (tata letak), Views (tampilan), dan Activities (aktifitas).

Caranya cukup mudah, kamu hanya perlu 4 langkah saja untuk membuat aplikasi android pertama versi kamu sendiri. Program atau code dibawah ini hanya sebatas mock-up saja, nantinya kamu bisa bebas edit sesuka hati.

Untuk membuat aplikasi ini, kamu membutuhkan :

  • Versi terkini Android Studio
  • Device atau emulator untuk Android, minimum Android Marshmallow.

Langkah 1 : Membuat Project Baru

Pertama tama install dan jalankan aplikasi  Android Studio kamu dan klik tombol Start a new Android Studio project.

Di layar berikutnya, pilih Add No Activity karena kita tidak kan menggunakan template apa pun yang ditawarkan oleh Android Studio. Kemudian tekan Next untuk melanjutkan.

Sekarang Kamu akan melihat formulir tempat kamu dapat memasukkan detail penting tentang aplikasimu seperti nama dan nama paketnya. Namanya (Name), tentu saja, nama yang akan dilihat pengguna di ponsel mereka saat mereka menginstal aplikasi kamu.

Di sisi lain, nama paket (Package name) adalah pengenal unik untuk aplikasi kamu di Google Play. kamu harus mengikuti konvensi penamaan paket Java saat menentukannya.

Misalnya, jika nama aplikasi kamu adalah MyFirstApp dan Anda bekerja untuk organisasi dengan alamat situs web contoh.com, nama paket idealnya adalah “com.contoh.myfirstapp”.

Selanjutnya, kamu harus memutuskan bahasa pemrograman(Language) yang ingin digunakan saat mengkode aplikasi. Untuk saat ini, pilih Java dan tekan Done.

Android Studio setidaknya membutuhkan waktu 1 atau 2 menit untuk menghasilkan dan mengkonfigurasi project baru.

Langkah 2 : Membuat Activity

Activity (Aktivitas) adalah salah satu komponen terpenting dalam aplikasi Android. Inilah yang memungkinkan kamu membuat dan menampilkan User Interface  kepada pengguna.

Sebuah aplikasi dapat memiliki satu atau beberapa Activity, masing-masing memungkinkan pengguna untuk melakukan suatu tindakan. Misalnya, aplikasi klien email dapat memiliki tiga aktivitas: satu untuk pengguna mendaftar, satu untuk masuk, dan satu untuk menulis email.

Agar tutorial ini tetap sederhana, kita akan membuat aplikasi hanya dengan satu Activity saja. Untuk membuat Activity, di panel Project Android Studio, klik kanan pada App dan pilih New> Activity> Empty Activity.

Pada dialog yang muncul, ketik MainActivity sebagai nama aktivitas, centang opsi Launcher Activity, dan tekan Finish.

Memeriksa opsi Launcher Activity amat penting karena itulah yang memungkinkan pengguna kamu kelak membuka aktivitas menggunakan peluncur Android. Dengan demikian, launcher activity berfungsi sebagai titik masuk ke aplikasi kamu.

Langkah 3 : Membuat Layout

Setiap Activity biasanya memiliki setidaknya satu Layout (tata letak) yang terkait satu sama lain. Saat kamu membuat Activity di langkah sebelumnya, disaat yang sama kamu juga membuat Layout kosong untuk itu. Untuk melihatnya, cukup buka file activity_main.xml.

Activity Layout utamanya terdiri dari Views (tampilan) dan View groups (grup tampilan). View disebut sebagai widget, adalah komponen individual antarmuka pengguna kamu.

Button (Tombol), Text Field ( bidang teks), Label, dan Progress bar  adalah contoh kecil dari Views. Sedangkan Groups View adalah komponen yang dapat berfungsi sebagai wadah untuk tampilan. Biasanya, ia juga membantu kamu memposisikan dan mengatur dimensi tampilan.

ConstraintLayout  adalah salah satu grup tampilan paling canggih dan fleksibel yang tersedia saat ini. Secara default, ini adalah node root dari file XML layout activiy kamu. Ia terlihat seperti ini:

<?xml version=”1.0″ encoding=”utf-8″?>

<androidx.constraintlayout.widget.ConstraintLayout

    xmlns:android=”https://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”>

    <!– More code here –>

</androidx.constraintlayout.widget.ConstraintLayout>

Kita akan membuat aplikasi jam sederhana dalam tutorial ini. Selain waktu setempat, ini juga dapat menunjukkan waktu saat ini di dua negara berbeda: India dan Jerman.

Untuk melihat waktu di kedua negara tersebut, kita akan menambahkan 2 tombol, satu untuk india, dan satunya lagi untuk jerman. Dan untuk menampilkan waktu itu sendiri, kita akan menggunakan TextClock .

Karenanya, tambahkan kode berikut di dalam ConstraintLayout:

<TextClock

    android:id=”@+id/my_clock”

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    app:layout_constraintBottom_toBottomOf=”parent”

    app:layout_constraintTop_toTopOf=”parent”

    app:layout_constraintLeft_toLeftOf=”parent”

    app:layout_constraintRight_toRightOf=”parent”

    android:format12Hour=”h:mm:ss a”

    android:textSize=”32sp”/>

<Button

    android:layout_width=”match_parent”

    android:layout_height=”wrap_content”

    app:layout_constraintBottom_toBottomOf=”parent”

    android:text=”Time in Germany”

    android:onClick=”onClickGermany”

    android:id=”@+id/germany_button”/>

<Button

    android:layout_width=”match_parent”

    android:layout_height=”wrap_content”

    app:layout_constraintBottom_toTopOf=”@id/germany_button”

    android:text=”Time in India”

    android:onClick=”onClickIndia”

    android:id=”@+id/india_button”/>

Perhatikan juga bahwa setiap Views Button memiliki properti onClick. Properti ini digunakan untuk menetapkan Click event Handler ke tombol tersebut.

Karena Handler tersebut belum ada, kamu dapat meminta Android Studio untuk membuatnya. Untuk melakukannya, arahkan kursor ke nama dari handler tersebut sampai kamu melihat bola lampu merah muncul di sampingnya.

Kemudian klik bola lampu dan pilih opsi kedua, yang memiliki bola lampu kuning.

Pada titik ini, Kamu dapat mencoba menjalankan programnya dengan menekan Shift-F10 untuk menjalankan aplikasi. Jika tidak ada kesalahan dalam kode XML, Berikut ialah tampilan output dari program diatas jika dijalankan di emulator / smartphone kamu :

Meskipun tombolnya belum berfungsi, tampilan TextClock seharusnya sudah menunjukkan waktu lokal saat ini dan memperbarui dirinya sendiri setiap detiknya.

Langkah 4 : Mengimplementasi Event Handler

Saat membuat event handler untuk kedua tombol tersebut, Android Studio menambahkan dua metode ke file Java activity kamu yaitu MainActivity.java. Kalau kamu buka file itu, akan muncul code berikut :

public void onClickGermany(View view) {

}

public void onClickIndia(View view) {

}

Di dalam event handler, yang perlu kita lakukan hanyalah mengubah zona waktu tampilan TextClock. Tapi bagaimana kalau kamu mereferensikan tampilan yang ada di file XML layout kamu dari dalam file Javamu? Nah, kamu hanya cukup menggunakan metode findViewById().

Setelah kamu memiliki referensi ke tampilan TextClock, kamu dapat memanggil metode setTimeZone () untuk mengubah zona waktunya. Jadi tambahkan kode berikut di dalam metode onClickGermany ():

TextClock clock = findViewById(R.id.my_clock);

clock.setTimeZone(“Europe/Berlin”);

Dan kode berikut dalam metode onClickIndia() :

TextClock clock = findViewById(R.id.my_clock);

clock.setTimeZone(“Asia/Kolkata”);

Pada titik ini, kamu dapat menekan Shift-F10 lagi untuk menjalankan kembali aplikasi. Dan Sekarang kamu dapat mengklik kedua  tombol untuk mengubah zona waktu jam sesuai zona waktunya.

Sumber : https://code.tutsplus.com/tutorials/creating-your-first-android-app–cms-34497

About the author

Avatar photo

Techfor Id

Leave a Comment

Click to ask
Hai, Tanya-Tanya Aja
Hi ini Windy, dari techfor

Windy bisa membantu kamu memahami layanan Techfor
Seperti

1. Kursus Online By Expert
2. Partnership Event dan Konten
3. Layanan liputan multimedia
4. Dan hal lain yg ingin kamu tau

Kirim saja pesan ini serta berikan salah satu nomor diatas atau beritahukan windy lebih jelas agar dapat membantu Kamu