Nurul Huda
Nurul Huda
  1. Beranda ›
  2. Android ›
  3. Kotlin ›
  4. Aplikasi Pertama
  5. › Menampilkan Activity Baru

Menampilkan Activity Baru

Menampilkan Activity Baru

Daftar Isi

Prakata

Pada tutorial sebelumnya kita telah membuat user interface sederhana dengan ConstraintLayout berisi TextBox dan Button yang bersifat responsive. Pada tutorial kali ini, kita akan melanjutkan dengan menambahkan aksi pada tombol Kirim agar ketika ia diketuk, akan menampilkan activity baru sekaligus mengirimkan pesan isi TextBox untuk ditampilkan di activity baru tersebut.

Hasil akhir aplikasi dari tutorial ini:

hasil akhir tutorial android menampilkan activity baru

Tolong baca tiap instruksi dengan detil. Karena pada tiap langkahnya tidak semua kode program kami sajikan untuk membantu agar bisa cepat memahami. Ada pun jika nanti terjadi error atau kesulitan, maka pada bagian akhir dari tulisan ini sudah disediakan source code lengkap untuk dua file activity yang kita buat.

Buat Fungsi kirimPesan() pada MainActivity

Langkah pertama silakan buka file MainActivity.kt. Lalu tambahkan fungsi dengan nama kirimPesan. Fungsi ini nantinya akan menangani respon ketika terjadi event android:onClick pada tombol Kirim.

Fungsi untuk menanangi event android:onClick namanya bebas, akan tetapi yang perlu diperhatikan bahwa ia harus:

  • bersifat public
  • menerima hanya satu parameter dari object android.view.View
  • fungsi void atau pada Kotlin dinamakan fungsi yang mengembalikan implicit unit
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    /**
     * Fungsi akan dipanggil ketika tombol Kirim diketuk.
     */
    fun kirimPesan (view: View) {
        // tuliskan perintah disini sebagai respon untuk tombol Kirim
    }
}

Jika error, maka anda harus mengimport kelas android.view.View di bagian atas dari MainActivity.

import android.view.View

Untuk lebih mudah, anda bisa letakkan kursor pada bagian yang error, lalu tekan tombol Alt+Enter untuk Quick Fix. Jika muncul menu pilihan, maka pilih Import Class. Android Studio akan mengimport kelas yang error secara otomatis.

Panggil fungsi kirimPesan() ketika tombol Kirim diketuk

Selanjutnya fungsi kirimPesan() pada MainActivity yang telah kita buat, kita jadikan sebagai handler untuk event android:onClick pada tombol Kirim. Caranya adalah sebagai berikut:

  1. Kembali ke file activity_main.xml
  2. Select tombol Kirim
  3. Pada panel Attributes, bagian Common Attributes, isi field onclick dengan fungsi kirimPesan pada pilihan dropdown.

Setelah ini, maka ketika tombol Kirim ditekan, fungsi kirimPesan() akan dipanggil.

Definisikan Aksi Fungsi kirimPesan()

Untuk memeriksa apakah yang telah kita lakukan tersebut berfungsi. Mari kita tambahkan satu aksi sederhana: yaitu menampilkan isi pesan pada TextBox dalam sebuah Toast.

Ubah fungsi kirimPesan dengan kode program di bawah ini:

/**
  * Fungsi akan dipanggil ketika tombol Kirim diketuk.
  */
fun kirimPesan (view: View) {
    val editText = findViewById<EditText>(R.id.editText)
    val pesan = editText.text.toString()

    // buat toast untuk menampilkan variabel pesan dengan durasi waktu pendek
    val toast = Toast.makeText(applicationContext, pesan, Toast.LENGTH_SHORT)
    toast.show()
}

Jika terjadi error, jangan lupa import untuk kelas EditText dan kelas Toast.

import android.widget.EditText
import android.widget.Toast

Coba jalankan aplikasi. Maka ketika kita mengetik sesuatu di dalam TextBox lalu menekan tombol Kirim. Maka toast akan muncul menampilkan pesan yang telah kita tulis:

Buat Activity Baru Untuk Menampilkan Text

