Tabs are not coming in layout of android studio - android

I am trying to create tabs in my layout. But instead of showing tab it is showing the below screen in design:
Below is the code:
**activity_mail.xml**
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="200dp"
android:id="#+id/appBarLayout2">
<com.google.android.material.tabs.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/white"/>
</LinearLayout>
MainActivity.java
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import com.google.android.material.tabs.TabLayout;
public class MainActivity extends AppCompatActivity {
/* private TabAdapter adapter;
private TabLayout tabLayout;
private ViewPager viewPager;*/
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(new TabAdapter(getSupportFragmentManager(),
MainActivity.this));
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
}
}
Tab1Fragment.java
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.fragment.app.Fragment;
public class Tab1Fragment extends Fragment {
public static final String ARG_PAGE = "ARG_PAGE";
private int mPage;
public static Tab1Fragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(ARG_PAGE, page);
Tab1Fragment fragment = new Tab1Fragment();
fragment.setArguments(args);
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARG_PAGE);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_main, container, false);
TextView textView = (TextView) view;
textView.setText("Fragment #" + mPage);
return view;
}
}
TabAdapter.Java
import android.content.Context;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
public class TabAdapter extends FragmentStatePagerAdapter {
final int PAGE_COUNT = 3;
private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" };
private Context context;
public TabAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
#Override
public int getCount() {
return PAGE_COUNT;
}
#Override
public Fragment getItem(int position) {
return Tab1Fragment.newInstance(position + 1);
}
#Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
return tabTitles[position];
}
}
fragment_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.main.PlaceholderFragment">
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:text="#string/sparta"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintTop_creator="1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Also when trying to run it in my mobile, it is showing error something like:
android.widget.RelativeLayout cannot be cast to android.widget.TextView
Please suggest the way to solve this issue.

After androidX, support library are removed,
so you need to use material design which help you.
Replace your appbar with below code
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="200dp"
android:id="#+id/appBarLayout2">
this will help you.

You're using deprecated design support AppBarLayout, You need to replace it with androidx library , so replace android.support.design.widget.AppBarLayout with com.google.android.material.appbar.AppBarLayout in your layout.
<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="200dp">
<com.google.android.material.tabs.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/white" />
</LinearLayout>
For the android.widget.RelativeLayout cannot be cast to android.widget.TextView, please post the entire stack trace.
UPDATE
tab names are not coming. only green background of the tablayout is shown.
this is odd behavior, as I you already override getPageTitle in the adapter.. I just suggest not to use a hard-coded array of Strings in the adapter, instead add the tab titles in the strings.xml
Strings.xml
<resources>
<string name="tab1">Tab1</string>
<string name="tab2">Tab2</string>
<string name="tab3">Tab3</string>
</resources>
Adapter
public class TabAdapter extends FragmentStatePagerAdapter {
final int PAGE_COUNT = 3;
// private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" };
private int[] tabTitles = new int[]{R.string.tab1, R.string.tab2, R.string.tab3};
private Context context;
public TabAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
#Override
public int getCount() {
return PAGE_COUNT;
}
#Override
public Fragment getItem(int position) {
return Tab1Fragment.newInstance(position + 1);
}
#Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
// return tabTitles[position];
return context.getString(tabTitles[position]);
}
}
Please have a look at this question that might be relevant.
UPDATE 2
Try to add those listeners
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(new TabAdapter(getSupportFragmentManager(),
MainActivity.this));
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
// listeners
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
}
if not working , try to set the current item of the ViewPager
viewPager.setCurrentItem(itemPosition);

Related

Change TextView values with method inside Fragment (NullPointerException)

