Membuat dan Menjalankan Aplikasi Android Pertama

Latihan Pertama

Codelab ini bertujuan untuk mengimplementasikan komponen Activity pada aplikasi pertama yang anda bangun sehingga dapat memberikan gambaran tentang bagaimana Activity ditampilkan. Kemudian anda memberikan Interaksi di dalamnya seperti memberi input dan mengklik sebuah tombol.

Logika Dasar

Melakukan input ke dalam obyek TextBox → Melakukan validasi input → Melakukan perhitungan volume balok ketika tombol hitung diklik

Codelab Perhitungan Volume

1. Buat Project Baru dengan klik File -> New -> New Project... pada Android Studio anda
   
2. Setelah muncul Jendela Create New Project, kemudian atur nama aplikasi dan domain perusahaan/website anda. Sebaiknya jangan sama dengan apa yang ada dicontoh. Dan jangan lupa pula untuk menentukan lokasi project.
   
3. Kemudian pilih tipe device untuk aplikasi beserta target minimum SDK yang akan kita gunakan. Pilihan target Android SDK yang kita pilih akan mempengaruhi banyaknya device yang bisa menggunakan aplikasi  buatan kita. Disini kita pilih untuk tipe device Phone and Tablet dengan minimum SDK diset ke Level 15 (Ice Cream Sandwich)/  Klik Next untuk melanjutkan.
   
4. Pada bagian ini kita akan memilih tipe Activity awal dari template yang telah disediakan.  Saat ini Android Studio sudah menyediakan berbagai macam template Activity dari yang paling sederhana hingga yang paling kompleks seperti :
   Add No Activity                           : Tidak ada Activity yang ditambahkan
   Basic Activity                               : Activity dengan template komponen material design seperti FloatingActionButton
   Empty Activity                             : Activity dalam bentuk yang paling dasar
   Fullscreen Activity                     : Activity fullscreen tanpa status bar
   Google AdMob Ads Activity   : Activity dengan default konfigurasi iklan Admob
   Google Maps Activity                : Activity dengan menyediakan konfigurasi dasar Google Maps
   Login Activity                               : Activity untuk halaman login
   Master / Detail Flow                  : Activity yang diperuntukan untuk alur aplikasi Master Detail pada device tablet
   Navigation Drawer Activity   : Activity dengan tampilan side bar menu
   Scrolling Activity                        : Activity dengan kemampuan Scroll konten didalamnya secara vertical
   Settings Activity                         : Activity yang diperuntukan untuk Konfigurasi Aplikasi
   Tabbed Activity                      : Activity yang diperuntukan untuk menampilkan lebih dari satu tampilan, dapat digeser ke kanan dan ke kiri (Swipe) dan dengan menggunakan komponen ViewPager
   
   Saat ini kita pilih tipe Empty Activity, klik Next untuk melanjutkan.
   
   
5. Selanjutnya, tentukan nama Activity pertama kita, saat ini kita biarkan pada kondisi apa adanya. Ingat, jika suatu saat nanti kita ingin melakukan penambahan Activity, best practice nya adalah dengan menambahkan Activity setelah kata nama kelas yang akan kita buat. Misal: ProfileActivity, SettingsActivity dan lain sebagainya. Klik Finish untuk menyelesaikan.
   
6. Selamat!, Anda telah berhasil membuat sebuah project baru Android. Layar anda pasti akan seperti dibawah ini:
   
7. Di sebelah kanan anda adalah workspace dimana Activity anda berada dan bernama MainActivity.java dengan layoutnya activity_main.xml. Di sebelah kiri anda terdapat struktur project anda dimana nanti kita akan banyak menambahkan berbagai komponen, asset dan library. Untuk lebih mengenal Android Studio lebih dalam silakan baca materi ini https://developer.android.com/studio/intro/index.html

Selanjutnya kita akan mulai melakukan pengkodean aplikasi atau lebih enaknya disebut ngoding. Berikut flow umumnya.

Ngoding Layout untuk User Interface aplikasi

Ngoding Activity untuk menambahkan logika aplikasi

Jangan ngetik saja atau ngoding polos, Gunakan ctrl + space untuk menggunakan code completion dari Android Studio agar mengoptimasi import package dari komponen yang digunakan.

Dilarang Keras untuk copy - paste! Ngoding pelan-pelan akan membuat anda lebih jago di masa depan.

Selamat ngoding!

Menambahkan Code Sederhana pada Layout Activity

