Develop Reference

Add button next to each tab in android

I need to create a dynamic tabhost, which involves, adding and removing tabs dynamically. I'm able to add and remove tabs dynamically. But I need to have delete button in each tab. Also need to differentiate the click for tab click and delete tab click. Kindly refer the image. I have googled to add button to each tab, couldn't find any help.
Edit:
I have added custom view to tablayout. But I need to perform, click on close button to remove the tab. I have figured how to how to add and remove a tab. But I couldn't figure out how to get the click listener for the close button.
custom_tab.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="wrap_content"
android:orientation="horizontal">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#string/font_fontFamily_medium"
android:gravity="center_horizontal"
android:textColor="#color/colorAccent"
android:textSize="#dimen/tab_label" />
<Button
android:background="#drawable/close"
android:id="#+id/btnClose"
android:layout_width="40dp"
android:layout_height="40dp"
/>
</LinearLayout>
MainActivity and Adapter:
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
}
/**
* Adding custom view to tab
*/
private void setupTabIcons() {
View rootView1 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabOne = rootView1.findViewById(R.id.tab);
tabOne.setText("ONE");
tabLayout.getTabAt(0).setCustomView(rootView1);
View rootView2 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabTwo = rootView2.findViewById(R.id.tab);
tabTwo.setText("TWO");
tabLayout.getTabAt(1).setCustomView(rootView2);
View rootView3 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabThree = rootView3.findViewById(R.id.tab);
tabThree.setText("THREE");
tabLayout.getTabAt(2).setCustomView(rootView3);
}
/**
* Adding fragments to ViewPager
*
* #param viewPager
*/
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new OneFragment(), "ONE");
adapter.addFrag(new TwoFragment(), "TWO");
adapter.addFrag(new ThreeFragment(), "THREE");
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
private String tabTitles[] = new String[]{"Tab1", "Tab2", "Tab3"};
private int[] imageResId = {R.drawable.ic_tab_contacts, R.drawable.ic_tab_call, R.drawable.ic_tab_favourite};
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 addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
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.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="#dimen/custom_tab_layout_height"
app:tabMode="fixed"
app:tabGravity="fill"/>
</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>

Create Click listener,
View.OnClickListener onClickListener = new View.OnClickListener() {
#Override
public void onClick(View v) {
switch (v.getId()) {
case 1:
Toast.makeText(CircleActivity.this, "1", Toast.LENGTH_SHORT).show();
break;
case 2:
Toast.makeText(CircleActivity.this, "2", Toast.LENGTH_SHORT).show();
break;
default:
Toast.makeText(CircleActivity.this, "Default", Toast.LENGTH_SHORT).show();
break;
}
}
};
Modify your setupTabIcons() method i just remove some boilerplate code,
private void setupTabIcons() {
String[] arrTabTile = new String[]{"ONE", "TWO", "THREE"};
for (int i = 0; i < arrTabTile.length; i++) {
View rootView = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabOne = rootView.findViewById(R.id.tab);
tabOne.setText(arrTabTile[i]);
Button btnClose = rootView.findViewById(R.id.btnClose);
btnClose.setId(i + 1);
btnClose.setOnClickListener(onClickListener);
tabLayout.getTabAt(i).setCustomView(rootView);
}
}
Here is explanation:
btnClose.setId(i + 1);//use to idntify uniq button
btnClose.setOnClickListener(onClickListener);//assign click listener

You have almost implemented the solution yourself. Based on your code, adding a different click listener per button can be achieved with something like this:
private void setupTabIcons() {
View rootView1 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabOne = rootView1.findViewById(R.id.tab);
Button buttonOne = rootView1.findViewById(R.id.btnClose);
tabOne.setText("ONE");
tabLayout.getTabAt(0).setCustomView(rootView1);
View rootView2 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabTwo = rootView2.findViewById(R.id.tab);
Button buttonTwo = rootView2.findViewById(R.id.btnClose);
tabTwo.setText("TWO");
tabLayout.getTabAt(1).setCustomView(rootView2);
View rootView3 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabThree = rootView3.findViewById(R.id.tab);
Button buttonThree = rootView3.findViewById(R.id.btnClose);
tabThree.setText("THREE");
tabLayout.getTabAt(2).setCustomView(rootView3);
buttonOne.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(Main2Activity.this, "Button One clicked!", Toast.LENGTH_SHORT).show();
}
});
buttonTwo.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(Main2Activity.this, "Button Two clicked!", Toast.LENGTH_SHORT).show();
}
});
buttonThree.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(Main2Activity.this, "Button Three clicked!", Toast.LENGTH_SHORT).show();
}
});
}
Much like you can get a reference to the TextView per custom view and change its text, you can get a reference to the corresponding button and set a custom click listener. If you just replace your setupTabIcons() with the provided method, when you click each close button you will get a different error message displayed on the screen.

