Material Design UI Widgets

The Android L Developer Preview Support Library offers two new Widgets,recyclerview and CardView.

Use these two widgets to display complex ListView and card layouts. These two widgets use material design by default.

Recyclerview

Recyclerview is a listview of a more advanced Flex version number. Recyclerview is a container that can include very many views. It handles loops and scrolls perfectly. The item dynamically changes in the ListView using Recyclerview.

Recyclerview is very easy to use. Because it provides:

1, positioning the item layout manager

2. Common Item Action default animation

You have the flexibility to define layout managers and animations for recyclerview yourself.

Use Recyclerview. You must define a layout manager by using the specified adapter. Create Adapter must inherit from Recyclerview.adapter. The details of the implementation need to look at the data type and the required view.

Recyclerview Widget

Recyclerview provides the LayoutManager. Recylerview is not responsible for the layout of the sub-View, we can define the LayoutManager to achieve different layout effect, now only provides Linearlayoutmanager.

Linearlayoutmanager can specify the direction. The default is vertical and can be specified horizontally, so that the horizontal ListView is easily implemented.

Recyclerview Demo:

1. layout file

<!--A Recyclerview with some commonly used attributes--><android.support.v7.widget.recyclerview    Android : id= "@+id/my_recycler_view"    android:scrollbars= "vertical"    android:layout_width= "Match_parent    " android:layout_height= "Match_parent"/>

2. Activity file

public class MyActivity extends Activity {private Recyclerview mrecyclerview;    Private Recyclerview.adapter Madapter;    Private Recyclerview.layoutmanager Mlayoutmanager;        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (r.layout.my_activity);        Mrecyclerview = (Recyclerview) Findviewbyid (R.id.my_recycler_view); Improve performance If you know this changes in content//does not change the size of the Recyclerview mRe        Cyclerview.sethasfixedsize (TRUE);        Use a linear layout manager Mlayoutmanager = new Linearlayoutmanager (this);        Mrecyclerview.setlayoutmanager (Mlayoutmanager);        Specify an adapter (see also next example) Madapter = new Myadapter (myDataSet);    Mrecyclerview.setadapter (Madapter); }    ...} To create a simple Adapter:public class Myadapter extends recyclerview.adapter<myadapter.viewholder> {private St ring[] Mdataset;  Provide a reference to the type of views the is using//(custom Viewholder) public static class Viewholder        Extends Recyclerview.viewholder {public TextView mtextview;            Public Viewholder (TextView v) {super (V);        Mtextview = v;        }}//provide a suitable constructor (depends on the kind in dataset) public Myadapter (string[] mydataset) {    Mdataset = myDataSet; }//Create new Views (invoked by the layout manager) @Override public Myadapter.viewholder Oncreateviewholder (Vi Ewgroup parent, int viewtype) {//Create a new View view        v = layoutinflater.from (Parent.getcontext ()). Inflate (R.layout.my_text_view, NULL);        Set the view ' s size, margins, paddings and layout parameters ...        Viewholder VH = new Viewholder (v);    return VH; }//Replace the contents of a view (invoked By the layout manager) @Override public void Onbindviewholder (viewholder holder, int position) {//-get El Ement from your datasets at this position//-Replace the contents of the view with that element Holder.mtex    Tview.settext (Mdataset[position]);        }//Return the size of your dataset (invoked by the layout manager) @Override public int GetItemCount () {    return mdataset.length; }}

3, Recycler Adapter

public class Myadapter extends recyclerview.adapter<myadapter.viewholder> {private string[] mdataset;  Provide a reference to the type of views the is using//(custom Viewholder) public static class Viewholder        Extends Recyclerview.viewholder {public TextView mtextview;            Public Viewholder (TextView v) {super (V);        Mtextview = v;        }}//provide a suitable constructor (depends on the kind in dataset) public Myadapter (string[] mydataset) {    Mdataset = myDataSet; }//Create new Views (invoked by the layout manager) @Override public Myadapter.viewholder Oncreateviewholder (Vi Ewgroup parent, int viewtype) {//Create a new View view        v = layoutinflater.from (Parent.getcontext ()). Inflate (R.layout.my_text_view, NULL);        Set the view ' s size, margins, paddings and layout parameters ... VieWholder VH = new Viewholder (v);    return VH; }//Replace the contents of a view (invoked by the layout manager) @Override public void Onbindviewholder (viewho Lder holder, int position) {//-get element from your dataset at this position//-Replace the contents O    f The view with that element Holder.mTextView.setText (Mdataset[position]);        }//Return the size of your dataset (invoked by the layout manager) @Override public int GetItemCount () {    return mdataset.length; }}

Recyclerview Standardized Viewholder, writing Adapter for Viewhoder instead of view, the logic of reuse is encapsulated and easier to write.

CardView

CardView inherits from the Framelayout class and is able to display content consistently in a card layout. The card can include rounded corners and shadows.

The ability to use the Android:elevation property to create a shaded card.

How to specify the properties of CardView:

1. Use the Android:cardcornerradius property to specify the fillet radius

2. Use Cardview.setradius to set the fillet radius.

3. Set the card color using the Android:cardbackgroundcolor property

Create the CardView in the Create layout file:

<!--a cardview that contains a TextView--><android.support.v7.widget.cardview    xmlns:card_view= "/http Schemas.android.com/apk/res-auto "    android:id=" @+id/card_view "    android:layout_gravity=" center    " Android:layout_width= "200DP"    android:layout_height= "200DP"    card_view:cardcornerradius= "4DP" >    <textview        android:id= "@+id/info_text"        android:layout_width= "match_parent"        android:layout_height = "Match_parent"/></android.support.v7.widget.cardview>

/*** @author Zhang Xingye* HTTP://BLOG.CSDN.NET/XYZ_LMN* My Sina Weibo: @ Zhang Xingye tbow */

References:

Http://developer.android.com/preview/material/ui-widgets.html

Material Design UI Widgets