How to add custom view in ViewPager for walkthrough

Question

I've used ViewPagerIndicator to get WalkThrough like most popular application. But I can't understand how to add Pictures in ViewPager which shows how to use the application.

What I want is like these Walk Through.

What i got till now.

I dunno

How to add Custom View like ImageView and TextView in ViewPager?

Any guidance would be most welcome.

Answer 1

As Inteist suggest, one can put any layout in fragment and supply that fragment to adapter.

Fragment:

    public final class SelectModelFragment extends Fragment {
    private static final String KEY_CONTENT = "SelectModelFragment:Content";
    private static String TAG = SelectModelFragment.class.getSimpleName();

    private SelectModel mSelectModelObj;

    private CircularImageView mImageView;

    public static SelectModelFragment newInstance(SelectModel obj) {
        SelectModelFragment fragment = new SelectModelFragment();
        fragment.mSelectModelObj =obj;

        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
            mSelectModelObj = savedInstanceState.getParcelable(KEY_CONTENT);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_select_model, container, false);
        mImageView = (CircularImageView)view.findViewById(R.id.fragment_select_model_iv);
        return view;
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putParcelable(KEY_CONTENT, mSelectModelObj);
    }
}

Fragment Adapter :

public class SelectModelAdapter extends FragmentPagerAdapter {

    ArrayList<SelectModel> mList;
    private int mCount;
    private static final String TAG = SelectModelAdapter.class.getSimpleName();

    public SelectModelAdapter(FragmentManager fm, ArrayList<SelectModel> mList) {
        super(fm);
        this.mList = mList;
        mCount =  mList.size();
    }

    @Override
    public Fragment getItem(int position) {
        return SelectModelFragment.newInstance(mList.get(position));
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return TAG;
    }

    public void setCount(int count) {
        if (count > 0 && count <= 10) {
            mCount = count;
            notifyDataSetChanged();
        }
    }
}

Activity: Where ViewPager has Fragment Adapter which feeds Fragment.

public class SelectModelActivity extends BaseSliderActivity {

    private ViewPager mPager;
    private SelectModelAdapter mAdapter;

    private ArrayList<SelectModel> mList;
    private void setAdapter() {
            mAdapter = new SelectModelAdapter(getSupportFragmentManager(), mList);
            mPager.setAdapter(mAdapter);
            mIndicator.setViewPager(mPager);
        }
}

Answer 2

Since the question really old, I'll just write a short general guideline:

To populate viewpager with content, you add fragments to an adapter and then you set the adapter to the viewpager. You can do pretty much any layout in the fragment, putting there images/text etc..