Crear una pantalla de explicación en Android

La estructura de la aplicación es la siguiente:

• OnBoardActivity + activity_onboard.xml: Actividad principal donde se muestra un viewpager y una barra de botones en la parte inferior
• Fragment + fragment_activity.xml: 4 fragment de cada una de las pantallas
• AdaptadorViewPager: Adaptador para que se muevan los fragments que se quieren agregar al viewpager

MainActivity

public class OnBoardActivity extends AppCompatActivity implements View.OnClickListener {


    private AdaptadorViewPager mSectionsPagerAdapter;
    private ViewPager mViewPager;
    private ImageView circulo1, circulo2, circulo3, circulo4;
    private ImageView[] circulos;
    private Button btnFinish, btnSkip;
    private ImageButton btnNext;
    private ArgbEvaluator evaluator = new ArgbEvaluator();


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

        final int color1 = ContextCompat.getColor(this, android.R.color.holo_red_light);
        final int color2 = ContextCompat.getColor(this, android.R.color.holo_purple);
        final int color3 = ContextCompat.getColor(this, android.R.color.holo_orange_light);
        final int color4 = ContextCompat.getColor(this, android.R.color.holo_green_light);

        final int[] colorList = new int[]{color1, color2, color3, color4};

        circulo1 = findViewById(R.id.indicator_0);
        circulo2 = findViewById(R.id.indicator_1);
        circulo3 = findViewById(R.id.indicator_2);
        circulo4 = findViewById(R.id.indicator_3);

        btnFinish = findViewById(R.id.btn_finish);
        btnNext = findViewById(R.id.btn_next);
        btnSkip = findViewById(R.id.btn_skip);

        circulos = new ImageView[]{circulo1, circulo2, circulo3, circulo4};

        ArrayList listaFg = new ArrayList();
        listaFg.add(new FragmentIntroUno());
        listaFg.add(new FragmentIntroDos());
        listaFg.add(new FragmentIntroTres());
        listaFg.add(new FragmentIntroCuatro());
        mSectionsPagerAdapter = new AdaptadorViewPager(getSupportFragmentManager(), listaFg);
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                int colorUpdate = (Integer) evaluator.evaluate(positionOffset, colorList[position], colorList[position == 3 ? position : position + 1]);
                mViewPager.setBackgroundColor(colorUpdate);
            }

            @Override
            public void onPageSelected(int position) {
                updateDots(position);
                if (position < 3) {
                    btnNext.setVisibility(View.VISIBLE);
                    btnFinish.setVisibility(View.INVISIBLE);
                } else if (position == 3) {
                    btnNext.setVisibility(View.INVISIBLE);
                    btnFinish.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        btnNext.setOnClickListener(this);
        btnSkip.setOnClickListener(this);
        btnFinish.setOnClickListener(this);
    }

    public void updateDots(int pos) {
        for (ImageView imagenCirculo : circulos) {
            imagenCirculo.setBackgroundResource(R.drawable.circulo_deseleccionado);
        }
        circulos[pos].setBackgroundResource(R.drawable.circulo_seleccionado);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_next:
                mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1, true);
                break;
            case R.id.btn_skip:
                mViewPager.setCurrentItem(mSectionsPagerAdapter.getCount());
                break;
            case R.id.btn_finish:
                finish();
                break;
        }
    }
}

Activity_onboard.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/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@color/colorPrimary"
    tools:context="com.developandsystem.onboardintro.OnBoardActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_gravity="bottom"
        android:layout_marginBottom="?attr/actionBarSize"
        android:alpha="0.12"
        android:background="@android:color/white" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        android:paddingEnd="@dimen/activity_horizontal_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingStart="@dimen/activity_horizontal_margin">

        <Button
            android:id="@+id/btn_skip"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start|center"
            android:text="Skip"
            android:textColor="@android:color/white" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="10dp"
            android:layout_gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/indicator_0"
                android:layout_width="8dp"
                android:layout_height="match_parent"
                android:background="@drawable/circulo_seleccionado"
                />
               

            <ImageView
                android:id="@+id/indicator_1"
                android:layout_width="8dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:background="@drawable/circulo_deseleccionado" />

            <ImageView
                android:id="@+id/indicator_2"
                android:layout_width="8dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:background="@drawable/circulo_deseleccionado" />


            <ImageView
                android:id="@+id/indicator_3"
                android:layout_width="8dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:background="@drawable/circulo_deseleccionado" />
            
        </LinearLayout>

        <Button
            android:id="@+id/btn_finish"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|center"
            android:text="Finish"
            android:textColor="@android:color/white"
            android:visibility="gone" />

        <ImageButton
            android:id="@+id/btn_next"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|center"
            android:padding="@dimen/activity_horizontal_margin"
            android:layout_margin="20dp"
            android:src="@drawable/arrow"
            android:tint="@android:color/white" />

    </FrameLayout>

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

AdaptadorViewPager

package com.developandsystem.onboardintro;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

public class AdaptadorViewPager extends FragmentPagerAdapter {

    private ArrayList<Fragment> fragments;

    public AdaptadorViewPager(FragmentManager fm, ArrayList<Fragment> listaFg) {
        super(fm);
        fragments = listaFg;
    }

    @Override
    public Fragment getItem(int position) {

        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
}

Fragment

package com.developandsystem.onboardintro;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FragmentIntroUno extends Fragment {

    public FragmentIntroUno() {
    }

    public static FragmentIntroUno newInstance(int sectionNumber) {
        FragmentIntroUno fragment = new FragmentIntroUno();
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_intro1, container, false);
        return rootView;
    }
}

Fragment.xml

<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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.8"
        android:src="@drawable/ico1"
        android:layout_margin="30dp"
        />

    <TextView
        android:textColor="@android:color/white"
        android:textSize="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Pantalla de explicación"
        android:layout_weight="0.2"
        android:layout_gravity="center_vertical|center_horizontal"
        android:gravity="top|center_horizontal"/>

</LinearLayout>

Hay que realizar tantos fragments como pantallas tenga

Dentro de la carpeta drawable se incluye los siguientes archivos:

Circulo_deseleccionado.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="100dp" />
    <solid android:color="@android:color/darker_gray" />
</shape>

Circulo_seleccionado.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="100dp" />
    <solid android:color="@android:color/white" />
</shape>