Cara Membuat Navigation Drawer Seperti BBM Android

Published by farizdotid on December 2, 2016December 2, 2016

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/farizdot/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

farizdotid code – Apa itu Navigation Drawer ? Secara singkatnya Navigation Drawer ini biasa disebut oleh para Android Developer adalah Navbar. Navbar ini biasanya ditandai dengan icon berbentuk 3 garis berbentuk seperti hamburger, Jika icon hamburger itu di klik maka Navbar itu akan muncul dari sebelah kiri layar dan menampilan berbagai menu navigasi seperti Help, Contact Us, Profil dan sebagainya. Nah untuk contoh kasus kali ini ane mau meng-share Cara Membuat Navigation Drawer / Navbar Seperti di Aplikasi BBM.

Oke kita mulai langsung saja ya Cara Membuat Navigation Drawer Seperti BBM ini.

Daftar Isi hide

Pertama,

Pada saat pemilihan wizard Activity, pastikan pilih yang Navigation Drawer Activity dan jangan lupa kasih nama activity tersebut . Jika sudah terlanjur membuat Empty Activity silahkan buat kembali Activity hanya saja pilih yang Navigation Drawer Activity.

Kedua,

compile 'de.hdodenhof:circleimageview:2.1.0'

1	compile 'de.hdodenhof:circleimageview:2.1.0'

Tambahkan dependencies library tersebut di build.gradle ( Module : app ). Kegunaan library tersebut untuk membuat foto kita berbentuk bulat.

Ketiga,

Tambahkan beberapa icon untuk dijadikan icon menu navigasi kita nanti seperti BBM. Nah disini kita bisa menggunakan plugin Android Drawable Importer, Jika belum tau bisa ke post ini dulu ( Install dan Cara Penggunaan Plugin Android Drawable Importer ) . Jika agan sudah meng-installnya silahkan menuju ke res → drawable → New → Icon Pack Drawable dibagian bawah. Lalu tambahkan icon-icon berikut ini :

ic_action_achievement (24dp) (black)

ic_action_barcode_2 (24dp) (black)

ic_device_hub (24dp) (black)

ic_info (24 dp) (black)

ic_person_add (24dp) (black)

ic_settings (24dp) (black)

dan 1 icon/gambar bebas untuk dijadikan foto profil di navbar.

Keempat,

Jika sudah membuat Navigation Drawer Activity silahkan agan ke res → menu → activity_main_drawer.xml . Lalu ganti dengan kode berikut ini :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_undangan"
            android:icon="@drawable/ic_person_add"
            android:title="Undangan" />
        <item
            android:id="@+id/nav_saluran"
            android:icon="@drawable/ic_device_hub"
            android:title="Saluran" />
        <item
            android:id="@+id/nav_setelan"
            android:icon="@drawable/ic_settings"
            android:title="Setelan" />
        <item
            android:id="@+id/nav_laporkan"
            android:icon="@drawable/ic_info"
            android:title="Laporkan Masalah" />

        <item
            android:id="@+id/nav_bantuan"
            android:icon="@drawable/ic_info"
            android:title="Bantuan" />
    </group>
</menu>

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/nav_undangan"

android:icon="@drawable/ic_person_add"

android:title="Undangan" />

<item

android:id="@+id/nav_saluran"

android:icon="@drawable/ic_device_hub"

android:title="Saluran" />

<item

android:id="@+id/nav_setelan"

android:icon="@drawable/ic_settings"

android:title="Setelan" />

<item

android:id="@+id/nav_laporkan"

android:icon="@drawable/ic_info"

android:title="Laporkan Masalah" />

<item

android:id="@+id/nav_bantuan"

android:icon="@drawable/ic_info"

android:title="Bantuan" />

</group>

</menu>

Kelima,

