[TIMOB-26354] Android: Refactor TabGroup and introduce new style #10358

ypbnv · 2018-09-28T14:07:11Z

JIRA: https://jira.appcelerator.org/browse/TIMOB-26354

Description:
Refactor the implementation of TabGroup - remove deprecated ActioBar tabs UI and replace it with TabLayout. Introduce a new style for using BottomNavigationView. A more detailed description will be available once I am done with everything.

Currently still trying to fix the removal of tabs before opening the TabGroup by simplifying the relation between the tab proxies added and their TiUiAbstractTab counterparts.

Update:
How things work after the refactoring:

all the code related to the deprecated ActionBar Tabs UI has been removed - that way all the problems with themes originating from ActionBar are no longer present. For instance now TabGroup can be used with a Theme.AppCompat.NoTitleBar and children of it without issues;
handling of the ViewPager that is used to show the Tabs is moved to TiUIAbstractTabGroup;
TiUIAbstractTabGroup provides an interface for communication with different "controllers";
this allows us to have the separate styles as different implementations making it easier to support and introduce new styles;
backwards compatibility with the JS code for the TabGroup implementation before this refactoring. Not defining a style at creation falls back to using the DEFAULT style which is as close as possible the ActionBar UI, but following the Material Design Guidelines ( one difference is the position of the icon relative to the title );
fixes the behavior of some properties ( tabsBackgroundColor, tabsFocusedBackgroundColor ), adds some new properties ( style, shiftMode ) and brings parity with iOS for other ( titleColor, activeTitleColor );

Note: The constants for style will be used from the same namespace for the TabbedBar component. I will change them in the PR for it once this gets the green light for merging.

Tickets that should be resolved by this refactoring:

https://jira.appcelerator.org/browse/TIMOB-24961
https://jira.appcelerator.org/browse/TIMOB-19695
https://jira.appcelerator.org/browse/TIMOB-15496
https://jira.appcelerator.org/browse/TIMOB-23271
https://jira.appcelerator.org/browse/TIMOB-25200
https://jira.appcelerator.org/browse/TIMOB-17931
https://jira.appcelerator.org/browse/TIMOB-16900 ( this one was already fixed, listing it here as the same behavior is kept )

Test case:
app.js

var mainWindow = Ti.UI.createWindow({
		layout: 'vertical'
	}),
	buttonDefault = Ti.UI.createButton({
		title: 'Default'
	}),
	buttonBottom = Ti.UI.createButton({
		title: 'Bottom'
	}),
	winDefaultA = Ti.UI.createWindow({
		backgroundColor: 'red'
	}),
	winDefaultB = Ti.UI.createWindow({
		backgroundColor: 'green'
	}),
	winDefaultC = Ti.UI.createWindow({
		backgroundColor: 'blue'
	}),
	tabDefaultA = Ti.UI.createTab({
		title: 'Tab A',
		window: winDefaultA
	}),
	tabDefaultB = Ti.UI.createTab({
		title: 'Tab B',
		window: winDefaultB
	}),
	tabDefaultC = Ti.UI.createTab({
		title: 'Tab C',
		window: winDefaultC,
		backgroundColor: 'cyan',
		backgroundFocusedColor: 'magenta',
		titleColor: 'red',
		activeTitleColor: 'blue'
	}),
	tabGroupDefault = Ti.UI.createTabGroup({
		// for backwards compatibility if no style is defined, the component falls back to the default one
		style: Ti.UI.Android.TABS_STYLE_DEFAULT,
		tabs: [tabDefaultA, tabDefaultB, tabDefaultC],
		tabsBackgroundColor: '#88AAAAAA',
		tabsBackgroundSelectedColor: '#AAAAAA'
	}),
	winBottomA = Ti.UI.createWindow({
		backgroundColor: 'red'
	}),
	winBottomB = Ti.UI.createWindow({
		backgroundColor: 'green'
	}),
	winBottomC = Ti.UI.createWindow({
		backgroundColor: 'blue'
	}),
	tabBottomA = Ti.UI.createTab({
		title: 'Tab 1',
		window: winBottomA
	}),
	tabBottomB = Ti.UI.createTab({
		title: 'Tab 2',
		window: winBottomB,
	}),
	tabBottomC = Ti.UI.createTab({
		title: 'Tab 3',
		window: winBottomC,
		backgroundColor: 'cyan',
		backgroundFocusedColor: 'magenta',
		titleColor: 'red',
		activeTitleColor: 'blue'
	})
	tabGroupBottom = Ti.UI.createTabGroup({
		style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION,
		tabs: [tabBottomA, tabBottomB, tabBottomC],
		// The following two properties override the colors from TabGroup
		tabsBackgroundColor: '#88994444',
		tabsBackgroundSelectedColor: '#883333',
		// Comment the row below or set it to true to see the difference
		shiftMode: false
	}),
	buttonDisableTabNavigation = Ti.UI.createButton({
		title: 'Disable Tab Navigation'
	}),
	flagTabNavigationDisabled = false,
	buttonSetActiveTab = Ti.UI.createButton({
		title: 'Go to Tab A'
	});

