Example of general TabItem presentation

TabItem 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: