Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25535] Android: Support DrawerLayout with Ti.UI.TabGroup

GitHub Issuen/a
TypeImprovement
PriorityCritical
StatusResolved
ResolutionWon't Fix
Resolution Date2018-09-09T21:23:29.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAndroid
Labelsandroid, drawerlayout, material-design, tabGroup, tabs
ReporterGuillermo Figueras
AssigneeUnknown
Created2017-11-19T17:33:41.000+0000
Updated2019-08-15T21:02:08.000+0000

Description

As far as I know, it is not possible to use tabs and a drawer menu simultaneously in Appcelerator Titanium. It would be great if those two elements could be combined. Material guidelines: https://material.io/guidelines/patterns/navigation.html#navigation-combined-patterns (see "Combined patterns" section, the part where it says "Side nav and tab combinations", or just check the images I attached).

Attachments

FileDateSize
patterns-navigation-patterncombinations7.png2017-11-19T17:33:28.000+000020371
patterns-navigation-patterncombinations8.png2017-11-19T17:33:28.000+000026408

Comments

  1. Sharif AbuDarda 2017-11-19

    Hello, Can you share some native docs on this?
  2. Guillermo Figueras 2017-11-20

    I could not find any native docs, the only thing I found was the link from the Material guidelines that I posted. Anyways, official Google apps like Play Store work like this, using tabs and a navigation drawer menu at the same time: https://imgur.com/a/4Tg6F If you need some code, you can check this sample app I found on GitHub: https://github.com/lvaccaro/Android-Sliding-Tabs-And-Navigation-Drawer-With-Material-Design
  3. Guillermo Figueras 2018-03-29

    Any news on this? Or at least someone has some kind of workaround to use the navigation drawer with tabs?
  4. Joshua Quick 2018-03-29

    We don't plan on supporting this with a TabGroup since it has no root view to add a DrawerLayout overlay view to. But that said, you can implement what you want via a ScrollableView instead with scrolling disabled. A ScrollableView is really just a paginated view just like TabGroup, but without the tabs. Titanium's native implementation between them is nearly the same on Android. So, it's perfect for this type of UI. Here's how to do it...
       // Creates a page for a ScrollableView.
       function createPage(title) {
       	var page = Ti.UI.createView();
       	page.add(Ti.UI.createLabel({ text: title + " View" }));
       	page.pageTitle = title; // Add custom property used to name item in DrawerLayout.
       	return page;
       }
       
       // Set up a window with a ScrollableView that doesn't scroll.
       // We'll select ScrollableView pages via a DrawerLayout instead.
       var window = Ti.UI.createWindow();
       var scrollableView = Ti.UI.createScrollableView({
       	views: [
       		createPage("Page 1"),
       		createPage("Page 2"),
       		createPage("Page 3"),
       		createPage("Page 4"),
       		createPage("Page 5"),
       	],
       	scrollingEnabled: false,
       	showPagingControl: false,
       });
       window.add(scrollableView);
       
       // Create the drawer layout.
       var drawerView = Ti.UI.createView({
       	backgroundColor: "white",
       	layout: "vertical",
       });
       scrollableView.views.forEach(function(page) {
       	var button = Ti.UI.createButton({ title: page.pageTitle });
       	button.addEventListener("click", function(e) {
       		scrollableView.currentPage = scrollableView.views.indexOf(page);
       		drawerLayout.closeLeft();
       	});
       	drawerView.add(button);
       });
       var drawerLayout = Ti.UI.Android.createDrawerLayout({
       	leftView: drawerView,
       });
       window.add(drawerLayout);
       
       // Set up ActionBar hamburger button to toggle drawer layout.
       window.addEventListener("open", function(e) {
       	var actionBar = window.activity.actionBar;
       	if (actionBar) {
       		actionBar.displayHomeAsUp = true;
       		actionBar.homeButtonEanbled = true;
       		actionBar.onHomeIconItemSelected = function(e) {
       			drawerLayout.toggleLeft();
       		};
       	}
       });
       
       // Show the window.
       window.open();
       
  5. Guillermo Figueras 2018-04-03

    @Joshua Quick thanks, I'll give it a try.
  6. Riduanul Islam 2018-07-02

    Do we have any progress or any workaround, we can update to the customer?
  7. Joshua Quick 2018-07-02

  8. Hans Knöchel 2018-09-09

    Resolving as "Won't Fix". In addition, SDK 7.5.0 will support a tabbed-bar for Android that behaves like a tab-group (in fact there will be two different styles: top and bottom tabs).
  9. Matthew Delmarter 2018-09-09

    @hans I am very much looking forward to 7.5 and to seeing examples of the bottom aligned tabbed-bar behaving like a tab-group. So far I have been very iOS focussed, where the tab-group loads windows and is a very structured top-level nav item. I am really hoping to see example code for Ti 7.5 that make it easy to transition an iOS tab-group across to the bottom aligned tab-group on Android, if that is possible.
  10. Joshua Quick 2018-09-10

    [~mdelmarter], keep an eye on ticket [TIMOB-26354]. That's the ticket where we'll be adding a new bottom bar layout style to TabGroup. Thanks for your feedback. :)

JSON Source