การใช้ TabLayout ร่วมกับ Collapsing Toolbar

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: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="250dp"
        android:minHeight="64dp"
        android:fitsSystemWindows="true"
        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|exitUntilCollapsed"
            app:titleEnabled="false"
            app:contentScrim="#fab450">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:background="@drawable/flower"
                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:popupTheme="@style/AppTheme.PopupOverlay"
                app:layout_collapseMode="parallax">
            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:tabTextColor="#fff"
                app:tabSelectedTextColor="#0ff"
                app:tabIndicatorColor="#0ff"
                app:layout_collapseMode="pin">

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

        </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:srcCompat="@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: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="250dp"

android:minHeight="64dp"

android:fitsSystemWindows="true"

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

app:titleEnabled="false"

app:contentScrim="#fab450">

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

android:background="@drawable/flower"

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:popupTheme="@style/AppTheme.PopupOverlay"

app:layout_collapseMode="parallax">

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

<android.support.design.widget.TabLayout

android:id="@+id/tabLayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

app:tabTextColor="#fff"

app:tabSelectedTextColor="#0ff"

app:tabIndicatorColor="#0ff"

app:layout_collapseMode="pin">

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

</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:srcCompat="@android:drawable/ic_dialog_email"/>

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

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    android:id="@+id/nested_scroll_view"
    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:padding="16dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

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

        <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

android:id="@+id/nested_scroll_view"

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:padding="16dp"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".MainActivity"

tools:showIn="@layout/activity_main">

<LinearLayout android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<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;
import android.support.design.widget.TabLayout;

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("Title");
        setSupportActionBar(toolbar);

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

        TabLayout tabs = (TabLayout)findViewById(R.id.tabLayout);
        tabs.addTab(tabs.newTab().setText("Tab 1"));
        tabs.addTab(tabs.newTab().setText("Tab 2"));
        tabs.addTab(tabs.newTab().setText("Tab 3"));
    }

    @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;

import android.support.design.widget.TabLayout;

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

setSupportActionBar(toolbar);

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

}

});

TabLayout tabs = (TabLayout)findViewById(R.id.tabLayout);

tabs.addTab(tabs.newTab().setText("Tab 1"));

tabs.addTab(tabs.newTab().setText("Tab 2"));

tabs.addTab(tabs.newTab().setText("Tab 3"));

}

@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

การใช้ TabLayout ร่วมกับ Collapsing Toolbar