I'm trying to make an app (for learning purposes) where I have a few tabs with scrollable content.
I have a collapsing app bar with a ViewPager for the main layout and three identical layouts with a TextView inside a NestedScrollView where the only difference is the image on top of the text. I also have three fragment classes with the same code inside. Everything worked fine.
But since I'm using the same layout in each tab, I thought that instead of a xml file and a java class for each tab, I could just have one of each and then somehow change the content for each tab inside my Adapter.
So I tried to just create a method to do that inside my tabFragment class. But I can't seem to find a way to modify the TextView. I keep getting a NullPointerException every time.
What am I missing?
Is my approach wrong? If so, what would be a better one? How do I solve this?
Thank you in advance :)
Here's my fragment class right now (the only one remaining ):
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.fragment.app.Fragment;
import com.example.tablayoutwithscrollview.R;
public class TabFragment extends Fragment {
private TextView textView;
private int text, image;
public TabFragment(){}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.tab1, container, false);
//textView = view.findViewById(R.id.textView);
return view;
}
#Override
public void onViewCreated(View view, Bundle savedInstanceState)
{
super.onViewCreated(view, savedInstanceState);
textView = getView().findViewById(R.id.textView);
}
public void setTabContent(int text, int image)
{
textView.setText(text);
textView.setCompoundDrawablesWithIntrinsicBounds(0,image,0,0);
}
}
My adapter class:
import android.content.Context;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import com.example.tablayoutwithscrollview.Tabs.TabFragment;
public class MyAdapter extends FragmentPagerAdapter {
private static int tabCount;
Context context;
public MyAdapter(FragmentManager fm, int tabCount, Context context){
super(fm);
this.tabCount = tabCount;
this.context = context;
}
#Override
public Fragment getItem(int position) {
TabFragment fragment;
switch (position)
{
case 0:
fragment = new TabFragment();
fragment.setTabContent(R.string.lorem_ipsum, R.drawable.jackfruit);
return fragment;
case 1:
fragment = new TabFragment();
fragment.setTabContent(R.string.lorem_ipsum, R.drawable.guava);
return fragment;
case 2:
fragment = new TabFragment();
fragment.setTabContent(R.string.lorem_ipsum, R.drawable.pomegranate);
return fragment;
default:
return null;
}
}
#Override
public CharSequence getPageTitle(int position)
{
switch (position)
{
case 0:
return context.getString(R.string.tab1_title);
case 1:
return context.getString(R.string.tab2_title);
case 2:
return context.getString(R.string.tab3_title);
default:
return null;
}
}
#Override
public int getCount() {
return tabCount;
}
}
MainActivity:
package com.example.tablayoutwithscrollview;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.widget.NestedScrollView;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = findViewById(R.id.tabLayout);
viewPager = findViewById(R.id.viewPager);
populatesTabLayout(tabLayout);
MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(), tabLayout.getTabCount(), this);
viewPager.setAdapter(myAdapter);
tabLayout.setupWithViewPager(viewPager);
}
private void populatesTabLayout(TabLayout tabLayout)
{
for (int i = 0; i<3; i++)
{
tabLayout.addTab(tabLayout.newTab());
}
}
}
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapseToolBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/imageView7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/strawberry" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"></androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:visibility="visible" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And my tab layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tabNestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableTop="#drawable/jackfruit"
android:text="#string/lorem_ipsum" />
</androidx.core.widget.NestedScrollView>
Here's how it's supposed to work (from before when each tab had a fragment class and a layout file):
The problem is that the created TabFragment instance has not been attached to the activity yet, therefore the textView does not inflated at that point.
You should pass the text to the TabFragment instance as an argument in the MyAdapter#getItem(..) method.
...
case 0:
fragment = new TabFragment();
Bundle args = new Bundle();
args.putString("key", textString);
fragment.setArguments(args);
return fragment
...
After that set the text for the TextView instance in the onViewCreated(...) method:
#Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
textView = getView().findViewById(R.id.textView);
textView.setText(getArguments().getString("key"));
}
Or you can see a nice example at the Android Reference.

Nested fragment with viewpager where viewpager not loading the fragments

