Android tip: Making Swipeable View (ViewPager) on static background image

    Swipe views provide lateral navigation between sibling screens such as tabs with a horizontal finger gesture (a pattern sometimes known as horizontal paging). In Android developing, ViewPager is official widget to make this view styles.
    Sometimes, we're trying to allow users to swipe between filters on a static image. The idea is that the image stays in place while the filter scrolls above it. This make our app seem smoother and having floating interface.
    This demo video is explained what this tip do:

Main activity interface

    First, declaring in xml file, this must include a ViewPager to make a swipable view, layout was like this:
    As you can see, always use FrameLayout and put ViewPager under an ImageView, by this way, the ViewPager will show on top of our ImageView which will be static.
    Now, creating a simple ViewPager adapter (extends from FragmentPagerAdapter or FragmentStatePagerAdapter), source  code:

package devexchanges.info.viewpager;

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

public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        return ContentFragment.newInstance(i);
    }

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

    Declaring ViewPager object and set adapter for it in activity programmatically code:

package devexchanges.info.viewpager;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private ViewPagerAdapter adapter;

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

        viewPager = (ViewPager)findViewById(R.id.pager);

        adapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
    }
}

Create Fragments/Pages

    In each pages, I will show show a mobile operating system logo by an ImageView and it's name by other TextView. By click at this logo, a Snackbar appeared and giving some information. This process was declaring in onClickListener method:

 private View.OnClickListener onClickListener() {
        return new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar snackbar = Snackbar.make(coordinatorLayout, textView.getText().toString()
                        + " Clicked!", Snackbar.LENGTH_LONG);

                snackbar.setActionTextColor(Color.GREEN);
                View snackbarView = snackbar.getView();
                snackbarView.setBackgroundColor(Color.DKGRAY);
                TextView textView = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);
                textView.setTextColor(Color.YELLOW);
                textView.setGravity(Gravity.CENTER);
                snackbar.show();
            }
        };
    }

    Full code for each Fragments:

package devexchanges.info.viewpager;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class ContentFragment extends Fragment {

    private TextView textView;
    private ImageView imageView;
    private CoordinatorLayout coordinatorLayout;

    public static Fragment newInstance(int position) {
        ContentFragment f = new ContentFragment();
        Bundle args = new Bundle();
        args.putInt("POSITION", position);
        f.setArguments(args);

        return f;
    }

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

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        textView = (TextView) view.findViewById(R.id.txt_position);
        imageView = (ImageView) view.findViewById(R.id.icon);
        coordinatorLayout = (CoordinatorLayout) view.findViewById(R.id.coordinatorLayout);

        //set on click listener for ImageView
        imageView.setOnClickListener(onClickListener());

        switch (getArguments().getInt("POSITION")) {
            case 0:
                setDataToView("Android", R.mipmap.android);
                break;
            case 1:
                setDataToView("iOS", R.mipmap.ios);
                break;
            case 2:
                setDataToView("Blackberry OS", R.mipmap.blackberryos);
                break;
            case 3:
                setDataToView("Firefox OS", R.mipmap.firefoxos);
                break;

            case 4:
                setDataToView("Symbian", R.mipmap.symbian);
                break;

            default:
                break;
        }
    }

    private View.OnClickListener onClickListener() {
        return new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar snackbar = Snackbar.make(coordinatorLayout, textView.getText().toString()
                        + " Clicked!", Snackbar.LENGTH_LONG);

                snackbar.setActionTextColor(Color.GREEN);
                View snackbarView = snackbar.getView();
                snackbarView.setBackgroundColor(Color.DKGRAY);
                TextView textView = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);
                textView.setTextColor(Color.YELLOW);
                textView.setGravity(Gravity.CENTER);
                snackbar.show();
            }
        };
    }
    
    private void setDataToView(String osName, int drawableId) {
        imageView.setImageResource(drawableId);
        textView.setText(osName);
    }
}

    And layout (xml file) is so simple with CoodinatorLayout in root (to make/show Snackbar):
    Output screen when running:

Conclusion

    In this tip, I presented how to make a static swipeable views with static background. Moreover, I use Snackbar to show alert notifications (instead of Toast). So:
- Adding Android Support Dependency to your app/build.gradle file to use it:

compile 'com.android.support:design:22.2.1'

- Visit my previous post to deep understanding Snackbar and CoodinatorLayout.

Author : Hong Thai

Share