How to guarantee my actionbar tabs are always visible for all screen sizes?

Question

I'm trying to copy the tabs in the github app:

However, my tabs are way too long:

I know I can set a custom view for a tab, and I think I could mess around with the view, style, text size, etc to make all four tabs fit.

However, if I do that what guarantee do I have that all the tabs will fit for users with smaller screens? How can I be sure that the tabs will never run off the screen?

Answer 1

I don't think you can guarantee that the tabs won't disappear. By using four fixed tabs, you've made a conscious design decision. Tabs become just become scrollable when there's not enough space.

According to this doc:

Fixed tabs are displayed with equal width, based on the width of the widest tab label. If there is insufficient room to display all tabs, the tab labels themselves will be scrollable. For this reason, fixed tabs are best suited for displaying 3 or fewer tabs.

My suggestion is that you ditch the text and switch to icons if that won't be too unintuitive for your users. Define an XML resource for your tabs, nick some icons from wherever you normally nick your icons and have at it.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/my_icon_focused"
          android:state_selected="true" />
    <item android:drawable="@drawable/my_icon" />
</selector>