[TIMOB-25954] Android: Add "Ti.UI.ButtonBar" support

GitHub Issue	n/a
Type	New Feature
Priority	Low
Status	Closed
Resolution	Fixed
Resolution Date	2021-02-26T17:51:26.000+0000
Affected Version/s	n/a
Fix Version/s	Release 10.0.0
Components	Android
Labels	android, buttonbar, parity
Reporter	Joshua Quick
Assignee	Joshua Quick
Created	2018-04-10T19:42:04.000+0000
Updated	2021-02-26T17:51:26.000+0000

Description

*Summary:* Currently, Titanium's ButtonBar is an iOS only feature. We should add support on Android for parity. On iOS, this feature is implemented via the UISegmentedControl whose "momentary" style is set to true. This means the UISegmentedControl doesn't maintain a check/selection state and acts like buttons. On Android, we can implement this using the material design MaterialButtonToggleGroup with outlined buttons that have their toggle/checkable state disabled. *Example:* !ButtonBar-Android.png|thumbnail! *Note:* The ButtonBar "style" property has been deprecated on iOS since Titanium 3.4.2 and will log a warning when you attempt to set it. iOS currently ignores this property. We can re-purpose this property to implement the 3 different button styles documented by Google's material theme: "Text Button", "Outlined Button", and "Contained Button". https://material.io/design/components/buttons.html

Attachments

File	Date	Size
ButtonBar-Android.png	2021-02-19T05:45:27.000+0000	55402
ButtonBarTest.js	2021-01-16T07:01:09.000+0000	1359
TIMOB-25954.png	2018-08-28T06:18:09.000+0000	5987

Comments

Kota Iguchi 2018-08-28

[~jquick] Thanks for the update. I tried ButtonBar on iOS and found out that the index property _does change_ button appearance as selected state (see screenshot) but tapping button does not. This is a bit unexpected behavior for me but this is how Ti.UI.ButtonBar works... !TIMOB-25954.png|thumbnail! Code:

   var win = Ti.UI.createWindow();
     
   var bb1 = Titanium.UI.createButtonBar({
       labels:['One', 'Two', 'Three'],
       backgroundColor:'#336699',
       top:50,
       style:Titanium.UI.iOS.SystemButtonStyle.PLAIN,
       height:25,
       width:200,
       index: 1 // This does update button selectioin appearance
   });
   
   bb1.addEventListener('click', function(e) {
       bb1.index = e.index; // This does not update button selection appearance...
   });
   
   win.add(bb1);
   win.open();

Joshua Quick 2018-08-28

I'm going to write that up as a bug on iOS. I don't think setting the index like that should show a selected state. Thanks for trying it out.
Joshua Quick 2021-01-16

PR (master): https://github.com/appcelerator/titanium_mobile/pull/12389
Satyam Sekhri 2021-02-25

FR Passed. Waiting for Jenkins build.
Christopher Williams 2021-02-26

merged to master, backport for 10_0_X merged for 10.0.0 target.

JSON Source