Pembaruan

Modul ini baru saja diperbarui pada tanggal 26 October 2017.

Pembaruan terakhir adalah: Menambahkan video Download Source Code.

Lihat riwayat »

---

Tujuan

Codelab ini bertujuan untuk mengimplementasikan komponen activity pada aplikasi pertama yang Anda bangun. Harapannya aktifitas ini dapat memberi gambaran yang jelas tentang cara kerja activity.

Logika Dasar

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

Codelab Perhitungan Volume

1. Buat proyek baru dengan klik File → New → New Project pada Android Studio Anda.
   
2. Setelah muncul jendela Create New Project, atur nama aplikasi dan domain perusahaan / website Anda. Sebaiknya jangan sama dengan apa yang ada dicontoh. Dan jangan lupa pula untuk menentukan lokasi proyek.
   
3. Kemudian pilih tipe peranti (device) untuk aplikasi beserta target minimum SDK yang akan digunakan. Pilihan target Android SDK akan mempengaruhi banyaknya peranti yang dapat menggunakan aplikasi. Di sini kita memilih tipe peranti Phone and Tablet dan nilai minimum SDK kita pasang 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 macamtemplate 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 konfigurasi default 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 aplikasimaster detail pada peranti tablet
   Navigation Drawer Activity   : Activity dengan tampilan side bar menu
   Scrolling Activity                        : Activity dengan kemampuan scroll konten didalamnya secara vertikal
   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 , maka sebaiknya nama untuk activity tersebut disamakan dengan nama kelasnya dan diakhiri dengan activity . Misal: ProfileActivity, SettingsActivity dan lain sebagainya. Klik Finish untuk menyelesaikan.
   
6. Selamat! Anda telah berhasil membuat sebuah proyek baru Android. Biasanya, tampilan layar Anda akan seperti contoh di bawah 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 proyek, di mana nanti kita akan banyak menambahkan berbagai komponen baru, asset dan library. Untuk lebih mengenal Android Studio lebih dalam silakan baca materi inihttps://developer.android.com/studio/intro/index.html

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

Berikut flow umumnya.

1. Ngoding Layout untuk user interface aplikasi
2. Ngoding Activity untuk menambahkan logika aplikasi

Untuk mengoptimalkan proses pengetikan, Anda dapat memanfaatkan code completiondengan menekan ctrl + space. Android Studio juga akan meng-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. Silakan klik tab file activity_main.xml padaworkspace Anda(res/Layout/activity_main.xml), dan tambahkan 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 atribut android:text pada layout tersebut. Ini karena kita melakukan hardcoding pada nilai string-nya. Mari kita hilangkan code warningtersebut dengan menekan Alt+Enter pada attribut android:text.
   Akan muncul dialog seperti ini, pilihlah extract string resource.
   
3. Kemudian akan muncul dialog seperti di bawah ini. Sesuaikan dengan nama yang ada.
   
   
   
4. Fungsi extract string resource akan secara otomatis menambahkan nilai dariandroid:text ke dalam berkas res → values → strings.xml. Lakukan hal yang sama pada view lainnya hingga tidak ada warning lagi. Jika kita buka berkasstrings.xml, maka isinya akan menjadi 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 kesalahan pada atribut dimens, maka kita perlu menambahkan berkas dimens.xml di dalam res → values → dimens.xml. Kesalahan ini disebabkan karena pada Android Studio 2.3, berkas dimens.xml sudah tidak dibuat secara otomatis.
   Langsung saja tambahkan dengan cara Klik Kanan pada directory res. Akan muncul dialog seperti ini.
   
6. Kemudian isi sesuai di bawah ini.
   
7. Jika berkas dimens.xml sudah dibuat, sesuaikan isinya 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 berkas MainActivity.javadan 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 di atas baris merah tersebut dan klik pada ikon bola lampu. Atau dengan tekan tombol Alt + Enter lalu pilih implements method.
2. Setelah selesai, silakan jalankan aplikasi dengan memilih menu Run → Run ‘app’ dari menu bar. Kemudian ada pilihan seperti ini.
   
   Itu tandanya adb (Android Debugger) pada peranti yang Anda punya telah terhubung dengan Android Studio. Jika Anda tidak memiliki peranti, maka Anda dapat menggunakan emulator. Ikuti materinya disinihttps://developer.android.com/studio/run/managing-avds.html.
   
   Kami merekomendasikan Anda menggunakan peranti Android sewaktu mengembangkan aplikasi. Selain karena beban memori pada peranti Anda akan jadi lebih rendah, pendekatan ini juga akan memungkinkan Anda untuk merasakan bagaimana aplikasi berjalan di device sebenarnya.
   
   Pilih OK untuk menjalankan dan tunggu hingga proses building dan instalasi APK selesai. Jika sudah, seharusnya hasilnya akan seperti ini. Silakan masukan nilai panjang, lebar dan tinggi kemudian tekan tombol Hasil dan hasilnya akan ditampilkan di obyek textview tvHasil.
   
