Membuat aplikasi menggunakan Kotlin dan Java – Bagian 1

Melanjutkan dari artikel sebelumnya, Saya akan mengajak anda bagaimana membuat aplikasi sederhana menggunakan Kotlin. Projeknya sederhana, yaitu menyimpan data dan mengubah data dengan database realm dan mengkombinasikan antara Java dengan Kotlin. Tutorial ini aslinya dari https://news.realm.io/news/getting-started-with-kotlin-and-anko/, nah saya hanya mencoba tutorial tersebut dan menulis ulang dengan sedikit perubahan kode serta menulis tutorial ini secara detil, jadi anda nggak perlu baca tutorial aslinya yang bahasa inggris 😀

Hasil akhir dari aplikasi ini dan sumber kodenya bisa anda lihat/download di https://github.com/dekikurnia/belajar-kotlin-android

Langsung saja ikuti langkah-langkah tutorialnya. Cekidot

Pada tutorial ini kita gunakan Anko. Intinya Anko merupakan domain spesific languange yang dibuat menggunakan bahasa Kotlin untuk memudahkan pengembangan aplikasi berbasis android. Anko inilah nanti yang mentransformasi XML pada Activity atau Fragment.

Contohnya seperti ini :

XML

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <EditText
        android:id="@+id/crud_title"
        android:layout_width="match_parent"
        android:layout_heigh="wrap_content"
        android:hint="@string/title_hint" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/add_item" />
</LinearLayout>

Sama dengan kode dibawah jika menggunakan Anko

verticalLayout {
    var title = editText {
        id = R.id.crud_title
        hintResource = R.string.title_hint
    }
    button {
        textResource = R.string.add_item
        onClick { view -> {
                // do something here
                title.text = "Foo"
            }
        }
    }
}

Persiapan projek

Buka build.gradle (Project:BelajarKotlin), kemudian masukkan kode ini :

// Top-level build file where you can add configuration options common to all sub-projects/modules.
 
buildscript {
    ext.kotlin_version = '1.1.2-4'
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.3.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
 
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
 
allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}
 
task clean(type: Delete) {
    delete rootProject.buildDir
}

Kemudian buka build.gradle (Module:app), tambahkan beberapa library untuk membuat aplikasi seperti Realm, ButterKnife dan Anko sehingga kode build.gradle (Module:app) menjadi seperti ini :

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
 
android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "com.dekikurnia.belajarkotlin"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
 
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'org.jetbrains.anko:anko-sdk23:0.8.2'
    compile 'org.jetbrains.anko:anko-support-v4:0.8.2'
    compile 'org.jetbrains.anko:anko-appcompat-v7:0.8.2'
 
    compile 'com.android.support:appcompat-v7:25.1.1'
    compile 'com.android.support:design:25.1.1'
    compile 'io.realm:realm-android:0.87.1'
    compile 'com.github.thorbenprimke:realm-recyclerview:0.9.12'
    compile 'com.jakewharton:butterknife:7.0.1'
    compile 'com.android.support:support-v4:25.1.1'
    compile "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
}
repositories {
    mavenCentral()
}

Pembuatan layout

Persiapan projek sudah selesai, mari kita buat layout untuk aplikasi ini. Kita buat 5 layout yang terdiri dari activity_main, content_main, crud_item, empty_view dan fragment_crud, simpan di app\src\main\res.

Pertama, ubah terlebih dahulu activity_main, gunakan CoordinatorLayout dan tambahkan FloatingActionButton, FloatingActionButton ini berfungsi untuk memanggil fragment_crud ketika akan menambahkan data.

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.dekikurnia.belajarkotlin.MainActivity">
 
    <android.support.design.widget.FloatingActionButton
       android:id="@+id/fab"
       android:layout_width="60dp"
       android:layout_height="53dp"
       android:layout_gravity="bottom|end"
       android:layout_margin="20dp"
       android:src="@drawable/ic_content_add" />
 
</android.support.design.widget.CoordinatorLayout>

Buka content_main, pada content_main gunakan FrameLayout, kita buat variabel id content_main pada kode xml. hasilnya seperti dibawah ini :

content_main.xml

<FrameLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/content_main"
   android:layout_height="match_parent"
   android:layout_width="match_parent"  />

Setelah membuat content_main.xml panggil layout ini pada activity_main.xml taruh kode <include layout="@layout/content_main"/> tepat diatas kode FloatingActionButton.

Kemudian, buka crud_item, pada layout ini masih menggunakan FrameLayout dan tambahkan TextView. Kita gunakan variabel crud_item_title pada TextView.

crud_item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="?android:attr/listPreferredItemHeight">
 
    <TextView
       android:id="@+id/crud_item_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>
</FrameLayout>

Buka empty_view, pada layout menggunakan LinearLayout dan tambahkan TextView. buat variabel textView untuk TextView. Layout inilah akan tampil saat pertama kali aplikasi dibuka.

empty_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical" android:layout_width="match_parent"
   android:layout_height="match_parent">
 
    <TextView
       android:id="@+id/textView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:gravity="center"
       android:text="Tidak ada data, silahkan tambahkan" />
</LinearLayout>

Terakhir buka fragment_crud, pada layout ini kita gunakan RelativeLayout. Kemudian tambahkan library co.moonmonkeylabs.realmrecyclerview.RealmRecyclerView, untuk variabelnya beri nama crud_recycler_view.

fragment_crud.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="16dp"
   android:paddingLeft="16dp"
   android:paddingRight="16dp"
   android:paddingTop="16dp"
   tools:context=".CrudFragment"
   tools:showIn="@layout/activity_main">
 
    <co.moonmonkeylabs.realmrecyclerview.RealmRecyclerView
       android:id="@+id/crud_recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:rrvIsRefreshable="false"
       app:rrvLayoutType="LinearLayout"
       app:rrvEmptyLayoutId="@layout/empty_view"
       />
</RelativeLayout>

Selanjutnya buka styles.xml, rubahlah kodenya untuk memberi nilai pada form input data.

styles.xml

<resources>
    <string name="empty_items_message">Tidak ada item, harap masukkan item</string>
    <string name="title_hint">Item</string>
    <string name="description_hint">Deskripsi Item</string>
    <string name="add_item">Simpan</string>
    <string name="save">Ubah</string>
    <string name="app_name">Belajar Kotlin</string>
</resources>

Terakhir buat file ids.xml pada folder src\main\res\values. masukkan kode dibawah :

ids.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="crud_title" type="id" />
    <item name="crud_desc" type="id" />
    <item name="crud_add" type="id" />
</resources>

Sampai disini pembuatan layout sudah selesai, nantikan bagian 2 untuk kode Java dan Kotlin 😀