I have a activity in which i am loading a fragment
Home fragmentA = new Home();
android.support.v4.app.FragmentTransaction fragmentTransactionA = getSupportFragmentManager().beginTransaction();
fragmentTransactionA.replace(R.id.mainFrame, fragmentA);
fragmentTransactionA.commitAllowingStateLoss();
in my home fragment i have a slidingtablayout and viewpager
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="mobile.data.woises.fragment.Home">
<mobile.data.woises.tabs.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/main_color"
app:tabIndicatorColor="#0bbea5"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/white"/>
</FrameLayout>
and my java code of my home fragment is this
public class Home extends Fragment {
View infHome;
SlidingTabLayout slidingTabLayout;
ViewPager viewPager;
private FragmentPageAdapterHome Pa;
CharSequence Titles[] = {"Requirements", "Notification"};
int Numboftabs = 2;
public Home() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
infHome = inflater.inflate(R.layout.fragment_home2, container, false);
return infHome;
}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
slidingTabLayout = (SlidingTabLayout) infHome.findViewById(R.id.sliding_tabs);
viewPager = (android.support.v4.view.ViewPager) infHome.findViewById(R.id.viewpager);
// adapter = new ViewPagerAdapter(getResources(), getChildFragmentManager());
// FragmentManager fragmentManager = getChildFragmentManager();
Pa = new FragmentPageAdapterHome(getChildFragmentManager(), Titles, Numboftabs, getActivity().getApplicationContext());
viewPager.setAdapter(Pa);
slidingTabLayout.setSelectedIndicatorColors(Color.parseColor("#0bbea5"));
slidingTabLayout.setDistributeEvenly(true);
slidingTabLayout.setViewPager(viewPager);
}
}
And my FragmentPageAdapterHome is this
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.util.Log;
import android.view.ViewGroup;
import java.util.HashMap;
import java.util.Map;
import mobile.data.woises.fragment.Notification;
import mobile.data.woises.fragment.Requirements;
/*import com.example.uday.innohabit.fragments.FragA;
import com.example.uday.innohabit.fragments.FragB;
import com.example.uday.innohabit.fragments.FragC;*/
/**
* Created by Uday on 05-11-2015.
*/
public class FragmentPageAdapterHome extends FragmentPagerAdapter {
private Map<Integer, String> mFragmentTags;
private FragmentManager mFragmentManager;
private Context mContext;
private String WoisesId;
CharSequence Titles[];
int NumofTabs;
//int icons[] = {R.drawable.search,R.drawable.cart,R.drawable.quickorder};
//String tabTitle;
public FragmentPageAdapterHome(FragmentManager fm, CharSequence mTitles[],
int mNumbOfTabsumb, Context context) {
super(fm);
this.Titles = mTitles;
this.NumofTabs = mNumbOfTabsumb;
mFragmentManager = fm;
mFragmentTags = new HashMap<Integer, String>();
mContext = context;
// TODO Auto-generated constructor stub
}
#Override
public Fragment getItem(int arg0) {
Log.d("FragmentPageAdapterHome","Arg="+arg0);
switch (arg0) {
case 0:
Requirements requirements = new Requirements();
return requirements;
case 1:
Notification notification = new Notification();
return notification;
default:
break;
}
return null;
}
#Override
public CharSequence getPageTitle(int position) {
return Titles[position];
}
#Override
public int getCount() {
// TODO Auto-generated method stub
return NumofTabs;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
Object obj = super.instantiateItem(container, position);
if (obj instanceof Fragment) {
// record the fragment tag here.
Fragment f = (Fragment) obj;
String tag = f.getTag();
mFragmentTags.put(position, tag);
}
return obj;
}
public Fragment getFragment(int position) {
String tag = mFragmentTags.get(position);
if (tag == null)
return null;
return mFragmentManager.findFragmentByTag(tag);
}
}
all the Log in the Requirement and the notification fragment is being displayed in Logcat that means the function is being called but the fragment is not being displayed please help me where i am making the mistake .
I was using the getsupportfragmentmanager() but someone on stack overflow posted that i should use the getChildFragmentManager() when it is nested fragment .
what should i do .please help me i am unable to figure out what is problem.
You set your ViewPagers height to 0px. layout_weight is a feature from LinearLayout, since you are using FrameLayout, nothing is shown. Possible fixes:
<LinearLayout 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"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="mobile.data.woises.fragment.Home">
<mobile.data.woises.tabs.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/main_color"
app:tabIndicatorColor="#0bbea5"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/white"/>
</LinearLayout>
//or:
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="mobile.data.woises.fragment.Home">
<mobile.data.woises.tabs.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/main_color"
app:tabIndicatorColor="#0bbea5"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white"/>
</FrameLayout>
Also, don't use px, since your layouts will look different on different screens. Use dp (density points) instead!

Android Design Support Library TabLayout using custom tabs layout but layout wrapping the tabs