Kita sekarang edit xml bagian header navbarnya. Caranya res → layout → nav_header_main.xml . Lalu samakan dengan kode berikut ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:paddingTop="16dp"
        android:id="@+id/imgview_barcode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action_barcode_2"
        android:layout_gravity="right"/>

    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/imgview_fotoprofil"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/logofariz" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="8dp"
        android:text="Farizdotid Code"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ada - www.farizdotid.com" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/side_nav_bar"

android:gravity="bottom"

android:orientation="vertical"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/nav_header_vertical_spacing"

android:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView

android:paddingTop="16dp"

android:id="@+id/imgview_barcode"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ic_action_barcode_2"

android:layout_gravity="right"/>

<de.hdodenhof.circleimageview.CircleImageView

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/imgview_fotoprofil"

android:layout_width="60dp"

android:layout_height="60dp"

android:src="@drawable/logofariz" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingTop="8dp"

android:text="Farizdotid Code"

android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Ada - www.farizdotid.com" />

</LinearLayout>

nav_header_main

Keenam,

Sekarang kita edit bagian warna background header navbar tersebut. Caranya res → drawable → side_nav_bar.xml . Lalu samakan dengan kode berikut :

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid
        android:color="#1976D2"/>
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<solid

android:color="#1976D2"/>

</shape>

Ketujuh,

Nah setelah kita selesai membuat xmlnya sekarang kita koding bagian MainActivitynya.

Dibagian method onNavigationItemSelected itu samakan dengan kode berikut :

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

        if (id == R.id.nav_undangan) {
            showToast("undangan");
        } else if (id == R.id.nav_saluran) {
            showToast("saluran");
        } else if (id == R.id.nav_setelan) {
            showToast("setelan");
        } else if (id == R.id.nav_laporkan) {
            showToast("laporkan masalah");
        } else if (id == R.id.nav_bantuan) {
            showToast("bantuan");
        }

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

@SuppressWarnings("StatementWithEmptyBody")

@Override

public boolean onNavigationItemSelected(MenuItem item) {

// Handle navigation view item clicks here.

int id = item.getItemId();

if (id == R.id.nav_undangan) {

showToast("undangan");

} else if (id == R.id.nav_saluran) {

showToast("saluran");

} else if (id == R.id.nav_setelan) {

showToast("setelan");

} else if (id == R.id.nav_laporkan) {

showToast("laporkan masalah");

} else if (id == R.id.nav_bantuan) {

showToast("bantuan");

}

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

drawer.closeDrawer(GravityCompat.START);

return true;

}

Jika ada error dibagian showToastnya biarkan saja terlbih dahulu karena kita belum membuat method tersebut. Sekaran kita buat method tersebut dengan kode berikut ini :

private void showToast(String message){
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }

private void showToast(String message){

Toast.makeText(this, message, Toast.LENGTH_SHORT).show();

}

Kedelapan,

Sampai langkah ketujuh tersebut agan sudah berhasil membuat Menu Navigation Drawer seperti BBM, nah dilangkah ini kita akan membuat Navigation Drawer Header itu bisa di klik seperti aplikasi BBM. Jika mengklik barcode maka akan menuju ke activity barcode, dan sebagainya.

Pertama agan harus men-deklarasikan dahulu ImageView dan CircleImageView yang tadi sudah dibuat di xml. Caranya tambahkan diatas method onCreate kode berikut ini :

private ImageView imgview_barcode;
private CircleImageView imgview_fotoprofil;

1 2	private ImageView imgview_barcode; private CircleImageView imgview_fotoprofil;

Jika sudah di deklarasikan sekarang kita harus meng-init komponen tersebut di onCreate. Untuk mempermudah ( versi ane ) kita membuat method khusus untuk menampilkan komponen Navigation Drawer Header tersebut. Buat method bernama initComponentsNavHeader, kodenya berikut ini :

private void initComponentsNavHeader(){
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
        View headerView = navigationView.getHeaderView(0);

        imgview_barcode = (ImageView) headerView.findViewById(R.id.imgview_barcode);
        imgview_barcode.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showToast("barcode");
            }
        });

        imgview_fotoprofil = (CircleImageView) headerView.findViewById(R.id.imgview_fotoprofil);
        imgview_fotoprofil.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showToast("Foto Profil");
            }
        });

    }

