All Products
Search
Document Center

Use Material Design

Last Updated: Apr 01, 2021

Configure a project

About this task

Due to the special nature of the mPaaS framework, if an AppCompat related library is directly imported into your project, there will be an compilation error indicating that resources cannot be found. To solve this problem, the mPaaS provides a custom AppCompat library. To use the customized AppCompat library by the mPaaS, configure the Portal and Bundle projects.

The mPaaS AppCompat library is developed based on the native Android version 23 and includes the following components:

  • appcompat
  • animated-vector-drawable
  • cardview
  • design
  • recyclerview
  • support-vector-drawable

Compiled based on the native Android version 23, this custom AppCompat library is the same as the native library. But this solution can solve a number of compilation issues associated if you use the native library.

Use of resources mainly includes using resources in another Bundle, making resources available for external devices, and using custom resources in AndroidManifest. Due to the special nature of the mPaaS framework, you need to understand the considerations when different resources are used. For more information, refer to Use Resources.

Procedure

1. Configure a Portal project

Before invoking the mPaaS AppCompat, perform the following operations to configure a Portal project:

  1. Run the following command to replace the Gradle package plug-in (Alipay Plugin for Gradle) version with the following version:
    1. classpath 'com.alipay.android:android-gradle-plugin: 3.0.0.9.13'
  2. Remove the AppCompat library that previously depends on from the Gradle script.
  3. Add the following AppCompat dependencies to the Gradle script:
    1. bundle 'com.mpaas.android.res.base:mpaas-baseresjar:1.0.0.180626203034@jar'
    2. manifest 'com.mpaas.android.res.base:mpaas-baseresjar:1.0.0.180626203034:AndroidManifest@xml'
  4. After completing the configuration, in order for the Bundle project to invoke the AppCompat component, synchronize the Portal project.

2. Configure a Bundle project

  1. In a Bundle project that uses the AppCompat component, change the Gradle package plug-in (Alipay Plugin for Gradle) to the following version:

    1. classpath 'com.alipay.android:android-gradle-plugin: 3.0.0.9.13'
  2. Select the sub-component to depend on according to the component you use. The following shows the sample statement to add recyclerview:

    1. provided'com.mpaas.android.res.base:mpaas-baseresjar:1.0.0.180626203034:recyclerview@jar'

Use Resources

Common resources for material design include strings, colors and styles. Scenarios where resources are used include:

Checks whether Package ID is duplicate

If the resource cannot be found while you use it as described in this topic, you need to check to check whether the Package ID is duplicate. Package ID is defined in build.gradle and the value of this ID is related to the ID of the resulting resource. Resources cannot be found when Package ID is duplicate.

You can check whether Package ID is duplicate by using the following two methods:

Method one: Auto-detection by gradle task

Prerequisites

The version of android-gradle-plugin is 3.0.0.9.13 or later versions. e.g.

  1. classpath 'com.alipay.android:android-gradle-plugin: 3.0.0.9.13'
Test procedure
  1. Execute the following commands under the root directory of a Portal project:
    • For the Windows operating system: Executes gradlew.bat checkBundleIds.
    • For other operating systems: Executes gradlew checkBundleIds.
  2. Test result:
    • If the test result indicates No duplicate bundle ids found, Package ID is not duplicate.
    • If the test result indicates There are duplicate bundle ids, Package ID is duplicate. You can further determine which Package IDs are duplicate based on the test result.

Method two: Manual test

Manual test applies in any case. The test procedure is as follows:

  1. In the following location of a Portal project, open the bundles.csv plain text file.

  2. Sort the PackageId column, and check whether Package ID is duplicate. Make sure there are no duplicate Package IDs before recompilation.

Uses the resource in another Bundle

Typical scenario

This is the case with using the resource in mpaas-baseresjar. When using the resource in another Bundle, you must append the namespace of the resource. The namespace is the applicationID of the Bundle in which the resource resides. An error may occur when you build a release package, as shown in the following figure:

Solution

In build.gradle, configure lintOptions, as shown in the following figure:

You must prefix resources with a namespace whenever references are made to resources in this Bundle (in layouts, in custom styles). Otherwise, a compilation error indicating that resources cannot be found will occur.

Sample code: references in layouts