buttonDisableTabNavigation.addEventListener('click', function () {
	flagTabNavigationDisabled = !flagTabNavigationDisabled;
	tabGroupDefault.disableTabNavigation(flagTabNavigationDisabled);
});
winDefaultB.add(buttonDisableTabNavigation);

buttonSetActiveTab.addEventListener('click', function () {
	tabGroupDefault.setActiveTab(tabDefaultA);
});
winDefaultC.add(buttonSetActiveTab);

buttonDefault.addEventListener('click', function () {
	tabGroupDefault.open();
});

buttonBottom.addEventListener('click', function () {
	tabGroupBottom.open();
});

mainWindow.add(buttonDefault);
mainWindow.add(buttonBottom);
mainWindow.open();

tabGroupDefault.addEventListener('open', function () {
	Ti.API.info('Default TabGroup OPEN event fired');
});
tabGroupDefault.addEventListener('close', function () {
	Ti.API.info('Default TabGroup CLOSE event fired');
});
tabGroupDefault.addEventListener('focus', function () {
	Ti.API.info('Default TabGroup FOCUS event fired');
});
tabGroupDefault.addEventListener('blur', function () {
	Ti.API.info('Default TabGroup blur event fired');
});
tabDefaultA.addEventListener('focus', function () {
	Ti.API.info('Default Tab A FOCUS event fired');
});
tabDefaultA.addEventListener('blur', function () {
	Ti.API.info('Default Tab A BLUR event fired');
});
tabDefaultA.addEventListener('selected', function () {
	Ti.API.info('Default Tab A SELECTED event fired');
});
tabDefaultA.addEventListener('UNSELECTED', function () {
	Ti.API.info('Default Tab A UNSELECTED event fired');
});

Note: I haven't added a new example in the docs. I was thinking the test case from here should do, but maybe it is not in the best format to go there (too long?).

…s UI and replacing it with TabLayout. Introducing a new style.

hansemannn · 2018-09-28T15:48:04Z

Yey! Will try it out asap.

jquick-axway · 2018-10-01T22:58:29Z

Cool. I like where this is heading. 😄

I'm curious about the ripple effect you are adding. Does it work like the Google Play tabs? Where tapping a tab changes the background color of the whole tab bar with that circle scaling effect?

Oh and the TiUIAbstractTab class should probably stay abstract eh?

Remove the Lifecycle Interface implementation from TiUIAbstractTabGroup. Fix removing of Tabs before AND after opening the TabGroup. Add titleColor and activeTitleColor properties of Tab parity for Android. Add support for disabling shiftMode for BottomNavigationView (not yet exposed in the JS). Prevent double selection of items in the TabGroup controller.

ypbnv · 2018-10-03T14:07:45Z

Yes, ActionBar tabs had the ripple effect by default and since I am messing with the background drawables to support different colors for selected/unselected states I needed to add it manually.

TiUIAbstractTab is not abstract anymore so I renamed it in the most recent commit.

Fix the smoothScrollOnTabClick.

jawa9000

This yml update looks good to me.

Clean up listener for tab changes. Fix focus/blur and select/unselect events for TabGroup and Tabs.

Optimize the handling of tabs swiping. Fix disabling of tab navigation. Format code.

