## Pendahuluan

DialogFragment adalah Fragment khusus yang dipakai saat kita ingin menampilkan sebuah window yang melayang di atas konten lain di Activity. 

Biasanya dipakai untuk menampilkan *alert dialog*, *confirm dialog*, atau meminta informasi dari pengguna tanpa berpindah Activity. 

## Penggunaan

Method yang harus di-*implement* saat membuat sebuah DialogFragment adalah `onCreateView` atau `onCreateDialog`. Gunakan `onCreateView` saat keseluruhan view atau dialog akan menggunakan layout XML sendiri. Gunakan `onCreateDialog` saat akan membuat dialog standar (seperti alert atau konfirmasi). 

**Catatan:** Tutorial di bawah akan menggunakan kelas Fragment yang diimpor menggunakan  `android.support.v4.app` **bukan**`android.app`. Jika terjadi error pastikan dulu sudah mengimpor kelas yang seharusnya. 

### Custom View

Mari mulai dengan membuat dialog yang menggunakan layout XML khusus. Pertama, buat sebuah layout XML di  `res/layout/fragment_edit_name.xml`:

```


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/edit_name"
	android:layout_width="wrap_content"	      
	android:layout_height="wrap_content"
	android:layout_gravity="center" android:orientation="vertical"  >
	<TextView
		android:id="@+id/lbl_your_name" android:text="Your name" 
		android:layout_width="wrap_content"       			 
		android:layout_height="wrap_content" />
	<EditText
		android:id="@+id/txt_your_name"
		android:layout_width="match_parent"  
		android:layout_height="wrap_content" 
		android:inputType="text"
		android:imeOptions="actionDone" />
</LinearLayout>
```

lalu buat kelas Fragment yang meng-*extends* DialogFragment (**perhatikan package yang di import di baris pertama**):

```
import android.support.v4.app.DialogFragment;
// ...
public class EditNameDialogFragment extends DialogFragment {
	private EditText mEditText;
	public EditNameDialogFragment() {
		// Constructor kosong diperlukan untuk DialogFragment.
        // Pastikan tidak memberikan argument/parameter apapun ke 
        // constructor ini.
	}

	public static EditNameDialogFragment newInstance(String title) {
		EditNameDialogFragment frag = new EditNameDialogFragment();
		Bundle args = new Bundle();
		args.putString("title", title);
		frag.setArguments(args);
		return frag;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_edit_name, container);
	}

	@Override
	public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
		super.onViewCreated(view, savedInstanceState);
		// Baca view yang dibuat di XML
		mEditText = (EditText) view.findViewById(R.id.txt_your_name);
		// Ambil argument dari bundle (yang ada di newInstance) lalu mengatur title dari Dialog 	
		// yang ditampilkan dengan data di dalam bundle 
		String title = getArguments().getString("title", "Enter Name");
		getDialog().setTitle(title);
		// Show soft keyboard automatically and request focus to field
		mEditText.requestFocus();
		getDialog().getWindow().setSoftInputMode(
		    WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
	}
}
```

dan tampilkan dialog di sebuah Activity yang meng-*extends* `AppCompatActivity`:

```
// Note: `FragmentActivity` works here as well

public class DialogDemoActivity extends AppCompatActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
      showEditDialog();
  }
  
  private void showEditDialog() {
      FragmentManager fm = getSupportFragmentManager();
      EditNameDialogFragment editNameDialogFragment = EditNameDialogFragment.newInstance("Some Title");
      editNameDialogFragment.show(fm, "fragment_edit_name");
  }

}
```

Sekali lagi pastikan package yang di impor berasal dari *namespace* `android.support.v4.app`.

### Menggunakan Dialog Builder

Sekarang, mari kita pelajari bagaimana membuat dialog sederhana tanpa menggunakan layout XML khusus. Untuk jenis dialog yang lain, lihat catatan di bawah. 

```
class MyAlertDialogFragment extends DialogFragment {
    public MyAlertDialogFragment() {
          // Constructor kosong untuk DialogFragment
    }
    
    public static MyAlertDialogFragment newInstance(String title) {
        MyAlertDialogFragment frag = new MyAlertDialogFragment();
    	Bundle args = new Bundle();
    	args.putString("title", title);
    	frag.setArguments(args);
    	return frag;
    }
    
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        String title = getArguments().getString("title");
        AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(getActivity());
        alertDialogBuilder.setTitle(title);
        alertDialogBuilder.setMessage("Are you sure?");
        alertDialogBuilder.setPositiveButton("OK",  new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
               // on success
            }
        });

        alertDialogBuilder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            if (dialog != null && dialog.isShowing()) { 
                 dialog.dismiss();
              }
            }
        });
        return alertDialogBuilder.create();
    }
}
```

Untuk menampilkan fragment di atas, panggil dari sebuah Activity yang meng-*extends* `AppCompatActivity`:

