全新的 ShapeableImageView widget 是 AppCompatImageView 的扩展,用于处理形状主题 (shape theming)。常见用例是对矩形源图像进行圆角遮罩。不过,该 widget 也支持各种圆角尺寸、切角以及不同的描边宽度和颜色。
-
版本说明
https://github.com/material-components/material-components-android/releases/tag/1.2.0
-
入门指南
https://material.io/develop/android/docs/getting-started
Getting started with Material Components for Android
1. Depend on our library
Material Components for Android is available through Google's Maven Repository. To use it:
Material Components themes
The following is the list of Material Components themes you can use to get the latest component styles and theme-level attributes.
Update your app theme to inherit from one of these themes, e.g.:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight"> <!-- ... --> </style>
(在style.xml文件里面添加style example:
-
Open the
build.gradle
file for your application. -
Make sure that the
repositories
section includes Google's Maven Repositorygoogle()
. For example:allprojects { repositories { google() jcenter() } }
-
Add the library to the
dependencies
section:dependencies { // ... implementation 'com.google.android.material:material:<version>' (目前最新Release:1.4.0) // ... }
-
New Namespace and AndroidX
If your app currently depends on the original Design Support Library, you can make use of the
Refactor to AndroidX…
option provided by Android Studio. Doing so will update your app's dependencies and code to use the newly packagedandroidx
andcom.google.android.material
libraries.If you don't want to switch over to the new
androidx
andcom.google.android.material
packages yet, you can use Material Components via thecom.android.support:design:28.0.0
dependency.Note: You should not use the
com.android.support
andcom.google.android.material
dependencies in your app at the same time.2. Compile your app with Android 11
In order to use Material Components for Android, and the latest versions of the Support Libraries, you will have to install Android Studio 4.0 or higher to build with Android 11, and update your app's
compileSdkVersion
to30
.3. Ensure you are using
AppCompatActivity
Using
AppCompatActivity
will ensure that all the components work correctly. If you are unable to extend fromAppCompatActivity
, update your activities to useAppCompatDelegate
. This will enable theAppCompat
versions of components to be inflated among other important things.4. Change your app theme to inherit from a Material Components theme
Doing an app-wide migration by changing your app theme to inherit from a Material Components theme is the recommended approach. However, be sure to test thoroughly afterwards, as components in existing layouts may change their looks and behavior.
Note: If you can't change your theme, you can do one of the following:
- Inherit from one of our Material Components Bridge themes. See the Bridge Themes section for more details.
- Continue to inherit from an AppCompat theme and add some new theme attributes to your theme. See the AppCompat Themes section for more details.
Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar
<!-- 圆角图片 -->
<style name="roundedCornerImageStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">25dp</item>
</style>
)
For more information on how to set up theme-level attributes for your app, take a look at our Theming guide, as well as our Dark Theme guide for why it's important to inherit from the DayNight
theme.
Note: Using a Material Components theme enables a custom view inflater which replaces default components with their Material counterparts. Currently, this only replaces <Button>
and <AutoCompleteTextView>
XML components with <MaterialButton>
and <MaterialAutoCompleteTextView>
, respectively.
Bridge Themes
If you cannot change your theme to inherit from a Material Components theme, you can inherit from a Material Components Bridge theme.
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.Bridge"> <!-- ... --> </style>
Both Theme.MaterialComponents
and Theme.MaterialComponents.Light
have .Bridge
themes:
Bridge themes inherit from AppCompat themes, but also define the new Material Components theme attributes for you. If you use a bridge theme, you can start using Material Design components without changing your app theme.
AppCompat Themes
You can also incrementally test new Material components without changing your app theme. This allows you to keep your existing layouts looking and behaving the same, while introducing new components to your layout one at a time.
However, you must add the following new theme attributes to your existing app theme, or you will encounter ThemeEnforcement
errors:
<style name="Theme.MyApp" parent="Theme.AppCompat"> <!-- Original AppCompat attributes. --> <item name="colorPrimary">@color/my_app_primary_color</item> <item name="colorSecondary">@color/my_app_secondary_color</item> <item name="android:colorBackground">@color/my_app_background_color</item> <item name="colorError">@color/my_app_error_color</item> <!-- New MaterialComponents attributes. --> <item name="colorPrimaryVariant">@color/my_app_primary_variant_color</item> <item name="colorSecondaryVariant">@color/my_app_secondary_variant_color</item> <item name="colorSurface">@color/my_app_surface_color</item> <item name="colorOnPrimary">@color/my_app_color_on_primary</item> <item name="colorOnSecondary">@color/my_app_color_on_secondary</item> <item name="colorOnBackground">@color/my_app_color_on_background</item> <item name="colorOnError">@color/my_app_color_on_error</item> <item name="colorOnSurface">@color/my_app_color_on_surface</item> <item name="scrimBackground">@color/mtrl_scrim_color</item> <item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item> <item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item> <item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item> <item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item> <item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item> <item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item> <item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item> <item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item> <item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item> <item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item> <item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item> <item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item> <item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item> </style>
5. Add a Material component to your app
Take a look at our documentation for the full list of available Material components. Each component's page has specific instructions on how to implement it in your app.
Let's use text fields as an example.
Implementing a text field via XML
The default filled text field XML is defined as:
<com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/textfield_label"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout>
Note: If you are not using a theme that inherits from a Material Components theme, you will have to specify the text field style as well, via style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
Other text field styles are also provided. For example, if you want an outlined text field in your layout, you can apply the Material Components outlined
style to the text field in XML:
<com.google.android.material.textfield.TextInputLayout style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/textfield_label"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout>
Theme.MaterialComponents.Bridge
Theme.MaterialComponents.Light.Bridge
Theme.MaterialComponents.NoActionBar.Bridge
Theme.MaterialComponents.Light.NoActionBar.Bridge
Theme.MaterialComponents.Light.DarkActionBar.Bridge
Last: 布局xml直接出效果
<!-- 圆角图片 -->
<!-- shapeAppearanceOverlay或shapeAppearance 加载style -->
<!-- strokeColo描边颜色 -->
<!-- strokeWidth描边宽度 -->
laste: <com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image1"
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="1dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearanceOverlay="@style/roundedCornerImageStyle"
app:strokeColor="#F44336"
app:strokeWidth="2dp" />
ShapeableImageView GitHub: https://github.com/material-components/material-components-android
个人GitHub: https://github.com/HuaDanJson