[Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成

ViewPager2で複数のFragment画面をスワイプで次々とスライドショーのように表示できますが、Tabを画面上につけて、タブをタップすることで目的のページに跳ぶようにすることもできます

Android Studio
2021.2.1

TabLayout

こちらで使ったViewPager2にTabを付けてみたいと思います
　

[Android] ViewPager2 を使ってギャラリーっぽくしてみる

フォトやGalleryのアプリなどは写真をスワイプで次々と遷移をさせていますが、これはViewPager2を利用すると可能です

　
以下のようにスワイプでページが変わりTabでどのページかわかるようにできます

また、この例ではインジケータがTabの下にあり分かりにくいためTabの背景とテキスト色をかえたり、インジケータをカスタマイズしてみます

1x1.trans - [Android] ViewPager2 でTabLayoutでタブ付きスワイプビューの作成

目次
1. TabLayout を使用してタブを追加
2. サンプルコード
3. Tabの背景とテキスト色を変更
4. Indicatorの変更

TabLayout を使用してタブを追加

＜TabLayout＞要素を＜ViewPager2＞要素の上に追加

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<com.google.android.material.tabs.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

<androidx.viewpager2.widget.ViewPager2

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

</LinearLayout>

TabLayoutMediator を作成し TabLayout を ViewPager2 にリンクしアタッチ

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_screen_slide);
    ...
    TabLayout tabLayout = findViewById(R.id.tab_layout);
    new TabLayoutMediator(tabLayout, viewPager,
            (tab, position) -> tab.setText("TAB " + (position + 1))
    ).attach();
}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_screen_slide);

...

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

new TabLayoutMediator(tabLayout, viewPager,

(tab, position) -> tab.setText("TAB " + (position + 1))

).attach();

}

viewpager2のライブラリをbuild.gradleに追加しておきます

...
dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.1.0-beta01'
    ...
}

...

dependencies {

implementation 'androidx.viewpager2:viewpager2:1.1.0-beta01'

...

}

サンプルコード

まとめてみると
MainActivity.java

//package your.package.name;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import java.util.ArrayList;

public class MainActivity extends FragmentActivity {

    // The pager widget, which handles animation and allows swiping horizontally
    // to access previous and next wizard steps.
    private ViewPager2 viewPager;

    private static final String[] flowers = {
        "oze_trail2", "animal_trail2", "rainbow_waterfall2"
    };

    private final ArrayList<Integer> flowerList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_screen_slide);

        // Instantiate a ViewPager2 and a PagerAdapter.
        viewPager = findViewById(R.id.pager);

        // for-each member名をR.drawable.名前としてintに変換してarrayに登録
        for (String member: flowers){
            int imageId = getResources().getIdentifier(
                    member,"drawable", getPackageName());
            flowerList.add(imageId);
        }

        // The pager adapter, which provides the pages to the view pager widget.
        FragmentStateAdapter pagerAdapter = new ScreenSlidePagerAdapter(this, flowerList);

        viewPager.setAdapter(pagerAdapter);

        TabLayout tabLayout = findViewById(R.id.tab_layout);
        new TabLayoutMediator(tabLayout, viewPager,
                (tab, position) -> tab.setText("TAB " + (position + 1))
        ).attach();
    }

    @Override
    public void onBackPressed() {
        if (viewPager.getCurrentItem() == 0) {
            // If the user is currently looking at the first step,
            // allow the system to handle the Back button.
            // This calls finish() on this activity and pops the back stack.
            super.onBackPressed();
        } else {
            // Otherwise, select the previous step.
            viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);
        }
    }

    // A simple pager adapter that represents 5 ScreenSlidePageFragment
    // objects, in sequence.
    private static class ScreenSlidePagerAdapter extends FragmentStateAdapter {

        ArrayList<Integer> picture;

        public ScreenSlidePagerAdapter(
                FragmentActivity fa, ArrayList<Integer> flowerList) {
            super(fa);
            picture = flowerList;
        }

        @NonNull
        @Override
        public Fragment createFragment(int position) {

            Fragment fagment =new ScreenSlidePageFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("Page", position);
            bundle.putIntegerArrayList("Photo", picture);
            fagment.setArguments(bundle);

            return fagment;
        }

        @Override
        public int getItemCount() {
            return picture.size();
        }

    }
}

//package your.package.name;

import androidx.annotation.NonNull;

import androidx.fragment.app.Fragment;

import androidx.fragment.app.FragmentActivity;

import androidx.viewpager2.adapter.FragmentStateAdapter;

import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;

import com.google.android.material.tabs.TabLayoutMediator;

import java.util.ArrayList;

public class MainActivity extends FragmentActivity {

// The pager widget, which handles animation and allows swiping horizontally

// to access previous and next wizard steps.

private ViewPager2 viewPager;

private static final String[] flowers = {

"oze_trail2", "animal_trail2", "rainbow_waterfall2"

};

private final ArrayList<Integer> flowerList = new ArrayList<>();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_screen_slide);

// Instantiate a ViewPager2 and a PagerAdapter.

viewPager = findViewById(R.id.pager);

// for-each member名をR.drawable.名前としてintに変換してarrayに登録

for (String member: flowers){

int imageId = getResources().getIdentifier(

member,"drawable", getPackageName());

flowerList.add(imageId);

}

// The pager adapter, which provides the pages to the view pager widget.