1. Silahkan klik tab file activity_main.xml pada workspace anda (res/Layout/activity_main.xml), dan silakan ikuti baris-baris berikut:

   
   <LinearLayout 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"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
       android:orientation="vertical"
       tools:context="com.dicoding.associate.barvolume.MainActivity">
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="Panjang"
           android:layout_marginBottom="@dimen/activity_vertical_margin"/>
       <EditText
           android:id="@+id/edt_length"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:inputType="numberDecimal"
           android:lines="1"
           android:layout_marginBottom="@dimen/activity_vertical_margin"/>
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="Lebar"
           android:layout_marginBottom="@dimen/activity_vertical_margin"/>
       <EditText
           android:id="@+id/edt_width"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:inputType="numberDecimal"
           android:lines="1"
           android:layout_marginBottom="@dimen/activity_vertical_margin"/>
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="Tinggi"
           android:layout_marginBottom="@dimen/activity_vertical_margin"/>
       <EditText
           android:id="@+id/edt_height"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:inputType="numberDecimal"
           android:lines="1"
           android:layout_marginBottom="@dimen/activity_vertical_margin"/>
       <Button
           android:id="@+id/btn_calculate"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="Hitung"
           android:layout_marginBottom="@dimen/activity_vertical_margin"/>
       <TextView
           android:id="@+id/tv_result"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="Hasil"
           android:gravity="center"
           android:textSize="24sp"
           android:textStyle="bold"
           android:layout_marginBottom="@dimen/activity_vertical_margin"/>
   </LinearLayout>
   
   

2. Akan muncul warning pada attribut android:text pada layout tersebut. Ini disebabkan karena kita hardcode code string kita. Mari kita hilangkan code warning tersebut dengan menekan alt+enter pada attribut android:text. Akan muncul dialog seperti ini, pilihlah extract string resource.
   
3. Kemudian akan muncul dialog seperti dibawah ini, sesuaikan dengan nama yang ada.
   
4. Fungsi extract string resource akan secara otomatis menambahkan values dalam android:text ke dalam file res → values → strings.xml. Tambahkan juga pada view lainnya hingga tidak ada warning lagi. Jika kita buka files strings.xml akan seperti ini.

   
   <resources>
       <string name="app_name">BarVolume</string>
       <string name="lebar">Lebar</string>
       <string name="tinggi">Tinggi</string>
       <string name="hitung">Hitung</string>
       <string name="hasil">Hasil</string>
       <string name="panjang">panjang</string>
   </resources>
   
   

   
   
5. Jika terjadi error pada attribut dimens, maka kita perlu menambahkan file dimens.xml di dalam res → values → dimens.xml. Error ini disebabkan karena pada Android Studio 2.3 file dimens.xml sudah tidak di generate secara otomatis ketika sebuah project dibuat. Langsung saja tambahkan dengan cara klik kanan pada directory res. Akan muncul dialog seperti ini.
   
6. Kemudian isikan sesuai di bawah ini.
   
7. Jika file dimens.xml sudah terbuat, sesuaikan isi dari dimens.xml menjadi seperti berikut.

   
   <resources>
       <!-- Default screen margins, per the Android Design guidelines. -->
       <dimen name="activity_horizontal_margin">16dp</dimen>
       <dimen name="activity_vertical_margin">16dp</dimen>
   </resources>
   
   

   
   

Menambahkan Kode Logika Sederhana pada MainActivity

1. Selanjutnya setelah selesai, lanjutkan dengan membuka file MainActivity.java dan lanjutkan ngoding baris-baris dibawah ini.

   
   public class MainActivity extends AppCompatActivity implements View.OnClickListener{
       private EditText edtWidth, edtHeight, edtLength;
       private Button btnCalculate;
       private TextView tvResult;
    
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           edtWidth = (EditText)findViewById(R.id.edt_width);
           edtHeight = (EditText)findViewById(R.id.edt_height);
           edtLength = (EditText)findViewById(R.id.edt_length);
           btnCalculate = (Button)findViewById(R.id.btn_calculate);
           tvResult = (TextView)findViewById(R.id.tv_result);
           btnCalculate.setOnClickListener(this);
       }
    
       @Override
       public void onClick(View v) {
           if (v.getId() == R.id.btn_calculate){
               String length = edtLength.getText().toString().trim();
               String width = edtWidth.getText().toString().trim();
               String height = edtHeight.getText().toString().trim();
               boolean isEmptyFields = false;
               if (TextUtils.isEmpty(length)){
                   isEmptyFields = true;
                   edtLength.setError("Field ini tidak boleh kosong");
               }
               if (TextUtils.isEmpty(width)){
                   isEmptyFields = true;
                   edtWidth.setError("Field ini tidak boleh kosong");
               }
               if (TextUtils.isEmpty(height)){
                   isEmptyFields = true;
                   edtHeight.setError("Field ini tidak boleh kosong");
               }
               if (!isEmptyFields) {
                   double l = Double.parseDouble(length);
                   double w = Double.parseDouble(width);
                   double h = Double.parseDouble(height);
                   double volume = l * w * h;
                   tvResult.setText(String.valueOf(volume));
               }
           }
       }
   }
   
   

   Jika terdapat baris merah seperti ini :
   
   Jangan khawatir, silakan klik keatas baris merah tersebut dan silakan klik pada icon  atau dengan tekan tombol (Alt + Enter)lalu pilih implements method
