Belajar Membuat Aplikasi Android dengan Kotlin Untuk Pemula

Bagian 1: Activity dan Layout

 

Semoga sekarang sudah tahu alasan-alasannya mengapa kita harus mulai belajar Kotlin untuk Android, namun sumber belajar untuk membuat aplikasi Android dengan Kotlin untuk pemula masih sangat terbatas. Oleh karena itu, saya akan ikut berkontribusi dalam mengisi kebutuhan pembaca yang memerlukan sumber belajar membuat aplikasi Android menggunakan bahasa pemrograman Kotlin.

Untuk Siapa Tutorial Ini?

Tutorial ini ditulis untuk siapa saja yang ingin mencoba belajar membuat aplikasi Android menggunakan Kotlin, baik bagi yang sudah pernah belajar ngoding atau belum pernah mencoba membuat aplikasi apapun. Idealnya, pembaca diharapkan sudah pernah belajar pemrograman sehingga untuk konsep-konsep mendasar seperti percabangan (if), perulangan (for), atau fungsi tentunya lebih baik jika sudah cukup memahami.

Apa Saja yang Akan Kita Pelajari?

Pemrograman Android adalah topik yang besar, sangat besar malah. Untuk membahas keseluruhan topik pemrograman Android akan membutuhkan waktu yang sangat lama. Oleh karena itu, kita akan mempelajari topik-topik wajib terlebih dahulu sebelum membahas topik-topik tambahan.

Topik wajib yang penulis maksud adalah topik-topik yang dibutuhkan untuk membuat sebuah aplikasi minimalis. Dengan kata lain topik yang kita pelajari adalah apa-apa saja yang bisa membantu mewujudkan aplikasi yang ingin dibuat dalam bentuk yang paling sederhana untuk bisa digunakan (meski memiliki fitur yang minim). Topik wajib yang akan kita pelajari di antaranya:

⦁ Activity dan Layout XML

⦁ Intent

⦁ Menampilkan Kumpulan Data dengan RecyclerView

⦁ Mengambil Data dari API (JSON)

⦁ Menyimpan data ke penyimpanan lokal (SQLite)

Setelah topik-topik wajib dibahas, kita akan coba membahas topik-topik tambahan yang bisa dipakai untuk meningkatkan kualitas aplikasi kita diantaranya:

⦁ Notifikasi

⦁ AlarmManager

⦁ Job Scheduler

⦁ Firebase (Authentication, Realtime Database, Firestore, dkk.)

⦁ dan topik-topik lainnya (silahkan request)

Tujuan utama pembuatan tutorial ini ialah untuk membantu pembaca yang ingin belajar membuat aplikasi Android menggunakan bahasa pemrograman Kotlin. Penulis ingin pembaca yang tadinya belum bisa ngoding, bisa membuat aplikasi Android sederhana sendiri atau yang tadinya sudah bisa membuat aplikasi Android dengan Java, sekarang bisa membuat aplikasi Android dengan Kotlin.

Gaya penulisan tutorial ini dibuat berdasarkan pengalaman pribadi penulis dalam belajar. Teknik-teknik yang penulis pakai merupakan teknik yang penulis anggap paling memudahkan (menurut definisi penulis juga tentunya). Urut-urutan topik yang dibahas juga penulis pilih sendiri dan tidak mengikuti panduan yang ditulis oleh Google .

Sekarang mari kita lanjutkan ke proses yang lebih nyata dengan terlebih dahulu memasang Android Studio.

Memasang Android Studio

Kita akan menggunakan Android Studio sebagai alat utama pembuatan aplikasi Android menggunakan Kotlin. Untuk memasang Android Studio, pertama buka dulu alamat https://developer.android.com/studio/index.html. Di halaman yang muncul, klik tombol DOWNLOAD ANDROID STUDIO seperti pada gambar.

 

Setelah selesai mengunduh, silahkan lanjutkan proses pemasangan Android Studio dengan salah satu video tutorial yang ada di Youtube:

⦁ Windows

⦁ Linux (Ubuntu)

⦁ Mac

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 ingin 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.

Di jendela 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 bawah 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. Bukankah layout yang bertanggung jawab menampilkan sesuatu ke user? Coba lihat isi file MainActivity berikut ini:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)

        fab.setOnClickListener { view ->
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show()
        }
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.menu_main, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        return when (item.itemId) {
            R.id.action_settings -> true
            else -> super.onOptionsItemSelected(item)
        }
    }
}

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:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    tools:context="com.lobothijau.helloworld.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

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:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

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/parent tempat 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:height dan 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.

<?xml version="1.0" encoding="utf-8"?> <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"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> </LinearLayout>

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:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.lobothijau.helloworld.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:id="@+id/helloPertama"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <TextView
        android:layout_below="@id/helloPertama"
        android:id="@+id/helloKedua"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</RelativeLayout>

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:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.lobothijau.helloworld.MainActivity"
    tools:showIn="@layout/activity_main">

    <EditText
        android:id="@+id/editNama"
        android:hint="Masukkan Nama Kamu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_below="@id/editNama"
        android:layout_centerHorizontal="true"
        android:id="@+id/btnMasuk"
        android:text="Masuk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!-- Khusus untuk font satuannya adalah sp bukan dp -->
    <TextView
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:textSize="30sp"
        android:id="@+id/textNama"
        android:text="Nama kamu adalah ... "
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

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:

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

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)

        btnMasuk.setOnClickListener { view ->
            textNama.text = editNama.text
        }

    }
}

Kode yang kita perlu tambahkan ada di baris 11 - 13. Perhatikan saat pertama menulis btnMasuk kita akan diminta memilih asal layoutnya. Saya muncul popup seperti 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.

Cara Kerja Aplikasi

Pertama kita ingin mendeteksi saat user menyentuh tombol YA. Untuk melakukan pendeteksian itu, kita perlu memberikan setOnClickListener ke sebuah komponen. Karena tombol kita memiliki id btnMasuk maka kita tuliskan btnMasuk.setOnClickListener { view -> }. Method setOnClickListener bisa kita berikan ke komponen apapun, jadi cukup tuliskan nama komponennya sebelum nama method ini. Di dalam tanda kurung kurawal kita tuliskan view ->, lalu di sebelah kanan tanda panah kita tuliskan aksi apa saja yang kita lakukan saat tombol di setuh.

Saat tombol disentuh, kita ingin agar isi dari EditText ber-id editNama ditambil lalu diisi kedalam TextView ber-id textNama. Penulisan namaKomponen.text akan mengambil isi teks yang ada di dalam komponen tersebut. Semua komponen yang di XML-nya memiliki atribut "android:text" pasti bisa diambil dengan cara ini.

Sumber : https://codepolitan.com/blog/belajar-membuat-aplikasi-android-dengan-kotlin-untuk-pemula-bagian-1-activity-dan-layout-5aaa3f51344be