Question

I have a requirement to create a ViewPager for a Tablet where on the left hand side there will be navigation buttons for the user to select. For example.

Left navigation will have 4 image buttons, where each item takes the user to a different tutorial. Each of the image buttons will load a ViewPager.

If the user selects item 1 the right side of the page will load a ViewPager for tutorial #1 but the navigation on the left will stay, so when the user swipes thru the pages the navigation will always be visible so they can navigate to a different tutorial. The behavior would be the same for all of the ImageButton items.

I’ve searched for examples but have not seen anything like what I am describing. If not what is a possible alternative to this design?

Updated, included xml layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <include
        android:id="@+id/headerbar"
        layout="@layout/header" />

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <include layout="@layout/left_nav" />

        <android.support.v4.view.ViewPager
            android:id="@+id/homeScreenPager"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/navbar_bg"
            android:padding="10dip" />

    </LinearLayout>

</LinearLayout>

Answer 1

I’ve searched for examples but have not seen anything like what I am describing.

Use a horizontal LinearLayout. Have two children:

• a vertical LinearLayout for your “4 image buttons”
• a ViewPager

When the button is clicked, set a new adapter on the ViewPager.