Oke. Kita sudah pastikan bahwa fungsi kirimPesan() telah bekerja dengan baik. Langkah selanjutnya kita akan membuat activity baru dengan nama DisplayMessageActivity. Activity baru ini akan kita gunakan untuk menampilkan pesan yang kita ketik dalam TextBox.

Untuk membuat activity baru, ikuti langkah berikut:

  1. Pada jendela Project, klik kanan folder app.

  2. Pilih New > Activity > Empty Activity.

  3. Isi nama Activity “DisplayMessageActivity” lalu klik Finish.

Android Studio otomatis melakukan 3 hal:

  1. Membuat file DisplayMessageActivity
  2. Membuat layout-nya dengan nama activity_display_message.xml
  3. Menambah informasi <activity> baru pada file AndroidManifest.xml.

Tambahkan TextView Pada Layout activity_display_message.xml

Karena kita membuat EmptyActivity. Itu artinya activity tersebut kosong dan perlu untuk menambahkan widget. Di sini kita butuh menambahkan satu widget berupa TextView yang nantinya akan bertugas untuk menampilkan pesan yang dikirim dari MainActivity.

  1. Buka layout activity_display_message.xml
  2. Pada panel Pallete, pilih group Common
  3. Klik dan tarik TextView ke dalam canvas
  4. Taruh posisi TextView di atas-tengah dari posisi layout
  5. Anda bisa atur attribut dari TextView semisal textSize dan textColor sesuai dengan selera

Jalankan DisplayMessageActivity Ketika Tombol Kirim Diketuk

Kita kembali ke file MainActivity.

Sebelumnya ketika tombol Kirim diketuk, kita hanya menampilkan Toast. Akan tetapi karena sekarang kita sudah punay activity khusus untuk menampilkan pesan, maka kita akan memanggil activity tersebut ketika tombol Kirim di tekan.

Langsung saja, pada fungsi kirimPesan(), tambahkan kode program berikut:

// intent untuk memanggil dan menampilkan DisplayMesssageActivity
val intent = Intent(this, DisplayMessageActivity::class.java)
startActivity(intent)

Jalankan aplikasi. Berikut adalah ilustrasi kode program yang telah kita buat:

menampilkan activity baru

Penjelasan:

Intent merupakan objek yang menyediakan runtime binding antar komponen yang berbeda [1], seperti misalnya antar 2 activity yang berbeda. Intent merepresentasikan app’s intent untuk melakukan banyak hal. Dalam kasus ini, kita menggunakan intent untuk menampilkan activity yang lain dari MainActivity.

Kirim Pesan Melalui Intent

Hapus kode untuk menampilkan toast.

Tambahkan kode berikut di atas pendefinisian class MainActivity (setelah bagian import).

const val PESAN = "com.jagongoding.aplikasipertama.PESAN"

Sebelum memanggil fungsi startAcitivity(intent), tambahkan kode berikut:

// mengirim variabel pesan dari MainActivity ke DisplayMessageActivity
// melalui intent
intent.putExtra(PESAN, pesan)

Kode program di atas memerintahkan intent untuk mengikat satu nilai dengan key PESAN (“com.jagongoding.aplikasipertama.PESAN”) dan value berupa nilai text dari TextBox pada MainActivity.

Sehingga ketika DisplayMessageActivity ditampilkan, dia bisa mendapatkan nilai dari TextBox melalui pesan yang dikirimkan melalui Intent.

Tampilkan Pesan Yang Dikirim Melalui Intent

Setelah kita memberi pesan kepada Intent. Selanjutnya adalah tugas activity DisplayMessageContent untuk mengambil pesan tersebut dan menampilkannya dalam TextVIew.

  1. Buka file DisplayMessageActivity
  2. Pada fungsi onCreate(), tambahkan kode program berikut:
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_display_message)

    // ambil pesan dari intent lalu simpan dalam variabel
    val pesan = intent.getStringExtra(PESAN)

    // ambil textView pada layout lalu definisikan 
    // attribut text-nya dengan variabel pesan
    val textView = findViewById<TextView>(R.id.textView).apply {
        text = pesan
    }
}