In tab custom layout I set its parent element to match_parent and set its background color. When I run it tabs are shown custom layout wrapping the elements imageview and textview. I want this custom layout will fill the tab without any space between tabs.
Check output here:
private void setupTabLayout(ViewPager viewPager, ViewPagerAdapter viewPagerAdapter) {
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
int length = tabLayout.getTabCount();
for (int i = 0; i < length; i++) {
tabLayout.getTabAt(i).setCustomView(viewPagerAdapter.getTabView(i));
}
}
tab_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout"
android:background="#color/grey_accent">
<ImageView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon"
android:src="#drawable/ic_action_home"
android:layout_marginBottom="19dp"
android:layout_above="#+id/title"
android:layout_centerHorizontal="true" />
<TextView
android:layout_gravity="center"
android:textColor="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
android:id="#+id/title"
android:layout_marginBottom="259dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
ViewPagerAdapter:
public View getTabView(int position) {
View view = LayoutInflater.from(this.context).inflate(R.layout.tab_layout, null);
TextView title = (TextView) view.findViewById(R.id.title);
ImageView icon = (ImageView) view.findViewById(R.id.icon);
ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);
layout.setBackgroundResource(this.mColorList.get(position));
icon.setImageResource(this.mIconList.get(position));
title.setText(this.getPageTitle(position));
return view;
}
Try this
<android.support.design.widget.TabLayout
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"/>
I found it here
You can use material design tablayout and then give custom view to all the tabs.
For full reference visit: Custom Tablayout Example
Custom view for all the tabs can be something like this:
<?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:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/ll"
android:orientation="horizontal"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/ic_launcher"/>
<TextView
android:id="#+id/tvtab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ONE"
android:textColor="#color/colorAccent"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/ll2"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/ic_launcher"/>
<TextView
android:id="#+id/tvtab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TWO"
android:textColor="#26e9dc"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/ll3"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="#+id/tvtab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="THREE"
android:textColor="#d8ea2b"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/ic_launcher"/>
</LinearLayout>
</LinearLayout>
code for xml file of activity (activity_main.xml)
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#fff"
app:tabSelectedTextColor="#000"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Finally code for MainActivity.java
import android.content.Context;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
public ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(R.layout.custom_tab, null, false);
LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
LinearLayout linearLayout3 = (LinearLayout) headerView.findViewById(R.id.ll3);
tabLayout.getTabAt(0).setCustomView(linearLayoutOne);
tabLayout.getTabAt(1).setCustomView(linearLayout2);
tabLayout.getTabAt(2).setCustomView(linearLayout3);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new OneFragment(), "ONE");
adapter.addFragment(new TwoFragment(), "TWO");
adapter.addFragment(new ThreeFragment(), "THREE");
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
Step 1: Add xml layout code for customtabs
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
android:background="#color/white"
app:tabGravity="center" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_marginBottom="50dp"/>
Step 2 : Java code for tabs activity
public class BookingsTabs extends AppCompatActivity {
String url, smobile, snames, semail, sid, stoken, responseServer;
String id, token, did, stsid, processresponse, type, cancelresponse;
TextView tv1;
Button cretedeal;
ViewbookingsAdapter adapter;
ViewbookingsAdapter2 adapter2;
LinearLayout order;
private Tracker mTracker;
ProgressDialog pDialog;
ListView listview;
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
AnalyticsApplication application1;
SessionManagement session;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view_bookings);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
if (toolbar != null) {
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowHomeEnabled(true);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setHomeButtonEnabled(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));
}
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
int defaultValue = 0;
int page = getIntent().getIntExtra("TAB", defaultValue);
viewPager.setCurrentItem(page);
application1 = (AnalyticsApplication) getApplication();
mTracker = application1.getDefaultTracker();
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.accentColor));
tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.aquablue));
tabLayout.getTabAt(0).setCustomView(R.layout.aquablue);
tabLayout.getTabAt(1).setCustomView(R.layout.orangeprocess);
tabLayout.getTabAt(2).setCustomView(R.layout.shipping);
tabLayout.getTabAt(3).setCustomView(R.layout.deliver);
tabLayout.getTabAt(4).setCustomView(R.layout.completedtxt);
tabLayout.getTabAt(5).setCustomView(R.layout.cancelled);
callAsynchronousTask();
viewPager.setCurrentItem(0);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new OrderplacedFragment(), "Order Placed");
adapter.addFrag(new ProcessingFragment(), "Processing");
adapter.addFrag(new ShippingFragment(), "Shipping");
adapter.addFrag(new DeliveredFragment(), "Delivered");
adapter.addFrag(new CompletedFragment(), "Completed");
adapter.addFrag(new CancelledFragment(), "Cancelled");
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
if (position == 0) {
}
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
Step 3 :I added below sample tab code fragment for one tab same as other tabs
Take xml code any listview or some data
public class OrderplacedFragment extends Fragment {
View mMainView;
String url, smobile, snames, semail, sid, stoken, responseServer;
Context context;
ViewbookingsAdapter adapter;
ViewbookingsAdapter2 adapter2;
ListView listview;
LinearLayout tv1;
TextView create;
ArrayList<HashMap<String, String>> processlist, hatfilterslist;
SessionManagement session;
private SwipeRefreshLayout mSwipeRefreshLayout = null;
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mMainView = inflater.inflate(R.layout.listview_orderbookings, container, false);
listview = (ListView) mMainView.findViewById(R.id.listview);
pDialog = new ProgressDialog(getActivity());
pDialog.setMessage("Loading...");
pDialog.setMax(5);
Intent j = getActivity().getIntent();
coupon_code = j.getStringExtra("code");
create = (TextView) mMainView.findViewById(R.id.dealslist);
tv1 = (LinearLayout) mMainView.findViewById(R.id.no_deals_linear);
create = (TextView) mMainView.findViewById(R.id.dealslist);
create.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent i = new Intent(getActivity(), MyDealsActivity.class);
startActivity(i);
}
});
tv1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent i = new Intent(getActivity(), MyDealsActivity.class);
startActivity(i);
}
});
return mMainView;
}
}
In this tabs we can add counts also. If you have any questions about this ask me
When you use inflate(R.layout.tab_layout, null), you are saying there is no parent View at all. This causes all layout_ attributes to be thrown away, as per this pro-tip.
Instead, you should pass in the TabLayout and false (i.e., do not automatically attach the View): this ensures that the attributes are not ignored.
public View getTabView(TabLayout tabLayout, int position) {
View view = LayoutInflater.from(this.context)
.inflate(R.layout.tab_layout, tabLayout, false);
TextView title = (TextView) view.findViewById(R.id.title);
ImageView icon = (ImageView) view.findViewById(R.id.icon);
ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);
layout.setBackgroundResource(this.mColorList.get(position));
icon.setImageResource(this.mIconList.get(position));
title.setText(this.getPageTitle(position));
return view;
}
use
app:tabMaxWidth="44dp"
app:tabMinWidth="44dp"