FragmentStateAdapter pagerAdapter = new ScreenSlidePagerAdapter(this, flowerList);

viewPager.setAdapter(pagerAdapter);

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

new TabLayoutMediator(tabLayout, viewPager,

(tab, position) -> tab.setText("TAB " + (position + 1))

).attach();

}

@Override

public void onBackPressed() {

if (viewPager.getCurrentItem() == 0) {

// If the user is currently looking at the first step,

// allow the system to handle the Back button.

// This calls finish() on this activity and pops the back stack.

super.onBackPressed();

} else {

// Otherwise, select the previous step.

viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);

}

// A simple pager adapter that represents 5 ScreenSlidePageFragment

// objects, in sequence.

private static class ScreenSlidePagerAdapter extends FragmentStateAdapter {

ArrayList<Integer> picture;

public ScreenSlidePagerAdapter(

FragmentActivity fa, ArrayList<Integer> flowerList) {

super(fa);

picture = flowerList;

}

@NonNull

@Override

public Fragment createFragment(int position) {

Fragment fagment =new ScreenSlidePageFragment();

Bundle bundle = new Bundle();

bundle.putInt("Page", position);

bundle.putIntegerArrayList("Photo", picture);

fagment.setArguments(bundle);

return fagment;

}

@Override

public int getItemCount() {

return picture.size();

}

ScreenSlidePageFragment.java

//package your.package.name;

import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import java.util.ArrayList;

public class ScreenSlidePageFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container,
                             Bundle savedInstanceState) {

        return  inflater.inflate(
                R.layout.fragment_screen_slide_page, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        
        Bundle args = getArguments();
        assert args != null;
        int position = args.getInt("Page");
        ArrayList<Integer> image = args.getIntegerArrayList("Photo");
        
        ImageView imageView = view.findViewById(R.id.image_view);
        imageView.setImageBitmap(
                BitmapFactory.decodeResource(this.getResources(), image.get(position)));
    }
}

//package your.package.name;

import android.graphics.BitmapFactory;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import androidx.annotation.NonNull;

import androidx.fragment.app.Fragment;

import java.util.ArrayList;

public class ScreenSlidePageFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,

ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(

R.layout.fragment_screen_slide_page, container, false);

}

@Override

public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {

super.onViewCreated(view, savedInstanceState);

Bundle args = getArguments();

assert args != null;

int position = args.getInt("Page");

ArrayList<Integer> image = args.getIntegerArrayList("Photo");

ImageView imageView = view.findViewById(R.id.image_view);

imageView.setImageBitmap(

BitmapFactory.decodeResource(this.getResources(), image.get(position)));

}

activity_Screen_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

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

<LinearLayout

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

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

<com.google.android.material.tabs.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

<androidx.viewpager2.widget.ViewPager2

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

</LinearLayout>

fragment_screen_slide_page.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:background="#888"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:contentDescription="@string/description"/>

</LinearLayout>

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

<LinearLayout

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:orientation="vertical"

android:background="#888"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

android:contentDescription="@string/description"/>

</LinearLayout>

strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">folwer</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="description">folwer</string>

</resources>

build.gradle

...
dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.1.0-beta01'
    ...
}

...

dependencies {

implementation 'androidx.viewpager2:viewpager2:1.1.0-beta01'

...

}

Tabの背景とテキスト色を変更

Tabを付けたのですが、どこを選択しているのが分かりにくいため、
選択中のタブの背景とテキスト色を変えて分かりやすくしてみましょう

Tabが選択しているケースでの背景を設定するtab_selector.xmlを作成
選択しているときのテキスト色を白にその他は黒に設定

activity_Screen_slide.xml

...
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_selector"
    app:tabTextColor="@color/black"
    app:tabSelectedTextColor="@color/white"/>
...

...

<com.google.android.material.tabs.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabBackground="@drawable/tab_selector"

app:tabTextColor="@color/black"

app:tabSelectedTextColor="@color/white"/>

...

\res\drawable 以下に配置
tab_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/purple_200"
        android:textColor="@color/white"
        android:state_selected="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

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

<item android:drawable="@color/purple_200"

android:textColor="@color/white"

android:state_selected="true"/>

</selector>

デフォルトではTabの下線が入るだけなので見にくかったのですが、背景色が変わるとそれなりに目立つようにできました

Indicatorの変更

前のselectorを使う方法は、shapeと組み合わせてカスタマイズを発展させられますが
もっと簡単なものでよければ Indicatorを変更することでも可能です

例えばTabの背景色が濃いですが
app:tabIndicatorGravity=”stretch”
app:tabSelectedTextColor=”@color/white
を追加すると選択しているTabが分かりやすくなります

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorGravity="stretch"
    app:tabSelectedTextColor="@color/white"/>

<com.google.android.material.tabs.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabIndicatorGravity="stretch"

app:tabSelectedTextColor="@color/white"/>

また、Indicatorの色と選択されたテキスト色を変えるとそれなりになります
app:tabIndicatorColor=”#ff0000″
app:tabSelectedTextColor=”#ff0000″

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="#ff0000"
    app:tabSelectedTextColor="#ff0000"/>

<com.google.android.material.tabs.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabIndicatorColor="#ff0000"

app:tabSelectedTextColor="#ff0000"/>

References:
ViewPager2 を使用してタブ付きスワイプビューを作成する
 ViewPager2 を使用してフラグメント間をスライドする
 ViewPager2