Develop Reference

how to override and display title of tabs in viewpager2 in tablayout

I am using a TabLayout inside a Fragment. The content of the TabLayout (made of 2 fragments) is displayed but not the title of the tabs. I believe it's a layout problem but i'm not sure on how to fix it.
Also what would be the overrided method for ViewPager2 that was used in ViewPager (getPagetitle) ?
main Fragment
public class CommunityFragment extends Fragment {
private TabLayout tbL;
private ViewPager2 vp;
private RecipeViewPagerAdapter rvpa;
public CommunityFragment() {
// Required empty public constructor
}
public static CommunityFragment newInstance(){
return new CommunityFragment();
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View rootView = inflater.inflate(R.layout.fragment_community, container, false);
tbL = rootView.findViewById(R.id.tabL);
vp = rootView.findViewById(R.id.pager);
rvpa = new RecipeViewPagerAdapter(this);
vp.setAdapter(rvpa);
rvpa.addFragment(new AllFragment(),"All time");
rvpa.addFragment(new DayFragment(),"Today");
new TabLayoutMediator(tbL, vp, new TabLayoutMediator.TabConfigurationStrategy() {
#Override public void onConfigureTab(#NonNull TabLayout.Tab tab, int position) {
//////title????
}
}).attach();
return rootView;
}
}
Adapter
public class RecipeViewPagerAdapter extends FragmentStateAdapter {
private ArrayList<Fragment> listF = new ArrayList<>();
private ArrayList<String> listT = new ArrayList<>();
public RecipeViewPagerAdapter(#NonNull Fragment fragment) {
super(fragment);
}
#NonNull
#Override
public Fragment createFragment(int position) {
return listF.get(position);
}
//new method ????
public CharSequence getPageTitle(int position){
return listT.get(position);
}
#Override
public int getItemCount() {
return listT.size();
}
public void addFragment(Fragment frag, String title){
listF.add(frag);
listT.add(title);
}
}
fragment layout
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".fragments.CommunityFragment">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorColor="#color/yellowCool"/>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>

put this in your main activity....
myAdapter=new FragmentAdapter(this);
myViewPager2.setAdapter(myAdapter);
String [] tabTtiles={"Home","Chat","Notification","Account"};
new TabLayoutMediator(myTabLayout, myViewPager2,(myTabLayout, position) ->
myTabLayout.setText(tabTtiles[position])).attach();

Your tabLayout doesn't display. Use this:
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" // add this line
/>
TabLayoutMediator:
new TabLayoutMediator(tbL, vp, new TabLayoutMediator.TabConfigurationStrategy() {
#Override public void onConfigureTab(#NonNull TabLayout.Tab tab, int position) {
if(position == 0)
tab.setText("All time");
else
tab.setText("Today");
}
}).attach();

You can use the following adapter for the viewPager2:
public class ViewPagerAdapter extends FragmentStateAdapter {
private static final int CARD_ITEM_SIZE = 10;
public ViewPagerAdapter(#NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
#NonNull #Override public Fragment createFragment(int position) {
return CardFragment.newInstance(position);
}
#Override public int getItemCount() {
return CARD_ITEM_SIZE;
}
}
on the mainActivity you need to have something inline with the following:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.view_pager);
tabLayout = findViewById(R.id.tabs);
viewPager.setAdapter(new ViewPagerAdapter(this));
new TabLayoutMediator(tabLayout, viewPager,
new TabLayoutMediator.TabConfigurationStrategy() {
#Override public void onConfigureTab(#NonNull TabLayout.Tab tab, int position) {
tab.setText("Tab " + (position + 1));
}
}).attach();
}
}

As per documentation:
The TabLayoutMediator object also handles the task of generating page
titles for the TabLayout object, which means that the adapter class
does not need to override getPageTitle():
And to do that:
TabLayout tabLayout = view.findViewById(R.id.tab_layout);
new TabLayoutMediator(tabLayout, viewPager,
(tab, position) -> tab.setText("OBJECT " + (position + 1))
).attach();

I want to show tab bar icon left side of text

I want to show icon left side of the text but the problem is that the icon is showing above the text. it's taking much more space.
I want keep the icon left sode of the text(title) . what should i do?
The main activity is given below
java.class
public class Tabsadar extends AppCompatActivity {
ExpandableRelativeLayout
expandableLayout1,
expandableLayout2,
expandableLayout3,
expandableLayout4;
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private int[] tabIcons = {
R.drawable.ic_action_name,
R.drawable.thanatottho,
R.drawable.proyojonio
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabsadar);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.container);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
}
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 tabsadarc1(), "ফিচার");
adapter.addFrag(new tabsadarc2(), "তথ্যাবলি");
adapter.addFrag(new tabsadarc3(), "প্রয়োজনীয়");
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 addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}'
i want something like that
in my case something happend like that
any solution?

Just use app:tabInlineLabel="true"
Like:-
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabInlineLabel="true"
app:tabGravity="fill"/>

