1 . Rancangan Aplikasi Android

Pada tutorial ini kita akan mengenal Android Studio dan belajar membangun aplikasi Android sederhana. Dalam aplikasi akan terdapat sebuah button. Jika ditekan button maka akan muncul pesan text yang berisi jumlah tombol ditekan. Berikut rancangan aplikasi yang akan kita bangun.

rancangan aplikasi android


2 . Membuat Project Android Studio

Pada Tutorial Membuat Project Android Studio, Kita akan belajar membuat project pertama di Android Studio. Berikut tahapan membuat project Android Studio baru.
 
1. Buka Android Studio. Kita akan melihat tampilan Welcome to Android Studio.
 
2. Klik + Start a new Android Studio Project untuk membuat project Android Studio baru.
3. Pada tampilan Choose your project, kita pilih Empty Activity.
 
 
4. Pada tampilan Configure your project. Masukan Name , Package name ,language dan Minimum API level seperti digambar. Kemudian klik finish untuk membuat project android.
 
 
Setelah kita melakukan konfigurasi project Android Studio. Kita dapat melihat tampilan Android Studio seperti berikut.
 
 
Demikian tutorial Membuat Project Android Studio, Kita telah berhasil membuat project pertama, selanjutnya akan belajar tentang struktur dari project Android. Terima kasih :)

3 . Struktur Project pada Android Studio

Pada Android Studio kita bisa melihat sebelah kiri merupakan jendela project tool. Disini kita dapat melihat dan mengatur file dari project Android yang telah dibuat. Berikut penjelasan struktur project pada Android Studio:
 
1. manifests. Pada folder manifest terdapat file AndroidManifest.xml. File ini digunakan untuk mendeklarasi seperti Package, Activity, Service, Permissions dan lain-lainnya.
 
2. java. Pada folder ini terdapat file kode java yang dipisah dengan nama package (com.teknorial.aplikasisederhana) dan dalam folder ini kita bisa melihat MainActivity yang merupakan Activity telah dibuat otomatis. Folder androidtest dan test adalah folder khusus pengujian aplikasi.
 
3. res. res merupakan folder resource aplikasi terdapat folder drawable, layout, mipmap dan values. Drawable merupakan folder yang digunakan untuk menyimpan file bitmap atau gambar dengan format .png, .9.png, .jpg, .gif. Folder layout merupakan tempat file desain atau user interface layout yang berformat xml. Mipmap merupakan folder drawable yang digunakan untuk icon launcher aplikasi. Values merupakan folder yang digunakan untuk deklarisasi nilai seperti colors, strings dan styles.
 
4. Gradle merupakan sebuah featured build automation. Selengkapnya dapat lihat di situs berikut ini http://www.gradle.org/. File Gradle berisi file yang digunakan, versi aplikasi, signed key properties,lokasi repository dll.
 

4 . User Interface di Android Studio

Pada saat ini, activity_main.xml (res/layout/activity_main.xml) merupakan layout user interface dari activity yang telah dibuat otomatis yaitu MainActivity. Pada saat kita membuka activity_main.xml kita bisa melihat jendela editor dan preview muncul seperti pada gambar berikut.

Editor merupakan tempat untuk kita melihat dan mengubah source code dari file yang kita pilih. Untuk file design layout kita dapat langsung melihat preview disebelahkan kanan. Sekarang kita akan membuat layout antar muka sesuai dengan rancangan sebelumnya. Ubah activity_main.xml menjadi seperti 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Sentuh Aku" />
</RelativeLayout>

Setelah kita masukkan kode diatas maka preview layout akan seperti berikut.

preview-layout-di-android-studio.jpg (13 KB)

Pada activity_main.xml kita dapat melihat RelativeLayout sebagai element root atau element utama dan memiliki satu anak yaitu Button. RelativeLayout merupakan ViewGroup yang menampilkan widget secara relative atau bebas. ViewGroup adalah container atau wadah yang dapat menampung dan mengatur widget lainnya, bahkan ViewGroup itu sendiri. ViewGroup lainnya adalah LinearLayout, FrameLayout, TableLayout dan ConstraintLayout. 

 

 

 


5 . Atribut di Widget

Dalam acitivity_main.xml kita dapat melihat di dalam widget  terdapat atribut seperti dalam garis merah pada gambar berikut.

kode activity main

RelativeLayout sebagai Elemen root wajib memasukan namespace dari android seperti berikut. 

xmlns:android="http://schemas.android.com/apk/res/android"

Pada Atribut android:layout_width dan android:layout_height sering digunakan hampir semua widget, fungsinya untuk mengatur lebar dan tinggi dari sebuah widget. Value dari atribut tersebut adalah match_parent dan wrap_content. Match_parent berfungsi membuat view dari widget menjadi sebesar parent dan wrap_content berfungsi untuk membuat view dari widget menjadi sebesar yang dibutuhkan oleh konten dari sebuah widget. Kenapa RelativeLayout menggunakan value match_parent pada attribut layout width dan layout_height ?, walaupun RelativeLayout sebuah elemen root, tetap memilik parent yaitu view dari perangkat android. Terakhir atribut pada widget RelativeLayout yaitu tools:context untuk mendeklarasikan activity yang digunakan oleh layout ini.

