Material Desain Android sesi - 1 ( Navigation Drawer )

Saturday, January 23, 2016 Unknown 0 Comments

gambar dari : google material design

ketemu lagi sobat..
pada artikel sebelumnya saya telah menulis tentang material desain secara umum sedangkan pada artikel kali ini saya akan menerapkan material desain pada aplikasi android.. yeah...

untuk membuat aplikasi android silakan buka android studio kalian.. apabila belum menginstallnya silakan download pada web android developer dan menginstallnya.... lalu membukanya..

berikut langkah2 pembuatan aplikasi android

1. Buat project Baru pada android studio
untuk yang pertama kali membuat project pada android studio bisa membuka artikel saya sebelumnya yang berjudul "membuat project dengan android studio"
2. memulai ngoding pada android studio
pertama kalian harus membuat file menu pada res->menu-> drawer_menu.xml
salin file berikut ke dalam drawer_menu.xml

berikutnya buat file nav_header.xml pada res->layout kopikan file berikut:

berikutnya buka file activity_main.xml pada res->layout dan kopikan file dibawah ini :

file main activity merupakan file untuk kerangka tampilan awal pada aplikasi android... perhatikan pada 2 baris yang paling bawah diatas yaitu app:menu="@menu/drawer_menu" --> digunakan untuk memanggil file drawer_menu.xml yang telah dibuat diatas, gunanya untuk membuat navigation menu.
sedangkan

app:headerLayout="@layout/nav_header" --> digunakan untuk memanggil file nav_header.xml yang telah kita buat diatas, aplikasi ini untuk header dari navigation menu.
berikutnya silakan edit file activitymain.java pada app->java->nama_paket. berikut kodingan untuk activitymain.jav..

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.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);
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_gallery) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_slideshow) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_manage) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_share) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_send) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

bila tidak ada error maka akan seperti dibawah ini