Align DrawerLayout width with Material design spec.

Bug: 26027590
Change-Id: If5e80c99f3be5ebd89c0b5d2e915db4c0da14adc
This commit is contained in:
Kirill Grouchnikov
2015-12-04 15:26:49 -05:00
parent 559507c607
commit 903605cba5
2 changed files with 48 additions and 4 deletions

View File

@@ -17,6 +17,8 @@
<!--
A DrawerLayout is indended to be used as the top-level content view
using match_parent for both width and height to consume the full space available.
See https://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs
for the full spec of a drawer in Material design.
-->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
@@ -61,15 +63,17 @@
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the starting side, which is
left for left-to-right locales. The drawer is given a fixed
width in dp and extends the full height of the container. A
left for left-to-right locales. The drawer is given arbitrary
initial width and extends the full height of the container. A
solid background is used for contrast with the content view.
android:fitsSystemWindows="true" tells the system to have
DrawerLayout span the full height of the screen, including the
system status bar on Lollipop+ versions of the plaform. -->
system status bar on Lollipop+ versions of the plaform. The actual
width of drawer will be determined at runtime based on the screen
size according to the Material spec. -->
<ListView
android:id="@+id/start_drawer"
android:layout_width="300dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ff333333"

View File

@@ -17,6 +17,8 @@
package com.example.android.supportv7.widget;
import android.content.res.Configuration;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
@@ -25,6 +27,8 @@ import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
@@ -142,6 +146,42 @@ public class DrawerLayoutActivity extends AppCompatActivity {
final int metalBlueColor = getResources().getColor(R.color.drawer_sample_metal_blue);
mDrawerLayout.setStatusBarBackgroundColor(metalBlueColor);
mToolbar.setBackgroundColor(metalBlueColor);
// Register a pre-draw listener to get the initial width of the DrawerLayout so
// that we can determine the width of the drawer based on the Material spec at
// https://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs
mDrawerLayout.getViewTreeObserver().addOnPreDrawListener(
new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
// What is the width of the entire DrawerLayout?
final int drawerLayoutWidth = mDrawerLayout.getWidth();
// What is the action bar size?
final Resources.Theme theme = mDrawerLayout.getContext().getTheme();
final TypedArray a = theme.obtainStyledAttributes(
new int[] { android.support.v7.appcompat.R.attr.actionBarSize });
final int actionBarSize = a.getDimensionPixelSize(0, 0);
if (a != null) {
a.recycle();
}
// Compute the width of the drawer and set it on the layout params.
final int idealDrawerWidth = 5 * actionBarSize;
final int maxDrawerWidth = Math.max(0, drawerLayoutWidth - actionBarSize);
final int drawerWidth = Math.min(idealDrawerWidth, maxDrawerWidth);
final DrawerLayout.LayoutParams drawerLp =
(DrawerLayout.LayoutParams) mDrawer.getLayoutParams();
drawerLp.width = drawerWidth;
mDrawer.setLayoutParams(drawerLp);
// Remove ourselves as the pre-draw listener since this is a one-time
// configuration.
mDrawerLayout.getViewTreeObserver().removeOnPreDrawListener(this);
return true;
}
});
}
@Override