Tips membuat “Dialog” Android sesuai keinginanmu

Hai dev, kali ini kita akan belajar bagaimana membuat custom dialog di Android. Hasil dialognya seperti ini.

Jika kalian ingin memperindah hasilnya, kalian dapat melihat Tips membuat Floating Labels.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Langkah-langkah:

Di Android Studio, buat project baru File => New Project. Kalau sudah buat baru sebuah layout bernama view_custom_dialog.xml dan ubah kodenya menjadi seperti dibawah ini.

<?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">

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Name"

android:layout_marginBottom="8dp"

android:inputType="textPersonName"/>

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Phone number"

android:inputType="number"/>

<LinearLayout

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<Button

android:id="@+id/button_cancel"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="cancel"/>

<Button

android:id="@+id/button_save"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="save"/>

</LinearLayout>

Setelah itu, buka Activity java kalian dan ubah kodenya menjadi seperti dibawah ini. Di code ini saya membuat sebuah button, yang mana ketika button diklik maka custom dialog akan muncul. Untuk hal ini temen-temen dapat berkreasi sendiri bagaimana menampilkan custom dialog tersebut.

package com.dicoding.costumdialog;

import android.app.Dialog;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.DisplayMetrics;

import android.view.View;

import android.widget.Button;

import android.widget.LinearLayout;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private Button showDialogButton;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

showDialogButton = (Button) findViewById(R.id.button_show_dialog);

showDialogButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

showCustomDialog();

}

});

}

private void showCustomDialog() {

final Dialog dialog = new Dialog(this);

//Mengeset judul dialog

dialog.setTitle("Add person");

//Mengeset layout

dialog.setContentView(R.layout.view_custom_dialog);

//Membuat agar dialog tidak hilang saat di click di area luar dialog

dialog.setCanceledOnTouchOutside(false);

//Membuat dialog agar berukuran responsive

DisplayMetrics metrics = getResources().getDisplayMetrics();

int width = metrics.widthPixels;

dialog.getWindow().setLayout((6 * width) / 7, LinearLayout.LayoutParams.WRAP_CONTENT);

Button cancelButton = (Button) dialog.findViewById(R.id.button_cancel);

Button saveButton = (Button) dialog.findViewById(R.id.button_save);

saveButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(MainActivity.this, "Data saved", Toast.LENGTH_SHORT).show();

dialog.dismiss();

}

});

cancelButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

dialog.dismiss();

}

});

//Menampilkan custom dialog

dialog.show();

}

Selesai. Sekarang coba kamu Run dan lihat hasilnya.

Semoga bermanfaat ya, learners. Ingin belajar lebih banyak? Yuk langsung cek Dicoding Academy Belajar Membangun Aplikasi Android Native (www.dicoding.com/academies/26), materi yang dibuat oleh Google Developer Expert Indonesia.

Tunggu tips kami selanjutnya !