In many android apps we have seen sliding images with circle indicator. This kind of sliding image gallery can be develop using viewpager
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Viewpager_circle_indicator
.gitattributes
.gitignore
README.md

README.md

viewpager_circle_indicator

In many android apps we have seen sliding images with circle indicator. This kind of sliding image gallery can be develop using viewpager ,Fallow the below steps to develop sliding image gallery with circle indicator. http://javaant.com/viewpager-with-circle-indicator-in-android/#.VpZ64MB943g ##Step1 Create a blank android project using android studio. if you don’t know how to create a project in android, see my previous post. ##Step2 Create three blank fragment for displaying image. you can create as many as you want. ##Step3fragment_image_one.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="com.javamad.ImageOneFragment"
    >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/img1"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/imageView" />




</RelativeLayout>

##fragment_image_two.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="com.javamad.ImageTwoFragment"
    >

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/img2"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />


</RelativeLayout>

##fragment_image_three.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="com.javamad.ImageThreeFragment"
   >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img3"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />


</RelativeLayout>

##Step3 Create a footer.xml to place the circle indicator. ##footer.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_height="wrap_content" android:layout_width="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_gravity="bottom"
    android:background="#00000000"

    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        >
        <ImageView android:layout_height="10dp" android:layout_width="10dp"
            android:id="@+id/btn1"
            android:src="@drawable/holo_circle"
            android:layout_gravity="center_vertical"

            />

        <ImageView android:layout_height="10dp" android:layout_width="10dp"
            android:id="@+id/btn2"
            android:layout_toRightOf="@id/btn1"
            android:src="@drawable/holo_circle"
            android:layout_margin="10dp"
            />
        <ImageView android:layout_height="10dp" android:layout_width="10dp"
            android:id="@+id/btn3"
            android:layout_toRightOf="@id/btn2"
            android:src="@drawable/holo_circle"
            android:layout_gravity="center_vertical"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/buttonlayout"

        >

        <Button
            android:id="@+id/btnNewUserPopup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" New User "
            android:layout_alignParentLeft="true"
            android:layout_weight=".5"
            />

        <Button
            android:id="@+id/btnSignInPopup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="Sign In"
            android:layout_alignParentRight="true"

            />

    </LinearLayout>


</LinearLayout>

##Step4 ##ImageViewPagerAdapter.java

package javaant.com.viewpager_circle_indicator;

import android.app.Fragment;
import android.app.FragmentManager;
import android.content.Context;
import android.support.v13.app.FragmentPagerAdapter;

/**
 * Created by nirmal on 12/08/15.
 */
public class ImageViewPagerAdapter extends FragmentPagerAdapter {
    private Context _context;
    public static int totalPage = 3;

    public ImageViewPagerAdapter(Context context, FragmentManager fm) {
        super(fm);
        _context = context;

    }

    @Override
    public Fragment getItem(int position) {
        Fragment f = new Fragment();
        switch (position) {
            case 0:
                f = new ImageOneFragment();
                break;
            case 1:
                f = new ImageTwoFragment();
                break;
            case 2:
                f = new ImageThreeFragment();
                break;
        }
        return f;
    }

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

}

##MainActivityFragment.java

package javaant.com.viewpager_circle_indicator;

import android.app.Fragment;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;

/**
 * A placeholder fragment containing a simple view.
 */
public class MainActivityFragment extends Fragment {
    private ViewPager _mViewPager;
    private ImageViewPagerAdapter _adapter;
    private ImageView _btn1, _btn2, _btn3;
    public MainActivityFragment() {
    }


    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        setUpView();
        setTab();
        onCircleButtonClick();
    }

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

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

    private void onCircleButtonClick() {

        _btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                _btn1.setImageResource(R.drawable.fill_circle);
                _mViewPager.setCurrentItem(0);
            }
        });

        _btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                _btn2.setImageResource(R.drawable.fill_circle);
                _mViewPager.setCurrentItem(1);
            }
        });
        _btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                _btn3.setImageResource(R.drawable.fill_circle);
                _mViewPager.setCurrentItem(2);
            }
        });
    }

    private void setUpView() {
        _mViewPager = (ViewPager) getView().findViewById(R.id.imageviewPager);
        _adapter = new ImageViewPagerAdapter(getActivity(), getFragmentManager());
        _mViewPager.setAdapter(_adapter);
        _mViewPager.setCurrentItem(0);
        initButton();
    }

    private void setTab() {
        _mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageScrollStateChanged(int position) {
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                _btn1.setImageResource(R.drawable.holo_circle);
                _btn2.setImageResource(R.drawable.holo_circle);
                _btn3.setImageResource(R.drawable.holo_circle);
                btnAction(position);
            }

        });

    }

    private void btnAction(int action) {
        switch (action) {
            case 0:
                _btn1.setImageResource(R.drawable.fill_circle);

                break;

            case 1:
                _btn2.setImageResource(R.drawable.fill_circle);

                break;
            case 2:
                _btn3.setImageResource(R.drawable.fill_circle);

                break;
        }
    }

    private void initButton() {
        _btn1 = (ImageView) getView().findViewById(R.id.btn1);
        _btn1.setImageResource(R.drawable.fill_circle);
        _btn2 = (ImageView) getView().findViewById(R.id.btn2);
        _btn3 = (ImageView) getView().findViewById(R.id.btn3);

    }

    private void setButton(Button btn, String text, int h, int w) {
        btn.setWidth(w);
        btn.setHeight(h);
        btn.setText(text);
    }
}