I have Just create Small Programme to Remove tab and also remove fragment layout on image view click for better understanding check out code:
Removable tab layout
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.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.AppBarLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:padding="#dimen/activity_horizontal_margin"
android:orientation="vertical">
<Button
android:id="#+id/btnScrollableTabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/btn_scrollable_tabs"
android:layout_marginTop="#dimen/btn_margin_top"
android:textSize="15dp" />
</LinearLayout>
MainActivity.java:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Toolbar toolbar;
private Button btnScrollableTabs;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
btnScrollableTabs = (Button) findViewById(R.id.btnScrollableTabs);
btnScrollableTabs.setOnClickListener(this);
}
#Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.btnScrollableTabs:
startActivity(new Intent(MainActivity.this, ScrollableTabsActivity.class));
break;
}
}
}
activity_scrollabel_tab.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.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.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" />
ScrollableTabsActivity and ViewPager :
public class ScrollableTabsActivity extends AppCompatActivity {
int NumberOfTab = 5;
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
ViewPagerAdapter adapter ;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrollable_tabs);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
adapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
int length = tabLayout.getTabCount();
for (int i = 0; i < length; i++) {
tabLayout.getTabAt(i).setCustomView(getTabView(i));
}
}
public View getTabView(final int position) {
View view = LayoutInflater.from(this).inflate(R.layout.close_tablayout, null);
TextView title = (TextView) view.findViewById(R.id.title);
ImageView icon = (ImageView) view.findViewById(R.id.close);
title.setText(adapter.getPageTitle(position));
icon.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
NumberOfTab = NumberOfTab - 1;
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);
if (tabLayout.getTabCount()==3)
tabLayout.setTabMode(TabLayout.MODE_FIXED);
int length = tabLayout.getTabCount();
for (int i = 0; i < length; i++) {
tabLayout.getTabAt(i).setCustomView(getTabView(i));
}
}
});
return view;
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
final Fragment result;
switch (position) {
case 0:
// First Fragment of First Tab
result = new OneFragment();
break;
case 1:
// First Fragment of Second Tab
result = new TwoFragment();
break;
case 2:
// First Fragment of Second Tab
result = new ThreeFragment();
break;
case 3:
// First Fragment of Second Tab
result = new FourFragment();
break;
case 4:
// First Fragment of Second Tab
result = new FiveFragment();
break;
default:
result = null;
break;
}
// Log.d("RESULT",result.getTag());
return result;
}
#Override
public int getCount() {
return NumberOfTab;
}
#Override
public CharSequence getPageTitle(final int position) {
switch (position) {
case 0:
return "One";
case 1:
return "Two";
case 2:
return "Three";
case 3:
return "Four";
case 4:
return "Five";
default:
return null;
}
}
}
}
custom_tabs_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Title"
android:textColor="#color/windowBackground">
</TextView>
<ImageView
android:id="#+id/close"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="4dp"
android:layout_toEndOf="#+id/title"
android:layout_toRightOf="#+id/title"
android:src="#drawable/ic_close_black_24dp">
</ImageView>

TabLayout icon Not Shown

I use Material TabLayout:
<com.google.android.material.tabs.TabItem
android:text="item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/item1" />
<com.google.android.material.tabs.TabItem
android:icon="#drawable/item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item2"
/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item3"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item4" />
</com.google.android.material.tabs.TabLayout>
and androidx ViewPager.
ViewPagerAdapter:
public class ViewPagerAdapter extends FragmentPagerAdapter
{
private List<Fragment> fragmentList=new ArrayList<>();
private List<String> fragmentTitleList=new ArrayList<>();
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public int getCount() {
return fragmentTitleList.size();
}
#NonNull
#Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
#Nullable
#Override
public CharSequence getPageTitle(int position) {
return fragmentTitleList.get(position);
}
public void addPage(Fragment fragment, String title)
{
fragmentList.add(fragment);
fragmentTitleList.add(title);
}
}
But when i add my Fragments with addPage() method to viewpager, the icon and text of TabLayout change To my title which add in addPage()(icon remove).
But i want to title be my text and icon which set in TabItem.
Is there any way to do this?

