Membuat Aplikasi Android dengan Kotlin Untuk Pemula

Hello World di Android Studio dengan Kotlin

Setelah proses pemasangannya selesai, buka aplikasi Android Studio sampai muncul jendela Welcome to Android Studio berikut.

Klik tombol Start a new Android studio project (pilihan paling atas). Isi Application name dengan nama project yang diinginkan. Disini penulis memberikan nama "Hello World". Isi Company domain dengan domain pribadi pembaca atau domain perusahaan. Tentukan lokasi project di Project location, usahakan agar tidak menyimpannya di lokasi yang mengandung spasi karena terkadang bisa menyebabkan error (klik tombol ... yang ada disebelah kanan). Terakhir jangan lupa untuk mencentang Include Kotlin support. Klik tombol Next.

Di jendela berikutnya, kita akan diminta untuk memilih perangkat apa saja yang bisa menggunakan aplikasi kita. Perlu diingat bahwa Android bukan hanya smartphone atau tablet tapi juga ada perangkat Android dalam bentuk arloji/jam tangan/wear (Wear/Smartwatch), di mobil (Android Auto), TV, dan IoT (Android Things). Karena kita hanya akan mempelajari pembuatan aplikasi Android untuk smartphone dan tablet, maka berikan tanda centang hanya di Phone and Tablet.

Pemilih API di dropdown Phone and Tablet cukup ikuti apa yang disarankan oleh Android Studio (kecuali jika pembaca sudah tahu API level berapa yang ingi dipakai). Level API yang dipilih akan menjadi versi Android minimum yang bisa memasang aplikasi buatan kita nanti. Perangkat Android dengan versi di bawah minimum yang kita tentukan tidak akan bisa memasangnya.

Dijendela berikutnya, kita akan diminta untuk memilih template awal. Cukup pilih Basic Activity dan klik tombol Next.

Jendela berikutnya akan meminta kita menentukan nama Activity, Layout dan Title Activity. Untuk saat ini abaikan semuanya dan klik tombol Finish. Tunggu proses gradle selesai.

Activity dan Layout XML

Jika tidak ada yang berubah, maka aplikasi Android Studio akan tampil seperti di bahwa ini saat membuat project baru:

Dari sini pembaca bisa melihat tiga file utama yaitu MainActivity, activity_main.xml, dan content_main.xml. File activity_main.xml dan content_main.xml adalah file layout karena berada di dalam folder layout. File-file yang ada di dalam folder layout bertanggung jawab untuk menampilkan sesuatu kepada user. Tapi, sebelum file layout bisa tampil yang dilihat pengguna, kita memerlukan komponen lain yaitu Activity.

Dalam pemrograman Android, sebuah Activity bisa dikatakan sebagai sebuah halaman atau sebuah layar yang menampilkan sesuatu kepada user. Loh,bukankah layout yang bertanggung jawab menampilkan sesuatu ke user? Coba lihat isi file MainActivity berikut ini:

src="https://gist.github.com/lobothijau/cd610a89c69fa418926bfc96d1064364.js">

Perhatikan pada baris ke 5 yaitu perintah setContentView(R.layout.activity_main). Di baris ini lah kita memasangkan layout bernama activity_main.xml dengan MainActivity, sehingga saat MainActivity di jalankan maka layout activity_main.xml yang akan tampil.

Meskipun penulis mengatakan bahwa file layout bertanggung jawab untuk menampilkan sesuatu kepada user, tapi ia membutuhkan sebuah Activity untuk bisa tampil. Apabila tidak ada Actvitiy yang memasangkannya di setContentView maka layout itu tidak akan tampil meskipun sudah kita desain sedemikian rupa. Begitu pula sebaliknya, apabila kita membuat Activity tapi tidak ada setContentView untuk memasangkannya dengan sebuah layout, maka halaman yang muncul tidak dapat menampilkan apa-apa.

Mengenal Layout XML di Android