private void initComponentsNavHeader(){

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

navigationView.setNavigationItemSelectedListener(this);

View headerView = navigationView.getHeaderView(0);

imgview_barcode = (ImageView) headerView.findViewById(R.id.imgview_barcode);

imgview_barcode.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

showToast("barcode");

}

});

imgview_fotoprofil = (CircleImageView) headerView.findViewById(R.id.imgview_fotoprofil);

imgview_fotoprofil.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

showToast("Foto Profil");

}

});

}

Jika sudah membuat method tersebut silahkan panggil method initComponentsNavHeader tersebut di onCreate. Kurang lebih kode di onCreate jadi seperti ini :

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

        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();

        initComponentsNavHeader();
    }

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

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();

initComponentsNavHeader();

}

Kesembilan,

Selesai. Silahkan run aplikasi tersebut di emulator ataupun device android agan dan lihat hasilnya 🙂 Kurang lebih kode di MainActivity adalah sebagai berikut :

package com.farizdotid.navigationdrawerbbm;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.Toast;

import de.hdodenhof.circleimageview.CircleImageView;

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    private ImageView imgview_barcode;
    private CircleImageView imgview_fotoprofil;

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

        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();

        initComponentsNavHeader();
    }

    private void initComponentsNavHeader(){
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
        View headerView = navigationView.getHeaderView(0);

        imgview_barcode = (ImageView) headerView.findViewById(R.id.imgview_barcode);
        imgview_barcode.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showToast("barcode");
            }
        });

        imgview_fotoprofil = (CircleImageView) headerView.findViewById(R.id.imgview_fotoprofil);
        imgview_fotoprofil.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showToast("Foto Profil");
            }
        });

    }
    @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_undangan) {
            showToast("undangan");
        } else if (id == R.id.nav_saluran) {
            showToast("saluran");
        } else if (id == R.id.nav_setelan) {
            showToast("setelan");
        } else if (id == R.id.nav_laporkan) {
            showToast("laporkan masalah");
        } else if (id == R.id.nav_bantuan) {
            showToast("bantuan");
        }

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

    private void showToast(String message){
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

package com.farizdotid.navigationdrawerbbm;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.view.View;

import android.support.design.widget.NavigationView;

import android.support.v4.view.GravityCompat;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.ImageView;

import android.widget.Toast;

import de.hdodenhof.circleimageview.CircleImageView;

public class MainActivity extends AppCompatActivity

implements NavigationView.OnNavigationItemSelectedListener {

private ImageView imgview_barcode;

private CircleImageView imgview_fotoprofil;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

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();

initComponentsNavHeader();

}

private void initComponentsNavHeader(){

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

navigationView.setNavigationItemSelectedListener(this);

View headerView = navigationView.getHeaderView(0);

imgview_barcode = (ImageView) headerView.findViewById(R.id.imgview_barcode);

imgview_barcode.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

showToast("barcode");

}

});

imgview_fotoprofil = (CircleImageView) headerView.findViewById(R.id.imgview_fotoprofil);

imgview_fotoprofil.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

showToast("Foto Profil");

}

});

}

@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_undangan) {

showToast("undangan");

} else if (id == R.id.nav_saluran) {

showToast("saluran");

} else if (id == R.id.nav_setelan) {

showToast("setelan");

} else if (id == R.id.nav_laporkan) {

showToast("laporkan masalah");

} else if (id == R.id.nav_bantuan) {

showToast("bantuan");

}

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

drawer.closeDrawer(GravityCompat.START);

return true;

}

private void showToast(String message){

Toast.makeText(this, message, Toast.LENGTH_SHORT).show();

}

Cara Membuat Navigation Drawer Seperti BBM Android

Kesepuluh,

