Tablayout Tab Selection

Customize the selected tab in TabLayout

Simple Solution

Use app:tabIndicator instead of app:tabBackground

<TabLayout
    app:tabIndicator="@drawable/tab_dot"
    app:tabIndicatorHeight="8dp">

Note that use at least double app:tabIndicatorHeight of tab thinkness (4dp) to make that fully visible.

TabLayout Tab select issue

Can inflate custom view

    View view = LayoutInflater.from(this).inflate(R.layout.icon_tab, null);
    AppCompatTextView tv = (AppCompatTextView) view.findViewById(R.id.tab);
    ImageView imgTab1 = (ImageView) view.findViewById(R.id.imgTab);
    imgTab1.setImageResource(R.drawable.icon_tab_search);
    imgTab1.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    tv.setText(titles[0]);
    tabLayout.getTabAt(0).setCustomView(view);

Layout icon_tab

<?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="@dimen/custom_tab_layout_height"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="center"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="50dp"
            android:layout_height="50dp">

            <ImageView
                android:id="@+id/imgTab"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:padding="12dp"
                android:scaleType="centerInside"
                android:src="@drawable/ic_notification"
                android:adjustViewBounds="true"/>

            <android.support.v7.widget.AppCompatTextView
                android:id="@+id/lblCount"
                android:layout_width="17dp"
                android:layout_height="17dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="10dp"
                android:layout_gravity="end"
                android:visibility="gone"
                android:background="@drawable/shape_tab"
                android:gravity="center"
                android:text="99"
                android:textSize="10sp"
                android:textColor="@color/white"/>

        </FrameLayout>

        <android.support.v7.widget.AppCompatTextView
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:gravity="center"
            android:id="@+id/tab"
            android:ellipsize="end"
            android:singleLine="true"
            android:text="@string/app_name"
            android:drawablePadding="3dp"
            android:textColor="@color/item_tablayout"
            android:textSize="10sp"/>

    </LinearLayout>

</LinearLayout>

// folder res/color/item_tablayout.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="@color/white"/>
    <item android:state_focused="true" android:color="@color/white"/>
    <item android:state_selected="true" android:color="@color/white"/>
    <item android:color="@color/skyblue_button"/>

</selector>

Android TabLayout select first Tab on Startup

I got it. The solution is simple, use (once) onTabReselected and overwrite listener there.

tabLayout.setOnTabSelectedListener(new OnTabSelectedListener() {

    @Override
    public void onTabSelected(Tab tab) {
        selectTab(tab);
    }

    private void selectTab(Tab tab) {
        // do something                 
    }

    @Override
    public void onTabReselected(Tab tab) {
        if (tab.getPosition() == 0) {
            selectTab(tab);

            tabLayout.setOnTabSelectedListener(new OnTabSelectedListener() {

                @Override
                public void onTabSelected(Tab tab) {
                    selectTab(tab);
                }

                @Override
                public void onTabReselected(Tab arg0) {                             
                }

                @Override
                public void onTabUnselected(Tab arg0) {                             
                }
            });

        }
    }

    @Override
    public void onTabUnselected(Tab tab) {
    }

});

How to RE-SELECT tab in TabLayout programmatically?

This is how I got my tabs working

Layout for tabs:

 <?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="wrap_content"
        android:orientation="vertical"
        android:background="#ffffff">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:layout_collapseMode="pin"
            android:background="#000000"
            app:titleTextColor="#ffffff"

            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/PopupMenuStyle">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/textview"
                android:textColor="@color/colorTrueWhite"/>

        </android.support.v7.widget.Toolbar>

        <!-- our tablayout to display tabs  -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorBlack"
            android:minHeight="?attr/actionBarSize"

            app:tabIndicatorColor="@color/colorTrueWhite"
            app:tabIndicatorHeight="5dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <!-- View pager to swipe views -->

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"/>

    </LinearLayout>

Activity using that layout:

