การทำ Collapsing Toolbar และ Parallax Effect

values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="textViewStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_marginBottom">16dp</item>
        <item name="android:background">@drawable/border</item>
        <item name="android:lineSpacingExtra">3dp</item>
        <item name="android:padding">10dp</item>
        <item name="android:textSize">20dp</item>
    </style>

</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

<item name="windowActionBar">false</item>

</style>

<item name="android:layout_width">match_parent</item>

<item name="android:layout_height">match_parent</item>

<item name="android:background">@drawable/border</item>

</style>

</resources>

drawable/border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
      <stroke android:color="#bbb" android:width="1dp" />
      <solid android:color="#def" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

</shape>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/coorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:fitsSystemWindows="true"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/AppTheme.AppBarOverlay">
        <!-- ต้องกำหนด fitSystemWindows เพื่อให้ appbar คุลมพื้นที่ statusbar ด้วย -->

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            app:statusBarScrim="#000"
            app:title="Pro Android"
            app:titleEnabled="true">
            <!--  app:statusBarScrim="@color/colorAccent" -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/header"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay">
                <!-- android:minHeight="?attr/actionBarSize"   -->
                <!-- android:gravity="top" app:titleMarginTop="13dp"  -->
                <!--    app:layout_collapseMode="pin"  -->
                <!--  ถ้าใช้ android:titleMarginTop จะไม่ได้ผล

                -->
            </android.support.v7.widget.Toolbar>

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

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:fabSize="normal"
        app:srcCompat="@drawable/ic_add" />

    <!-- app:elevation="6dp"  app:layout_anchorGravity="bottom|right|end" app:layout_anchor="@+id/appbar_layout"-->
    <!-- @android:drawable/ic_dialog_email -->

</android.support.design.widget.CoordinatorLayout>

<?xml version="1.0" encoding="utf-8"?>

<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:id="@+id/coorLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout

android:id="@+id/appbar_layout"

android:layout_width="match_parent"

android:layout_height="150dp"

android:fitsSystemWindows="true"

android:minHeight="?attr/actionBarSize"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.design.widget.CollapsingToolbarLayout

android:id="@+id/collapsing_toolbar"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

app:statusBarScrim="#000"

app:title="Pro Android"

app:titleEnabled="true">

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/header"

android:fitsSystemWindows="true"

android:scaleType="centerCrop"

app:layout_collapseMode="parallax" />

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="@android:color/transparent"

app:layout_collapseMode="pin"

app:popupTheme="@style/AppTheme.PopupOverlay">

<!-- ถ้าใช้ android:titleMarginTop จะไม่ได้ผล

-->

</android.support.v7.widget.Toolbar>

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

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

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

app:fabSize="normal"

app:srcCompat="@drawable/ic_add" />

</android.support.design.widget.CoordinatorLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!--
        <android.support.v7.widget.RecyclerView
              android:id="@+id/recyclerView"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
        -->

        <TextView
            style="@style/textViewStyle"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet, elit eget ultrices porta, nisl turpis luctus urna, in bibendum libero orci vitae erat. Ut bibendum neque non hendrerit tincidunt. Nunc mattis erat eget nisl ultrices, at consequat leo vestibulum." />

        <TextView
            style="@style/textViewStyle"
            android:text="Integer nec metus lobortis, sodales lorem non, dictum turpis. Cras gravida faucibus erat eu sodales. Sed auctor venenatis leo, in accumsan mi. Donec molestie eu nisl sed sollicitudin. Nulla facilisi." />

        <TextView
            style="@style/textViewStyle"
            android:text="Nam tristique felis eget augue aliquet, vitae hendrerit dolor sollicitudin. Fusce consectetur, risus id bibendum fringilla, lacus est congue enim, non venenatis erat lorem a erat. Vestibulum nibh dui, sollicitudin in dolor finibus, fringilla fringilla arcu." />

        <TextView
            style="@style/textViewStyle"
            android:text="Proin at dui finibus, fringilla lacus eu, facilisis magna. Nullam sit amet condimentum tellus. Sed semper aliquet volutpat. Suspendisse a faucibus erat." />

        <TextView
            style="@style/textViewStyle"
            android:text="Praesent porttitor et sapien sed laoreet. Phasellus id tortor sit amet risus lobortis varius. Ut finibus accumsan odio ut rutrum.  Sed vulputate scelerisque laoreet. Aenean mauris lectus, porta semper pharetra et, hendrerit nec neque." />
    </LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="16dp"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<!--

<android.support.v7.widget.RecyclerView

android:id="@+id/recyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

-->

<TextView

style="@style/textViewStyle"

android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet, elit eget ultrices porta, nisl turpis luctus urna, in bibendum libero orci vitae erat. Ut bibendum neque non hendrerit tincidunt. Nunc mattis erat eget nisl ultrices, at consequat leo vestibulum." />

<TextView

style="@style/textViewStyle"

android:text="Integer nec metus lobortis, sodales lorem non, dictum turpis. Cras gravida faucibus erat eu sodales. Sed auctor venenatis leo, in accumsan mi. Donec molestie eu nisl sed sollicitudin. Nulla facilisi." />

<TextView

style="@style/textViewStyle"

android:text="Nam tristique felis eget augue aliquet, vitae hendrerit dolor sollicitudin. Fusce consectetur, risus id bibendum fringilla, lacus est congue enim, non venenatis erat lorem a erat. Vestibulum nibh dui, sollicitudin in dolor finibus, fringilla fringilla arcu." />

<TextView

style="@style/textViewStyle"

android:text="Proin at dui finibus, fringilla lacus eu, facilisis magna. Nullam sit amet condimentum tellus. Sed semper aliquet volutpat. Suspendisse a faucibus erat." />

<TextView

style="@style/textViewStyle"

android:text="Praesent porttitor et sapien sed laoreet. Phasellus id tortor sit amet risus lobortis varius. Ut finibus accumsan odio ut rutrum. Sed vulputate scelerisque laoreet. Aenean mauris lectus, porta semper pharetra et, hendrerit nec neque." />

</LinearLayout>

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

MainActivity.java

package com.phaisarn.myapplication;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

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

        getSupportActionBar().setDisplayShowTitleEnabled(false);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        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();
            }
        });

            /*
            List<CustomItem> list = new ArrayList<>();
            for(int i = 1; i <= 10; i++) {
                  list.add(new CustomItem("Item " + i));
            }
            RecyclerView rcv = (RecyclerView)findViewById(R.id.recyclerView);
            CustomAdapter adapter = new CustomAdapter(this, list);
            rcv.setAdapter(adapter);
            rcv.setLayoutManager(new LinearLayoutManager(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_main, 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);
    }
}

package com.phaisarn.myapplication;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.view.Menu;

import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

toolbar.setTitle("Test");

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayShowTitleEnabled(false);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

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();

}

});

List<CustomItem> list = new ArrayList<>();

for(int i = 1; i <= 10; i++) {

list.add(new CustomItem("Item " + i));

}

RecyclerView rcv = (RecyclerView)findViewById(R.id.recyclerView);

CustomAdapter adapter = new CustomAdapter(this, list);

rcv.setAdapter(adapter);

rcv.setLayoutManager(new LinearLayoutManager(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_main, 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);

}

ภาพที่ใช้

Phaisarn Sutheebanjard

blog.phaisarn.com

การทำ Collapsing Toolbar และ Parallax Effect