Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28082] Android: Update "CardView" to support material theme

GitHub Issuen/a
TypeImprovement
PriorityLow
StatusClosed
ResolutionFixed
Resolution Date2021-03-05T15:57:37.000+0000
Affected Version/sn/a
Fix Version/sRelease 10.0.0
ComponentsAndroid
Labels2020-Q4, CardView, android, breaking-change, material-theme, theme
ReporterJoshua Quick
AssigneeJoshua Quick
Created2020-08-13T23:35:17.000+0000
Updated2021-03-05T15:57:37.000+0000

Description

*Summary:* Our [Ti.UI.Android.CardView](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Android.CardView) is currently using the Java [androidx.cardview.widget.CardView](https://developer.android.com/reference/androidx/cardview/widget/CardView) class. It should be updated to use the newer [com.google.android.material.card.MaterialCardView](https://developer.android.com/reference/com/google/android/material/card/MaterialCardView) class. The newer class supports the material theme styles. *Outlined Card:* We should also add "outlined" CardView support without a drop-shadow. This can be done be setting the elevation property to 0 and setting the borderColor and borderWidth properties as shown below.
const window = Ti.UI.createWindow();
const cardView = Ti.UI.Android.createCardView({
	elevation: 0,
	borderColor: 'gray',
	borderWidth: 1,
	layout: 'vertical',
	padding: '16dp',
	left: '10dp',
	right: '10dp',
});
cardView.add(Ti.UI.createLabel({
	text: 'This is a card view.\nThis is the 2nd line of text.',
	textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
	touchEnabled: false,
	width: Ti.UI.FILL
}));
window.add(cardView);
window.open();
!CardView-Outline-Light.png|thumbnail! !CardView-Outline-Dark.png|thumbnail! *To-Do:* We must replace the Java class used here... https://github.com/appcelerator/titanium_mobile/blob/master/android/modules/ui/src/java/ti/modules/titanium/ui/android/CardViewProxy.java *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

FileDateSize
CardView-Outline-Dark.png2021-02-23T02:21:19.000+0000416826
CardView-Outline-Light.png2021-02-23T02:21:20.000+0000417339
CardViewOutlineTest.js2021-02-23T02:20:40.000+0000547

Comments

  1. Joshua Quick 2020-12-19

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/12353
  2. Satyam Sekhri 2021-03-03

    FR Passed.
  3. Christopher Williams 2021-03-05

    merged to master and 10_0_X for 10.0.0 release target.

JSON Source