animation with drawer layout.

ashwini gupta

30 October 2017

DrawerLayout – The navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen. It is hidden most of the time but is revealed when the user swipes a finger from the left edge of the screen or, while at the top level of the app, the user touches the app icon in the action bar.

Creating Drawer Layout-

To add a navigation drawer, declare your user interface with a DrawerLayout as the root view of your layout. Inside the DrawerLayout add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.

<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">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
         android:id="@+id/navigationView"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         app:menu="@menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>

<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">

<FrameLayout

android:id="@+id/fragment"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<android.support.design.widget.NavigationView

android:id="@+id/navigationView"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

app:menu="@menu/my_navigation_items" />

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

How to add animation with drawer and main content of an Activity?

The answer is that add drawer Listener with our drawer override onDrawerSlide() method of SimpleDrawerListener listener class.

 mobikulLandingPageBinding.drawerLayout.setScrimColor(Color.TRANSPARENT);
 mobikulLandingPageBinding.drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() {
           @Override
           public void onDrawerSlide(View drawer, float slideOffset) {
             if(mobikulLandingPageBinding.drawerLayout.isDrawerOpen(GravityCompat.START)) {
                 mobikulLandingPageBinding.fragment.setX(mobikulLandingPageBinding.navigationView.getWidth() * slideOffset);
                 RelativeLayout.LayoutParams lp =
                 (RelativeLayout.LayoutParams) mobikulLandingPageBinding.fragment.getLayoutParams();
                 lp.height = drawer.getHeight() -
                 (int) (drawer.getHeight() * slideOffset * 0.3f);
                 lp.topMargin = (drawer.getHeight() - lp.height) / 2;
                 mobikulLandingPageBinding.fragment.setLayoutParams(lp);
               }
            }
              
        } );

mobikulLandingPageBinding.drawerLayout.setScrimColor(Color.TRANSPARENT);

mobikulLandingPageBinding.drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() {

@Override

public void onDrawerSlide(View drawer, float slideOffset) {

if(mobikulLandingPageBinding.drawerLayout.isDrawerOpen(GravityCompat.START)) {

mobikulLandingPageBinding.fragment.setX(mobikulLandingPageBinding.navigationView.getWidth() * slideOffset);

RelativeLayout.LayoutParams lp =

(RelativeLayout.LayoutParams) mobikulLandingPageBinding.fragment.getLayoutParams();

lp.height = drawer.getHeight() -

(int) (drawer.getHeight() * slideOffset * 0.3f);

lp.topMargin = (drawer.getHeight() - lp.height) / 2;

mobikulLandingPageBinding.fragment.setLayoutParams(lp);

}

} );

See the other blog for animation of layout-

show and hide a view with animation

References:- https://developer.android.com/training/implementing-navigation/nav-drawer.html