Android Material Design Details (using Support V7 compatible with 5.0 or less systems)

Material design is a new language designed by Google in the 2014 I/O conference. Material design is based on the Android 5.0 (API level 21), compatible with devices under 5.0 need to use the version number v21.0.0 above the Appcpmpat in the support V7 package, Unfortunately, the support package only supports some features of material design. When developing with Eclipse or Android studio, upgrade the Extras->android support library to the latest version directly from the Android SDK manager. Currently the latest version is:

com.android.support:appcompat-v7:21.0.3

The sample program in this article uses minsdkversion=14, which belongs to implementing the material design style using the support package.

Steps to use material design:

First, use material theme

1. Create an Android app, apply theme Theme.appcompat (or its sub-themes, such as Theme.AppCompat.Light.DarkActionBar)

2. Some properties of the theme used by the custom program, example:

<style name= "Apptheme" parent= "Theme.AppCompat.Light.DarkActionBar" > <!--actionbar colors--<ite M name= "Colorprimary" > @color/primary</item> <!--colors that change with the theme (such as the color of the checkbox)--<item name= "Co Loraccent "> @color/accent</item> <!--the color of the status bar, which appears to be invalid when using the support package.        )--<item name= "Colorprimarydark" > @color/primary_dark</item> <!--actionbar Styles-- <item name= "Actionbarstyle" > @style/apptheme.actionbarstyle</item> </style> <style name= "AppTh Eme. Actionbarstyle "parent=" Widget.AppCompat.ActionBar.Solid "> <item name=" Android:titletextstyle "> @style/ apptheme.actionbar.titletextstyle</item> </style> <style name= "AppTheme.ActionBar.TitleTextStyle" parent= "@style/textappearance.appcompat.widget.actionbar.title" > <!--ActionBar title text color-<item NA Me= "Android:textcolor" > @android:color/white</item> </stYle> 

3. All activity that requires the use of Actionbar must inherit from Actionbaractivity, Because even if you use a theme like Theme.AppCompat.Light.DarkActionBar, the system does not automatically add Actionbar.
：

Changes relative to the normal Actionbar:

