Working with tabs in Android using Fragments

Hey Guys,

Today i worked on tabs using fragments. And Always try to keep things simple as a like that        way.

 So here we go...

 

Since we have seen alots of examples which maintain fragment stacks manually using hashmaps  and all . But i've read this from stackoverflow and other reference web sites about           

 fragmenttabhost so going to use this.

And thats how it works.

Base Classes :

 1. AppMainTabActivity.java

    

public class AppTabBSecondFragment extends BaseFragment {

Button mBackbtn;

View mView;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

mView = inflater.inflate(R.layout.app_tab_b_second_screen, container,

false);

initializeWidgets();

return mView;

}

private void initializeWidgets() {

mBackbtn = (Button) mView.findViewById(R.id.backbtn);

mBackbtn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

mActivity.handleBackPress();

}

});

}

}

2. BaseFragment.java

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;

public class BaseFragment extends Fragment {
public AppMainTabActivity mActivity;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

mActivity = (AppMainTabActivity) this.getActivity();
}

public boolean onBackPressed() {
return false;
}

public void onActivityResult(int requestCode, int resultCode, Intent data) {

}
}

Fragments which we are going to add in tabs and replace now 

1. AppTabAFirstFragment.java

public class AppTabAFirstFragment extends BaseFragment {

    private Button mGotoButton;

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

            Bundle savedInstanceState) {

        View view       =   inflater.inflate(R.layout.app_tab_a_first_screen, container, false);

        mGotoButton =   (Button) view.findViewById(R.id.id_next_tab_a_button);

        mGotoButton.setOnClickListener(listener);

        return view;

    }

    private OnClickListener listener        =   new View.OnClickListener(){

        @Override

        public void onClick(View v){

            /* Go to next fragment in navigation stack*/

            mActivity.mAddFragments(AppConstants.TAB_A, new AppTabASecondFragment(),true,true);

        }

    };

}

2. AppTabASecondFragment.java

public class AppTabASecondFragment extends BaseFragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

        View view    =  inflater.inflate(R.layout.app_tab_a_second_screen, container, false);

        return view;

}

}

3. AppTabBFirstFragment.java

public class AppTabBFirstFragment extends BaseFragment {

    private Button mGotoButton;

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

            Bundle savedInstanceState) {

        View view       =   inflater.inflate(R.layout.app_tab_b_first_screen, container, false);

        mGotoButton =   (Button) view.findViewById(R.id.id_next_tab_b_button);

        mGotoButton.setOnClickListener(listener);

        return view;

    }

    private OnClickListener listener        =   new View.OnClickListener(){

        @Override

        public void onClick(View v){

            /* Go to next fragment in navigation stack*/

            mActivity.mAddFragments(AppConstants.TAB_B, new AppTabBSecondFragment(),true,true);

        }

    };

}

4. AppTabBSecondFragment.java

public class AppTabBSecondFragment extends BaseFragment {

Button mBackbtn;

View mView;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

mView = inflater.inflate(R.layout.app_tab_b_second_screen, container,

false);

initializeWidgets();

return mView;

}

private void initializeWidgets() {

mBackbtn = (Button) mView.findViewById(R.id.backbtn);

mBackbtn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

mActivity.handleBackPress();

}

});

}

}

5. AppTabCFirstFragment.java

public class AppTabCFirstFragment extends BaseFragment {

    private Button mGotoButton;

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

            Bundle savedInstanceState) {

        View view       =   inflater.inflate(R.layout.app_tab_c_first_screen, container, false);

        mGotoButton =   (Button) view.findViewById(R.id.id_next_tab_C_button);

        mGotoButton.setOnClickListener(listener);

        return view;

    }

    private OnClickListener listener   =  new View.OnClickListener(){

        @Override

        public void onClick(View v){

            /* Go to next fragment in navigation stack*/

            mActivity.mAddFragments(AppConstants.TAB_C, new AppTabCSecondFragment(),true,true);

        }

    };

}

6. AppTabCSecondFragment.java

public class AppTabCSecondFragment extends BaseFragment {

Button mBackbtn;

View mView; 

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

mView = inflater.inflate(R.layout.app_tab_c_second_screen,

container, false);

initializeWidgets();

return mView;

}

