SlidePlaneLayout vs DrawerLayout for menu in android

In the most of the applications, we have seen the slide menu used and many of the users want some attractive menu something like to slide with different ways and style. Slide menu is more attractive for users. To build this kind of features many Concepts are available for developer to implement this,

Now a day NavigatonView is more popular for slide menu. But Here I am describing to you to create slide menu for different - different style. I am not going to more customized but giving some useful platform that you can make your customization on this.

Here are some basic things which I am targeting.
1. SlidePanelLayout
2, DrawerLayout

SlidePanelLayout provides horizontal multi-pane layout to create for multiple screens. For more detail about this Please check the developer site Here.
DrawerLayout provides to pull the view in a vertical way. It is strongly recommended to use in Navigation. For detail about this Please check developer site Here.

Let's check both Layouts to implement menu slide. Before writing the code I want to show the implemented video that helps you get to understand both features. Please check this video.


Let's create an android project to implement this.

SlidePanelActivity.java

    
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;

import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by sunil on 28-01-2017.
 */

public class SlidePanelActivity extends AppCompatActivity {

    @BindView(R.id.recyclerView)
    RecyclerView recyclerView;
    @BindView(R.id.SlidingPanel)
    SlidingPaneLayout SlidingPanel;
    @BindView(R.id.tool_bar)
    Toolbar toolBar;

    private ActionBar actionBar;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_slidepanel_right);
        ButterKnife.bind(this);

        setSupportActionBar(toolBar);
        actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);


        List list = Constant.getList();
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
        RecyclerAdapter adapter = new RecyclerAdapter(this, list);
        recyclerView.setAdapter(adapter);

        SlidingPanel.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {

            }

            @Override
            public void onPanelOpened(View panel) {
                actionBar.setHomeAsUpIndicator(R.drawable.ic_arrow_back_white_24dp);
            }

            @Override
            public void onPanelClosed(View panel) {
                actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
            }
        });
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub
        switch (item.getItemId()) {
            case android.R.id.home:
                if (SlidingPanel.isOpen()) {
                    actionBar.setHomeAsUpIndicator(R.drawable.ic_arrow_back_white_24dp);
                    SlidingPanel.closePane();
                    actionBar.setTitle(getString(R.string.app_name));
                } else {
                    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
                    SlidingPanel.openPane();
                    actionBar.setTitle("Menu Titles");
                }
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }

}

activity_slide_panel.xml

    
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
   <include
        android:id="@+id/tool_bar"
        layout="@layout/toolbar_layout">
   </include>
    <include
        android:id="@+id/SlidingPanel"
        layout="@layout/slidepanel_layout">
    </include>

</LinearLayout>

slidepanel_laout.xml

    
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/SlidingPanel"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <LinearLayout
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="right">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </android.support.v7.widget.RecyclerView>

   </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="#101010"
        android:orientation="vertical" >

        <TextView
            android:text="Slide Panel"
            android:textColor="#fff"
            android:gravity="center"
            android:background="@color/colorAccent"
            android:textSize="20dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
   </LinearLayout>

</android.support.v4.widget.SlidingPaneLayout>

SlideDrawerActivity.java

    
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by sunil on 04-02-2017.
 */

public class SlideDrawerActivity extends AppCompatActivity {


    @BindView(R.id.menu)
    ImageView menu;
    @BindView(R.id.content_frame)
    RelativeLayout contentFrame;
    @BindView(R.id.left_drawer)
    RelativeLayout leftDrawer;
    @BindView(R.id.drawer_layout)
    DrawerLayout drawerLayout;
    @BindView(R.id.recyclerView)
    RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_slide);
        ButterKnife.bind(this);

        List list = Constant.getList();
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
        RecyclerAdapter adapter = new RecyclerAdapter(this, list);
        recyclerView.setAdapter(adapter);

        menu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawerLayout.openDrawer(Gravity.LEFT);
            }
        });

        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                contentFrame.setX(slideOffset * 380);
            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
    }
}

activity_slide.xml

    
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff" >

   <RelativeLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent">

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/menu"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            android:src="@drawable/ic_menu"
            />
       <TextView
            android:text="Slide Drawer"
            android:textColor="#fff"
            android:gravity="center"
            android:textSize="20dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
   </RelativeLayout>


   <RelativeLayout
        android:id="@+id/left_drawer"
        android:layout_width="200dp"
        android:background="#fff"
        android:layout_height="match_parent"
        android:layout_gravity="start">

       <RelativeLayout
            android:gravity="center"
            android:id="@+id/header_container"
            android:layout_width="match_parent"
            android:layout_height="150dp">

            <TextView
                android:text="UserName"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

       </RelativeLayout>

      <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_below="@+id/header_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
       </android.support.v7.widget.RecyclerView>

   </RelativeLayout>
</android.support.v4.widget.DrawerLayout>



Thanks for reading this post. I hope it helps you.

No comments:

Post a Comment

Debug Database in Android

In my last tutorial, we have learned how we can use persistence database in android. We also understood which database wrapper we can use...

Contact Me

Name

Email *

Message *