Creating a side tab

Question

I was able to create a tab layout using the tutorial in androidhive. I was wondering if I can put a side tab on it. . When you click an Item on the left side, an activity will be displayed on the right side.

I was wondering If I can do it. Thank you very much.

Answer 1

Try to design your layout as below:

Here its fragment_top_rated.xml file code:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/passenger"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="2dp"
        android:orientation="horizontal" 
        android:weightSum="1">

        <FrameLayout
            android:id="@+id/frameLayout1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight=".4"
            android:background="@android:color/background_dark" >
        </FrameLayout>

        <FrameLayout
            android:id="@+id/frameLayout2"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight=".6"
            android:background="@android:color/darker_gray" >
        </FrameLayout>
    </LinearLayout>

</RelativeLayout>

You can load this screen on tabs click with the fragments into it.

EDITED:

Supposing that you have developed your project exactly same as the defined demo of you question link.

In your Tabactivity as you select places tab load the Fragment of places in the left side. It defined in link on tab selected you just have to load fragments.

PlacesFragment

In your PlacesFragment write code as below:

public class PlacesFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.fragment_top_rated,
                container, false);
        FragmentManager fm = getFragmentManager();
        FragmentTransaction ft1 = fm.beginTransaction();
        Fragment m_fragSet = new GamesFragment();
        ft1.replace(R.id.frameLayout2, m_fragSet);
        ft1.commit();

        FragmentManager fmg = getFragmentManager();
        FragmentTransaction ftrans = fmg.beginTransaction();
        Fragment m_frag = new MoviesFragment();
        ftrans.replace(R.id.frameLayout1, m_frag);
        ftrans.commit();
        return rootView;
    }
}

Create right side fragment Games

public class GamesFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.fragment_games, container, false);

        return rootView;
    }
}

Here is MoviesFragment.java

public class MoviesFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.fragment_movies, container, false);

        return rootView;
    }

}

In your TabsAdapter define as below:

public class TabsPagerAdapter extends FragmentPagerAdapter {

    FragmentActivity context;
    public TabsPagerAdapter(FragmentManager fm,FragmentActivity act) {
        super(fm);
        context=act;
    }

    @Override
    public Fragment getItem(int index) {

        switch (index) {
        case 0:
            // Top Rated fragment activity
            return new TopRatedFragment();
        case 1:
            // Games fragment activity
            return new GamesFragment();
        case 2:
            // Movies fragment activity
            return new MoviesFragment();
        }


        return null;
    }

    @Override
    public int getCount() {
        // get item count - equal to number of tabs
        return 3;
    }

}

Here is the Output