title: Flex mobile bottom and top tabbed views on the same view
body: <p>I want to add both bottom and top tab bars on the same view - its a flex mobile view. I tried this with  but when I create two tab bars on a view only one of them is viewed - the bottom one. But if I delete the bottom one it displays the upper tab bar. Any suggestions on displaying both of them in the same screen?</p>
  
  <pre><code>&lt;s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx"
              title=""&gt;
  
      &lt;s:TabbedViewNavigator id="tb_hastaUp" width="100%" height="100%" skinClass="skins.TabbedViewNavigatorSkin"&gt;
          &lt;s:ViewNavigator label="view1" width="100%" height="100%" firstView="views.view1" /&gt;
          &lt;s:ViewNavigator label="view2" width="100%" height="100%" firstView="views.view2" /&gt;
          &lt;s:ViewNavigator label="view3" width="100%" height="100%" firstView="views.view3" /&gt;
      &lt;/s:TabbedViewNavigator&gt;
  
  
  
      &lt;s:TabbedViewNavigator id="tb_hastaBottom" width="100%" height="100%" skinClass="spark.skins.mobile.TabbedViewNavigatorSkin"&gt;
          &lt;s:ViewNavigator label="view1" width="100%" height="100%" firstView="views.view1"/&gt;
          &lt;s:ViewNavigator label="view2" width="100%" height="100%" firstView="views.view2" /&gt;
          &lt;s:ViewNavigator label="view3" width="100%" height="100%" firstView="views.view3" /&gt;
  
      &lt;/s:TabbedViewNavigator&gt;
  
   &lt;/s:View&gt;
  </code></pre>
  
  <p>And here is my TabbedViewNavigatorSkin:</p>
  
  <pre><code>override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
  {
      super.layoutContents(unscaledWidth, unscaledHeight);
  
      var tabBarHeight:Number = 0; 
  
      if (tabBar.includeInLayout)
      {
          tabBarHeight = Math.min(tabBar.getPreferredBoundsHeight(), unscaledHeight);
          tabBar.setLayoutBoundsSize(unscaledWidth, tabBarHeight);
          tabBar.setLayoutBoundsPosition(0, 0);
          tabBarHeight = tabBar.getLayoutBoundsHeight(); 
  
          // backgroundAlpha is not a declared style on ButtonBar
          // TabbedViewNavigatorButtonBarSkin implements for overlay support
          var backgroundAlpha:Number = (_isOverlay) ? 0.75 : 1;
          tabBar.setStyle("backgroundAlpha", backgroundAlpha);
      }
  
      if (contentGroup.includeInLayout)
      {
          var contentGroupHeight:Number = (_isOverlay) ? unscaledHeight : Math.max(unscaledHeight - tabBarHeight, 0);
          contentGroup.setLayoutBoundsSize(unscaledWidth, contentGroupHeight);
          contentGroup.setLayoutBoundsPosition(0, tabBarHeight);
      }
  }
  </code></pre>
  
  <p>I want to achieve a view like the below:</p>
  
  <p><img src="https://i.stack.imgur.com/9IexP.jpg" alt="enter image description here"></p>