Guard agains API level. Guard for closing the group before drawing it. Cleanup a bit of code and imports. Lint unit tests and format code. Add docs.

build · 2018-10-17T15:27:06Z

	Messages
📖	💾 Here's the generated SDK zipfile.

Generated by 🚫 dangerJS

hansemannn · 2018-11-15T16:35:27Z

Quick note: You could add even more parity by exposing the badge property via:

bottomNavigation.setNotification(notification, bottomNavigation.getItemsCount() - 1);

lokeshchdhry · 2018-11-20T21:24:18Z

@ypbnv , I see that tab1.png & tab2.png inside assets/images/ are not resized for me & it appears tiny on the default tab bar. Bottom bar is fine.

ypbnv · 2018-11-28T15:51:06Z

@jquick-axway I did some testing and it seems that prior to the refactoring the image was still passed as a drawable with its raw dimensions. Here a two screenshots for the same project with the same resources. I have intentionally used images with different dimensions - one is 30x30 and other 60x60 pixels:

This PR

7.5.0.GA

I also thought that they were scaled according to the device, but I suppose the difference was more noticeable due to the new layout. That opens the question if we still want to scale them in the refactored code?
Technically it will be a change to the behavior before that, but I am OK if we decide to add it. I tried a couple of things to deal with it, but so far the best I got is related to a change in one of the layout files (https://github.com/appcelerator/titanium_mobile/blob/master/android/modules/design/res/layout/design_layout_tab_icon.xml) in the Design library we package with the app. Personally, I am not a big fan of this solution, because it is not future proof.
I think somewhere in the process of updating the ImageView in this file with a new source is the problem, because this layout does not have the same behavior in a new clean native Android project, provided with the same source. So I will keep digging if we want to scale the source.

jquick-axway · 2018-11-28T22:40:14Z

@ypbnv, I'm sorry man. You are exactly right. The old tab group handling did not scale the tab icons. My bad.
Titanium 7.5.0

Titanium 8.0.0

jquick-axway · 2018-11-29T21:00:55Z

@lokeshchdhry, this PR is ready for you.

lokeshchdhry · 2018-11-29T22:55:58Z

Passing final FR (first was done earlier before CR) as all CR comments seems to be looked at & appropriate changes made.

Studio Ver: 5.1.2.201810301430
SDK Ver: 8.0.0 local build
OS Ver: 10.14
Xcode Ver: Xcode 10.1
Appc NPM: 4.2.13
Appc CLI: 7.0.8
Daemon Ver: 1.1.3
Ti CLI Ver: 5.1.1
Alloy Ver: 1.13.4
Node Ver: 8.9.1
NPM Ver: 5.5.1
Java Ver: 10.0.2
Devices: ⇨ google Nexus 5 (Android 6.0.1)
⇨ google Pixel (Android 9)
Emulator: ⇨ Android 4.1.2

juliengatt · 2019-01-12T12:24:29Z

hi, how to change icon color?
Thanks

jquick-axway · 2019-01-14T19:52:44Z

@juliengatt , Titanium does not support tinting the tab icons on Android. So, the icon PNG you assign to the tab is displayed as-is.

hansemannn · 2019-01-14T20:59:14Z

We could use itemIconTint together with the ColorStateList for the checked and unchecked state:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:state_checked="true"
      android:color="@color/colorPrimary" />
  <item
      android:state_checked="false"
      android:color="@color/grey" />
 </selector>

Should be possible via XML.

jquick-axway · 2019-01-14T21:30:48Z

Yes, it is possible to do it natively on Android, but Titanium does not currently support it.

hansemannn · 2019-01-14T21:53:05Z

But shouldn't it be possible with global styling. In any case, it's one of the last tabgroup parity issues effecting devs in real life use cases

jquick-axway · 2019-01-14T22:12:55Z

But shouldn't it be possible with global styling?

On Android, you would normally do this via a drawable in XML. In that drawable's XML, you can define the different states. I think our internal code will load a drawable as-is in this case (not assume it's a BitmapDrawable) when loading from a res/drawable folder. So, perhaps it's theoretically possible to do it now.

juliengatt · 2019-01-15T10:18:44Z