2. Setelah sudah selesai silakan jalankan aplikasi dengan mengklik  atau Run → Run ‘app’ dari menu bar. Kemudian ada pilihan seperti ini.
   
   
   
   Itu tandanya adb (Android Debugger) device yang anda punya telah terkoneksi dengan Android Studio. Jika anda tidak memiliki device silakan gunakan emulator. Ikuti materinya disini https://developer.android.com/studio/run/managing-avds.html.
   
   
   Kami merekomendasikan anda menggunakan device Android sewaktu develop aplikasi di Android. Selain karena akan menghemat penggunaan memori dari device yang anda gunakan, juga akan memberikan pengalaman yang berbeda dengan menjalankan aplikasi di device anda sendiri. Pilih OK untuk menjalankan dan tunggu hingga proses building dan instalasi apk aplikasi anda berjalan. Jika sudah, seharusnya hasilnya akan seperti ini.
   Silakan masukan nilai panjang, lebar dan tinggi kemudian tekan tombol Hasil dan whoilla hasilnya akan ditampilkan di obyek TextView tvHasil.
   
   
   
3. Selesai? Belum, masih ada yang kurang , ketika setelah menghitung luas dan kemudian terjadi pergantian orientasi pada device maka hasil perhitungan akan hilang. Tambahkan beberapa baris berikut pada MainActivity.java

   
   private static final String STATE_HASIL = "state_hasil";
    
   @Override
   protected void onSaveInstanceState(Bundle outState) {
    
       outState.putString(STATE_HASIL, tvResult.getText().toString());
       super.onSaveInstanceState(outState);
   }
   
   

   Kemudian tambahkan juga beberapa baris berikut pada baris terakhir method onCreate

   
   if (savedInstanceState != null){
       String hasil = savedInstanceState.getString(STATE_HASIL);
       tvResult.setText(hasil);
   }
   
   

4. Silakan jalankan aplikasi kembali kemudian coba lakukan perhitungan dan ganti orientasi device. Jika sudah benar maka hasil perhitungan akan dijaga. 

Bedah Kode

Pembahasan tentang layout xml

xml version="1.0" encoding="utf-8"?>  => 

Baris ini mengidentifikasi bahwa file ini berformat xml.

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

Merupakan namespace yang digunakan dalam keseluruhan file xml ini.

tools:context="com.dicoding.associate.barvolume.MainActivity" 

Mengidentifikasi bahwa file layout xml ini berelasi dengan MainActivity.

Disini kita menggunakan beberapa komponen user interface yang disebut View diantaranya:

TextView             : Komponen View untuk menampilkan teks ke layar

EditText               : Komponen View untuk memberikan input teks

Button                  : Komponen View untuk melakukan sebuah aksi dengan mengklik

LinearLayout     : Komponen View bertipe ViewGroup yang menjadi parent dari semua sub komponen View (Sub View) didalamnya. Komponen ini bersifat sebagai kontainer untuk komponen lain dengan susunan secara Vertikal atau Horizontal.

Cara membaca :

 <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Panjang"
    android:layout_marginBottom="@dimen/activity_vertical_margin"/>

Komponen diatas adalah sebuah TextView, warna ungu menandakan namespace yang digunakan, warna biru adalah atribut dari komponen dan warna hijau adalah nilai dari atribut. Penjelasannya seperti dibawah ini:

match_parent: Ini berarti bahwa ukuran dimensi sebuah View disesuaikan dengan ukuran layar secara horizontal jika pada layout_width dan vertikal jika pada layout_height.

wrap_content : Ini berarti bahwa ukuran dimensi sebuah View disesuaikan dengan ukuran konten didalamnya baik secara horizontal pada layout_width dan vertikal jika pada layout_height.