Agan bisa mendownload / mengclone project yang tadi sudah dibuat di akun github ane ( https://github.com/farizdotid/Navigation-Drawer-Looks-Like-BBM-App-Android )

Sekian tutorial mengenai Cara Membuat Navigation Drawer Seperti BBM Android. Semoga bermanfaat dan seperti biasa jika ada pertanyaan bisa langsung berkomentar di artikel ini atau bisa kontak media sosial ane 🙂

Categories: Pemrograman Android

Tags: AndroidCara Membuat Aplikasi AndroidPemrograman Android

19 Comments

Adam syf · December 3, 2016 at 4:32 am

Good idea, boleh dicoba 🙂

farizadmin · December 3, 2016 at 5:07 am

silahkan om hihi 🙂

Endar Fernandes · December 3, 2016 at 6:16 am

Wah keren nih tutorialnya. Hasil nya benar-benar mirip sama bbm.. kalau dikembangkan bisa jadi saingan bbm nih. Hehe.
Terima kasih gan tutorialnya.

farizadmin · December 3, 2016 at 6:18 am

agan aja yang buat app saingan bbm hihi 🙂 terimakasih kembali gan 🙂

Machtal · December 4, 2016 at 8:21 am

screensho kodenya ada yang kepotong gan, jadinya gak kelihatan, tolong diperbaiki. nice article !

farizadmin · December 7, 2016 at 2:54 am

kepotong gimana maksudnya gan? kalau pun ada code yang terpotong masih bisa liat langsung ke Github ane kok gan 🙂

Machtal · February 25, 2017 at 1:24 pm

maaf, baru tahu ternyata tempat kodenya bisa di geser :p

farizdotid · May 3, 2017 at 1:22 pm

butuh aqua ga gan ? 😀

Bagus Javaneze · April 28, 2017 at 12:39 pm

gan kalo misal action menu di navigation drawernya ketika diklik akan menampilkan fragment activity gmm caranya ya gan? soalnya ane mau buat action nya seperti

farizdotid · May 3, 2017 at 1:23 pm

bisa gan, kasih action di klik menu navbarnya dengan kodingan manggil fragment.

Bagus Javaneze · May 4, 2017 at 5:53 am

oke gan makasih

Alfin Auzikri · June 29, 2017 at 2:31 am

thank you mas

farizdotid · July 3, 2017 at 9:06 am

sama-sama mas, semoga bermanfaat 🙂

Baskoro · August 5, 2017 at 7:58 am

mas mau nanya koding untuk “action di klik menu navbarnya dengan kodingan manggil fragment” itu gimna ya soalnya saya bingung terus penempatan nya dimana mohon pencerahan??

farizdotid · August 7, 2017 at 1:41 pm

if (id == R.id.nav_undangan) {
showToast(“undangan”);
} else if (id == R.id.nav_saluran) {
showToast(“saluran”);
} else if (id == R.id.nav_setelan) {
showToast(“setelan”);
} else if (id == R.id.nav_laporkan) {
showToast(“laporkan masalah”);
} else if (id == R.id.nav_bantuan) {
showToast(“bantuan”);
}

dibagian itu mas, tinggal ganti code yang showtoast itu sama sesuai dengan kebutuhan mas.

Mahayasa · August 26, 2017 at 5:47 am

mas mau tanya nih misalnya kan aku milih menu saluran, trus di layout saluran ada menu lagi misalnya saluran a, b, c, dsb
nah gmna caranya supaya ketika menu saluran a di klik masuk ke layout saluran a?
trus di atasnya isi tombol back?
terimakasih

farizdotid · August 26, 2017 at 4:20 pm

bukannya tinggal start activity layout saluran a aja ya mas? terus untuk tombol backnya bisa lihat disini mas : https://stackoverflow.com/questions/26651602/display-back-arrow-on-toolbar-android

Maskur · October 16, 2017 at 7:43 am

mas kalo di gabung dengan activity login terus di parse pake Intent, gimana cara merubah TextView dan photo di NavHeader mas..?

terima kasih

farizdotid · October 16, 2017 at 9:39 am

Di intent harus bawa data. Bisa pakai put extra get extra, Nah untuk kodingannya mungkin bisa referensi dari sini :
imgview_fotoprofil = (CircleImageView) headerView.findViewById(R.id.imgview_fotoprofil);
imgview_fotoprofil.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showToast(“Foto Profil”);
}
});