Dan ketika kita menjalankan aplikasi, TextView pada activity DisplayMessageActivity berhasil menampilkan pesan yang dibawa oleh Intent.

menampilkan intent

Tambahkan Tombol Back

Jika anda perhatikan pada ilustrasi sebelumnya, anda akan dapati bahwa saat activity kedua diaktifkan, tidak ada tombol back yang mengarah ke MainActivity. Itu karena activity dalam android berupa tumpukan yang bisa berjalan tanpa adanya urutan. Terkadang kita bisa menjalankan MainActivity ketika membuka aplikasi pertama kali, akan tetapi kita juga bisa membuka activity yang lain ketika dalam aksi tertentu misalnya ketika User mengetuk pemberitahuan, maka aplikasi akan menampilkan activity khusus untuk aksi tersebut.

Oleh karena itu, jika kita ingin memunculkan tombol back. Kita perlu mendefinisikan hubungan hirarki antar activity. Dalam kasus ini: kelas DisplayMessageActivity adalah child dari MainActivity, begitu pula sebaliknya bahwa MainActivity adalah parent dari DisplayMessageActivity.

Jika kita definisikan hubungan hirarki antar activity, maka ketika activity child sedang ditampilkan dalam layar, dia akan memunculkan tombol back ke activity parent di action bar.

Untuk mengubahnya:

  1. Silakan buka file AndroidManifest.xml
  2. Temukan block kode <activity> dengan nama ".DisplayMessageActivity"
<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".DisplayMessageActivity"></activity>
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>
  1. Lalu ubah baris kode tersebut dengan kode program di bawah ini:
<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".DisplayMessageActivity"
        android:parentActivityName=".MainActivity">
        <!-- The meta-data tag is required if you support API level 15 and lower -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value=".MainActivity" />
    </activity>
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

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

Ganti Judul Activity DisplayMessage

Yang ini step terakhir. Kita telah mendefinisikan bahwa DisplayMessageActivity adalah merupakan anak dari MainActivity. Akan tetapi judul activity tersebut masih belum didefinisikan sehingga masih menampilkan nama aplikasi. Agar tidak rancu, maka kita ganti judul pada DisplayMessageActivity dengan kata “Pesan”.

  1. Buka file DisplayMessageActivity
  2. Cari fungsi onCreate()
  3. Lalu pada baris paling bawah dalam blok fungsi onCreate(), tambahkan kode berikut:
setTitle("Pesan");

Hasil Akhir

Setelah semua langkah di atas kita lakukan tanpa adanya error. Plus ditambah dengan mengubah font size TextView pada DisplayMessageActivity menjadi lebih besar, maka ketika kita run aplikasi kita, kita kana melihat hasilnya kurang lebih seperti ilustrasi berikut:

Ilustrasi hasil akhir tutorial

Kode Program Lengkap Untuk Kedua Activity

MainActivity

package com.jagongoding.aplikasipertama

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.EditText

const val PESAN = "com.jagongoding.aplikasipertama.PESAN"

class MainActivity : AppCompatActivity() {

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

    /**
     * Fungsi akan dipanggil ketika tombol Kirim diketuk.
     */
    fun kirimPesan (view: View) {
        val editText = findViewById<EditText>(R.id.editText)
        val pesan = editText.text.toString()

        // intent untuk memanggil dan menampilkan DisplayMesssageActivity
        val intent = Intent(this, DisplayMessageActivity::class.java)
        intent.putExtra(PESAN, pesan)
        startActivity(intent)
    }
}

DisplayMessageActivity

package com.jagongoding.aplikasipertama

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView

class DisplayMessageActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_display_message)

        // ambil pesan dari intent lalu simpan dalam variabel
        val pesan = intent.getStringExtra(PESAN)

        // ambil textView pada layout lalu definisikan attribut text-nya dengan variabel pesan
        val textView = findViewById<TextView>(R.id.textView).apply {
            text = pesan
        }

        setTitle("Pesan");
    }
}

Referensi

[1] https://developer.android.com/training/basics/firstapp/starting-activity

Belajar Ngoding di Udemy