private void initializeWidgets() {

mBackbtn=(Button)mView.findViewById(R.id.backbtn);

mBackbtn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

mActivity.handleBackPress();

}

});

}

}

Now interface that i used to handle backpress normally :

1. BackButtonCallback.java

public interface BackButtonCallback {

void handleBackPress();

}

Now the constants class for this ....

1. AppConstants.java

public class AppConstants {

public static final String TAB_A = "tab_a_identifier";

public static final String TAB_B = "tab_b_identifier";

public static final String TAB_C = "tab_c_identifier";

}

And finally the XML layouts :  

1. app_main_tab_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@android:id/tabhost"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical" >

        <TabWidget

            android:id="@android:id/tabs"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="0"

            android:orientation="horizontal" />

        <FrameLayout

            android:id="@android:id/tabcontent"

            android:layout_width="0dp"

            android:layout_height="0dp"

            android:layout_weight="0" />

        <FrameLayout

            android:id="@+id/realtabcontent"

            android:layout_width="fill_parent"

            android:layout_height="0dp"

            android:layout_weight="1" />

    </LinearLayout>

</TabHost>

2. tabs_icon.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/tabsLayout" android:layout_width="fill_parent"

android:layout_height="fill_parent" android:background="@drawable/tab_bg_selector"

android:gravity="center" android:orientation="vertical">

    <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent"

        android:id="@+id/tab_icon" />

</LinearLayout>

3. app_tab_a_first_screen.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#aa5500"

    android:gravity="center"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:text="TAB A FIRST SCREEN"

        android:textColor="@android:color/white"

        android:textSize="30sp"

        android:textStyle="bold" />

    <Button

        android:id="@+id/id_next_tab_a_button"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:padding="10dip"

        android:text="Next" />

</LinearLayout>

4. app_tab_a_second_screen.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent" android:layout_height="match_parent"

    android:orientation="vertical"  android:background="#0055aa"

    android:gravity="center">

    

    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"

        android:gravity="center" android:text="TAB A SECOND SCREEN"

        android:textSize="30sp" android:textStyle="bold"

        android:textColor="@android:color/white"/>

    

</LinearLayout>

5. app_tab_b_first_screen.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent" android:layout_height="match_parent"

    android:orientation="vertical"  android:background="#000000"

    android:gravity="center">

    

    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"

        android:gravity="center" android:text="TAB B FIRST SCREEN"

        android:textSize="30sp" android:textStyle="bold"

        android:textColor="@android:color/white"/>

    

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"

        android:text="Next" android:id="@+id/id_next_tab_b_button"

        android:padding="10dip"/>

</LinearLayout>

6. app_tab_b_second_screen.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#00ffff"

    android:gravity="center"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:text="TAB B SECOND SCREEN"

        android:textColor="@android:color/white"

        android:textSize="30sp"

        android:textStyle="bold" />

    <Button

        android:id="@+id/backbtn"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/back_button" />

</LinearLayout>

7.  app_tab_c_first_screen.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent" android:layout_height="match_parent"

    android:orientation="vertical"  android:background="@android:color/darker_gray"

    android:gravity="center">

    

    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"

        android:gravity="center" android:text="@string/tab_c_first_screen"

        android:textSize="30sp" android:textStyle="bold"

        android:textColor="@android:color/white"/>

    

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"

        android:text="Next" android:id="@+id/id_next_tab_C_button"

        android:padding="10dip"/>

</LinearLayout>

8. app_tab_c_second_screen.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent" android:layout_height="match_parent"

    android:orientation="vertical"  android:background="@android:color/background_dark"

    android:gravity="center">

    

    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"

        android:gravity="center" android:text="@string/tab_c_second_screen"

        android:textSize="30sp" android:textStyle="bold"

        android:textColor="@android:color/white"/>

    

    

    <Button 

        android:id="@+id/backbtn"

        android:layout_height="wrap_content"

        android:layout_width="wrap_content"

        android:text="@string/back_button"

        />

</LinearLayout>

Output :