Taking the reference to a resource in another Bundle in layouts as an example, check the following sample code:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res/com.mpaas.android.res.base"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:fitsSystemWindows="true">
  8. <android.support.design.widget.AppBarLayout
  9. android:id="@+id/app_bar_scrolling"
  10. android:layout_width="match_parent"
  11. android:layout_height="@dimen/app_bar_height_image_view"
  12. android:fitsSystemWindows="true"
  13. android:theme="@style/AppTheme.AppBarOverlay"
  14. android:background="@color/blue">
  15. <android.support.design.widget.CollapsingToolbarLayout
  16. android:id="@+id/collapsing_toolbar_layout"
  17. android:layout_width="match_parent"
  18. android:layout_height="match_parent"
  19. android:fitsSystemWindows="true"
  20. app:contentScrim="?com.mpaas.android.res.base:attr/colorPrimary"
  21. app:layout_scrollFlags="scroll|exitUntilCollapsed">
  22. <ImageView
  23. android:id="@+id/image_scrolling_top"
  24. android:layout_width="match_parent"
  25. android:layout_height="match_parent"
  26. android:fitsSystemWindows="true"
  27. android:scaleType="fitXY"
  28. android:src="@drawable/material_design_3"
  29. app:layout_collapseMode="parallax" />
  30. <android.support.v7.widget.Toolbar
  31. android:id="@+id/toolbar"
  32. android:layout_width="match_parent"
  33. android:layout_height="?com.mpaas.android.res.base:attr/actionBarSize"
  34. app:layout_collapseMode="pin"
  35. app:popupTheme="@style/AppTheme.PopupOverlay" />
  36. </android.support.design.widget.CollapsingToolbarLayout>
  37. </android.support.design.widget.AppBarLayout>
  38. <android.support.design.widget.FloatingActionButton
  39. android:id="@+id/fab_scrolling"
  40. android:layout_width="wrap_content"
  41. android:layout_height="wrap_content"
  42. android:layout_margin="@dimen/big_activity_fab_margin"
  43. android:src="@drawable/ic_share_white_24dp"
  44. app:layout_anchor="@id/app_bar_scrolling"
  45. app:layout_anchorGravity="bottom|end" />
  46. <include layout="@layout/content_scrolling" />
  47. </android.support.design.widget.CoordinatorLayout>

Sample code: references in custom styles

When you use the resource in another Bundle in the custom style, the code sample is shown as follows:

  1. <style name="AppTheme" parent="@com.mpaas.android.res.base:style/Theme.AppCompat.NoActionBar">
  2. <!-- Customize your theme here. -->
  3. <item name="com.mpaas.android.res.base:colorPrimary">@color/colorPrimary</item>
  4. <item name="com.mpaas.android.res.base:colorPrimaryDark">@color/colorPrimaryDark</item>
  5. <item name="com.mpaas.android.res.base:colorAccent">@color/colorAccent</item>
  6. </style>

Provides resources for external devices

  1. Configure a Portal project. Import the information about the resource Bundle into Portal:
    1. // Import the resource Bundle
    2. bundle "com.mpaas.demo.materialdesign:materialdesign-build:1.0-SNAPSHOT:raw@jar"
    3. manifest "com.mpaas.demo.materialdesign:materialdesign-build:1.0-SNAPSHOT:AndroidManifest@xml"
    4. // To find resources when compiling, you need the JAR package of this Bundle.
    5. provided 'com.mpaas.demo.materialdesign:materialdesign-build:1.0-SNAPSHOT:raw@jar'
  2. Define resources. Complete the following steps to define a resource so that the resource can be referenced by another Bundle or Portal:

    1. Define the resource ID that need to be supplied to an external device in public.xml for the purpose of fixing the resource ID. This capability is provided by Android. The resource ID value can be copied from R.java. The code sample is shown as follows:

      1. <?xml version="1.0" encoding="utf-8"?>
      2. <resources>
      3. <public name="AppTheme" id="0x1f030000" type="style" />
      4. <public name="AppTheme.AppBarOverlay" id="0x1f030001" type="style" />
      5. <public name="AppTheme.NoActionBar" id="0x1f030002" type="style" />
      6. <public name="AppTheme.NoActionBar.StatusBar" id="0x1f030003" type="style" />
      7. <public name="AppTheme.PopupOverlay" id="0x1f030004" type="style" />
      8. <public name="DialogFullscreen" id="0x1f030005" type="style" />
      9. <public name="DialogFullscreenWithTitle" id="0x1f030006" type="style" />
      10. <public name="title_activity_login" id="0x1f0c0081" type="string"/>
      11. <public name="title_activity_recycler_view" id="0x1f0c0082" type="string"/>
      12. <public name="title_activity_share_view" id="0x1f0c0085" type="string"/>
      13. <public name="title_activity_scrolling" id="0x1f0c0083" type="string"/>
      14. <public name="title_activity_settings" id="0x1f0c0084" type="string"/>
      15. <public name="title_activity_about" id="0x1f0c007f" type="string"/>
      16. <public name="activity_donate" id="0x1f0c000e" type="string" />
      17. <public name="activity_my_apps" id="0x1f0c000f" type="string"/>
      18. </resources>
    2. When a resource is being used by an external device, the resource must be prefixed with a package name. For more information, see Uses the resource in another Bundle.

Uses custom resources in AndroidManifest

If you define a theme in AndroidManifest of your Bundle project, the code sample is shown as follows:

  1. <activity
  2. android:name=".activity.MainActivity"
  3. android:launchMode="singleTop"
  4. android:theme="@com.mpaas.demo.materialdesign:style/AppTheme.NoActionBar"
  5. android:windowSoftInputMode="stateHidden|stateUnchanged">
  6. </activity>

You need to:

  • Add the res_slinks file in the main path of the Portal project, and add Bundle names to the res_slinks file line by line.
  • At the same time, remove the manifest dependency of this Bundle from build.gradle. As shown in the following code:
    1. manifest 'com.mpaas.demo.materialdesign:materialdesign-build:1.0.0:AndroidManifest@xml'