Yoesuv

Laravel dan Android Tutorial

Blogger news

Membuat Drawer Menu Android

Yoesuv 06.08 Tidak ada komentar
        Drawer menu atau disebut juga Navigation Drawer biasanya adalah menu yang tersembunyi dibagian kiri dari layar aplikasi. dan akan muncul jika icon    pada toolbar di klik, atau jari tangan melakukan swipe dari bagian kiri layar. pasti tidak asing jika menggunakan aplikasi semisal gmail atau bbm.


        untuk membuat drawer menu tersebut cukup mudah, karena sudah ada library-nya. salah satunya adalah Material Drawer. dan fiturnya pun juga cukup banyak, compatible s/d API 10, multiple account, multiple drawer dan lain-lain. untuk lebih lengkapnya kunjungi halaman githubnya.

        tutorial kali ini hanya membuat simple drawer menu seperti gambar diatas. langkah yang pertama adalah menambahkan dependency pada gradle. buka file gradle. dan sebelumnya pastikan update SDK tools android studio ke versi terbaru.


kemudian tambahkan library yang akan dipakai di bagian dependencies. seperti gambar dibawah ini. tambahkan
compile('com.mikepenz:materialdrawer:5.0.8@aar') {
    transitive = true
}
ket : sampai post ini dibuat library material drawer sampai versi 5.0.8


setelah itu sync dan tunggu hingga selesai. berikutnya lanjut ke java class.
pertama-tama initialize AccountHeader dan Drawer dari Material Drawer.


bagian ini merupakan header dari material drawer, siapkan gambar untuk background di folder drawable.


untuk lebih lengkapnya java class nya seperti ini. lihat pada bagian PrimaryDrawerItem untuk menambahkan menunya, dan icon folder drawable. sedangkan identifier untuk menandai nomor menu. kemudian untuk action pada withOnDrawerItemClickListener.

package com.yoesuv.menudrawer;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Toast;

import com.mikepenz.materialdrawer.AccountHeader;
import com.mikepenz.materialdrawer.AccountHeaderBuilder;
import com.mikepenz.materialdrawer.Drawer;
import com.mikepenz.materialdrawer.DrawerBuilder;
import com.mikepenz.materialdrawer.model.PrimaryDrawerItem;
import com.mikepenz.materialdrawer.model.interfaces.IDrawerItem;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

    private AccountHeader header;
    private Drawer mDrawer;

    private String currentTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        if(getSupportActionBar()!=null){
            getSupportActionBar().setElevation(5);
        }

        header = new AccountHeaderBuilder().withActivity(this)
                .withHeaderBackground(R.drawable.bg_header)
                .withSavedInstance(savedInstanceState)
                .build();

        mDrawer = new DrawerBuilder().withActivity(this)
                .withToolbar(toolbar)
                .withAccountHeader(header)
                .addDrawerItems(
                        new PrimaryDrawerItem().withName(R.string.home).withIcon(R.drawable.home_96).withIdentifier(1),
                        new PrimaryDrawerItem().withName(R.string.gallery).withIcon(R.drawable.gallery_96).withIdentifier(2),
                        new PrimaryDrawerItem().withName(R.string.maps).withIcon(R.drawable.map_marker_96).withIdentifier(3),
                        new PrimaryDrawerItem().withName(R.string.settings).withIcon(R.drawable.services_96).withIdentifier(4),
                        new PrimaryDrawerItem().withName(R.string.about).withIcon(R.drawable.about_96).withIdentifier(5)
                )
                .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
                    @Override
                    public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
                        if (drawerItem != null) {
                            if (drawerItem.getIdentifier() == 1) {
                                currentTitle = getResources().getString(R.string.home);
                            } else if (drawerItem.getIdentifier() == 2) {
                                currentTitle = getResources().getString(R.string.gallery);
                            } else if (drawerItem.getIdentifier() == 3) {
                                currentTitle = getResources().getString(R.string.maps);
                            } else if (drawerItem.getIdentifier() == 4) {
                                currentTitle = getResources().getString(R.string.settings);
                            } else if (drawerItem.getIdentifier() == 5) {
                                currentTitle = getResources().getString(R.string.about);
                            }
                        }

                        if (getSupportActionBar() != null) {
                            getSupportActionBar().setTitle(currentTitle);
                        }

                        Toast.makeText(view.getContext(), "Menu "+currentTitle, Toast.LENGTH_SHORT).show();

                        return false;
                    }
                })
                .withSavedInstance(savedInstanceState).build();
    }
}

untuk demo apk bisa didownload disini. dan file project disini.

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )