Android Question How to achieve Material Design Toolbar with Sliding Tabs?

RandomCoder

Well-Known Member
Licensed User
Longtime User
I'm using the AppCompat library and have followed the Material design tutorials by @corwin42 to add a Toolbar to my Activity and allocate it as the Actionbar. Now I would like to create this kind of menu (as shown in the Material guidelines info)....
components_tabs_usage_desktop5.png

If at all possible I would like to keep the Menu Title and a Subtitle, I'd also like to include a few menu icons and the overflow menu. Similar to the example demonstrated above.
My attempt at adding the TabHost view to the Toolbar has failed and I'm thinking that maybe this isn't the correct way to do it?
Tab%20Host%20ToolBar_zpsjoylelfq.png

As you can see, the tabs do not sit along the bottom of the ToolBar, they are also pushed across to the right with no way to scroll the 8th tab into view. The Title and Subtitle have also disappeared.
My next attempt was to add the TabHost to the Activity directly under the Toolbar, as shown below...
Tab%20Host%20Activity_zpswsxwrxvt.png

This is starting to look better! But please advise if I am approaching the problem correctly? I realise that I need to get rid of the drop shadow on the Toolbar and also adjust the colour of the TabHost to match the Toolbar. But any ideas on how I get the tabs to remain a fixed width and scroll once too many have been added to the screen? I've been adding more tabs to see if it eventually reverts to a scrolling mode but it just seems to make the text size and each Tab smaller instead. Any pointers as to how I can achieve the Material Design menu look as shown above? If scrolling tabs are not advisable then I would also settle for this style of Toolbar...
components_tabs_usage_desktop2.png

Thanks in advance of any advice offered.
 
Top