ViewPager with fixed background image

7/12 2015 on Android, Programming

Problem

I want to have an image(such as a phone frame) fixed in its position while I swipe through contents in fragments on ViewPager. An example is “What’s New” or “Features” screen like gif animation below. Or maybe something fancier with your creativity.

viewpager_gif

Approach

It’s simpler than it looks. On top of a regular implementation of fragments ViewPager in an Activity,

  • Make your Fragment layout background transparent
  • Wrap ViewPager and ImageView in FrameLayout within your Activity layout so that you can center the image underneath ViewPager
Code Sample

The important parts are in these 2 layout files.

activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/blue">
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/frame"/> <!-- frame.png is the phone graphic -->
 
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
 
    </FrameLayout>
 
</RelativeLayout>

fragment_pager.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"> <!-- Important -->
 
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"/>
 
    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/text1"
        android:src="@mipmap/ic_launcher"/>
 
</RelativeLayout>

For reference, I am adding the rest of code. These are just minimum implementation of ViewPager with fragments.

MyViewPagerAdapter.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

public class MyViewPagerAdapter extends FragmentPagerAdapter {
 
    public MyViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }
 
    @Override
    public Fragment getItem(int i) {
        Bundle bundle = new Bundle();
        bundle.putInt("pos", i);
        PagerFragment fragment = new PagerFragment();
        fragment.setArguments(bundle);
        return fragment;
    }
 
    @Override
    public int getCount() {
        return 2;
    }
}

MainActivity.java

1
2
3
4
5
6
7
8
9
10

public class MainActivity extends ActionBarActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new MyViewPagerAdapter(getFragmentManager()));
    }
}





PagerFragment.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public class PagerFragment extends Fragment {
 
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_pager, container, false);
 
        TextView text = (TextView) view.findViewById(R.id.text1);
        int pos = getArguments().getInt("pos", 0) + 1;
        text.setText("New feature " + pos + "\nYou can now do ...");
 
        return view;
    }
}

Comments are closed.

Recent Posts

Categories