Android - ActionBarActivity with ViewPager

i have a problem with ActionBarActivity and ViewPager.
On my "main-activity" which is a ActionBarActivity i have some tabs, which are fragments.
I want to implement the "swipe-feature" between these tabs.
I've already read the following tutorial:
http://developer.android.com/training/implementing-navigation/lateral.html
Actually i have implemented the whole code, but my app wont work. :(
There is no "swipe-feature" between the tabs.
Here is my code of the main-activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_hauptmenue_extended);
try {
actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// ViewPager ...
pagerAdapter = new CollectionPagerAdapter(
getSupportFragmentManager());
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(pagerAdapter);
viewPager.setCurrentItem(1);
viewPager
.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
});
// Add all tabs to the actionbar...
Tab tabB = actionBar.newTab();
tabB.setText("Home");
tabB.setIcon(R.drawable.icon_home);
tabB.setTabListener(new TabListener<Startmenue_activity>(this,
"Start", Startmenue_activity.class, viewPager));
actionBar.addTab(tabB);
Tab tabA = actionBar.newTab();
tabA.setText("");
tabA.setIcon(R.drawable.icon_nachrichten_sel);
tabA.setTabListener(new TabListener<Nachrichten_activity>(this,
"News", Nachrichten_activity.class, viewPager));
actionBar.addTab(tabA);
Tab tabC = actionBar.newTab();
tabC.setText("");
tabC.setIcon(R.drawable.icon_favoriten);
tabC.setTabListener(new TabListener<Favoriten_activity>(this,
"Favs", Favoriten_activity.class, viewPager));
actionBar.addTab(tabC);
And my adapter looks like this:
public class CollectionPagerAdapter extends FragmentPagerAdapter {
final int NUM_ITEMS = 3; // number of tabs
List<Fragment> fragments = new ArrayList<Fragment>();
public Fragment getItem(int pos) {
return fragments.get(pos);
}
public void addFragment(Fragment f) {
fragments.add(f);
}
public CollectionPagerAdapter(FragmentManager fm) {
super(fm);
Fragment home_Fragment = new Startmenue_activity();
addFragment(home_Fragment);
Fragment news_Fragment = new Nachrichten_activity();
addFragment(news_Fragment);
Fragment favoriten_Fragment = new Favoriten_activity();
addFragment(favoriten_Fragment);
}
#Override
public int getCount() {
return NUM_ITEMS;
}
}
Oh and my XML of the main-activity looks like this:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/fragView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Hauptmenue_extended" >
<!-- The ViewPager -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- The main content view -->
<FrameLayout
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.view.ViewPager>
</android.support.v4.widget.DrawerLayout>
There's a bunch of things that I don't fully understand about your code, for example, why are you putting a ListView inside the ViewPager?. Anyways if you want to implement some tabs with the swipe feature. Here is how do it:
First the xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.PagerTabStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</android.support.v4.view.ViewPager>
Now the activity:
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
public class MainActivity extends FragmentActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(new SampleAdapter(this, getSupportFragmentManager()));
}
}
The adapter:
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class SampleAdapter extends FragmentStatePagerAdapter {
Context ctxt = null;
public SampleAdapter(Context ctxt, FragmentManager mgr) {
super(mgr);
this.ctxt = ctxt;
}
#Override
public int getCount() {
return 3;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new SimpleFragment("Hi");
case 1:
return new SimpleFragment("There");
case 2:
return new SimpleFragment("Fella");
}
return null;
}
#Override
public String getPageTitle(int position) {
switch (position) {
case 0:
return "First Tab";
case 1:
return "Second Tab";
case 2:
return "Third Tab";
}
return null;
}
}
And the SimpleFragment:
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
#SuppressLint("ValidFragment")
public class SimpleFragment extends Fragment {
String text;
public SimpleFragment(String string) {
text = string;
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.fragment, container, false);
TextView textview = (TextView) root.findViewById(R.id.textView1);
textview.setText(text);
return root;
}
}
And the fragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Hope this helps :)
Try this out. But I've not tested it.
http://wptrafficanalyzer.in/blog/swipable-navigation-tabs-using-actionbarcompat-library/

