Cara Membuat Custom Toast Di Aplikasi Android

Halo ui designer, bagaimana kabar kalian hari ini? Saya harap kalian baik-baik saja. Pada kesempatan kali ini saya akan membagikan tutorial cara membuat custom toast di aplikasi android.

Toast adalah pesan kecil yang muncul kepada pengguna tentang operasi tanpa input dari pengguna. Toast ditampilkan di depan activity dan tetap terlihat untuk waktu yang singkat. Biasanya, toast ditampilkan dibagian bawah layar, kalian juga dapat mengubah posisi tampilan. Kalian dapat membuat desain khusus untuk toast menggunakan layout xml.

Dalam tutorial ini, kalian akan belajar cara membuat toast custom yang dibuat menggunakan layout xml di projek android studio dengan cara yang mudah dan sederhana.

- Advertisement -

Tutorial Cara Membuat Custom Toast di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Custom Toast
Package Name:com.androidrion.customtoast
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml yang digunakan dalam projek ini:

  1. activity_main.xml
  2. toast_custom.xml

Daftar file java yang digunakan dalam projek ini;

  • MainActivity.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Custom Toast.

Dependencies File

Dalam tutorial ini, saya menggunakan widget CardView agar toast terlihat cantik. Untuk itu, tambahkan kode dibawah ini agar projek android studio bisa menggunakan widget CardView. Berikut ini adalah kode yang harus ditambahkan pada file build.gradle (Module: app)

Gradle Scripts/build.gradle (Module: app)

    implementation 'androidx.cardview:cardview:1.0.0'

XML Layout File

Buka file activity_main.xml dalam folder layout pada projek android studio kalian. Tambahkan widget button didalamnya. Berikut ini adalah kode lengkap dari file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/buttonToast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Buatlah file xml layout baru dengan cara klik kanan pada folder layout lalu pilih New>Layout resource file. Simpan file xml layout baru tersebut dengan nama toast_custom. Berikut ini adalah kode lengkap untuk file toast_custom.xml

app/res/layout/toast_custom.xml

<?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"
    android:id="@+id/custom_toast_layout_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:orientation="horizontal">

    <androidx.cardview.widget.CardView
        android:id="@+id/lyt_card"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:gravity="center"
        android:minHeight="35dp"
        android:visibility="visible"
        app:cardBackgroundColor="#4CAF50"
        app:cardCornerRadius="20dp"
        app:cardElevation="2dp">

        <TextView
            android:id="@+id/text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingLeft="18dp"
            android:paddingTop="8dp"
            android:paddingRight="18dp"
            android:paddingBottom="8dp"
            android:text="Android Rion"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            android:textColor="@android:color/white" />

    </androidx.cardview.widget.CardView>


</LinearLayout>

Java File

Buka file MainActivity dalam folder java pada projek android studio kalian. Gunakan kode dibawah ini untuk membuat tombol yang telah ditambahkan pada file layout menampilkan custom toast yang telah di buat. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.customtoast/MainActivity.java

Run ‘app’

Dan sekarang kalian bisa menjalankan projek android studio kalian. Pada tampilan awal, kalian bisa melihat tombol yang berada di tengah aplikasi. Ketika kalian menekan tombol tersebut, maka aplikasi akan menampilkan pesan kecil di bagian bawah yang telah kita desain pada file xml layout. Jika kode di atas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

Tutorial Video

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat custom toast di android studio. tutorial di atas sangatlah mudah dikerjakan karena tidak begitu banyak kode yang digunakan untuk membuat toast kustom di aplikasi android. Kalian juga bisa menambahkan icon didalamnya toast tersebut. Kalian cukup mendesainnya pada file toast_custom.xml

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.