As per your requirement I'll suggest you to create a custom view for tabs.
custom_tab_view.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"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_6sdp"
android:background="#drawable/ic_menu_gallery"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="#dimen/_3sdp"
android:textColor="#drawable/tab_text_selector"
android:textSize="#dimen/_15sdp" />
</LinearLayout>
</RelativeLayout>
And this layout of custom tab with PagerAdapter as
//On Create
for (int i = 0; i < mPagerAdapter.getCount(); i++) {
View customView = mPagerAdapter.getCustomView(getActivity(), i);
mainTabLayout.getTabAt(i).setCustomView(customView);
}
//Pager Adapter
public static class ViewPagerAdapter extends SmartFragmentStatePagerAdapter {
private List<Map<String, Object>> maps = new ArrayList<>();
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
public View getCustomView(Context context, int pos) {
View mView = LayoutInflater.from(context).inflate(R.layout.custom_tab_view, null);
TextView mTextView = (TextView) mView.findViewById(R.id.textView);
ImageView imageView = (ImageView) mView.findViewById(R.id.imageView);
mTextView.setGravity(Gravity.CENTER);
mTextView.setTypeface(Typeface.createFromAsset(context.getAssets(),
"fonts/aller_regular.ttf"));
mTextView.setText(getPageTitle(pos));
return mView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container, position, object);
}
#Override
public CharSequence getPageTitle(int position) {
return fragments[position];
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new CompletedTaskFragment();
case 1:
return new PendingTaskFragment();
}
return null;
}
#Override
public int getCount() {
return 2;
}
}
Hope it'll help you.

Replace fragment in a ViewPager

I am trying to replace one of the fragments inside the ViewPager with another one.
The pager is composed by two pages: Fragment1 , Fragment2
inside the fragment2, there is a button. When I click on the button, it will replace the current fragment, Fragment2, with Fragment3. For Fragment2, I want it to be destroyed and not exist anymore.
The implementation Code:
Layout for activity_main:
<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/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
main_activity :
private SectionsPageAdapter mSectionsPageAdapter;
private ViewPager mViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mSectionsPageAdapter = new SectionsPageAdapter(getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.container);
setupViewPager(mViewPager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
mSectionsPageAdapter.clearAll();
}
private void setupViewPager(ViewPager viewPager) {
SectionsPageAdapter adapter = new SectionsPageAdapter(getSupportFragmentManager());
adapter.addFragment(new Tab1Fragment(), "Tab 1");
adapter.addFragment(new Tab2Fragment(), "Tab 2");
adapter.notifyDataSetChanged()
viewPager.setAdapter(adapter);
}
The Adapter:
public class SectionsPageAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
public SectionsPageAdapter(FragmentManager fm) {
super(fm);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
}
Fragment2:
public class Tab2Fragment extends Fragment {
private static final String TAG = "Tab2Fragment";
private Button btnTEST;
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab2_fragment,container,false);
btnTEST = (Button) view.findViewById(R.id.btnTEST2);
btnTEST.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(getActivity(), "TESTING BUTTON CLICK 2", Toast.LENGTH_SHORT).show();
}
});
return view;
}
}
Update :
I tried to implement the method clearAll in the adapter put I noticed the mFragmentList.size() return 0 why ?
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
Log.d("tmz",mFragmentList.size()+" From addFragment"); // return 1 & 2
}
#Override
public int getCount() {
return mFragmentList.size();
Log.d("tmz",mFragmentList.size()+"getCount "); // return 2
}
public void clearAll(){
Log.d("tmz",mFragmentList.size()+" From addFragment"); // return 0 why ?
for(int i=0; i<mFragmentList.size(); i++)
fragMan.beginTransaction().remove(mFragmentList.get(i)).commit();
mFragmentList.clear();
mFragmentList=new ArrayList<Fragment>();
notifyDataSetChanged();
}

remove from mFragmentList (and mFragmentTitleList) and add new, then call notifyDataSetChanged? also add to your SectionsPageAdapter for force redrawing ViewPager when notified.
public int getItemPosition(Object object) {
return POSITION_NONE;
}
not most efficient, but sufficient for your purposes. for adapter:
public void removeLastFragment() {
if(mFragmentList.size()==0)
return;
mFragmentList.remove(mFragmentList.size()-1);
mFragmentTitleList.remove(mFragmentTitleList.size()-1);
}

For zero it was because
SectionsPageAdapter adapter = new SectionsPageAdapter(getSupportFragmentManager());
was repeated twice, and I solve my issue with use replace fragment inside the tab

Tabs with in the Tabs in android studio

I just want to implements Tabs with in the Tabs. If it is possible than please share the code
See image below for reference

