Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-28082

Android: Update "CardView" to support material theme

    Details

      Description

      Summary:
      Our Ti.UI.Android.CardView is currently using the Java androidx.cardview.widget.CardView class. It should be updated to use the newer 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();
      

      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

        1. CardView-Outline-Dark.png
          407 kB
          Joshua Quick
        2. CardView-Outline-Light.png
          408 kB
          Joshua Quick
        3. CardViewOutlineTest.js
          0.5 kB
          Joshua Quick

          Issue Links

            Activity

              People

              • Assignee:
                jquick Joshua Quick
                Reporter:
                jquick Joshua Quick
                Reviewer:
                Gary Mathews
                Tester:
                Satyam Sekhri
              • Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Integration