Android DrawerLayout and DrawerListener

This exercise show how to use android.support.v4.widget.DrawerLayout and implement DrawerListener. DrawerLayout is a top-level container that allows for interactive "drawer" views to be pulled out from the edge of the window.

android.support.v4.widget.DrawerLayout and DrawerListener

Layout, to define <android.support.v4.widget.DrawerLayout> as top-level container.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:background="@android:color/background_light"
        tools:context=".MainActivity" >
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Main layout" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:autoLink="web"
            android:text="http://arteluzevida.blogspot.com/"
            android:textStyle="bold" />
        
        <Button
            android:id="@+id/opendrawer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Open Drawer" />

        <TextView
            android:id="@+id/prompt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" />
        <TextView
            android:id="@+id/prompt2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/background_dark"
        android:orientation="vertical"
        android:padding="5dp" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Drawer" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <Button
            android:id="@+id/closedrawer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Close Drawer" />
    </LinearLayout>

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

MainActivity.java

package com.example.androiddrawerlayout;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.DrawerLayout.DrawerListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {
 
 DrawerLayout drawerLayout;
 View drawerView;
 TextView textPrompt, textPrompt2;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  textPrompt = (TextView)findViewById(R.id.prompt);
  textPrompt2 = (TextView)findViewById(R.id.prompt2);
  
  drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
  drawerView = (View)findViewById(R.id.drawer);
  
  Button buttonOpenDrawer = (Button)findViewById(R.id.opendrawer);
  buttonOpenDrawer.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    drawerLayout.openDrawer(drawerView);
   }});
  
  Button buttonCloseDrawer = (Button)findViewById(R.id.closedrawer);
  buttonCloseDrawer.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    drawerLayout.closeDrawers();
   }});
  
  drawerLayout.setDrawerListener(myDrawerListener);
  
  /*
   * In my trial experiment:
   * Without dummy OnTouchListener for the drawView to 
   * consume the onTouch event, touching/clicking on 
   * un-handled view on drawView will pass to the view
   * under it!
   * - Touching on the Android icon will
   * trigger the TextView("http://arteluzevida.blogspot.com/")
   * to open the web.
   */
  drawerView.setOnTouchListener(new OnTouchListener() {
   
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    // TODO Auto-generated method stub
    return true;
   }
  });
 }
 
 DrawerListener myDrawerListener = new DrawerListener(){

  @Override
  public void onDrawerClosed(View drawerView) {
   textPrompt.setText("onDrawerClosed");
  }

  @Override
  public void onDrawerOpened(View drawerView) {
   textPrompt.setText("onDrawerOpened");
  }

  @Override
  public void onDrawerSlide(View drawerView, float slideOffset) {
   textPrompt.setText("onDrawerSlide: " + String.format("%.2f", slideOffset));
  }

  @Override
  public void onDrawerStateChanged(int newState) {
   String state;
   switch(newState){
   case DrawerLayout.STATE_IDLE:
    state = "STATE_IDLE";
    break;
   case DrawerLayout.STATE_DRAGGING:
    state = "STATE_DRAGGING";
    break;
   case DrawerLayout.STATE_SETTLING:
    state = "STATE_SETTLING";
    break;
   default:
    state = "unknown!";
   }
    
   textPrompt2.setText(state);
  }};

}

Download the files.

Next:
- DrawerLayout with ListView