Last Updated on 8 years by Mas Herdi
Melanjutkan series saya tentang tutorial dasar membuat aplikasi Android untuk Pemula, setelah sebelumnya saya membahas tentang cara membuat Alert Dialog di Android. Kali ini kita akan belajar membuat alert dialog, namun dengan layout custom. Dengan layout custom berarti kita bisa menampilkan apa saja yang kita inginkan pada dialog tersebut, sesuai dengan layout yang kita buat.
Tutorial Membuat Custom Dialog di Android menggunakan Android Studio
Seperti biasa, sebelum lanjut ke tutorial saya sarankan untuk membaca artikel-artikel di bawah ini terlebih dahulu :
Pre-requisites
- Membuat Project Hello World di Android Studio
- Membuat Alert Dialog di Android
- Belajar Android Untuk Pemula
Setelah kalian selesai membuat project hello world di Android Studio. Maka untuk membuat custom dialog di Android, langkah-langkahnya adalah sebagai berikut.
Pertama-tama kita akan membuat layout custom untuk dialog tersebut, namanya adalah
layout_customdialog.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:id="@+id/iv_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" /> <TextView android:padding="5dp" android:id="@+id/tv_desc" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_toRightOf="@+id/iv_icon" />/> <Button android:id="@+id/bt_ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/iv_icon" android:layout_margin="5dp" android:text=" Oke " /> </RelativeLayout>
Jika sudah kita akan menambahkan sebuah tombol pada activity_main.xml, isikan kode seperti di bawah 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:background="@drawable/bgcn" android:layout_height="match_parent"> <Button android:id="@+id/bt_showdialog" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Custom Dialog" /> </LinearLayout>
Pada MainActivity.java, ketika tombol tersebut diklik akan menampilkan dialog Android. Dan dialog itu akan menggunakan layout custom yang sebelumnya telah kita buat. Masukkan kode berikut di MainActivity.java :
package id.web.twoh.twoh_android_layoutbasic; import android.app.Dialog; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; /** * Created by Hafizh Herdi on 1/20/2017. */ public class MainActivity extends AppCompatActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button btShow = (Button) findViewById(R.id.bt_showdialog); btShow.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { /** * Initiate Custom Dialog */ final Dialog dialog = new Dialog(MainActivity.this); dialog.setContentView(R.layout.layout_customdialog); dialog.setTitle("TWOH.Co"); /** * Mengeset komponen dari custom dialog */ TextView text = (TextView) dialog.findViewById(R.id.tv_desc); text.setText("TWOH's Engineering custom dialog sample"); ImageView image = (ImageView) dialog.findViewById(R.id.iv_icon); image.setImageResource(R.mipmap.ic_launcher); Button dialogButton = (Button) dialog.findViewById(R.id.bt_ok); /** * Jika tombol diklik, tutup dialog */ dialogButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); } }); } }
Demo
Mari kita jalankan aplikasinya untuk melihat demonya.
Bisa dilihat di gambar di atas, ketika tombol show dialog diklik maka akan muncul custom dialog kita yang berisi icon, custom message, dan custom button.
That’s all ! Semoga membantu. 🙂 Jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀
untuk pindah ke custom layout lainnya dengan tombol yg ada dalam custom layout gmna ya?
punya saya ga ada error tapi, pas di klik tombol show dialog malah langsung exit mas..
startActivity-nya pake getActivity() atau getApplication() bro
gan kalao untuk menampilkan response dari json/API di tampilkan dengan popup/dialog dimana gan
Intinya sama aja gan, tinggal content dialognya aja diambil dari data JSON/API nya