imgview_fotoprofil.setImageResource(hasil intent extra).

Untuk textviewnya pun sama kurang lebih metodenya mas 🙂

Cara Membuat Navigation Drawer Seperti BBM Android

Pertama,

Kedua,

Ketiga,

Keempat,

Kelima,

Keenam,

Ketujuh,

Kedelapan,

Kesembilan,

Kesepuluh,

19 Comments

Adam syf · December 3, 2016 at 4:32 am

farizadmin · December 3, 2016 at 5:07 am

Endar Fernandes · December 3, 2016 at 6:16 am

farizadmin · December 3, 2016 at 6:18 am

Machtal · December 4, 2016 at 8:21 am

farizadmin · December 7, 2016 at 2:54 am

Machtal · February 25, 2017 at 1:24 pm

farizdotid · May 3, 2017 at 1:22 pm

Bagus Javaneze · April 28, 2017 at 12:39 pm

farizdotid · May 3, 2017 at 1:23 pm

Bagus Javaneze · May 4, 2017 at 5:53 am

Alfin Auzikri · June 29, 2017 at 2:31 am

farizdotid · July 3, 2017 at 9:06 am

Baskoro · August 5, 2017 at 7:58 am

farizdotid · August 7, 2017 at 1:41 pm

Mahayasa · August 26, 2017 at 5:47 am

farizdotid · August 26, 2017 at 4:20 pm

Maskur · October 16, 2017 at 7:43 am

farizdotid · October 16, 2017 at 9:39 am

Leave a Reply Cancel reply

Kursus

Belajar Membuat Aplikasi Android dengan Android Studio

Pemrograman Android

Cara Membuat Aplikasi Scan QR Code Android

Pemrograman Android

Cara Membuat Text Bold, Italic, Underline di strings.xml

Cara Membuat Navigation Drawer Seperti BBM Android

Pertama,

Kedua,

Ketiga,

Keempat,

Kelima,

Keenam,

Ketujuh,

Kedelapan,

Kesembilan,

Kesepuluh,

19 Comments

Adam syf · December 3, 2016 at 4:32 am

farizadmin · December 3, 2016 at 5:07 am

Endar Fernandes · December 3, 2016 at 6:16 am

farizadmin · December 3, 2016 at 6:18 am

Machtal · December 4, 2016 at 8:21 am

farizadmin · December 7, 2016 at 2:54 am

Machtal · February 25, 2017 at 1:24 pm

farizdotid · May 3, 2017 at 1:22 pm

Bagus Javaneze · April 28, 2017 at 12:39 pm

farizdotid · May 3, 2017 at 1:23 pm

Bagus Javaneze · May 4, 2017 at 5:53 am

Alfin Auzikri · June 29, 2017 at 2:31 am

farizdotid · July 3, 2017 at 9:06 am

Baskoro · August 5, 2017 at 7:58 am

farizdotid · August 7, 2017 at 1:41 pm

Mahayasa · August 26, 2017 at 5:47 am

farizdotid · August 26, 2017 at 4:20 pm

Maskur · October 16, 2017 at 7:43 am

farizdotid · October 16, 2017 at 9:39 am

Leave a Reply Cancel reply

Related Posts

Kursus

Belajar Membuat Aplikasi Android dengan Android Studio

Pemrograman Android

Cara Membuat Aplikasi Scan QR Code Android

Pemrograman Android

Cara Membuat Text Bold, Italic, Underline di strings.xml