```
public class DialogDemoActivity extends AppCompatActivity {

  @Override

  public void onCreate(Bundle savedInstanceState) {

      super.onCreate(savedInstanceState);

      setContentView(R.layout.main);

      showAlertDialog();

  }



  private void showAlertDialog() {

      FragmentManager fm = getSupportFragmentManager();

      MyAlertDialogFragment alertDialog = MyAlertDialogFragment.newInstance("Some title");

      alertDialog.show(fm, "fragment_alert");

  }

}
```

### Mengirim Data dari Dialog ke Activity

Untuk mengirim data dari dialog ke sebuah Activity, gunakan cara berikut:

1. Buat sebuah interface dengan method yang bisa dipanggil untuk mengirim data ke activity
2. Buat event yang akan memanggil listener
3. Implement interface di Activity

Contoh di bawah mendemonstrasikan bagaimana cara mengirim data se activity setelah tombol "Done" di tekan di keyboard:

```
public class EditNameDialogFragment extends DialogFragment implements OnEditorActionListener {

    private EditText mEditText;

    // 1. Membuat interface dengan method yang akan dipakai untuk mengirim data

    public interface EditNameDialogListener {
        void onFinishEditDialog(String inputText);
    }

    // ...

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        // ...
        // 2. Buat sebuah callback saat tombol Done keyboard di click. 
        mEditText.setOnEditorActionListener(this);

    }

    // Method akan selalu dipanggil setiap kali melakukan aksi di
    // text field. Dalam kasus di bawha ini kita akan memeriksa jika 
    // tombol "Done" di tekan
    // memerlukan 'soft keyboard' (virtual keyboard)
    @Override
    public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
        if (EditorInfo.IME_ACTION_DONE == actionId) {

            // Mengembalikan data kembali ke activity melalui listener yang di implement

            EditNameDialogListener listener = (EditNameDialogListener) getActivity();
            listener.onFinishEditDialog(mEditText.getText().toString());

            // Tutup dialog dan kembali ke activity
            dismiss();
            return true;
        }
        return false;
    }
}
```

kemudian buat Activity agar meng-*implement* interface yang tadi dibuat:

```
public class DialogDemoActivity extends AppCompatActivity implements EditNameDialogListener {

  // ...

  // 3. Method akan di jalankan setiap kali dipanggil dari DialogFragment
  // Ambil data yang dikirimkan ke activity di sini

  @Override

  public void onFinishEditDialog(String inputText) {
  	Toast.makeText(this, "Hi, " + inputText, Toast.LENGTH_SHORT).show();
  }
}
```

**Catatan:** `setOnEditorActionListener` di atas memerlukan soft keyboard. Jika tidak ingin menggunakna soft keyboard kita juga bisa menggunakan onClick button. 

## Mengirimkan Data dari Dialog ke Fragment Lain

Dalam beberapa situasi, sebuah dialog fragment mungkin dipanggil dari fragment lain, bukan Activity. Misalnya, sebuah activity memiliki sebuah form yang ada di dalam fragment (ditampilkan dengan tabs). Form tersebut memiliki kolom untuk memilih tanggal dengan date picker di sbuah dialog. Dalam kasus ini kita ingin mengirimkan tanggal yang dipilih tadi kembali ke fragment yang memanggilnya. Berikut caranya:

```
import android.support.v4.app.DialogFragment;

public class EditNameDialogFragment extends DialogFragment {

    // Membuat interface
    public interface EditNameDialogListener {
        void onFinishEditDialog(String inputText);
    }

    // Panggil method ini untuk mengirim data kembali ke parent fragment
    public void sendBackResult() {
      // Perhatikan penggunaaan `getTargetFragment` saat menampilkan Dialog ini
      EditNameDialogListener listener = (EditNameDialogListener) getTargetFragment();
      listener.onFinishEditDialog(mEditText.getText().toString());
      dismiss();
    }
}
```

Tampilkan dialog yang baru kita buat di fragment dengan cara:

```
import android.support.v4.app.Fragment;

public class MyParentFragment extends Fragment implements EditNameDialogListener {
    // Panggil method ini untuk menjalankan dialog edit
    private void showEditDialog() {
        FragmentManager fm = getFragmentManager();
        EditNameDialogFragment editNameDialogFragment = EditNameDialog.newInstance("Some Title");
        // mengatur target fragment yang akan menjadi tempat kembali dari dialog        
        editNameDialogFragment.setTargetFragment(MyParentFragment.this, 300);
        editNameDialogFragment.show(fm, "fragment_edit_name");
    }

    // Dipanggil setelah selesai mengambil data dari dialog
    @Override
    public void onFinishEditDialog(String inputText) {
        Toast.makeText(this, "Hi, " + inputText, Toast.LENGTH_SHORT).show();
    }
}
```

## Jenis-jenis Dialog

