Android StudioにあったNavigation Drawer ActivityとScrolling Activityを合わせてみた

横からニョキッと出るNavigation Drawer Activityとスクロールに連動してツールバーが伸び縮みするScrolling Activityの2つを合わせて一つにしてみた

まず素材やxmlの統合からベースはScrollingActivityとして

drawable全部,nav_header_main.xml,activity_main_drawer.xml,

activity_scrolling.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
    <!-- ここから ScrollingActivityの中身 -->
    <android.support.design.widget.CoordinatorLayout
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="jp.co.materialdesign.ScrollingActivity">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay"/>

            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <include layout="@layout/content_scrolling"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email"
            app:layout_anchor="@id/app_bar"
            app:layout_anchorGravity="bottom|end"/>

    </android.support.design.widget.CoordinatorLayout>
    <!-- ここまで ScrollingActivityの中身 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>

dimens.xml

<resources>
    <dimen name="app_bar_height">180dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="text_margin">16dp</dimen>
    <!-- 追加↓ -->
    <dimen name="nav_header_vertical_spacing">16dp</dimen>
    <dimen name="nav_header_height">160dp</dimen>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
</resources>

strings.xml

<resources>
    <string name="app_name">MaterialDesign</string>
    <string name="large_text">
        "Material is the metaphor.\n\n"

        "A material metaphor is the unifying theory of a rationalized space and a system of motion."
        "The material is grounded in tactile reality, inspired by the study of paper and ink, yet "
        "technologically advanced and open to imagination and magic.\n"
        "Surfaces and edges of the material provide visual cues that are grounded in reality. The "
        "use of familiar tactile attributes helps users quickly understand affordances. Yet the "
        "flexibility of the material creates new affordances that supercede those in the physical "
        "world, without breaking the rules of physics.\n"
        "The fundamentals of light, surface, and movement are key to conveying how objects move, "
        "interact, and exist in space and in relation to each other. Realistic lighting shows "
        "seams, divides space, and indicates moving parts.\n\n"

        "Bold, graphic, intentional.\n\n"

        "The foundational elements of print based design typography, grids, space, scale, color, "
        "and use of imagery guide visual treatments. These elements do far more than please the "
        "eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge "
        "imagery, large scale typography, and intentional white space create a bold and graphic "
        "interface that immerse the user in the experience.\n"
        "An emphasis on user actions makes core functionality immediately apparent and provides "
        "waypoints for the user.\n\n"

        "Motion provides meaning.\n\n"

        "Motion respects and reinforces the user as the prime mover. Primary user actions are "
        "inflection points that initiate motion, transforming the whole design.\n"
        "All action takes place in a single environment. Objects are presented to the user without "
        "breaking the continuity of experience even as they transform and reorganize.\n"
        "Motion is meaningful and appropriate, serving to focus attention and maintain continuity. "
        "Feedback is subtle yet clear. Transitions are efficient yet coherent.\n\n"

        "3D world.\n\n"

        "The material environment is a 3D space, which means all objects have x, y, and z "
        "dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the "
        "positive z-axis extending towards the viewer. Every sheet of material occupies a single "
        "position along the z-axis and has a standard 1dp thickness.\n"
        "On the web, the z-axis is used for layering and not for perspective. The 3D world is "
        "emulated by manipulating the y-axis.\n\n"

        "Light and shadow.\n\n"

        "Within the material environment, virtual lights illuminate the scene. Key lights create "
        "directional shadows, while ambient light creates soft shadows from all angles.\n"
        "Shadows in the material environment are cast by these two light sources. In Android "
        "development, shadows occur when light sources are blocked by sheets of material at "
        "various positions along the z-axis. On the web, shadows are depicted by manipulating the "
        "y-axis only. The following example shows the card with a height of 6dp.\n\n"

        "Resting elevation.\n\n"

        "All material objects, regardless of size, have a resting elevation, or default elevation "
        "that does not change. If an object changes elevation, it should return to its resting "
        "elevation as soon as possible.\n\n"

        "Component elevations.\n\n"

        "The resting elevation for a component type is consistent across apps (e.g., FAB elevation "
        "does not vary from 6dp in one app to 16dp in another app).\n"
        "Components may have different resting elevations across platforms, depending on the depth "
        "of the environment (e.g., TV has a greater depth than mobile or desktop).\n\n"

        "Responsive elevation and dynamic elevation offsets.\n\n"

        "Some component types have responsive elevation, meaning they change elevation in response "
        "to user input (e.g., normal, focused, and pressed) or system events. These elevation "
        "changes are consistently implemented using dynamic elevation offsets.\n"
        "Dynamic elevation offsets are the goal elevation that a component moves towards, relative "
        "to the component’s resting state. They ensure that elevation changes are consistent "
        "across actions and component types. For example, all components that lift on press have "
        "the same elevation change relative to their resting elevation.\n"
        "Once the input event is completed or cancelled, the component will return to its resting "
        "elevation.\n\n"

        "Avoiding elevation interference.\n\n"

        "Components with responsive elevations may encounter other components as they move between "
        "their resting elevations and dynamic elevation offsets. Because material cannot pass "
        "through other material, components avoid interfering with one another any number of ways, "
        "whether on a per component basis or using the entire app layout.\n"
        "On a component level, components can move or be removed before they cause interference. "
        "For example, a floating action button (FAB) can disappear or move off screen before a "
        "user picks up a card, or it can move if a snackbar appears.\n"
        "On the layout level, design your app layout to minimize opportunities for interference. "
        "For example, position the FAB to one side of stream of a cards so the FAB won’t interfere "
        "when a user tries to pick up one of cards.\n\n"
    </string>
    <string name="action_settings">Settings</string>
    <!-- 追加 -->
    <string name="navigation_drawer_open">Open navigation drawer</string>
    <string name="navigation_drawer_close">Close navigation drawer</string>

</resources>

ScrollingActivity.java

package jp.co.materialdesign;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
// NavigationView.OnNavigationItemSelectedListener の実装
public class ScrollingActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_scrolling);
		Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
		setSupportActionBar(toolbar);

		FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
		if(fab!=null)
		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);
		if(drawer!=null){
		ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
				this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);

		drawer.addDrawerListener(toggle);
		toggle.syncState();}

		NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
		if(navigationView!=null)
		navigationView.setNavigationItemSelectedListener(this);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.menu_scrolling, 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();

		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);
		if(drawer!=null)
		drawer.closeDrawer(GravityCompat.START);
		return true;
	}

	@Override
	public void onBackPressed() {
		DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
		if (drawer != null) {
			if (drawer.isDrawerOpen(GravityCompat.START)) {
				drawer.closeDrawer(GravityCompat.START);
			} else {
				super.onBackPressed();
			}
		}
	}
}

とりあえず合わせてみた。満足

スポンサーリンク