@dimen/activity_vertical_margin: Value activity_vertical_margin berasal dari file resource dimens.xml yang bisa anda lihat dengan cara menekan dan tahan tombol ctrl (atau command) + arahkan kursor keatasnya dan kemudian klik sekali. Penggunaan centralize resource value akan memudahkan anda sewaktu developmen aplikasi Android. Penggunaan cara tersebut supaya tidak menulis value yang sama berulang-ulang.

Apa itu ‘@+id/’ ? 

Salah satu contoh penerapan penggunaan @+id/ sebagai berikut:

<Button
    android:id="@+id/btn_calculate"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hitung"
    android:layout_marginBottom="@dimen/activity_vertical_margin"/>

Penjelasannya sebagai berikut:

android:id="@+id/btn_calculate"

Jika kita memberikan id pada sebuah View maka kita telah memberikan identifier untuk View tersebut agar:

Bisa kita manipulasi/dikontrol pada level logic di komponen seperti Activity atau Fragment. ID ini akan diciptakan di file R.javakedalam bentuk nilai hexa bertipe data Integer à public static final int btn_calculate=0x7f0b0057;

Sebagai acuan untuk penyusunan tampilan pada RelativeLayout (akan dibahas pada modul selanjutnya).

Pembahasan tentang Logika Kode

public class MainActivity extends AppCompatActivity 

Menandakan bahwa Kelas Java kita merupakan sebuah Activity karna inherit ke superclass bernama AppCompatActivity

implements View.OnClickListener 

Ini adalah listener yang kita implementasikan untuk melakukan proses event klik pada komponen tombol (button)

Jika terdapat baris merah seperti ini :

Jangan khawatir, silakan klik ke atas baris merah tersebut dan silakan klik pada icon atau dengan tekan tombol (Alt + Enter) lalu pilih implements method

private EditText edtWidth, edtHeight, edtLength;
private Button btnCalculate;
private TextView tvResult;

Deklarasi semua komponen View yang akan dimanipulasi. Kita deklarasikan secara global agar bisa dikenal di keseluruhan bagian kelas.

@Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       edtWidth = (EditText)findViewById(R.id.edt_width);
       edtHeight = (EditText)findViewById(R.id.edt_height);
       edtLength = (EditText)findViewById(R.id.edt_length);
       btnCalculate = (Button)findViewById(R.id.btn_calculate);
       tvResult = (TextView)findViewById(R.id.tv_result);
       btnCalculate.setOnClickListener(this);
   }

Method onCreate() merupakan method utama pada Activity. Di sinilah kita dapat mengatur layout xml dan semua proses inisialisasi komponen yang akan digunakan diciptakan. Pada method ini kita casting semua komponen View yang kita telah deklarasikan sebelumnya, agar dapat kita manipulasi.

setContentView(R.layout.activity_main);

Maksud baris diatas adalah bahwa kelas MainActivity akan menampilkan tampilan yang berasal dari layout activity_main.xml

edtWidth = (EditText)findViewById(R.id.edt_width);

Maksud dari baris diatas adalah obyek EditText edtWidth disesuaikan (Cast) dengan komponen EditText ber-ID edt_width di layout xml melalui method findViewById()

btnCalculate.setOnClickListener(this); 

Set Event Click Listener untuk obyek btnCalculate sehingga dapat melakukan sebuah aksi ketika pengguna melakukan Klik. Keyword this menekankan pada obyek Activity saat ini yang telah mengimplementasikan listener OnClickListener sebelumnya.  

Pembahasan saveInstanceState 

@Override
protected void onSaveInstanceState(Bundle outState) {
 
    outState.putString(STATE_HASIL, tvResult.getText().toString());
    super.onSaveInstanceState(outState);
}

Perhatikan pada method onSaveInstanceState, didalam method ini hasil perhitungan yang ditampilkan pada tvResult dimasukkan pada bundle kemudian di save isinya. Setelah onSaveInstanceState berhasil dijalankan maka activity akan melakukan proses onDestroy dan menjalankan lagi  OnCreate secara otomatis.

if (savedInstanceState != null){
    String hasil = savedInstanceState.getString(STATE_HASIL);
    tvResult.setText(hasil);
}

Pada onCreate inilah kita menggunakan nilai bundle yang telah kita simpan tadi pada onSaveInstanceState kemudian kita isikan kembali pada tvResult.

Selamat! Anda telah berhasil membuat dan menjalankan aplikasi android pertama di device atau emulator.