If already possible, an example would be greatly appreciated!

jquick-axway · 2019-01-15T19:45:06Z

You would need to create a "selector" in XML kind of like what is shown in the link below. This XML file would go under your project's ./platform/android/res/drawable folder. Let's say you call it "my_tab_icon1.xml".
https://stackoverflow.com/a/49854402

And then you would assign the above to the tab's icon as follows...

Ti.UI.createTab({
	icon: "android.resource://" + Ti.App.id + "/drawable/my_tab_icon1",
});

Note that I haven't tested the above. But "something" like that should theoretically work. You'll have to figure it out from there.

I've also written up a feature request ticket below.
https://jira.appcelerator.org/browse/TIMOB-26734

juliengatt · 2019-01-23T05:53:02Z

@jquick-axway I haven't been able to make it work. I tried the following:

Ti.UI.createTab({
	icon: "android.resource://" + Ti.App.id + "/drawable/my_tab_icon1"
        //Tried this too: Ti.App.Android.R.drawable.my_tab_icon1
});

my_tab_icon1.xml and selected.png & unselected.png in drawable folder

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/selected" android:state_selected="true"/>
   <item android:drawable="@drawable/unselected" android:state_selected="false"/>
</selector>

I have found out that whatever icon color I add to the folder, the selected icon color will always be the opposite. I don't think this should be the expected behavior.

Please advise.
Thanks

juliengatt · 2019-01-23T05:54:46Z

We could use itemIconTint together with the ColorStateList for the checked and unchecked state:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:state_checked="true"
      android:color="@color/colorPrimary" />
  <item
      android:state_checked="false"
      android:color="@color/grey" />
 </selector>
Should be possible via XML.

@hansemannn did you make it work?
Thanks

juliengatt · 2019-01-23T05:58:51Z

I have seen the following ticket but not able to reproduce:
https://jira.appcelerator.org/browse/TIMOB-3179

juliengatt · 2019-01-23T05:59:15Z

Possible to use font awesome?

Brianggalvez · 2019-02-01T10:09:26Z

@juliengatt try with a custom theme

customTheme.xml

<resources>

  <!-- Base application theme. -->
  <style name="customTheme" parent="Theme.AppCompat.Light">
    <item name="itemIconTint">@drawable/nav_item_color_state</item>
  </style>
</resources>

drawable/nav_item_color_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorAccent"/>
    <item android:state_checked="false" android:color="@color/colorPrimaryDark"/>
</selector>

Refactoring of TabGroup - getting rid of the deprecated ActionBar Tab…

fcbeed2

…s UI and replacing it with TabLayout. Introducing a new style.

ypbnv added android bug improvement work in progress 🚧 labels Sep 28, 2018

ypbnv requested a review from jquick-axway September 28, 2018 14:07

build added the needs tests 🚨 label Sep 28, 2018

ypbnv added 2 commits October 3, 2018 15:55

Merge branch 'master' into TIMOB-26354

e0b9eae

build added the docs label Oct 3, 2018

ypbnv added 3 commits October 3, 2018 18:28

Expose the shiftMode property.

13596c9

Fix the smoothScrollOnTabClick.

Merge branch 'master' into TIMOB-26354

aabf34d

Docs - extend Ti.UI.Window instead of Ti.UI.View.

818984a

jawa9000 approved these changes Oct 4, 2018

View reviewed changes

ypbnv added 7 commits October 10, 2018 14:57

Merge branch 'master' into TIMOB-26354

39ae5c7

Fix animation for opening TabGroup. Now works the same way as Window.

5816a44

Clean up listener for tab changes. Fix focus/blur and select/unselect events for TabGroup and Tabs.

Remove some unused code.

72ac857

Optimize the handling of tabs swiping. Fix disabling of tab navigation. Format code.

Fix formatting for controllers.

e137a79

Merge branch 'master' into TIMOB-26354

71d38c8

Merge branch 'master' into TIMOB-26354

fec576d

Add constants for styles in Ti.UI.Android.

5a8c5fc

Guard agains API level. Guard for closing the group before drawing it. Cleanup a bit of code and imports. Lint unit tests and format code. Add docs.

