Building A Sliding Drawer Menu Just Like Facebook Using Navigation Drawer Android

0
Shares
Building A Sliding Drawer Menu Just Like Facebook Using Navigation Drawer Android
5 (100%) 2 votes

How can I create a Slide-out sliding menu? This is the most frequently asked question in Android community since Facebook first integrated this function. And as it turns out, it isn’t that difficult. With the help of Navigation drawer Android, you can easily create Android slide menu in your native Android application.

For those who are not familiar with Navigation drawer Android, it consists of a panel that slides out from left side or right side underneath of the main content area. It reveals a couple of menu navigation in your Android app.

Here’s a sample from YouTube app.

youtube-android

And since the Facebook implement Navigation drawer Android, it quickly became standard in Android app world. Nowadays you can easily find drawer menu in different apps like Mailbox, Path, Gmail, Youtube app, etc.

The Navigation drawer Android allows developer to create navigation menu in Android app without wasting the screen real estate. And generally, this menu hides behind the front view. It gets triggered through tap on a list button in the navigation bar.

Therefore here, we’re going to provide a simple guide with which, you can do it yourself.

Let’s Get Started

First, create a new project in your Android Studio.

imagepicker1

Select your target Android screen in next screen.

imagepicker2

In the next tab, add an activity -> select Navigation Drawer Activity.

imagepicker3

In the final tab, customize the activity and hit ‘Finish’ button.

imagepicker4

Start Code Integration

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

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

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

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/content_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:gravity="center"

tools:context="nimish.navigationdrawer.MainActivity"

tools:showIn="@layout/app_bar_main">

<TextView

android:id="@+id/textView"

android:textSize="22sp"

android:textColor="@android:color/black"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World!" />

</RelativeLayout>
  • MainActivity.java
public class MainActivity extends AppCompatActivity

implements NavigationView.OnNavigationItemSelectedListener {

private TextView textView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

textView = (TextView) findViewById(R.id.textView);

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

textView.setText(item.getTitle());

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

// Handle the camera action

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

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

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

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

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

}

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

drawer.closeDrawer(GravityCompat.START);

return true;

}

}

Now if you followed each step correctly, you have successfully implement Navigation drawer Android in your native app.

However, if you face any problem, you can contact our Android developers for help.

This was just a sample demo, but you can customize Navigation drawer Android depending on your business needs to boost the profit and user engagements. So if still haven’t started working on it, then hire Android app developer from us to upgrade your app to push your business limits.

Grab a free copy of Slide-out drawer menu demo from Github.

 
0
Shares
 

Want to Develop Android App From Scratch? Contact Us Now