3. Apakah kita sudah selesai?
   Belum! Masih ada yang kurang. Ketika nilai luas sudah dihitung dan kemudian terjadi pergantian orientasi pada peranti, maka hasil perhitungan tadi 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 metodeonCreate.
   

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

4. Silakan jalankan kembali aplikasinya. Ulangi proses perhitungan seperti sebelumnya. Kemudian ganti orientasi peranti Anda. Jika sudah benar maka hasil perhitungan tidak akan hilang. 

Bedah Kode

Pembahasan tentang layout xml

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

Baris ini mengidentifikasi bahwa berkas ini berformat xml.

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

Kode di atas menandakan namespace yang digunakan dalam keseluruhan berkas xml ini.

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 klik

LinearLayout     : Komponen view bertipe viewgroup yang menjadi parent dari semua sub komponen view (sub view) di dalamnya. Komponen ini bersifat sebagai kontainer untuk komponen lain dengan orientasi 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. Perhatikan gambar di bawah ini, 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 padalayout_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 berkas dimens.xml yang bisa Anda lihat dengan cara menekan dan tahan tombol Ctrl(atau command) + arahkan kursor keatasnya dan kemudian klik sekali. Penggunaancentralize resource value akan memudahkan Anda sewaktu mengembangkan aplikasi Android. Cara tersebut digunakan agar Anda tidak menulis nilai 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. Pemberian id ini dimaksudkan agar kita bisa melakukan manipulasi/pengendalian pada level logic di komponen seperti activity atau fragment.

Id di atas akan diciptakan di berkas R.java dan disimpan dalam bentuk hexa bertipe data integer public static final int btn_calculate=0x7f0b0057.

Acuan untuk menyusun tampilan pada relativelayout akan dibahas pada modul selanjutnya.

Pembahasan tentang Logika Kode

public class MainActivity extends AppCompatActivity 

Menandakan bahwa kelas Java di atas merupakan sebuah activity karena inherit kesuperclass bernama AppCompatActivity.

implements View.OnClickListener 

Ini adalah listener yang kita implementasikan untuk memantau kejadian klik pada komponen tombol (button).

Jika terdapat baris merah seperti ini :

Jangan khawatir. Silakan klik di atas baris merah tersebut dan klik pada ikon bola lampu. Anda juga dapat menekan tombol (Alt + Enter) lalu pilih implements method.

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

Kode di atas mendeklarasikan 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);
   }

Metode onCreate() merupakan metode utama pada activity. Di sinilah kita dapat mengatur layout xml. Semua proses inisialisasi komponen yang digunakan akan dijlankan disini.. Pada metode ini kita casting semua komponen view yang kita telah deklarasikan sebelumnya, agar dapat kita manipulasi.

setContentView(R.layout.activity_main);

Maksud baris diatas adalah 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 metode findViewById().

btnCalculate.setOnClickListener(this); 

Kita memasang event click listener untuk obyek btnCalculate sehingga sebuah aksi dapat dijalankan ketika obyek tersebut diklik. Keyword this merujuk pada obyekActivity saat ini yang telah mengimplementasikan listenerOnClickListener sebelumnya. 

Pembahasan saveInstanceState 

@Override
protected void onSaveInstanceState(Bundle outState) {

    outState.putString(STATE_HASIL, tvResult.getText().toString());
    super.onSaveInstanceState(outState);
}

Perhatikan metode onSaveInstanceState. Di dalam metode tersebut, hasil perhitungan yang ditampilkan pada tvResult dimasukkan pada bundle kemudian disimpan isinya. Setelah onSaveInstanceState berhasil dijalankan, maka activity akan melakukan proses onDestroy dan menjalankan kembali 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 sebelumnya pada onSaveInstanceState. Nilai tersebut kita isikan kembali padatvResult.

Selamat! Anda telah berhasil membuat dan menjalankan latihan Android pertama di peranti atau emulator. Silakan lanjut ke codelab berikutnya.

Source code dapat anda unduh/duplikasi di 

• Source Code BarVolume 

Pastikan untuk download git terlebih dahulu. Cek link dibawah ini :