Kotlin Basic (1) : Activity

Fatima Azzahro
Sep 16 · 4 min read

Pada artikel kali ini, kita akan membuat Aplikasi Android menggunakan Bahasa Kotlin untuk menampilkan sebuah halaman sederhana. Halaman ini tersusun atas sebuah Activity dan Layout.

Start a New Project

Kita menggunakan Android Studio (AS). sebagai lingkungan pengembangan resmi untuk membuat project Aplikasi Android. Langkah untuk menambahkan project baru, sebagai berikut:

Dependency

Sebelum menambahkan Activity dan Layout, kita perlu menambahkan beberapa dependensi yang dibutuhkan diantaranya CardView, RecyclerView, dan Glide pada file app/build.gradle

dependencies {
implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.github.bumptech.glide:glide:4.8.0'
}

Catatan: Untuk pengguna API Level 29 (terbaru), ada kecenderungan penggunaan AndroidX sebagai pengganti Support Library. Penambahan dependensinya sedikit berbeda, yaitu sebagai berikut:

dependencies {
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.0.0'
implementation 'com.github.bumptech.glide:glide:4.9.0'
}

Secara keseluruhan, isi dari file build.gradle adalah sebagai berikut:

ATAU jika kalian menggunakan API Level 29 terbaru dan AndroidX, kodenya menjadi sebagai berikut:

Activity

Kita dapat menambahkan Activity baru melalui menu File > New > Activity > Empty Activity

Detail Product Activity

Activity yang baru saja kita tambahkan berupa file DetailProductActivity.kt, yang dapat diakses di app/java/id.belanja.app/ berisi baris kode berikut:

package id.belanja.appimport android.support.v7.app.AppCompatActivity
import android.os.Bundle
class DetailProductActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_detail_product)
}
}

Activity ini nantinya kita gunakan untuk menuliskan kode dalam bahasa Kotlin untuk mengatur aksi — aksi yang terjadi di halaman Detail Product.

Layout

Activity Detail Product membutuhkan Layout untuk menampung komponen — komponen tampilan halaman. Layout tersebut dapat kita akses di app/res/layout/activity_detail_product.xml.

Tampilan Layout Detail Product

Pada file activity_detail_product.xml, kita akan membuat layout yang berbentuk sejajar secara vertikal. Oleh karena itu, kita menggunakan LinearLayout sebagai parent atau induknya. Jangan lupa untuk menambahkan orientasi vertikal.

<?xml version="1.0" encoding="utf-8"?><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="wrap_content"

android:orientation="vertical"
tools:context=".DetailProductActivity">
</LinearLayout>

Pada Layout tersebut, kita tambahkan komponen View seperti TextView, EditText, dan ImageView untuk menampilkan Teks, Kolom isian, dan Gambar.

<?xml version="1.0" encoding="utf-8"?><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="wrap_content"
android:layout_margin="8dp"
android:orientation="vertical"
tools:context=".DetailProductActivity">
<ImageView
android:id="@+id/imgProductDetail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_foreground" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nama Product"
android:textColor="@android:color/black"
android:textSize="14sp" />
<EditText
android:id="@+id/etProductNameDetail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
. . .</LinearLayout>

Tambahkan kode untuk menampilkan TextView dan EditText sehingga tampilan layout menjadi sebagai berikut:

<?xml version="1.0" encoding="utf-8"?><LinearLayout    
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
. . . >

<ImageView
. . . />

<TextView
. . . />

<EditText
. . . />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Harga Product"
android:textColor="@android:color/black"
android:textSize="14sp" />

<EditText
android:id="@+id/etProductPriceDetail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Gambar Product"
android:textColor="@android:color/black"
android:textSize="14sp" />

<EditText
android:id="@+id/etProductImageDetail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

Kita perlu menambahkan dua buah Button yang tersusun secara horizontal. Oleh karena itu, kita tambahkan LinearLayout yang berisi Button.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
. . .
tools:context=".DetailProductActivity">
<ImageView
...
/>
. . . <TextView
...
/>
<EditText
...
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="@+id/btnDeleteProduct"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorAccent"
android:text="Hapus"
android:textColor="@android:color/white" />
<Button
android:id="@+id/btnSaveProduct"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:text="Simpan"
android:textColor="@android:color/white" />
</LinearLayout></LinearLayout>

Agar halaman tersebut dapat di-scroll, kita pindahkan LinearLayout paling luar ke dalam sebuah parent lain yaitu ScrollView.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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"
tools:context=".DetailProductActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="vertical">

. . .
</LinearLayout></ScrollView>

Berikut hasil akhir dari Layout activity_detail_product.xml

Resources

String Resources yang digunakan untuk menyimpan value nama komponen untuk tampilan, dapat dilihat dan diubah melalui res/values/string.xml

<resources>
<string name="app_name">Belanja App</string>
<string name="nama_product">Nama Product</string>
<string name="harga_product">Harga Product</string>
<string name="gambar_product">Gambar Product</string>
<string name="tambah_product">Tambah Product</string>
</resources>

Color Resources yang kita gunakan untuk menyimpan value warna komponen untuk tampilan, dapat dilihat dan diubah melalui res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
</resources>

Running Project

Sebelum menjalankan project, pastikan konfigurasi Intent Filter pada file Android Manifest pada app/manifest/AndroidManifest.xml telah diatur sebagai berikut:

...<activity android:name=".DetailProductActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

</activity>
<activity android:name=".MainActivity"></activity>...

Ini untuk memastikan bahwa Detail Product Activity adalah Activity yang ditampilkan pertama kali saat aplikasi dijalankan.

To Be Continued . . .

Artikel ini bersambung ke Kotlin Basic: RecyclerView.

Fatima Azzahro

Written by

Female developer who passionate in Information Technology. Love learning and sharing to others. Github: https://github.com/fatimazza

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade