Implement material design applications on low-version Android systems

I all articles first published in the personal blog, welcome attention, Address: http://blog.isming.me

? Material design really looks good, the animation effect is really very practical. I also wrote some articles about how to write material-style programs, but a lot of them are new APIs, and the lower version doesn't have these APIs, and we can't use them. But don't be discouraged, Google official, and some Daniel, to provide us with some procedures, let us in the lower version can implement the material style of the program, here to introduce you.

Sister picture screenshot

Sister picture screenshot

Using the Support library

Using the latest version of the support library, appcomt21, can be implemented in the lower version of some of the style, in the previous article I have said, here in the system to say.

Apply Theme

This part of the words before the article said that the link is here: http://blog.isming.me/2014/10/18/creating-android-app-with-material-design-one-theme/

To build with Gralde, add the V7 package to the dependency:

dependencies {compile ‘com.android.support:appcompat-v7:21.0.+‘compile ‘com.android.support:cardview-v7:21.0.+‘compile ‘com.android.support:recyclerview-v7:21.0.+‘}

If you build with Eclipse, add the latest AppCompat package.

In addition, add the following in the style file:

<!--extend one of the Theme.appcompat themes--><style name=" Theme.mytheme " Parent= "Theme.AppCompat.Light" ><!--Customize the color palette--><item name= "colorprimary" > @color/ Material_blue_500</item><item name= "Colorprimarydark" > @color/material_blue_700</item><item Name= "Coloraccent" > @color/material_green_a200</item></style>  

Using our theme.mytheme in Appliaction, there was an error in the last article, in which case it is not necessary to create a theme with the same name in Valus-v21 that inherits from material. So we can use the material style. However, there are still many places in the lower version that can not achieve this effect.

Use toolbar instead of Actionbar.

Android 5.0 adds toolbar, which can be used instead of Actionbar, and is recommended in lower versions, so that animation effects are easier to implement.

add toolbar to the layout file:

<android.support.v7.widget.toolbar xmlns:android=" http://schemas.android.com/ Apk/res/android "android:id=" @+id/toolbar "android:layout_width=" match_parent "android:layout_height=" Wrap_conten T "android:background="? Attr/colorprimarydark "/>  

in code, use toolbar instead of Actionbar (activity must be inherited from Actionbaractivity):

@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(getLayoutResource());        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        if (toolbar != null) {            setSupportActionBar(toolbar);        }    }

Using CardView

I don't know, see my previous blog http://blog.isming.me/2014/10/21/creating-app-with-material-design-two-list/.

Using animations

For the low version, there are some compatibility in the support V7 package, which can be animated with activity transitions (although the effect is not 5.0 good).

When you first declare a theme, create a apptheme.base that declares the theme and adds animation properties to it:

The following is placed in the values/themes.xml to fit the lower version:

<?xml version=" 1.0 "encoding=" Utf-8 "?><resources> <style name=" Apptheme "parent=" Apptheme.base "/> <style name=" apptheme.base "parent=" Theme.appcompat "> <item name= "Colorprimary" > @color/colorprimary</item> <item name= "Colorprimarydark" > @color/colorprimary</ item> <item name= "Android:windownotitle" >true</item> <item name= "Windowactionbar" >false </item> </style></resources>  

The following is placed in Values-v21/themes.xml

<?xml version=" 1.0 "encoding=" Utf-8 "? ><resources><style name=" Apptheme "parent=" Apptheme.base "> <item name=" android:windowcontenttransitions ">true</item> < Item Name= "Android:windowallowentertransitionoverlap" >true</item> <item name= "Android: Windowallowreturntransitionoverlap ">true</item> <item name=" Android: Windowsharedelemententertransition "> @android:transition/move</item> <item name=" Android: Windowsharedelementexittransition "> @android:transition/move</item></style></resources> 

When starting a new activity in code, use the method in the V7 package, as with 5.0, you can see my previous blog:

ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(     activity, transitionView, DetailActivity.EXTRA_IMAGE);ActivityCompat.startActivity(activity, new Intent(activity, DetailActivity.class),options.toBundle());

Using Open Source Controls

For many of the control styles, animations, dialogs, etc., using the Compatibility Pack cannot be done, we can use some of the great God developed third-party packages to achieve.

Component: Https://github.com/navasmdc/MaterialDesignLibrary

Https://github.com/keithellis/MaterialWidget

The above two are mainly components that implement the material

Material Design dialog box: https://github.com/afollestad/material-dialogs

This github repository collects a lot of open source implementations and you can come and see. Https://github.com/lightSky/MaterialDesignCenter

Other

According to the specifications provided, to implement the corresponding UI interface and animation effects and so on.
Here is a Google's canonical address:
Google Design code: http://www.google.com/design/spec/material-design/introduction.html need to turn the wall, http://design.1sters.com (Chinese)

Icon Material: https://github.com/google/material-design-icons, https://github.com/Templarian/MaterialDesign

Google io2014,material Design interpretation: https://github.com/google/iosched

Applications written by other people: https://github.com/afollestad/cabinet

I write an application, from the previous version of the change, has not finished, you can just look at the line, but also material design:https://github.com/sangmingming/meizitu

Original address: Http://blog.isming.me/2014/11/17/material-design-for-pre-lollipop-android/, reproduced please indicate the source.

Implement material design applications on low-version Android systems