Saat menggunakan `onCreateDialog` ada beberapa jenis Dialog yang bisa langsung kita pakai. 

- AlertDialog - Dapat menampilkan pesan, ikon dan 1-3 tombol dengan teks khusus.
- ProgressDialog - Dapat menampilkan *progress indicator* dengan pesan teks khusus
- TimePickerDialog - Membuat pengguna dapat memilih waktu
- DatePickerDialog - Membuat pengguna dapat memilih tanggal
- BottomSheetDialog - Menampilkan dialog yang muncul dari bawah.

### Menampilkan ProgressDialog

Saat melakukan proses di belakang layar yang agak lama, salah satu cara memberi tahu pengguna bahwa aplikasi kita sedang berjalan ialah dengan menampilkan sebuah [ProgressDialog](http://developer.android.com/intl/es/reference/android/app/ProgressDialog.html). 

![](https://i.imgur.com/apLzWt6.png)

```
ProgressDialog pd = new ProgressDialog(context);
pd.setTitle("Loading...");
pd.setMessage("Please wait.");
pd.setCancelable(false);
```

Dialog dapat ditampilkan dengan:

```
pd.show();
```

Lalu dapat ditutup dengan:

```
pd.dismiss();
```

### Menampilkan Date atau Time Picker Dialog

![](https://imgur.com/8YqcxA7.png)

![](https://imgur.com/s358M0K.png)

Jika menggunakan dialog ini, pastikan Activity yang memanggilnya meng-*implement* method yang diperlukan (misalnya DatePickerDialog.OnDateSetListener untuk DatePickerFragment). Jika ingin menampilkan dari Fragment bukan Activity, lihat lagi pembahasan di atas. 

Berikut ini contoh kode untuk dialog DatePicker:

```
import java.util.Calendar;  // jangan impor java.icu.utils.Calendar
public class DatePickerFragment extends DialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Gunakan waktu sekarang sebagai waktu default
        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);
        // Activity perlu mengimplement listener ini
        DatePickerDialog.OnDateSetListener listener = (DatePickerDialog.OnDateSetListener) getActivity();
        // Buat TimePickerDialog dan panggil return
        return new DatePickerDialog(getActivity(), listener, year, month, day);
    }
```

Berikut ini contoh kode Activity yang memanggil dialog di atas (:

```
public class MyActivity extends AppCompatActivity implements DatePickerDialog.OnDateSetListener {
  // ... kode disingkat
  
  // panggil untuk menampilkan date picker
  public void showDatePickerDialog(View v) {
     DatePickerFragment newFragment = new DatePickerFragment();
     newFragment.show(getSupportFragmentManager(), "datePicker");
  }

  // handle the date selected
  @Override
  public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    // store the values selected into a Calendar instance
    final Calendar c = Calendar.getInstance();
    c.set(Calendar.YEAR, year);
    c.set(Calendar.MONTH, monthOfYear);
    c.set(Calendar.DAY_OF_MONTH, dayOfMonth);
  }
```

Cara yang sama juga berlaku untuk time picker:

```
public class TimePickerFragment extends DialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Gunakan waktu sekarang sebagai waktu default
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);
        
        // Activity harus meng-implement interface inI

        TimePickerDialog.OnTimeSetListener listener = (TimePickerDialog.OnTimeSetListener) getActivity();

        // Create a new instance of TimePickerDialog and return it
        return new TimePickerDialog(getActivity(), listener, hour, minute, DateFormat.is24HourFormat(getActivity()));
    }

}
```

## Modal Bottom Sheets

![](https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3VW9HUDhtTE5XZVk/components-bottomsheets-usage2.png)

Berkat deisn support library, kita dapat mengubah dialog menjadi bottom sheets menajdi lebih mudah. Daripada menggunakan `DialogFragment`, kita akan menggunakan `BottomSheetDialogFragment`:

```
public class MyBottomSheetDialogFragment extends BottomSheetDialogFragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_bottom_sheet, container);
    }
    
}
```

Saat ditampilkan, ia akan muncul dari bagian bawah:

```
MyBottomSheetDialogFragment myDialog = new MyBottomSheetDialogFragment();

FragmentManager fm = getSupportFragmentManager();
myDialog.show(fm, "test");
```

*Diterjemahkan dari [Using DialogFragment](https://guides.codepath.com/android/Using-DialogFragment)*

Menggunakan DialogFragment di Android

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Menggunakan DialogFragment di Android

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Hour of Code, Belajar Coding Satu Jam

Jangan Lewatkan, Jogja Geek Job Fair #2 Digelar Lagi Minggu Ini

Wawancara Bersama Luri Darmawan Pembuat AKSI IDE

io.js, Framework JavaScript yang Kompatibel dengan Node.js dan npm

CodeCombat, Belajar Coding Sambil Bermain Game

Mengenal Meteor, Framework JavaScript yang Sedang Naik Daun