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

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.

page.gif

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!

Recommended Posts

[Android] I want to create a ViewPager that can be used for tutorials
I made a question that can be used for a technical interview
I want to create a generic annotation for a type
I made a THETA API client that can be used for plug-in development
Create a page control that can be used with RecyclerView
I want to create a chat screen for the Swift chat app!
Object-oriented design that can be used when you want to return a response in form format
I made a library for displaying tutorials on Android.
I used Docker for my portfolio as a beginner, so I hope that even 1mm will be helpful to someone.
Create a jar file that can be executed in Gradle
Firebase-Realtime Database on Android that can be used with copy
I want to create a form to select the [Rails] category
Find a Switch statement that can be converted to a Switch expression
I want to create a Parquet file even in Ruby
I want to recursively search for files under a specific directory
Mechanism for converting to a language that the browser can recognize
I tried to create a simple map app in Android Studio
I want to use swipeback on a screen that uses XLPagerTabStrip
The story of Collectors.groupingBy that I want to keep for posterity
I can no longer connect to a VM with a Docker container that can be connected via SSH
I want to develop a web application!
I want to write a nice build.gradle
Glassfish tuning list that I want to keep for the time being
I want to write a unit test!
Library summary that seems to be often used in recent Android development (2019/11)
How to create a Maven repository for 2020
I want to create a dark web SNS with Jakarta EE 8 with Java 11
How to override in a model unit test so that Faker can be used to generate random values
[Rails] "pry-rails" that can be used when saving with the create method
A memo that enabled VS Code + JUnit 5 to be used on Windows 10
A note that I gave up trying to make a custom annotation for Lombok
Technology excerpt that can be used for creating EC sites in Java training
I want to be able to read a file using refile with administrate [rails6]
[Azure] I tried to create a Java application for free-Web App creation- [Beginner]
[Android] I want to make QA easier ... That's right! Let's make a debug menu!
How to create a database for H2 Database anywhere
[Android] Inherit ImageView to create a new class
[Ruby] I want to do a method jump!
How to create pagination for a "kaminari" array
How to create a class that inherits class information
I want to simply write a repeating string
I tried to create a LINE clone app
I want to design a structured exception handling
Organize methods that can be used with StringUtils
I want to be eventually even in kotlin
[Ruby] Methods that can be used with strings
A collection of RSpecs that I used frequently
[Ruby] I want to make a program that displays today's day of the week!
[MyBatis] I want to map a query query to a table that has a one-to-many relationship to a nested bean
I tried using Wercker to create and publish a Docker image that launches GlassFish 5.
I want to use PowerMock in a class that combines parameterized tests and ordinary tests
7 things I want you to keep so that it doesn't become a fucking code
[Azure] I tried to create a Java application for free ~ Connect with FTP ~ [Beginner]
I want to call a method of another class
[Rails] How to create a signed URL for CloudFront
I want to use NetBeans on Mac → I can use it!
Write a class that can be ordered in Java
I made a method to ask for Premium Friday
I want to use a little icon in Rails
[Spring Boot] How to create a project (for beginners)
I tried to create a Clova skill in Java