Untuk menyusun tampilan aplikasi Android, kita akan menggunakan XML. Penulisan XML mirip dengan HTML jika pembaca pernah belajar. Struktur file XML adalah sebagai berikut:


<Pembuka>

 <Konten/>

 <Konten/>

 <GrupIsi>

  <Konten/>

  <Konten/>

    </GrupIsi>

</Pembuka>

Nama tag pembuka akan selalu dimulai dengan huruf Kapital. Apabila tag tersebut memiliki isi (seperti Pembuka dan GrupIsi) maka penulisannya <Pembuka></Pembuka>. Tapi jika tidak memiliki isi (seperti Konten) maka penulisannya <Konten/>. Perhatikan penulisan tanda /.

Sekarang mari kita buka file activity_main.xml:

src="https://gist.github.com/lobothijau/05f075e36617ada403d830e6a1531374.js">

Banyak ya? Tapi tenang, kita tidak perlu memahami seluruh isi activity_main.xml secara keseluruhan untuk saat ini. Yang perlu kita perhatikan adalah baris 23 dan 25-32.

Baris 25-32 adalah deklarasi komponen bernama FloatingActionButton atau tombol warna merah muda yang ada di pojok kanan bawah. Karena tidak akan kita pakai untuk saat ini, maka baris 25-32 ini bisa dihapus.

Baris 23 adalah perintah untuk membaca file layout lain dari sebuah file layout. Jika pembaca sadari, di dalam activity_main.xml tidak ada komponen yang ada tulisan Hello World-nya seperti yang tertera di gambar Preview. Hal ini terjadi karena teks Hello World disimpan di dalam file content_main.xml.

Tentang activity_main.xml dan content_main.xml

Ketika memilih Basic Activity saat pembuatan project tadi, kita dibuatkan sebuah Activity dan sebuah layout yang terdiri dari dua file. Jadi, meskipun filenya terpisah isi content_main.xml tetap menjadi bagian dari activity_main.xml. Baris <include layout="@layout/content_main" /> bisa diartikan seperti ini: "saya ingin memasukkan seluruh isi content_main.xml dimulai dari baris ini di file ini (activity_main.xml)".

Sekarang coba kita lihat isi dari file content_main.xml:

src="https://gist.github.com/lobothijau/170a8aafd0ef65b2c8a9c01904a845bc.js">

Coba pembaca lihat baris 11-18. Dibagian inilah kita mendefinisikan komponen yang menampilkan teks "Hello World" di layar preview (baris 14).

Mengenal View dan ViewGroup

Masih di dalam file content_main.xml kita bisa melihat ada dua komponen di sana yaitu android.support.constraint.ConstraintLayout dan TextView. TextView adalah salah satu contoh View yang berfungsi untuk menampilkan teks ke layar. View lain selain TextView adalah EditText untuk memasukkan data (input), Button untuk membuat tombol, dan ImageView untuk menampilkan gambar.

Sebuah View tidak dapat berdiri sendiri. Ia harus memiliki sebuah induk/parenttempat ia menempel. Induk sebuah View ini dinamakan dengan ViewGroup dan ConstraintLayout adalah salah satu contohnya.

Atribut Pada View dan ViewGroup

Setiap komponen View dan ViewGroup wajib memiliki atribut android:heightdan andorid:width untuk menentukan tinggi dan lebarnya. Ada tiga nilai yang bisa kita isi:

wrap_content artinya tinggi atau lebar mengikuti isi komponen (tidak fix)
match_parent artinya tinggi atau lebar mengikuti parent
xxdp artinya kita ingin mengatur tinggi atau lebarnya secara manual dengan menuliskan ukurannya (ganti xx menjadi angka) dan memiliki satuan dp conth: 100dp, 200dp, 300dp.

LinearLayout dan RelativeLayout

Karena penulis belum menguasai ConstraintLayout maka kita tidak akan menggunakannya di seri tutorial ini. Sebaliknya, kita akan memakai dua ViewGroup yang paling sering dipakai yaitu LinearLayout dan RelativeLayout.

