Introduction

When I wanted to display the tutorial at the initial startup of the app, I searched for something that could be intuitively operated and understood, and came across something called ** "View Pager" **.

It seems that you can easily create something like that by inserting the library, but it may be inconvenient if you customize it, so I tried to build it by myself even though I was an amateur.

Preparation

** "View Pager" ** will be used from ** API 22 **, so make CompileSdkVersion ** 22 ** or higher. We also want to display ** Indicator ** this time, so we will introduce design support library.

`app.build`


apply plugin: 'com.android.application'

android {
  compileSdkVersion 26
  buildToolsVersion "26.0.1"
  defaultConfig {
    ...
  }
  buildTypes {
    release {
      ...
    }
    debug {
      ...
    }
  }
}

dependencies {
  compile fileTree(include: ['*.jar'], dir: 'libs')
  compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
  compile 'com.android.support:support-v4:26.0.0-alpha1'
  compile 'com.android.support:design:26.0.0-alpha1'
}

Make a foundation

** "View Pager" ** has multiple * Fragments * on the base, and it moves to display them sequentially by user operation.

So, this time, if you place ** ViewPager ** and ** Indicator ** on one base * Activity * and bite * Adapter * that switches the * Fragment * to be displayed according to the current * position *. I think it's good.

Now, let's actually create the base * Activity *.

`MainActivity.java`


public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {
  private final static int PAGE_NUM = 3;
  private ViewPager viewPager;
  private TextView textLeft;
  private TextView textRight;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    viewPager = (ViewPager) findViewById(R.id.pager);
    PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());  //Custom Adapter
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(this);  //Added Listener by page transition

    TabLayout tabLayout = (TabLayout) findViewById(R.id.indicator);
    tabLayout.setupWithViewPager(viewPager, true);

    textLeft = (TextView) findViewById(R.id.text_left);
    textLeft.setOnClickListener(this);  //Footer text(left)Add Click Listener
    textRight = (TextView) findViewById(R.id.text_right);
    textRight.setOnClickListener(this);  //Footer text(right)Add Click Listener
  }

  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  }

  @Override
  public void onPageSelected(int position) {  //Switching footer text
    if (position == 0) {
      textLeft.setText("Skip");
    } else {
      textLeft.setText("Back");
    }

    if (position == (PAGE_NUM - 1)) {
      textRight.setText("Go!");
    } else {
      textRight.setText("Next");
    }
  }

  @Override
  public void onPageScrollStateChanged(int state) {
  }

  @Override
  public void onClick(View view) {  //Behavior when clicking footer text
    switch (view.getId()) {
      case R.id.text_left:
        if (viewPager.getCurrentItem() != 0) {  //If it is not the first page, go back one
          viewPager.setCurrentItem(viewPager.getCurrentItem() - 1, true);
        }
        break;
      case R.id.text_right:
        if (viewPager.getCurrentItem() != PAGE_NUM) {  //If it is not the last page, proceed one sheet
          viewPager.setCurrentItem(viewPager.getCurrentItem() + 1, true);
        }
        break;
    }
  }

  private class PagerAdapter extends FragmentPagerAdapter {  //Custom Adapter
    PagerAdapter(FragmentManager manager) {
      super(manager);
    }

    @Override
    public Fragment getItem(int position) {
      switch (position) {  //Switch the displayed Fragment according to the current Position
        case 0:
          return new FirstFragment();
        case 1:
          return new SecondFragment();
        case 2:
          return new ThirdFragment();
      }
      return null;
    }

    @Override
    public int getCount() {
      return PAGE_NUM;
    }
  }
}

Next, create a View.

`activity_main.xml`


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/footer"/>

  <RelativeLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    android:background="#3F51B5">

    <TextView
      android:id="@+id/text_left"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentStart="true"
      android:layout_centerVertical="true"
      android:layout_marginStart="30dp"
      android:padding="15dp"
      android:text="Skip"
      android:textColor="#FFFFFF"
      android:textSize="18sp"/>

    <android.support.design.widget.TabLayout
      android:id="@+id/indicator"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      app:tabBackground="@drawable/indicator_selector"
      app:tabGravity="center"
      app:tabIndicatorHeight="0dp"/>

    <TextView
      android:id="@+id/text_right"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentEnd="true"
      android:layout_centerVertical="true"
      android:layout_marginEnd="30dp"
      android:padding="15dp"
      android:text="Next"
      android:textColor="#FFFFFF"
      android:textSize="18sp"/>

  </RelativeLayout>

</RelativeLayout>

This time, ** TabLayout ** of design support library is used to display ** Indicator **. Also, ** Indicator ** is implemented by specifying ʻapp: tabBackground =" @ drawable / indicator_selector "`. Below is the * selector *.

`indicator_selector.xml`


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true">
    <shape
      android:innerRadius="0dp"
      android:shape="ring"
      android:thickness="4dp"
      android:useLevel="false">
      <solid android:color="#DEDCDB"/>
    </shape>
  </item>
  <item>
    <shape
      android:innerRadius="0dp"
      android:shape="ring"
      android:thickness="2dp"
      android:useLevel="false">
      <solid android:color="#A59E99"/>
    </shape>
  </item>
</selector>

Make a page to display

All you have to do is create your favorite page, ** Fragment **! So I will omit it here ...

At the end

This time I made it by myself without introducing an additional library, but the world is convenient, and if you look for it, there are many things like that (laugh) If you still can not find the one you like, please refer to it I would appreciate it if you could.

Next time I want to finish it with a richer feeling ⊂ ((・ ⊥ ・)) ⊃ ・ Parallax effect ·animation ・ Input / output Where you want to challenge this area!

[Android] I want to create a ViewPager that can be used for tutorials

Introduction

Preparation

app.build