TabHost with Fragments and FragmentActivity

I'm working on an Android App and I want to use 3 tabs for navigation using Fragments for each tab, but I don't know how to create the structure for doing it.
I want to add each fragment separately because each one is different, but I don't know where to add them in FragmentActivity.
I have these files.
tabs_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent">
<TabHost android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:id="#+id/tabRateAPet"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="#+id/tabViewMyRates"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="#+id/tabViewGlobalRates"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
TabsMain.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
public class MainTabsActivity extends FragmentActivity {
public static final String RATE_A_PET = "Rate a Pet";
public static final String MY_RATES = "My Rates";
public static final String GLOBAL_RATES = "Global Rates";
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tabs_layout);
}
}
Tabs.java
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;
public class Tabs extends Fragment implements OnTabChangeListener {
private static final String TAG = "FragmentTabs";
public static final String RATE_A_PET = "Rate a Pet";
public static final String MY_RATES = "My Rates";
public static final String GLOBAL_RATES = "Global Rates";
private View mRoot;
private TabHost mTabHost;
private int mCurrentTab;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// super.onCreateView(inflater, container, savedInstanceState);
mRoot = inflater.inflate(R.layout.tabs_layout, null);
mTabHost = (TabHost) mRoot.findViewById(android.R.id.tabhost);
setupTabs();
return mRoot;
}
private void setupTabs() {
mTabHost.setup(); // important!
mTabHost.addTab(newTab(RATE_A_PET, R.string.tabRateAPet, R.id.tabRateAPet));
mTabHost.addTab(newTab(MY_RATES, R.string.tabViewMyRates, R.id.tabViewMyRates));
}
private TabSpec newTab(String tag, int labelId, int tabContentId) {
Log.d(TAG, "buildTab(): tag=" + tag);
View indicator = LayoutInflater.from(getActivity()).inflate(
R.layout.tab,
(ViewGroup) mRoot.findViewById(android.R.id.tabs), false);
((TextView) indicator.findViewById(R.id.text)).setText(labelId);
TabSpec tabSpec = mTabHost.newTabSpec(tag);
tabSpec.setIndicator(indicator);
tabSpec.setContent(tabContentId);
return tabSpec;
}
#Override
public void onTabChanged(String tabId) {
Log.d(TAG, "onTabChanged(): tabId=" + tabId);
if (RATE_A_PET.equals(tabId)) {
updateTab(tabId, R.id.tabRateAPet);
mCurrentTab = 0;
return;
}
if (MY_RATES.equals(tabId)) {
updateTab(tabId, R.id.tabViewMyRates);
mCurrentTab = 1;
return;
}
if (GLOBAL_RATES.equals(tabId)) {
updateTab(tabId, R.id.tabViewGlobalRates);
mCurrentTab = 2;
return;
}
}
private void updateTab(String tabId, int placeholder) {
FragmentManager fm = getFragmentManager();
if (fm.findFragmentByTag(tabId) == null) {
fm.beginTransaction()
.replace(placeholder, new RateMyPetActivity(), tabId)
.commit();
}
}
}
I would suggest creating a separate fragment file for each tab. I recently did this as well, so I have outlined my code below:
Layout Files
activity_main.xml
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
<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="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
tab1_view.xml //add your respective tab layouts using this format (make sure to change string variables)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".DeviceFragment" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab1_fragment_string" />
</LinearLayout>
SRC Files
MainActivity.java //notice that in the .addTab process I only used text. You can also add icons using drawables that you would need to add to your hdpi folder. I also only created three tabs in this example.
package com.example.applicationname;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
public class MainActivity extends FragmentActivity {
// Fragment TabHost as mTabHost
private FragmentTabHost mTabHost;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("Tab1"),
Tab1Fragment.class, null);
mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("Tab2"),
Tab2Fragment.class, null);
mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("Tab3"),
Tab3Fragment.class, null);
}
}
Tab1Fragment.java //once again replicate for desired number of tabs
package com.example.applicationname;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Tab1Fragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View V = inflater.inflate(R.layout.tab1_view, container, false);
return V;
}
}
Make sure that your R.java and strings.xml files are properly set up, and then your tabs should be up and running.
TabHost doesn't retains Fragment's states. So why using TabHost?
So use ViewPager with TabLayout instead.
Prons of Viewpager over Tabhost:
ViewPager retains Fragments states. Mean Fragment will not again recreated if switched.
Inbuilt swiping feature that gives user smoother experience.
Less CPU consumption, because Tabhost recreates Fragment/Activity again and again when Tab is switched.
See the difference :
Using Tablayout + ViewPager (Supports swipe, retains Fragments states
Using TabHost (Doesn't support swipe, doesn't retain states)
Small Code for Tablayout + ViewPager
// find views by id
ViewPager viewPager = findViewById(R.id.viewpager);
TabLayout tabLayout = findViewById(R.id.tablayout);
// attach tablayout with viewpager
tabLayout.setupWithViewPager(viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
// add your fragments
adapter.addFrag(new SampleFragment(), "Tab1");
adapter.addFrag(new SampleFragment(), "Tab2");
adapter.addFrag(new SampleFragment(), "Tab3");
// set adapter on viewpager
viewPager.setAdapter(adapter);
XML layout
<?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">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
Note If you are not using AndroidX yet, you need to change following in layout.
Change com.google.android.material.tabs.TabLayout to android.support.design.widget.TabLayout
Chagne androidx.viewpager.widget.ViewPager to android.support.v4.view.ViewPager
But I'll strongly recommend to migrate to AndroidX, see #this answer to understand why.
And this is common ViewPagerAdapter for all your Viewpager in app.
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
public void addFrag(Fragment fragment) {
mFragmentList.add(fragment);
mFragmentTitleList.add("");
}
public void addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
}
Important Related Links
Difference between getSupportFragmentManager() and getChildFragmentManager()?
getSupportFragmentManager() versus getFragmentManager() in android 3.0+
Difference between FragmentPagerAdapter and FragmentStatePagerAdapter

Categories

Resources