Material Design Membuat Toolbar Pada Dialogbox

Sebelumnya saya pernah share tentang Cara Membuat Toolbar. Namun, pada tutorial sebelumnya Toolbar digunakan sebagai pengganti dari ActionBar. Pada tutorial ini kita akan Membuat Toolbar Pada Dialogbox. Tidak ada perbedaan dalam pembuatan toolbarnya cuma peletakannya yang berbeda. Ini merupakan salah satu perbedaan antara ActionBar dengan Toolbar. Toolbar bisa kita posisikan sesuai dengan keinginan kita.

   

Download Source Code 

Langkah-langkah Membuat Toolbar Pada Dialogbox
1. Buat project baru di Android Studio
2. Edit file style.xml menjadi seperti berikut : <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">#03A9f4</item> <item name="colorPrimaryDark">#0288D1</item> </style> </resources> 3. Buat layout baru dengan nama toolbar_layout.xml kemudian ketikkan code berikut : <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#03A9f4"> </android.support.v7.widget.Toolbar> 4. Buat layout baru kembali dengan nama dialog_layout.xml kemudian ketikkan code berikut : <?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!--Memasukkan Layout Toobar--> <include android:id="@+id/mToolbar" layout="@layout/toolbar_layout" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/mToolbar" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:layout_marginBottom="50dp" android:layout_marginTop="50dp" android:textSize="18sp" android:textStyle="bold" /> </RelativeLayout> 5. Selanjutnya kita tambahkan 1 tombol pada activity_main yang digunakan untuk membuka dialog. silahkan edit activity_main.xml menjadi seperti berikut : <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!--Memasukkan Layout Toobar--> <include android:id="@+id/mToolbar" layout="@layout/toolbar_layout"/> <TextView android:id="@+id/txtHello" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:layout_below="@+id/mToolbar"/> <Button android:id="@+id/btnOpenDialog" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Buka Dialog" android:layout_below="@+id/txtHello" android:layout_margin="10dp"/> </RelativeLayout> 6. Buat 1 class baru dengan nama DialogLayout.java kemudian ketikkan kode berikut : package linuxer.madura.com.demodialog; import android.app.Dialog; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.DialogFragment; import android.support.v7.widget.Toolbar; import android.view.LayoutInflater; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.widget.TextView; /** * Created by linuxer on 4/26/15. */ public class DialogLayout extends DialogFragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { Bundle args = getArguments(); String title = args.getString("title"); View view = inflater.inflate(R.layout.dialog_layout, container, false); TextView textView = (TextView) view.findViewById(R.id.textView); textView.setText("Demo Toolbar Pada Dialog"); Toolbar mToolbar = (Toolbar) view.findViewById(R.id.mToolbar); mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem menuItem) { return true; } }); mToolbar.inflateMenu(R.menu.menu_main); mToolbar.setTitle(title); return view; } @NonNull @Override public Dialog onCreateDialog(Bundle savedInstanceState) { Dialog dialog = super.onCreateDialog(savedInstanceState); dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE); return dialog; } } 7. Selanjutnya edit MainActivity.java menjadi seperti berikut : public class MainActivity extends ActionBarActivity { Toolbar mToolbar; Button btnOpenDialog; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //inisialisasi toolbar mToolbar = (Toolbar) findViewById(R.id.mToolbar); setSupportActionBar(mToolbar); mToolbar.setTitle("Demo Dialog"); //inisialisasi tombol dan memberikan aksi click pada tombol btnOpenDialog = (Button) findViewById(R.id.btnOpenDialog); btnOpenDialog.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Bundle args = new Bundle(); args.putString("title", "Toolbar Pada Dialog"); DialogLayout dialogLayout = new DialogLayout(); dialogLayout.setArguments(args); dialogLayout.show(getSupportFragmentManager(), "action_bar_frag"); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } } Terakhir, silahkan jalankan dan lihat hasilnya. Tutorial Membuat Toolbar Pada Dialogbox ini sangatlah sederhana. jika anda ingin menjadi lebih menarik, silahkan anda modifikasi sesuai dengan keinginan anda. Sekian Tutorial Material Design Membuat Toolbar Pada Dialogbox semoga bermanfaat.

Sumber referensi