public class Main2Activity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    private TabLayout tabLayout;
    public static ViewPager viewPager;
    public static Context ctx;
    Pager adapter;
    public static int expired, paid;
    Boolean isConnection;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(tb);

        TextView tv = (TextView) findViewById(R.id.textview);

        //getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        ctx = getApplicationContext();

        StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
        StrictMode.setThreadPolicy(policy);

        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        viewPager = (ViewPager) findViewById(R.id.pager);

        tabLayout.addTab(tabLayout.newTab().setText("title1"));
        tabLayout.addTab(tabLayout.newTab().setText("title2"));
        tabLayout.addTab(tabLayout.newTab().setText("title3"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        tabLayout.setupWithViewPager(viewPager);

        adapter = new Pager(getSupportFragmentManager(), tabLayout.getTabCount(), ctx);
        viewPager.setAdapter(adapter);

        if(some condition)
        {
            viewPager.setCurrentItem(2);
        }
        else
        {
            viewPager.setCurrentItem(1);
        }
        viewPager.setOffscreenPageLimit(2);

        tabLayout.addOnTabSelectedListener(this);

        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        for (int j = 0; j < tabsCount; j++) {
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
            int tabChildsCount = vgTab.getChildCount();
            for (int i = 0; i < tabChildsCount; i++) {
                View tabViewChild = vgTab.getChildAt(i);
                if (tabViewChild instanceof TextView) {
                    ((TextView) tabViewChild).setTypeface(Typeface.DEFAULT, Typeface.BOLD);
                }
            }
        }
    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }

}

Pager code:

public class Pager extends FragmentStatePagerAdapter
{
    int tabcount;
    Context ctx;
    private String [] Titles = {"title1", "title2", "title3"};

    public Pager(FragmentManager fm, int tabcount, Context ctx)
    {
        super(fm);
        this.tabcount = tabcount;
        this.ctx = ctx;
    }

    @Override
    public int getCount() {
        return tabcount;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return Titles[position];
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {

            case 0:
                Tab1 tab1 = new Tab1();
                return tab1;

            case 1:
                Tab2 tab2 = new Tab2();
                return tab2;

            case 2:
                Tab3 tab3 = new Tab3();
                return tab3;

            default:
                return null;
        }
    }

}

TabLayout with ViewPager on new tab selection previous tab text disappers

It basically does what you wrote in your code.

tabLayout.addOnTabSelectedListener(
                    new TabLayout.OnTabSelectedListener() {
                        @Override
                        //as tab 2 selected it set text to tab 2
                        public void onTabSelected(TabLayout.Tab tab) {
                            selected.setText(tab.getText());
                            tab.setCustomView(selected);
                        }
    
                        @Override
                        public void onTabUnselected(TabLayout.Tab tab) {
     //as tab 1 unselected it set NO text to tab 1 in it 
                            unselected.setText(tab.getText());
                            tab.setCustomView(unselected);

Why to set CustomView every time when you just need to change the typeface?

I have an Kotlin code that was converted to JAVA code, it looks like shit in JAVA, but it works:

 private void setTypefaceToTab(Context context, TabLayout tabLayout, TabLayout.Tab tab, int stylem) {
            if (tab != null && context != null) {
                try {
                     View var10000 = ((ViewGroup)tabLayout.getChildAt(0)).getChildAt(tab.getPosition());
                    LinearLayout layout = (LinearLayout)var10000;
                    var10000 = layout.getChildAt(1);
                    TextView tabTextView = (TextView)var10000;
                    tabTextView.setTextSize (***Text Size***);
                    tabTextView.setTypeface(Typeface.create("sans-serif-condensed",stylem));
                } catch (Exception var7) {
                    Log.d ("EXC",var7.toString ());
                }
            }
        }

Then just use it at tabselectedlistener and in onCreate to set typeface for the first selected tab:

protected void onCreate(Bundle savedInstanceState) {
...
 setTypefaceToTab(context,tablayout, tablayout.getTabAt (tablayout.getSelectedTabPosition ()),Typeface.BOLD_ITALIC);
...
}

and in tabListener:

  private void tabListener(){
            tablayout.addOnTabSelectedListener (new TabLayout.OnTabSelectedListener () {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                            setTypefaceToTab(context,tablayout,tab,Typeface.BOLD_ITALIC);
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    setTypefaceToTab(context,tablayout,tab,Typeface.NORMAL);
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    
                }
            });
        }

Hope it is what you wanted

Selected tab in TabLayout is not shown on screen after returning to app

Remove .detach() and .attach() from on pause and move .attach() to onCreateView()

@Override
public void onResume() {
    super.onResume();
    viewPager.setCurrentItem(currentPage, false);
}

@Override
public void onPause() {
    super.onPause();
    currentPage = viewPager.getCurrentItem();
}

it's not necessary because garbage collection automatedly does so, but itconsidered as best practice

@Override
public void onDestroy() {
    super.onDestroy();
    tabLayoutMediator.detach();
}

---

Related Topics