I have modified the ViewPagerIndicator Lib, and add support for IconsOnly tabs
https://github.com/JafarKhQ/Android-ViewPagerIndicator
Centering icon on TabPageIndicator
-
03-06-2022 - |
Question
I normally google and research things before asking questions, but this time I failed to find answer in a normal way, so I had to seek your assistance, fellow programmers.
I'm using ViewPagerIndicator, TabPageIndicator class in particular and want to achieve following without modification of library: removing test labels from tabs and horizontally centering icon. While first part is quite trivial (just return null
from getPageTitle()
), the second one left me baffled, as I'm unable to find presumably obvious way to position icons in the center apart from use of margin
parameter, which is totally wrong and unacceptable, as you can imagine.
The most obvious, setting gravity
in vpi_styles.xml
, did not work:
<style name="Widget.TabPageIndicator" parent="Widget">
<item name="android:gravity">center_horizontal|center_vertical</item>
<item name="android:background">@drawable/vpi__tab_indicator</item>
<item name="android:paddingLeft">22dip</item>
<item name="android:paddingRight">22dip</item>
<item name="android:paddingTop">12dp</item>
<item name="android:paddingBottom">12dp</item>
<item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
<item name="android:textSize">12sp</item>
<item name="android:maxLines">1</item>
<item name="android:width">60dp</item>
<item name="android:height">48dp</item>
<item name="android:layout_marginLeft">40dp</item>
</style>
<style name="Widget.IconPageIndicator" parent="Widget">
<item name="android:gravity">center_horizontal|center_vertical</item>
</style>
Solution 2
OTHER TIPS
Unfortunately it seems like I haven't searched thoroughly enough: I used second answer from here and received needed effect by modifying TabPageIndicator.java
file:
Changed
tabView.setCompoundDrawablesWithIntrinsicBounds(iconResId, 0, 0, 0);
to
tabView.setCompoundDrawablesWithIntrinsicBounds(0, iconResId, 0, 0);
and my icon got centered.
What I have done was create a copy of TabPageIndicator and make the necessary changes to represent only Icons and center in the cell.
To use this just copy IconCenterPageIndicator.java from this gist
https://gist.github.com/pedrolaranjeiro/2a0aac0723e44e54c621
to com.viewpagerindicator and follow the XML and the adapter examples to achieve what you are looking for.