[TIMOB-26263] Android: Add "MaterialButton" support to "Ti.UI.Button"
| GitHub Issue | n/a |
|---|---|
| Type | Improvement |
| Priority | Medium |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2021-03-05T15:57:44.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 10.0.0 |
| Components | Android |
| Labels | android, button, material-design |
| Reporter | Joshua Quick |
| Assignee | Joshua Quick |
| Created | 2018-08-04T03:07:27.000+0000 |
| Updated | 2021-03-05T15:57:44.000+0000 |
Description
*Summary:*
Our Ti.UI.Button is currently using the Java [android.widget.Button](https://developer.android.com/reference/android/widget/Button) class. It should be updated to use the newer "MaterialToolbar" class. The newer class supports the material theme and new styles such as "outline" and "text-only" buttons.
https://material.io/design/components/buttons.html
https://developer.android.com/reference/com/google/android/material/button/MaterialButton
*To-Do:*
Ti.UI.Button supports a [style](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Button-property-style) property which is currently iOS only. We should add support for this property on Android. The iOS-only [Ti.UI.iOS.SystemButtonStyle](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.iOS.SystemButtonStyle) should be deprecated and its style constants should be moved to Ti.UI as shown below.
* Ti.UI.BUTTON_STYLE_FILLED
* Ti.UI.BUTTON_STYLE_OUTLINED
* Ti.UI.BUTTON_STYLE_TEXT
* Ti.UI.BUTTON_STYLE_OPTION_POSITIVE // = Ti.UI.iOS.SystemButtonStyle.DONE
* Ti.UI.BUTTON_STYLE_OPTION_NEGATIVE
* Ti.UI.BUTTON_STYLE_OPTION_NEUTRAL // = Ti.UI.iOS.SystemButtonStyle.PLAIN/BORDERED
The Ti.UI.BUTTON_STYLE_FILLED matches Android's old solid button behavior. The other styles are new on Android.
Note that iOS only supports text-only buttons. Apple dropped support for bordered buttons a while ago. So, using any other unsupported style on iOS causes it to use text-only buttons.
*Test:*
Each button style can be tested with the attached [^ButtonStyleTest.js] script, which will display what's shown in the screenshots below.
!ButtonStyle-Android-Light.png|thumbnail! !ButtonStyle-Android-Dark.png|thumbnail! !ButtonStyle-iOS.png|thumbnail!
*Breaking-Change:*
The app must use a "Theme.MaterialComponents" based theme or else an exception will occur. So, app's using a custom theme based from "Theme.AppCompat" or similar will crash. This is normal and the exception will state that the theme will need to change.
Attachments
| File | Date | Size |
|---|---|---|
| ButtonStyle-Android-Dark.png | 2021-02-23T02:06:45.000+0000 | 419074 |
| ButtonStyle-Android-Light.png | 2021-02-23T02:06:44.000+0000 | 421578 |
| ButtonStyle-iOS.png | 2021-02-23T02:07:01.000+0000 | 776886 |
| ButtonStyleTest.js | 2021-02-23T02:05:52.000+0000 | 922 |
There is any major issue where we can track all the material UI elements that will be added? I would like to see also https://material.io/components/text-fields among others
SDK 9.3.0 changes the default theme to the
Materialtheme, enabling all material components :-) Make sure to inherit from it to receive the full capacity and try it out from master!ti sdk install -b master.[~bgarcia], we plan on switching over all Java
Viewclasses to their material equivalent classes in Titanium 10.0.0 (such asButtontoMaterialButton). In fact, some UI elements such as TextField, TextArea, and TabGroup have already been switched over in 9.0.0 because they were backward compatible with AppCompat themes. In your case, you should be able to display different material styles in a TextField "today" via a custom theme applied to the<application/>or perTi.UI.Windowvia its "theme" property. But you can't apply a material style to individual TextFields yet, which is what we'd like to support in the near future.PR (master): https://github.com/appcelerator/titanium_mobile/pull/12353
FR Passed.
merged to master and 10_0_X for 10.0.0 release target.