(1) The style of the three dots on the right has changed. (This doesn't matter ...) ）

(2) Click on the right three dots (more), the drop-down menu does not start from the bottom of the Actionbar, but directly from the Actionbar start! There may be a way to change it to the old style, but after looking at the official documents, Google explains that the menu is a component that is temporarily presented to the user and should therefore be suspended. In other words, this default style is recommended for new design rules.

Second, the use of Recyclerview

Recyclerview is a brand new component that Google provides in the support V7 package. The component is an enhanced version of the ListView, with the new features:

1. Improved performance;

The item reuse is automatic in 2.adapter, which means that the previous tedious notation is not required:

if (Convertview = = null) {            Convertview = layoutinflater.from (context). Inflate (R.layout.friends_item, parent, false );            Holder = new Viewholder ();            Holder.nametv = (TextView) Convertview.findviewbyid (r.id.friends_item_name);            Holder.phonetv = (TextView) Convertview.findviewbyid (r.id.friends_item_phone);            Convertview.settag (holder);        } else {            holder = (viewholder) convertview.gettag ();        }

3. Pre-Set the item's add, delete, move, modify the animation, when and change the picture can also be customized.

：

Example code:

(1) Main page, get to Recyclerview, set adapter.

Recyclerview Mrecyclerview = (recyclerview) Findviewbyid (R.id.my_recycler_view); Use this setting to improve performance if you know so changes//in content does not change the layout size of the REC Yclerview Mrecyclerview.sethasfixedsize (TRUE); Use a linear layout managermrecyclerview.setlayoutmanager (new Linearlayoutmanager (this));//data list< Cityinfobean> myDataSet = new arraylist<cityinfobean> ();        for (int i = 0; I < 50; i++) {            Cityinfobean city = new CityInfoBean ();             city.setcityname ("tianjin-" + i);             City.setcityphone ("022-" + i);             city.setlocation ("Asia_" + i);             Mydataset.add (city);        }        RecyclerViewAdapter mAdapter = new Recyclerviewadapter (this, mydataset);        Mrecyclerview.setadapter ( Madapter);//recyclerview doesn ' t have a ' onitemclicklistener ' or ' onitemlongclicklistener ' like listview, //so you s Hould Add the callback in adapter 

(2) Adapter,recyclerviewadapter.java:

public class Recyclerviewadapter extends recyclerview.adapter<recyclerviewadapter.viewholder> {private Context    Context    Private list<cityinfobean> Mdataset;        Public Recyclerviewadapter (context context, list<cityinfobean> mydataset) {this.context = context;    Mdataset = myDataSet; }//Create new Views (invoked by the layout manager) @Override public Viewholder oncreateviewholder (ViewGroup pa rent, int viewtype) {View v = layoutinflater.from (Parent.getcontext ()). Inflate (R.layout.recycler_list_item, parent        , false);        Set the view ' s size, margins, paddings and layout parameters final Viewholder VH = new Viewholder (v);                V.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (View v) {                int position = Vh.getposition (); Toast.maketext (V.getcontext (), "Item Click.    Position: "+ Position, Toast.length_short). Show ();        }        }); V.setonlongclicklistener (New View.onlongclicklistener () {@Override public boolean onlongclick (View V) {int position = vh.getposition ();//Toast.maketext (V.getcontext (), "Item long click.                Position: "+//Position, Toast.length_short)." Show ();                ShowDialog (position);            return true;        }        });    return VH; }//Replace the contents of a view (invoked by the layout manager) @Override public void Onbindviewholder (viewho        Lder holder, int position) {Holder.cityNameTV.setText (Mdataset.get (position). Getcityname ());        Holder.phoneTV.setText (Mdataset.get (position). Getcityphone ());    Holder.addrTV.setText (Mdataset.get (position). GetLocation ());    } @Override public int getitemcount () {return mdataset.size (); } private void ShowDialog (final int position) {Alertdialog.builder Builder = new alertdialog.        Builder (context);        Builder.settitle ("Choose operation"); string[] Dialogitems = new string[]{context.getstring (R.string.delete_one_item), context.ge Tstring (R.string.add_one_item), context.getstring (R.string.move_one_item), context.getstring        (R.string.change_one_item), context.getstring (R.string.add_many_items),}; Builder.setitems (Dialogitems, New Dialoginterface.onclicklistener () {@Override public void OnClick ( Dialoginterface dialog, int which) {switch (which) {case 0://d                        Elete This item mdataset.remove (position);                        notifyitemremoved (position);                    Break Case 1://add one item mdataset.add (position, New Cityinfobean ("New City", "                        010 "," Asia ")); Notifyiteminserted (position);                    Break  Case 2://todo Remember to change the data set ...//move one item to another                        Position notifyitemmoved (position, position + 2); May cause indexoutofboundsexception.                        This is just a demo!                    Break Case 3://change one item mdataset.get (position) setcityname ("City name Chan                        Ged ");                        Notifyitemchanged (position);                    Break Case 4://add many items list<cityinfobean> insertlist = new ArrayList                        <CityInfoBean> ();                        Insertlist.add (New Cityinfobean ("New City", "010", "Asia"));                        Insertlist.add (New Cityinfobean ("New City", "020", "America")); Mdataset.addall (position, insertlist);                        notifyitemrangeinserted (position, insertlist.size ());                    Break                Default:break;        }            }        });    Builder.create (). Show ();        } public static class Viewholder extends Recyclerview.viewholder {public TextView Citynametv, Phonetv, ADDRTV;            Public Viewholder (View v) {super (V);            Citynametv = (TextView) V.findviewbyid (r.id.city_name);            Phonetv = (TextView) V.findviewbyid (R.id.city_phone);        ADDRTV = (TextView) V.findviewbyid (R.ID.CITY_ADDR); }    }}

(3) Main Page layout file:

Recycler_layout.xml:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:orientation=" vertical "    android:layout_width=" match_parent "    android:layout_height= "Match_parent" >    <android.support.v7.widget.recyclerview        android:id= "@+id/my_recycler_view"        android:scrollbars= "vertical"        android:layout_width= "match_parent"        android:layout_height= "Match_parent" /></linearlayout>

Second, the use of CardView

CardView is another new component provided by Google in the support V7 package, which makes it easy to implement a "card layout" (stereoscopic effect with projected/rounded corners). CardView inherits from Framelayout, so if you need to place multiple components without overlapping internally, you may need to nest a linearlayout or relativelayout, and so on.

：

Layout file:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Match_parent" android:layout_height= "Wrap_content" xmlns:card_view= "Http://schemas.android.com/apk/res-auto" > < Android.support.v7.widget.CardView android:id= "@+id/card_view" android:layout_gravity= "center" Androi D:layout_width= "Match_parent" android:layout_height= "200DP" android:layout_margin= "6DP" Card_view:car        dcornerradius= "4DP" card_view:cardbackgroundcolor= "@color/card_bg" card_view:cardelevation= "4DP" >            <linearlayout android:layout_width= "match_parent" android:layout_height= "Match_parent" Android:layout_margin= "6DP" android:orientation= "vertical" > <imageview Android : layout_width= "wrap_content" android:layout_height= "Wrap_content" android:contentdescription = "@null" android:src= "@draWable/ic_launcher "/> <textview android:id=" @+id/info_text "Android:layout_                Width= "Match_parent" android:layout_height= "match_parent" android:textsize= "18SP" android:text= "@string/example_text"/> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout>

Attribute Explanation:

Cardcornerradius: round corner size;

Cardelevation: Depth of projection;

Cardbackgroundcolor: The background color of the card.

Android Material Design Details (using Support V7 compatible with 5.0 or less systems)