How to code user defined tabs for Fixedtabs+swipe Project in Android Studio.
Select File -> NewProject -> Enter the Application name -> Next -> Next->Next->Select Navigation type as "Fixed Tabs + Swype" -> Finish
The application now looks like this when run.
If we click on each tab we see that just he number changes from 1 to 2 to 3 etc.
Now the most puzzling part is.....
How do we add content to each tab ?
Lets see how the code how each tab is rendered.
The key to all tabs is "getItem()" method which looks like this, in the MainActivity.java file
public Fragment getItem(int position) {
// getItem is called to instantiate the fragment for the given page.
// Return a DummySectionFragment (defined as a static inner class
// below) with the page number as its lone argument.
Fragment fragment = new DummySectionFragment();
Bundle args = new Bundle();
args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
fragment.setArguments(args);
return fragment;
}
As you can see from the code above in red, basically we create an instance of DummySectionFragment class which is defined in the same file (MainActivity.java).
This basically takes the tab number which is passed and dispays it as text.
But the problem here is the same class is instantiated, which makes it difficult to add different content to different tabs. Even if we add some new content into the above function, all three tabs would show the same new content.
So the key here is to maintain different classes for different tabs.
Lets see the existing class DummySectionFragment, which looks like
public static class DummySectionFragment extends Fragment {
/**
* The fragment argument representing the section number for this
* fragment.
*/
public static final String ARG_SECTION_NUMBER = "section_number";
public DummySectionFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main_dummy, container, false);
TextView dummyTextView = (TextView) rootView.findViewById(R.id.section_label);
dummyTextView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
return rootView;
}
}
The items of interest are in red.
1) fragment_main_dummy
This is the xml filename which represents the tab.
2) section_label
This is that small text element which displays the tab number.
So now our task is to do the following.
1) Make 3 copies of fragment_main_dummy.xml
as first_tab.xml, second_tab.xml and third_tab.xml
Go to first_tab.xml and change
android:id="@+id/section_label" to android:id="@+id/section_label1"
Go to second_tab.xml and change
android:id="@+id/section_label" to android:id="@+id/section_label2"
Go to third_tab.xml and change
android:id="@+id/section_label" to android:id="@+id/section_label3"
android:id="@+id/section_label" to android:id="@+id/section_label3"
2) Copy/paste DummySectionFragment class in MainActivity.java
as FirstFragment, SecondFragment and ThirdFragment.
Make the following changes to FirstFragment class .
Change the constructor from DummySectionFragment to FirstFragment
and
Changed the R.layout.fragment_main_dummy to R.layout.first_tab
and
R.id.section_label to R.id.section_label1
public static class FirstFragment extends Fragment {
/**
* The fragment argument representing the section number for this
* fragment.
*/
public static final String ARG_SECTION_NUMBER = "section_number";
public FirstFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.first_tab, container, false);
TextView dummyTextView = (TextView) rootView.findViewById(R.id.section_label1);
dummyTextView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
return rootView;
}
}
Do the same thing for other fragments.
SecondFragment looks like this.
public static class SecondFragment extends Fragment {
/**
* The fragment argument representing the section number for this
* fragment.
*/
public static final String ARG_SECTION_NUMBER = "section_number";
public SecondFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.second_tab, container, false);
TextView dummyTextView = (TextView) rootView.findViewById(R.id.section_label2);
dummyTextView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
return rootView;
}
}
ThirdFragment looks like this.
public static class ThirdFragment extends Fragment {
/**
* The fragment argument representing the section number for this
* fragment.
*/
public static final String ARG_SECTION_NUMBER = "section_number";
public ThirdFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.third_tab, container, false);
TextView dummyTextView = (TextView) rootView.findViewById(R.id.section_label3);
dummyTextView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
return rootView;
}
}
That's it we have independent tabs with independent classes now.
If we run this we may not see any difference because we have not added any contents.
The easiest way to add content is to open the xml file(say first_tab.xml) in design view of Andriod Studio and drag an drop "Analog Clock"
Something like this
Open second_tab.xml in the design view and drag and drop Digital clock
Open third_tab.xml in design view drag and drop say a button.
When you run the App now, you would see different content in different tab.
Tab1 shows Analog clock, Tab2 a digital clock and Tab 3 a button.
That's the end of this chapter.
Hope this helps.