This is the answer of my question. I set the tabs with in the Tabs. Basically set the tab in fragment:
My java code:
public class SD extends Fragment {
View view;
PagerAdapter adapter;
public SD() {
// Required empty public constructor
}
private void setupViewPager(ViewPager viewPager) {
///Here we have to pass ChildFragmentManager instead of FragmentManager.
adapter = new PagerAdapter(getChildFragmentManager());
adapter.addFragment(new Sim1Detail(), "Sim 1");
adapter.addFragment(new Sim2Detail(), "Sim 2");
viewPager.setAdapter(adapter);
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.sd, container, false);
super.onCreate(savedInstanceState);
// ButterKnife.bind(getActivity(), view);
final ViewPager viewPager = ButterKnife.findById(view, R.id.viewpager);
setupViewPager(viewPager);
TabLayout tabLayout = ButterKnife.findById(view, R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
return view;
}
#Override
public void onDestroyView() {
super.onDestroyView();
// ButterKnife.unbind(getActivity);
}
static class PagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragments = new ArrayList<>();
private final List<String> mFragmentTitles = new ArrayList<>();
public PagerAdapter(FragmentManager fm) {
super(fm);
}
public void addFragment(Fragment fragment, String title) {
mFragments.add(fragment);
mFragmentTitles.add(title);
}
#Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
#Override
public int getCount() {
return mFragments.size();
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitles.get(position);
}
}
}
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
here it is ..

How can I add Tabs & Fragment dynamically

How can I add Tabs & Fragment dynamically ?
My code :
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
for (int i = 0; i < 4; i++) {
adapter.addFrag(new TabFragment(), "Tab"+i);
}
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 addFrag(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
Tab Fragment
public class TabFragment extends ListFragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.activty_listview,container, false);
listView = (ListView) rootView.findViewById(android.R.id.list);
return rootView;
}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
}
Suppose my tab names are "Tab1, Tab2, Tab3"
How can I add tabs dynamically according to the Array if I get above and how to tab fragment know which tab selected.
Any suggestions are welcomed.
Thanks in advance:)

<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="fill_parent"
app:tabMode="fixed"
android:background="#ff0000"
app:tabGravity="fill"
android:layout_height="48dp" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_below="#+id/sliding_tabs"
android:background="#android:color/white" />
</RelativeLayout>
Activity:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
int icons[] = {R.mipmap.createuser, R.mipmap.ico_password, R.mipmap.gplus, R.mipmap.fb};
int colors[] = {Color.YELLOW, Color.CYAN, Color.LTGRAY, Color.CYAN};
void initViews() {
TabLayout tabs = (TabLayout) findViewById(R.id.sliding_tabs);
ViewPager pager = (ViewPager) findViewById(R.id.viewpager);
LayoutInflater inflator = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
ArrayList<Fragment> fragments = new ArrayList<>(Arrays.asList(new Fragment1(),new Fragment2(),new Fragment3(),new Fragment4()));
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(),fragments);
pager.setAdapter(adapter);
tabs.setupWithViewPager(pager);
for (int i = 0; i < 4; i++) {
View view = inflator.inflate(R.layout.tabs,null,false);
TextView title = (TextView)view.findViewById(R.id.title);
RelativeLayout layout = (RelativeLayout)view.findViewById(R.id.layout);
ImageView icon = (ImageView)view.findViewById(R.id.icon);
title.setText("Tab" + i);
layout.setBackgroundColor(colors[i]);
icon.setImageResource(icons[i]);
// tabs.getTabAt(i).setCustomView(view);
tabs.getTabAt(i).setIcon(icons[i]);
}
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Adapter:
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Created by rohit.h on 12/21/2015.
*/
public class ViewPagerAdapter extends FragmentPagerAdapter {
String titles[] = {"Tab1", "Tab2", "Tab3", "Tab4"};
private final List<Fragment> fragments;
public ViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
#Override
public Fragment getItem(int position) {
return fragments.get(position);
}
#Override
public int getCount() {
return fragments.size();
}
#Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}

mTabLayout = (TabLayout)rootView.findViewById(R.id.tab_layout);
mTabLayout.addTab(mTabLayout.newTab().setText(getResources().getString(R.string.tab1)));
mTabLayout.addTab(mTabLayout.newTab().setText(getResources().getString(R.string.tab2)));
mTabLayout.addTab(mTabLayout.newTab().setText(getResources().getString(R.string.tab3)));
mTabLayout.addTab(mTabLayout.newTab().setText(getResources().getString(R.string.tab4)));
mTabLayout.addTab(mTabLayout.newTab().setText(getResources().getString(R.string.tab5)));
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
mViewPager = (ViewPager)rootView.findViewById(R.id.pager);
mPagerAdapter = new PagerAdapter
(getActivity().getSupportFragmentManager(), mTabLayout.getTabCount());
mViewPager.setAdapter(mPagerAdapter);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
you can refer this link

A simple solution (but not the best/perfect one) would be to add the fragments to adapter and set the tablayout and adapter to viewpager again at runtime. Will not be clean / might be jerky but will definitely work.
EDIT::
There's a method in FragmentPagerAdapter which is set to viewpager and tablayout as well : notifyDataSetChanged(). Use this method after inserting and removing fragments from pager adapter. I tried this for inserting it works. Should definitely work for removing as well.