Building equivalent of android's split action bars


#1

Hi,

I am new to ionic and wish to develop split level action bar similar to the design pattern in Android. The exact outcome is best exemplified in this image (from NDTV’s mobile app):

.

I need help to figure out how to build:

  1. The main action bar that displays the option for Menu, the “News” title and the primary icons.
  2. The top bar that lists the various topics under news (Top Stories, Latest Stories, Opinion. Blogs…), - this contains a large number of topics and hence needs to be scrollable horizontally.
  3. Finally the bottom bar - not shown in this image - which will appear conditionally.

I experimented with ion-header and ion-nav-bar, and ran into the following issues:

  • I thought i could use ion-header for the main action bar and ion-nav-bar for the top bar, but could not use both at the same time.
  • I was able to use ion-header and ion-nav to place icons, titles and so on, but was not able to place a large number of items and make them scroll horizontally.
  • I did not get far enough to the bottom bar, i suppose i could use ion-footer, because i want to resolve the other two bars first.

I would like to avoid using the side menu unless there is no way to achieve what i have outlined above.
Any help would be appreciated.

Thanks,

YDPHIL