Pada widget Button kita dapat melihat attribut layout width dan layout_height menggunakan value wrap_content,jadi view button akan sebesar konten atau tulisan. Atribut layout_centerHorizontal dan layout_centerVertical berfungsi untuk membuat posisi widget pada tengah secara horizontal dan tengah secara vertikal. Terakhir atribut text untuk memasukan tulisan ke dalam widget.

Pada editor kita dapat melihat ada warning pada baris 14 android:text="Sentuh Aku" . Untuk melihat warning kamu bisa arahkan cursor pada area berwarna kuning. Kenapa IDE Android Studio memberikan informasi warning pada baris tersebut?. IDE menyarankan kita untuk meletakan semua teks pada strings.xml (res/values/strings.xml), ini lah best pratice untuk kita dapat mudah membuat aplikasi multi bahasa. Anda dapat dapat meninggalkan warning ini atau dapat langsung memperbaiknya dengan alt + enter pada area kuning/warning dan bisa juga dengan menekan lampu kuning seperti pada gambar berikut.

warning activity main

kemudian klik Extract string resource dan pada jendela Extract Resource klik ok.

extract resource

Setelah kita mengikuti saran IDE Android Studio maka activity_main.xml pada button di atribut text menjadi @string/sentuh_aku dan pada file strings.xml terdapat baris baru di dalam tag resources yaitu :  <string name="sentuh_aku">Sentuh Aku</string>. 

 


6 . Melakukan Preview Layout

Kita sebelumnya telah belajar tentang widget dan atribut pada layout. Sekarang kita akan mencoba melihat kembali desain dari activity_main.xml. Klik tab design dan kita melihat design layout seperti berikut.

melakukan preview layout

Pada tab Design kita melihat layout dengan terdapat widget Button bertulisan “SENTUH AKU”.  Untuk menampilkan ActionBar pada tampilan desain layout, klik lambang mata kemudian pilih Show Layout Decorations. 

show layout decorations

Kita dapat melihat ActionBar bertulisan “Aplikasi Sederhana” pada tampilan desain layout  seperti gambar dibawah ini.

preview layout android studio

Sekarang kita akan mencoba menyesuaikan desain aplikasi kita dengan rancangan pada gambar dibawah ini. 

rancangan aplikasi android

Pada gambar di atas kita melihat Button dan ActionBar berwarna biru. Buka kembali activity_main.xml, klik tab text dan tambahkan attribut berikut di dalam widget Button. 

android:background="#1976d2"
android:textColor="@android:color/white"
android:padding="15dp" 

Pada kode diatas kita menambahkan warna background menjadi biru, kemudian warna teks menjadi putih, terakhir kita menambah padding atau spasi antara border dan tulisan dari widget button. Setelah memasukan kode diatas maka tampilan dari layout_activity.xml menjadi seperti gambar berikut.

ganti warna button

Sekarang kita akan mencoba mengubah warna dari ActionBar menjadi warna biru. Buka colors.xml pada direktori res/values/colors.xml dan ubah menjadi seperti berikut.

colors xml ganti warna

Kembali ke activity_main.xml untuk melihat hasil desain kita yang telah disesuaikan dengan rancangan. 

hasil ganti warna action bar

Kita telah berhasil membuat tampilan layout menjadi seperti rancangan. Selanjutnya kita akan belajar bagaimana cara menghubungkan dan membuat listener dari widget Button.


7 . Membuat Listener di Widget Button

Pada tutorial ini, kita akan belajar bagaimana membuat Button ‘’SENTUH AKU” menjadi berfungsi.  Listener merupakan object yang manangani suatu event. Kita akan menambah event saat Button disentuh maka akan muncul pesan text jumlah kita sentuh.

Untuk mebuat listener, kita perlu mendapatkan referensi dari widget Button. Widget harus memiliki ID agar bisa mendapat referensi melalui Activity. Buka activity_main.xml kemudian tambahkan attribute berikut dalam widget Button.

android:id="@+id/btn_sentuh_aku"

Setelah kita masukkan kode diatas maka activity_main.xml akan seperti gambar berikut.

menambah id di button

Setelah menambahkan ID pada widget Button. Selanjutnya kita akan mereferensikan widget di Activty. Buka MainActivity.java, masukkan kode berikut.

package com.teknorial.aplikasisederhana;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button; //import class Button

public class MainActivity extends AppCompatActivity {
    private Button mSentuhAkuBtn; //deklarasi variable mSentuhAkuBtn sebagai widget Button.

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

        
        //mereferensikan variable mSentuhAkuBtn ke Widget Button yang memiliki id btn_sentuh_aku
        mSentuhAkuBtn = findViewById(R.id.btn_sentuh_aku);

    }
}