I think you should follow below code make a custom tab layout for you tabs
[1]. custom_tab.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:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/tabImg"
android:layout_width="wrap_content"
android:layout_height="20dp" />
<TextView
android:id="#+id/tabContent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginStart="#dimen/_5sdp"
android:layout_marginEnd="#dimen/_5sdp"
android:gravity="center"
android:text=""
android:textAlignment="center"
android:textColor="#color/white" />
</LinearLayout>
[2]. Your Activity
private String[] tabTitles = {"Pending", "Ongoing", "Completed"};
private int[] tabIcons = {android.R.drawable.arrow_down_float,android.R.drawable.checkbox_off_background, android.R.drawable.checkbox_on_background};
TextView tabContent;
private void setUpTabIcon() {
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
for (int i = 0; i < tabLayout.getTabCount(); i++) {
LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
ImageView tabImg = tabLinearLayout.findViewById(R.id.tabImg);
if (i == 0) {
tabContent.setText(tabTitles[i]);
tabImg.setColorFilter(ContextCompat.getColor(getApplicationContext(), R.color.white), android.graphics.PorterDuff.Mode.MULTIPLY);
}
tabImg.setImageResource(tabIcons[i]);
tabLayout.getTabAt(i).setCustomView(tabLinearLayout);
}
Log.e(TAG, "onCreate: " + tabLayout.getTabCount());
pageAdapter = new ViewPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
binding.viewPager.setAdapter(pageAdapter);
binding.viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
pageAdapter.notifyDataSetChanged();
}
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
LinearLayout linearLayout = (LinearLayout) tab.getCustomView();
TextView text = (TextView) linearLayout.findViewById(R.id.tabContent);
ImageView img = linearLayout.findViewById(R.id.tabImg);
if (text != null) {
text.setText(tabTitles[tab.getPosition()]);
img.setColorFilter(ContextCompat.getColor(getApplicationContext(), R.color.white), android.graphics.PorterDuff.Mode.MULTIPLY);
}
binding.viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
LinearLayout linearLayout = (LinearLayout) tab.getCustomView();
TextView tabContent = linearLayout.findViewById(R.id.tabContent);
ImageView img = linearLayout.findViewById(R.id.tabImg);
if (tabContent != null) {
tabContent.setText("");
img.setColorFilter(ContextCompat.getColor(getApplicationContext(), R.color.colorPrimaryDark), android.graphics.PorterDuff.Mode.MULTIPLY);
}
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});

How to have icons be to the left of Text in Tab Layout?

I am trying to figure out how to have the icons not be on top of the text but rather to the side of it, but I am not sure how to do it with my code specifically. I am quite new to Android Studio so I would be grateful for any help.
XML Code
<?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:orientation="vertical"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MyCabinet">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarMyCabinet"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/teacher_files_title"
android:gravity = "center"
android:id="#+id/toolbar_title"
app:fontFamily="#font/capriola"
android:textSize="20sp"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccent"
app:elevation="4dp">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:id="#+id/viewPagerMyCabinet"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
The Activity Code
private TabLayout tabLayout;
private ViewPager viewPager;
private ViewPagerAdapter adapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my_cabinet);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
viewPager = (ViewPager) findViewById(R.id.viewPagerMyCabinet);
adapter = new ViewPagerAdapter(getSupportFragmentManager());
//add fragment here
adapter.AddFragment(new FragmentMyCabinet(), "My Cabinet");
adapter.AddFragment(new FragmentUpload(), "Upload");
adapter.AddFragment(new FragmentRecent(), "Recent");
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setIcon(R.drawable.ic_folder);
tabLayout.getTabAt(1).setIcon(R.drawable.ic_camera);
tabLayout.getTabAt(2).setIcon(R.drawable.ic_clock);
android.support.v7.widget.Toolbar toolbar = findViewById(R.id.toolbarMyCabinet);
setSupportActionBar(toolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return true;
}
ViewPagerAdapter
import android.support.annotation.Nullable;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<android.support.v4.app.Fragment> lstFragment = new ArrayList<>();
private final List<String> lstTitles = new ArrayList<>();
public ViewPagerAdapter(android.support.v4.app.FragmentManager fm) {
super(fm);
}
#Override
public android.support.v4.app.Fragment getItem(int position) {
return lstFragment.get(position);
}
#Override
public int getCount() {
return lstTitles.size();
}
#Nullable
#Override
public CharSequence getPageTitle(int position) {
return lstTitles.get(position);
}
public void AddFragment(android.support.v4.app.Fragment fragment, String title) {
lstFragment.add(fragment);
lstTitles.add(title);
}
}
Here's what the UI looks like now:
ui for app
I am not sure if I would have to create a custom xml or not, and if I did I am not too sure how to implement it smoothly into the code I have now.

Adding app:tabInlineLabel="true" actually worked for me.
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabInlineLabel="true"
app:tabIndicatorHeight="0dp"/>