ypbnv removed work in progress 🚧 needs tests 🚨 labels Oct 17, 2018

ypbnv added this to the 7.5.0 milestone Oct 17, 2018

Merge branch 'master' into TIMOB-26354

e3c086f

Merge branch 'master' into TIMOB-26354

5ab9060

Merge branch 'master' into TIMOB-26354

43b4ae8

lokeshchdhry and others added 4 commits November 29, 2018 14:56

Merge branch 'master' into TIMOB-26354

3951ed4

Fix definition.

188a980

Fix indentation.

6da4535

Merge branch 'master' into TIMOB-26354

96387d3

tidev deleted a comment from hansemannn Dec 5, 2018

ypbnv and others added 3 commits December 5, 2018 16:18

Keep linting.

98d3b9e

Merge branch 'master' into TIMOB-26354

43c40fb

Merge branch 'master' into TIMOB-26354

bfc6be2

lokeshchdhry merged commit 8d7a199 into tidev:master Dec 11, 2018

jquick-axway mentioned this pull request Jan 5, 2019

refactor(android): Re-added "extendSafeArea" support to refactored TabGroup in 8.0.0 #10570

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TIMOB-26354] Android: Refactor TabGroup and introduce new style #10358

[TIMOB-26354] Android: Refactor TabGroup and introduce new style #10358

ypbnv commented Sep 28, 2018 •

edited

hansemannn commented Sep 28, 2018

jquick-axway commented Oct 1, 2018

ypbnv commented Oct 3, 2018

jawa9000 left a comment

build commented Oct 17, 2018 •

edited

hansemannn commented Nov 15, 2018

lokeshchdhry commented Nov 20, 2018 •

edited

ypbnv commented Nov 28, 2018 •

edited

jquick-axway commented Nov 28, 2018

jquick-axway commented Nov 29, 2018

lokeshchdhry commented Nov 29, 2018

juliengatt commented Jan 12, 2019

jquick-axway commented Jan 14, 2019

hansemannn commented Jan 14, 2019

jquick-axway commented Jan 14, 2019

hansemannn commented Jan 14, 2019

jquick-axway commented Jan 14, 2019

juliengatt commented Jan 15, 2019

jquick-axway commented Jan 15, 2019

juliengatt commented Jan 23, 2019 •

edited

juliengatt commented Jan 23, 2019

juliengatt commented Jan 23, 2019

juliengatt commented Jan 23, 2019

Brianggalvez commented Feb 1, 2019 •

edited

[TIMOB-26354] Android: Refactor TabGroup and introduce new style #10358

[TIMOB-26354] Android: Refactor TabGroup and introduce new style #10358

Conversation

ypbnv commented Sep 28, 2018 • edited

hansemannn commented Sep 28, 2018

jquick-axway commented Oct 1, 2018

ypbnv commented Oct 3, 2018

jawa9000 left a comment

Choose a reason for hiding this comment

build commented Oct 17, 2018 • edited

hansemannn commented Nov 15, 2018

lokeshchdhry commented Nov 20, 2018 • edited

ypbnv commented Nov 28, 2018 • edited

jquick-axway commented Nov 28, 2018

jquick-axway commented Nov 29, 2018

lokeshchdhry commented Nov 29, 2018

juliengatt commented Jan 12, 2019

jquick-axway commented Jan 14, 2019

hansemannn commented Jan 14, 2019

jquick-axway commented Jan 14, 2019

hansemannn commented Jan 14, 2019

jquick-axway commented Jan 14, 2019

juliengatt commented Jan 15, 2019

jquick-axway commented Jan 15, 2019

juliengatt commented Jan 23, 2019 • edited

juliengatt commented Jan 23, 2019

juliengatt commented Jan 23, 2019

juliengatt commented Jan 23, 2019

Brianggalvez commented Feb 1, 2019 • edited

ypbnv commented Sep 28, 2018 •

edited

build commented Oct 17, 2018 •

edited

lokeshchdhry commented Nov 20, 2018 •

edited

ypbnv commented Nov 28, 2018 •

edited

juliengatt commented Jan 23, 2019 •

edited

Brianggalvez commented Feb 1, 2019 •

edited