4 steps to Android Dot TabItemMyrick ChowBlockedUnblockFollowFollowingJun 2Example of general TabItem presentationTabItem is an indicator for showing an icon and a title of the current tab.
It is widely used together with a ViewPager or ViewPager2.
It is always wrapped by a TabLayout, which configure the appearance of each TabItem.
Other than icon and title presentation, there is also a dot presentation which requires some understandings about drawable state list and shape drawable.
In this article, I am going to walk through how to setup the following two dot TabItem styles with only 4 steps.
Style 1:Currently selected TabItem is highlighted discretely.
Style 2:Dot transition is continuous when selected page in ViewPager is changed.
Before startIt is assumed that a TabLayout has been already bounded with a ViewPager or a ViewPager2.
Have a look at the below article for setting up with a ViewPager2.
Android ViewPager2 & TabLayoutViewPager2 is introduced in this year 2019 Google I/O and is a replacement of the old ViewPager, which was created in…medium.
comUnderstanding the setting of TabLayoutTabLayout is a ViewGroup which contains a list of TabItem and configures the position and appearance of each tab.
The following attributes are going to be overridden:1.
app: tabIndicatorInput a drawable reference to configure the height appearance of tab indicator.
Android OS shows a 2dp thick bottom tab indicator by default.
2.
app:tabGravityBy default, a TabLayout fills up its whole space with TabItems.
Just like a LinearLayout with all children having android:weight="1".
This attribute is going to be set to center to group all tabs to the center of TabLayout.
3.
app:tabPaddingStart & app:tabPaddingEndBy default, there are 12dp start and end padding in each TabItem when app:tabGravity is set to be center.
In other words, the minimum tab width is 24dp (12dp x 2).
It is going to be set according to the desired width of each tab.
4.
app:tabBackgroundTab background will be set as a state list drawable with selected and default state.
See below for an example:Step by step — Style 1 TabLayout (Currently selected TabItem is highlighted discretely)1.
app:tabBackground=“@drawable/selector_tab_indicator_dot”Inside selector_tab_indicator_dot.
xml, there are two shape drawables which defines the appearance of the dot at selected and default state.
android:shape=”ring" : change the shape from rectangle (default) to ring with inner radius.
android innerRadius="0dp: defines the ring is filled up with no inner space.
android:thickness="4dp" defines the radius of the dot.
android:useLevel="false" since it is not a LevelListDrawable.
2.
app:tabGravity=”center”Group all TabItems to the center of the TabLayout.
3.
app:tabIndicator=”@null”To hide or disable the tab indicator.
4.
app:tabPaddingStart & app:tabPaddingEnd=”6dp”As mention earlier, there are 12dp default start and end padding in each TabItem.
Overriding these attributes can change the width of TabItem.
Since each dot is having 4dp radius and there should be 2dp horizontal padding, the total width of each TabItem should then be 12dp ((4dp + 2dp) x 2).
DONE!Step by step — Style 2 TabLayout (Dot transition is continuous when selected page in ViewPager is changed.
)The implementation of this TabLayout is similar to the previous style (Currently selected TabItem is highlighted discretely) and basically relies on tab indicator to make the dot transition.
There are only 4 changes, see below:1.
app:tabIndicator=”@drawable/background_tab_indicator”The tab indicator has to be enabled back by setting it with a drawable reference.
<size> is set with a height parameter to define the height of tab indicator.
By default it is 2dp.
2.
app:tabBackground=”@drawable/background_amber_dot_3dp”This style does not require a state list drawable as TabItem background, since the highlighted dot is now handled by tab indicator instead.
3.
app:tabIndicatorColor=”@android:color/holo_red_dark”Tab indicator color has to be set at the View level instead of the shape drawable at the Step 1.
4.
app:tabIndicatorGravity="center"There are totally 4 tab indicator gravities for a TabLayout.
Both center and stretch are both acceptable in this style since the height of indicator has already been defined in the shape drawable at Step 1.
DONE!Conclusion:There are many types of TabLayout designed in the market.
The two TabLayout styles mentioned above are the most common.
Attributes for Style 1 (Currently selected TabItem is highlighted discretely)app:tabBackground= “@drawable/selector_tab_indicator_dot”Define shape drawables for both selected and default states.
app:tabGravity= “center” Horizontally center all TabItems within TabLayoutapp:tabIndicator= “@null” Hide tab indicatorapp:tabPaddingStart & app:tabPaddingEnd= “6dp” Override default horizontal paddingAttributes for Style 2 (Dot transition is added to the current tab)app:tabIndicator= “@drawable/background_tab_indicator_dot_blue” Shape drawable in dot shape and no inner radius.
app:tabBackground= “@drawable/background_amber_dot_3dp”A simple shape drawable instead of a state list drawableapp:tabIndicatorColor= “@android:color/holo_red_dark”Override the tab indicator color.
app:tabIndicatorGravity= “center”Vertically center the tab indicator within the TabItem boundaryapp:tabGravity= “center” Horizontally center all TabItems within TabLayoutapp:tabPaddingStart & app:tabPaddingEnd= “6dp” Override default horizontal paddingFurther readings:Google documentation — Shape drawableMaterial Design — TabLayoutSetup between TabLayout and ViewPager2Android ViewPager2 & TabLayoutViewPager2 is introduced in this year 2019 Google I/O and is a replacement of the old ViewPager, which was created in…medium.
com4.
Available attributes of TabLayout and TabItemAndroid TabLayout and TabItemStyling a TabLayout is not as easy as you think.
Google official documentation does not sync to Material Component…medium.
comThank you for reading!.????.Please leave a comment if you have any.
.