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.
Daftar SekarangLangkah-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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?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> </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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
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 !
