Cacher is the code snippet organizer for pro developers

<style name="indicator_style">
        <item name="android:layout_margin">10dp</item>
        <item name="android:layout_width">10dp</item>
        <item name="android:layout_height">10dp</item>
        <item name="android:button">@null</item>
        <item name="android:background">@drawable/bg_indicator</item>
</style>

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.github.bumptech.glide:glide:3.7.0'

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.tux.mylab.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/image_slider"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@color/colorAccent" />

    <RadioGroup
        android:id="@+id/slider_indicator_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/page1"
            style="@style/indicator_style"
            android:checked="true" />

        <RadioButton
            android:id="@+id/page2"
            style="@style/indicator_style" />

        <RadioButton
            android:id="@+id/page3"
            style="@style/indicator_style" />

        <RadioButton
            android:id="@+id/page4"
            style="@style/indicator_style" />
    </RadioGroup>
</FrameLayout>

<uses-permission android:name="android.permission.INTERNET" />

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    private RadioGroup group;

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

        viewPager = (ViewPager) findViewById(R.id.image_slider);
        group = (RadioGroup) findViewById(R.id.slider_indicator_group);
        group.setOnCheckedChangeListener(this);
        viewPager.addOnPageChangeListener(this);

        ImageSliderAdapter adapter = new ImageSliderAdapter(getSupportFragmentManager());
        adapter.addFragment(ImageSliderFragment.newInstance("http://www.clipartkid.com/images/12/playground-clipart-9sdTKA-clipart.png"));
        adapter.addFragment(ImageSliderFragment.newInstance("http://www.clipartkid.com/images/12/slide-clipart-clipart-panda-free-clipart-images-UzpAUg-clipart.jpg"));
        adapter.addFragment(ImageSliderFragment.newInstance("https://trishdeitch.files.wordpress.com/2010/06/all_tp_products_tp_crazywavy_slide_body_green1.jpg"));

        viewPager.setAdapter(adapter);
    }

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

    @Override
    public void onPageSelected(int position) {
        // when current page change -> update radio button state
        int radioButtonId = group.getChildAt(position).getId();
        group.check(radioButtonId);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

    @Override
    public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
        // when checked radio button -> update current page
        viewPager.setCurrentItem(group.indexOfChild(group.findViewById(checkedId)), true);
    }
}

/**
 * slider item
 * require: glide, permission internet (if load from internet)
 */
public class ImageSliderFragment extends Fragment {
    private static final String IMAGE_URL = "image_url";

    public static ImageSliderFragment newInstance(String imageUrl) {
        Bundle args = new Bundle();
        args.putString(IMAGE_URL, imageUrl);
        ImageSliderFragment fragment = new ImageSliderFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ImageView view = (ImageView) inflater.inflate(R.layout.item_slider, container, false);
        String url = getUrlFromInstance();
        loadImage(view, url);
        return view;
    }

    /**
     * load image use glide
     *
     * @param view view to show image from url
     * @param url  url of image
     */
    private void loadImage(ImageView view, String url) {
        Glide.with(this)
                .load(url)
                .thumbnail(0.3f)
                .into(view);
    }

    /**
     * @return url of image passing from newInstance
     */
    private String getUrlFromInstance() {
        return getArguments().getString(IMAGE_URL);
    }
}

public class ImageSliderAdapter extends FragmentPagerAdapter {
    private final List<Fragment> fragmentList = new ArrayList<>();

    public ImageSliderAdapter(@NonNull FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

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

    /**
     * add image fragment into view pager
     *
     * @param fragment
     */
    public void addFragment(Fragment fragment) {
        fragmentList.add(fragment);
    }
}