You should go ahead and create a custom view within your ViewPagerAdapter. This is an example that I quickly wrote:
MainActivity.Class
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
ViewPagerAdapter pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
pagerAdapter.addFragment(new OneFragment(), "ONE");
pagerAdapter.addFragment(new TwoFragment(), "TWO");
pagerAdapter.addFragment(new ThreeFragment(), "THREE");
viewPager.setAdapter(pagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons(pagerAdapter);
}
private void setupTabIcons(ViewPagerAdapter pagerAdapter) {
for (int i=0;i<tabLayout.getTabCount();i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) tab.setCustomView(pagerAdapter.getTabView(i));
}
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private Context context;
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
private int[] tabIcons = {
R.drawable.ic_android_black_24dp,
R.drawable.ic_android_black_24dp,
R.drawable.ic_android_black_24dp
};
ViewPagerAdapter(FragmentManager manager, Context context) {
super(manager);
this.context = context;
}
public View getTabView(int position) {
View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
TextView textView = v.findViewById(R.id.textView);
textView.setText(mFragmentTitleList.get(position));
ImageView imageView = v.findViewById(R.id.imageView);
imageView.setImageResource(tabIcons[position]);
return v;
}
#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);
}
}
}
Your activity_main.xml: should remain the same.
This is your custom_tab.xml:
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_android_black_24dp"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageView"
android:layout_toEndOf="#+id/imageView"
android:text="test"
android:textSize="20sp"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"/>
You can modify your custom_tab as much as you want to. The code above is just an example.
This is the result on the emulator:

First create a custom_tab_layout.xml and put a Textview inside it:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:id="#+id/tab"
android:text="Tab1"
android:textColor="#color/colorAccent"
android:drawableLeft="#mipmap/ic_launcher"
android:textSize="#dimen/tab_label"
android:fontFamily="#string/font_fontFamily_medium"/>
here the trick is android:drawableLeft="#mipmap/ic_launcher"
and in activity:
TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab_layout, null);
tabLayout.getTabAt(0).setCustomView(tabOne);

Unable to arrange android tabs in a proper sequence

Hello all I simply want to achieve this.But I am not being able to achieve this
I did this to achieve this
<?xml version="1.0" encoding="utf-8"?>
<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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#42474b"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbarlogo"
android:src="#mipmap/toolbarlogo"
android:layout_width="wrap_content"
android:layout_marginRight="200dp"
android:layout_height="46dp"
/>
</android.support.v7.widget.Toolbar>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#494e51"
android:gravity="center_vertical"
android:paddingLeft="40dp"
android:textSize="10dp"
android:textColor="#fff"
android:text="The Ongoing survey closes on Dec 31,2016 at 2:00pm GMT"
/>
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#fff"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabTextAppearance="#style/MineCustomTabText"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:background="#drawable/innerpg_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
and this is my class file
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private int[] tabIcons = {
R.drawable.ongoing,
R.drawable.upcoming,
R.drawable.results
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
for(int i=0; i < tabLayout.getTabCount(); i++) {
View tab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(i);
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
p.setMargins(10, 10, 50, 30);
tab.requestLayout();
}
}
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new Ongoing(), "Ongoing");
adapter.addFrag(new Upcomming(), "Upcomming");
adapter.addFrag(new Result(), "Result");
viewPager.setAdapter(adapter);
}
public int getStatusBarHeight() {
int result = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.settings:
return true;
}
return super.onOptionsItemSelected(item);
}
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 addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
Using above code I am getting tab text below the icon(i mean in two different line).THe next issue is I have set the margin but I dont know how to set the color of margin.The final issue is I want to change the background color of active tab to yellow as shown in image.Please help me fix this issue

try this
private void setupTabIcons() {
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.custom_view, null, false);
((TextView) view1.findViewById(R.id.text)).setText("Tab1");
((ImageView) view1.findViewById(R.id.image)).setImageResource(tabIcon[0]);
View view2 = inflater.inflate(R.layout.custom_view, null, false);
((TextView) view2.findViewById(R.id.text)).setText("Tab2");
((ImageView) view2.findViewById(R.id.image)).setImageResource(tabIcon[0]);
View view3 = inflater.inflate(R.layout.custom_view, null, false);
((TextView) view3.findViewById(R.id.text)).setText("Tab3");
((ImageView) view3.findViewById(R.id.image)).setImageResource(tabIcon[0]);
tabLayout.getTabAt(0).setCustomView(view1);
tabLayout.getTabAt(1).setCustomView(view2);
tabLayout.getTabAt(2).setCustomView(view3);
your custom view will look like
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

You can Use android:drawableLeft to display drawable on left of
textview properly.
For Different backgroundColor for Different state You can use
android:background for different color state like this

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"