This topic introduces how to use Material Design from aspects of project configuration and resource usage.
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 a 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
Configure a Portal project.
Before invoking the mPaaS AppCompat, perform the following operations to configure a Portal project:
Run the following command to replace the Gradle package plug-in (Alipay Plugin for Gradle) version with the following version:
classpath 'com.alipay.android:android-gradle-plugin: 3.0.0.9.13'
Remove the AppCompat library that previously depends on from the Gradle script.
Add the following AppCompat dependencies to the Gradle script:
bundle 'com.mpaas.android.res.base:mpaas-baseresjar:1.0.0.180626203034@jar' manifest 'com.mpaas.android.res.base:mpaas-baseresjar:1.0.0.180626203034:AndroidManifest@xml'
After completing the configuration, make the Bundle project invoke the AppCompat component to synchronize the Portal project.
Configure a Bundle project
In a Bundle project that uses the AppCompat component, change the Gradle package plug-in (Alipay Plugin for Gradle) to the following version:
classpath 'com.alipay.android:android-gradle-plugin: 3.0.0.9.13'
Select the sub-component to depend on according to the component you use. The following shows the sample statement to add
recyclerview
: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:
Check 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 1: Perform auto detection by running Gradle task
Prerequisites
The version of android-gradle-plugin
is 3.0.0.9.13
or later versions. e.g.
classpath 'com.alipay.android:android-gradle-plugin: 3.0.0.9.13'
Test procedure
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
.
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 2: Perform test mannually
Manual test applies in any case. The test procedure is as follows:
In the following location of a Portal project, open the
bundles.csv
plain text file.Sort the
PackageId
column, and check whether Package ID is duplicate. Make sure there are no duplicate Package IDs before recompilation.
Use 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:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.mpaas.android.res.base"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_scrolling"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height_image_view"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay"
android:background="@color/blue">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?com.mpaas.android.res.base:attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/image_scrolling_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="@drawable/material_design_3"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?com.mpaas.android.res.base:attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_scrolling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/big_activity_fab_margin"
android:src="@drawable/ic_share_white_24dp"
app:layout_anchor="@id/app_bar_scrolling"
app:layout_anchorGravity="bottom|end" />
<include layout="@layout/content_scrolling" />
</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:
<style name="AppTheme" parent="@com.mpaas.android.res.base:style/Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="com.mpaas.android.res.base:colorPrimary">@color/colorPrimary</item>
<item name="com.mpaas.android.res.base:colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="com.mpaas.android.res.base:colorAccent">@color/colorAccent</item>
</style>
Provide resources for external devices
Configure a
Portal
project. Import the information about the resource Bundle intoPortal
:// Import the resource Bundle bundle "com.mpaas.demo.materialdesign:materialdesign-build:1.0-SNAPSHOT:raw@jar" manifest "com.mpaas.demo.materialdesign:materialdesign-build:1.0-SNAPSHOT:AndroidManifest@xml" // To find resources when compiling, you need the JAR package of this Bundle. provided 'com.mpaas.demo.materialdesign:materialdesign-build:1.0-SNAPSHOT:raw@jar'
Define resources. Complete the following steps to define a resource so that the resource can be referenced by another Bundle or Portal:
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 fromR.java
. The code sample is shown as follows:<?xml version="1.0" encoding="utf-8"?> <resources> <public name="AppTheme" id="0x1f030000" type="style" /> <public name="AppTheme.AppBarOverlay" id="0x1f030001" type="style" /> <public name="AppTheme.NoActionBar" id="0x1f030002" type="style" /> <public name="AppTheme.NoActionBar.StatusBar" id="0x1f030003" type="style" /> <public name="AppTheme.PopupOverlay" id="0x1f030004" type="style" /> <public name="DialogFullscreen" id="0x1f030005" type="style" /> <public name="DialogFullscreenWithTitle" id="0x1f030006" type="style" /> <public name="title_activity_login" id="0x1f0c0081" type="string"/> <public name="title_activity_recycler_view" id="0x1f0c0082" type="string"/> <public name="title_activity_share_view" id="0x1f0c0085" type="string"/> <public name="title_activity_scrolling" id="0x1f0c0083" type="string"/> <public name="title_activity_settings" id="0x1f0c0084" type="string"/> <public name="title_activity_about" id="0x1f0c007f" type="string"/> <public name="activity_donate" id="0x1f0c000e" type="string" /> <public name="activity_my_apps" id="0x1f0c000f" type="string"/> </resources>
When a resource is being used by an external device, the resource must be prefixed with a package name. For more information, see Use the resource in another Bundle.
Use custom resources in AndroidManifest
If you define a theme in AndroidManifest
of your Bundle
project, the code sample is shown as follows:
<activity
android:name=".activity.MainActivity"
android:launchMode="singleTop"
android:theme="@com.mpaas.demo.materialdesign:style/AppTheme.NoActionBar"
android:windowSoftInputMode="stateHidden|stateUnchanged">
</activity>
You need to:
Add the
res_slinks
file in the main path of thePortal
project, and add Bundle names to theres_slinks
file line by line.At the same time, remove the
manifest
dependency of thisBundle
frombuild.gradle
. As shown in the following code:manifest 'com.mpaas.demo.materialdesign:materialdesign-build:1.0.0:AndroidManifest@xml'