Kemudian kita akan menambahkan listener di widget mSentuhAkuBtn. Tambahkan kode berikut dibawah mSentuhAkuBtn = findViewById(R.id.btn_sentuh_aku); .                                                                               

//menambahkan listener pada mSentuhAkuBtn
mSentuhAkuBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

    }
});

Pada method onClick kita akan tambahan informasi jumlah klik dengan menggunakan Toast. Tambahkan kode berikut kedalam method OnClick.

//menambahkan listener pada mSentuhAkuBtn
mSentuhAkuBtn.setOnClickListener(new View.OnClickListener() {
    int counter = 0; //set awal 0
    @Override
    public void onClick(View v) {
        //menampilkan informasi jumlah disentuh.
        Toast.makeText(MainActivity.this,"Tombol telah disentuh sebanyak "+ counter++ +" kali.",Toast.LENGTH_SHORT).show();
    }
});

Jika terdapat error pada Toast, itu karena kita belum mengimport class Toast. Untuk memperbaiki itu, kita harus menambahkan import android.widget.Toast; atau langsung menekan alt+enter pada tulisan berwarna merah seperti berikut.

error toast

Kita telah belajar cara mengimport class, mendeklarasikan variable, mereferensikan variable ke widget,menambahkan listerner dan membuat event saat disentuh. Berikut code keselurahan pada MainActivity.java.

package com.teknorial.aplikasisederhana;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button; //import class Button
import android.widget.Toast; //import class Toast

public class MainActivity extends AppCompatActivity {
    private Button mSentuhAkuBtn; //deklarasi variable mSentuhAkuBtn sebagai widget Button.

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


        //mereferensikan variable mSentuhAkuBtn ke Widget Button yang memiliki id btn_sentuh_aku
        mSentuhAkuBtn = findViewById(R.id.btn_sentuh_aku);

        //menambahkan listener pada mSentuhAkuBtn
        mSentuhAkuBtn.setOnClickListener(new View.OnClickListener() {
            int counter = 0; //set awal 0
            @Override
            public void onClick(View v) {
                //menampilkan informasi jumlah disentuh.
                Toast.makeText(MainActivity.this,"Tombol telah disentuh sebanyak "+ counter++ +" kali.",Toast.LENGTH_SHORT).show();
            }
        });


    }
}

Pada tutorial selanjutnya kita akan belajar cara menjalankan aplikasi yang telah dibuat dengan emulator. Jika mengalami kendala saat mengikuti tutorial ini, jangan ragu bertanya di kotak komentar. Terima kasih.


8 . Menjalankan Aplikasi Android Menggunakan Emulator

Untuk menjalankan Aplikas Android kamu bisa menggunakan emulator (Android Virtual Device) atau Real Device seperti pada Smartphone Android. Berikut tahapan membuat emulator di Android Studio,

1.  klik menu Tools, kemudian pilih AVD Manager. 

avd manager

2. Pada jendela Android Virtual Device Manager. Klik + Create Virtual Device. 

android virtual device manager

3. Pada Select hardware, Pilih Kategori Phone dan Pilih Pixel 2. Kemudian Klik next.

konfigurasi perangkat virtual

4. Pada System Image, kita bisa memilih menggunakan Versi Android seperti Q, Pie, Oreo, Naugat dan versi Android lainnya. Disini kamu harus mendownload system image pada versi Android yang kamu pilih dengan klik tulisan download disebelah nama versi android. Setelah kamu berhasil mendownload system image, klik next untuk melakukan konfigurasi pada android virtual device yang kita buat.

system image perangkat virtual

5. Pada Jendela Virtual Device Configuration, kita bisa melihat konfigurasi Android Virtual Device yang telah dibuat. Kamu bisa mengubah konfigurasi orientasi layar awal dengan memilih portrait atau landscape. Jika ingin melakukan konfigurasi lainnya seperti jumlah RAM atau Memory Internal, kamu bisa lihat Show Advanced Setting. Kemudian klik finish untuk membuat emulator. 

final konfigurasi perangkat virtual

Emulator atau Android Virtual Device sudah kita buat. Untuk menjalankan project android, klik menu Run dan pilih Run ‘app’.

run app

Pada Jendela Select Deploymen Target, pilih emulator sudah kita buat, kemudian klik OK.

pilih perangkat run app

Setelah klik OK maka aplikasi akan muncul pada emulator android. Silahkan tekan Button Sentuh Aku untuk menguji fungsi dari listener yang sudah kita buat. Jika aplikasi berfungsi dengan baik maka akan seperti gambar di bawah.

aplikasi sentuh aku di emulator

Kita telah berhasil membuat aplikasi Android Sederhana dengan Button yang memiliki event saat disentuh. Ini awal yang baik untuk membuat kita bisa mengembangkan aplikasi Android lebih lanjut. Demikian tutorial Menjalankan Aplikasi Android Menggunakan Emulator. Jika kamu mengalami kesulitan dalam mengikuti tutorial ini, jangan ragu untuk bertanya di kotak komentar. Terima Kasih