LinearLayout

Sekarang coba ubah ViewGroup ConstraintLayout di baris 2 dan 20 menjadi LinearLayout dan tambahkan komponen TextView satu lagi dan lihat apa yang muncul di Preview.

src="https://gist.github.com/lobothijau/608647d09840494de5a1519a9dec9633.js">

LinearLayout adalah ViewGroup yang menyusun komponen-komponen didalamnya tersusun dari kiri ke kanan (horizontal) atau dari atas ke bawah (vertikal). Jika tidak diatur, maka LinearLayout akan memberikan orientasi horizontal. Jika ingin agar komponennya terseusun secara vertikal, kita harus mengatur orientasinya secara manual. Tambahkan atribut android:orientation="vertical" di tag pembuka:


<LinearLayout xmlns:android="http://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"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:context="com.lobothijau.helloworld.MainActivity"

    tools:showIn="@layout/activity_main"

    android:orientation="vertical"

    >

RelativeLayout

Berbeda dengan LinearLayout yang hanya memiliki dua opsi dalam menampilkan komponen-komponennya, RelativeLayout memiliki opsi yang lebih bebas. Perhatikan layout yang sama dengan kode RelativeLayout berikut:

src="https://gist.github.com/lobothijau/ef6a1b8a9e9f0f8186449185440bca56.js">

Saat menggunakan RelativeLayout, seluruh komponen akan menumpuk di pojok kiri atas. Kita tentukan salah satu TextView yang ingin ditampilkan paling atas lalu kita berikan sebuah id. Cara menulis id bisa dilihat di baris 13.

Selanjutnya, kita bisa memberitahu TextView yang satu lagi untuk berada di bawah TextView ber-id helloPertama dengan atribut android:layout_below="@id/helloPertama".

Sulit untuk menjelaskan bagaimana cara kerja RelativeLayout seluruhnya disini. Oleh karena itu penulis menyarankan pembaca untuk mencoba-coba sendiri bagaimana cara membuat berbagai layout dengan RelativeLayout dengan lebih mendalam.

Membuat Aplikasi Interaktif Sederhana

Ubah isi content_main.xml menjadi sebagai berikut:

src="https://gist.github.com/lobothijau/a78ac7e61cae77be8766dfdde7fe07c3.js">

Disini kita memiliki sebuah EditText sebagai form untuk memasukkan nama dan sebuah Button sebagai tombol yang saat disentuh akan menampilkan isi EditText ke dalam TextView.

Modifikasi MainActivity

Karena sebelumnya komponen FloatingActionButton kita hapus dari activity_main.xml, maka kita hapus pula komponen berikut dari dalam method onCreate():


fab.setOnClickListener { view ->

    Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

      .setAction("Action", null).show()

}

Kemudian ubah isi method onCreate() menjadi:

src="https://gist.github.com/lobothijau/14fd34a52c6589138c31b76c6746a02f.js">

Kode yang kita perlu tambahkan ada di baris 11 - 13. Perhatikan saat pertama menulis btnMasuk kita akan diminta memilih asal layoutnya. Saya muncul popupseperti pada gambar di bawah maka tekan tombol ENTER.

Saat kita menekan tombol ENTER maka akan ditambahkan dua baris berikut di bagian import:


import kotlinx.android.synthetic.main.activity_main.*

import kotlinx.android.synthetic.main.content_main.*

Dua baris ini kita perlukan karena kita ingin menggunakan komponen-komponen yang ada di dalam activity_main.xml dan content_main.xml. Perhatikan juga bahwa btnMasuk, textNama dan editNama adalah id dari komponen Button, TextView dan EditText.

Share : Membuat Aplikasi Android dengan Kotlin Untuk Pemula

Membuat Aplikasi Android dengan Kotlin Untuk Pemula

4/ 5

Oleh anovandi

Wednesday, September 26, 2018