Creating a Material Design Android App: Creating Lists and Cards

Last time I talked about using themes and applying the Material Design style. At the same time, card layout is also an important part of Material Design. Let’s write about it today.

introduction

To create complex Material Design style List and Card in the program, you can use RecyclerView and CardView components, which are provided in the *** support v7 package (version 21). Therefore, you need to introduce the dependent package:

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

Creating a List

The RecyclerView component is a more efficient and flexible ListView. This component is a container for displaying large data sets, which can scroll efficiently and keep a certain number of views displayed. Use the RecyclerView component when you have a data set and the elements of the data set change at runtime based on user operations or network events.

The RecylerView class simplifies the display and processing of large data sets by providing:

Layout managers control the positioning of elements.

Displays default animations for common element operations, such as removing and adding elements.

To use the RecyclerView component, you need to specify an Adapter and a layout manager. Create an Adapter that extends the RecyclerView.Adapter class. The specific implementation details vary depending on the type of data collection view. For more information, see the following example.

A layout manager positions the Item view in the RecyclerView and decides when to recycle it when it is no longer visible. When reusing (or recycling) a view, the layout manager may request the adapter to replace the content in the subview with different content. Recycling and reusing views in this way can reduce the creation of views and avoid more findViewById(), thereby improving performance.

RecyclerView provides the following built-in layout managers:

LinearLayoutManager displays Item in a horizontal or vertical scrolling list.

GridLayoutManager displays Item as a grid layout.

StaggeredGridLayoutManager displays Item in a staggered grid layout.

You can also create your own custom layout manager by inheriting the RecyclerView.LayoutManager class.

RecylerView Component

Animation:

RecyclerView has animation by default when deleting or adding Items. If you need a custom animation, inherit the RecyclerView.ItemAnimator class and use the RecyclerView.setItemAnimator() method to set the defined animation to our view.

Let's start with an example:

1. First add a RecyclerView to the xml 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. Then use it in our Java code, attach the Adapter and data and it will be displayed.

 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); 
 
 // use this setting to improve performance if you know that changes   
 
 // in content do not change the layout size of the RecyclerView   
 
 mRecyclerView.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); 
 
 }
 ...
 }

3. The Adapter provides access to the Items in the data set, creates a view mapped to the data, and replaces the content data of the layout with the new item. The following code shows a simple implementation, using a TextView to display a simple String array.

 public   class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { 
 
 private String[] mDataset; 
 
 // Provide a reference to the views for each data item   
 
 // Complex data items may need more than one view per item, and   
 
 // you provide access to all the views for a data item in a view holder   
 
 public   static   class ViewHolder extends RecyclerView.ViewHolder { 
 
 // each data item is just a string in this case   
 
 public TextView mTextView; 
 
 public ViewHolder(TextView v) { 
 
 super (v); 
 
 mTextView = v; 
 
 } 
 
 } 
 
 // Provide a suitable constructor (depends on the kind of dataset)   
 
 public MyAdapter(String[] myDataset) { 
 
 mDataset = myDataset; 
 
 } 
 
 // Create new views (invoked by the layout manager)   
 
 @Override   
 
 public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, 
 
 int viewType) { 
 
 // create a new view   
 
 View v = LayoutInflater.from(parent.getContext()) 
 
 .inflate(R.layout.my_text_view, parent, false ); 
 
 // 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 element from your dataset at this position   
 
 // - replace the contents of 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; 
 
 }
 }

Create Card

CardView inherits the FrameLayout class, which allows you to display information inside the card and have a unified style on different platforms. The CardView component can have shadows and rounded corners.

To create a card with a shadow, use the card_view:cardElevation property. CardView uses real height and dynamic shadows on Android 5.0 (API 21) and higher, and earlier versions use traditional shadows.

Use these properties to customize the appearance of CardView:

Use the card_view:cardCornerRadius attribute to set the radius of the rounded corners in the layout file.

Use the CardView.setRadius method to set the radius of the rounded corners in the Java code.

To set the background color of a card, use the card_view:cardBackgroundColor attribute.

Here is an example of including a CardView in an XML layout file:

 < LinearLayout   xmlns:android = "http://schemas.android.com/apk/res/android"   
 
 xmlns:tools = "http://schemas.android.com/tools"   
 
 xmlns:card_view = "http://schemas.android.com/apk/res-auto"   
 
 ... >   
 
 <!-- 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 >   
 
 </LinearLayout>​​  

Card example image

Random

From the above, you can see RecyclerView. It is very similar to the ListView we often use, but its parent class is not AbsListView, so it cannot be used together. However, it can replace ListView in many places. Through ViewHolder and View reuse, you can see that this is a more efficient view component and is recommended.

CardView is essentially a component that is more in line with Material Design. It uses Card layout for better results. Many people may have used CardUi before. Google officially released this and it is highly recommended.

The RecyclerView and CardView above are written separately, but we can use them together, don't be confused.

Reference: http://developer.android.com/training/material/lists-cards.html

Original address: http://blog.isming.me/2014/10/21/creating-app-with-material-design-two-list/, please indicate the source when reprinting.