Method of setting Tab interval in TabLayout (instance explanation)

Using TabLayout with ViewPager is very convenient, but TabLayout still has many things that people complain about.

Here is only how to set the spacing between tabs, I found a lot of methods on the Internet, nothing works with padding and margin, there is no way, if you want to use TabLayout, you have to figure it out yourself. The effect is as follows:

First, the implementation method, since this thing is not easy to set, let's do something on the background, the layout code is as follows:

<android.support.design.widget.TabLayout
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@"+id/tl_download_tabs"
  android:layout_width="wrap_content"
  android:layout_height=""30dp"
  android:layout_marginTop=""10dp"
  android:layout_gravity="center_horizontal"
  android:overScrollMode="never"
  app:tabMode="fixed"
  app:tabPaddingStart=""30dp"
  app:tabPaddingEnd=""30dp"
  app:tabIndicatorHeight="0dp"
  app:tabBackground="@drawable"/download_tab_bg_selector"
  app:tabSelectedTextColor="#000000"
  app:tabTextColor="#ffffff"/>

Secondly, the key point is the background selector, the code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_selected="true">
  <!--<shape>
   <solid android:color="#ffffff"/>
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
  </shape>-->
  <!--To make the tabs within TabLayout have intervals, there is no other setting method found for the time being, and the interval can only be set in the background graphics-->
  <layer-list>
   <item>
    <shape>
     <solid android:color="@android:color/transparent"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#ffffff"/>
    </shape>
   </item>
  </layer-list>
 </item>
 <item android:state_selected="false">
  <!--<shape>
   <solid android:color="#bcbcbc"/>
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
  </shape>-->
  <layer-list>
   <item>
    <shape>
     <solid android:color="@android:color/transparent"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#bcbcbc"/>
    </shape>
   </item>
  </layer-list>
 </item>
</selector>

The commented part is the original selector without intervals, here the background is set with left and right padding directly, the effect is excellent.

Shortcomings: If the interval is too large, there is a slight defect in this method, that is, you can also select the tab by clicking on the blank area.

However, for intervals that are not very large, it is basically not noticeable.

Three, the use of Activity is very simple:

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tl_download_tabs);
  mTabLayout.addTab(mTabLayout.newTab().setText("Downloaded"));
  mTabLayout.addTab(mTabLayout.newTab().setText("Downloading"));
  mTabLayout.setupWithViewPager(mViewPager);

Four, it was originally under the linear layout, placing TabLayout and ViewPager, trying to nest an additional RelativeLayout outside the TabLayout, and found that the text of the Tab did not display. As for the order of addingTab and setupWithViewPager mentioned on the Internet, it is also a pit, as can be seen, it appears, but there are even more absurd situations, two blank ones in front and two normal ones at the end, which is really strange.

Finally, it still needs to be processed in the Adapter, and the following method needs to be rewritten. In fact, this may be more reasonable, at least it can ensure that the number of tabs is consistent with the number of pages of ViewPager.

@Override
  public CharSequence getPageTitle(int position) {
   if(position == 0){
    return "Downloaded";
   } 1{
    return "Downloading";
   }
   return "";
  }

This article based on the TabLayout Tab spacing setting method (example explanation) is all the content that the editor shares with everyone. I hope it can be a reference for everyone, and I also hope everyone will support the Yell Tutorial.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content manually, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)