CODEWITHSUNDEEP
androidandroid-fragments
I love coding
I love coding

Reputation: 1191

How to display images in Android and change it by swipe right/left?

I want to add an introduction to my Android application, to inform the user about how the app works. This intro will be displayed only, if the preferred settings intro will be false. So in this intro, there will be 3 images and at the end, there will be a page, with some text and two buttons, to enable the user to access the application, by making a login. The change between each image, will be made with a swipe movement, (so right to left +, left to right -). How Can I do ?

Upvotes: 0

Views: 18206

Answers (3)

Rejsal
Rejsal

Reputation: 131

I think we can do it by using recycler view itself. Using PagerSnapHelper layout manager in recycler view, we can implement swipe to change images.

    recyclerView.setLayoutManager(new LinearLayoutManager(this,
            LinearLayoutManager.HORIZONTAL, false));

    // add pager behavior
    PagerSnapHelper snapHelper = new PagerSnapHelper();
    snapHelper.attachToRecyclerView(recyclerView);

Upvotes: 1

Lucas Crawford
Lucas Crawford

Reputation: 3118

This can be done via the use of Fragments and ViewPager and FragmentPagerAdapter. Look at this documentation:

FragmentPagerAdapter: http://developer.android.com/reference/android/support/v4/app/FragmentPagerAdapter.html

ViewPager: http://developer.android.com/reference/android/support/v4/view/ViewPager.html

You can have one fragment that is instantiated based on the id in the ViewPager, and that id will indicate which image to show in your image fragment. So for three images, you instantiate a new fragment that sets the image in the fragment based on the current page in the FragmentPagerAdapter. The second fragment can be one for the login buttons and text you want at the end.

Ex for adapter defined in your FragmentActivity (or AppCompatActivity)

    public class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

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

        @Override
        public Fragment getItem(int position) {
            if(position < 3)
                return ImageFragment.newInstance(position);
            else
                return new LoginFragment();
        }
}

Ex for the image fragment for the various images in your introduction:

public static class ImageFragment extends Fragment{
    private int mPosition;

    public ImageFragment(){
    }

    public static ImageFragment newInstance(int pos){
        ImageFragment frag = new ImageFragment();
        Bundle args = new Bundle();
        args.putInt("pos", pos);
        frag.setArguments(args);
        return frag;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPosition = getArguments().getInt("pos");

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
            View v = inflater.inflate(R.layout.fragment_image, container, false);
            ImageView backgroundView = (ImageView) v.findViewById(R.id.background_image);
            switch(mPosition){
                case 0:
                    //set background view image 1
                case 1:
                    //set background view image 2
                default:
                    //set background view image 3
            }
            return v;
    }

}

Upvotes: 4

Andy Joyce
Andy Joyce

Reputation: 2832

I would recommend using a ViewPager. Check out this tutorial from the Developer Guide

http://developer.android.com/training/animation/screen-slide.html

If you want to add functionality to each of these pages instead of having just images then perhaps you can implement a fragmentStatePagerAdapter and then put all the functionality in each fragment. Here is a tutorial to implement one.

http://www.truiton.com/2013/05/android-fragmentstatepageradapter-example/

Upvotes: 1

Related Questions