Create a Material Design-style Android app: Create a list and a card

Create a Material Design-style Android app: Create a list and a card

The last time I talked about using theme, applying the Material Design style, and card layout is also an important part of Material Design. I will write it today.

Introduction

Create a complex List and Card of the Material Design style in the program. You can use the RecyclerView and CardView components, which are provided in the latest support v7 package (version 21. Therefore, we need to introduce the dependency package:

 
 

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

Create List

The RecylerView component is a more efficient and flexible ListView. When this component is used, a container that displays large datasets can effectively scroll and maintain a certain number of views. When you use the RecyclerView component, when you have a dataset and its elements change according to your operations or network events during running.

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

Layout Manager Control Element positioning.

Display default animations on common elements, such as removing and adding elements.

To use the RecyclerView component, you must specify an Adapter and layout manager and create an Adapter to inherit the RecyclerView. adapter class, the specific implementation details should vary according to the type of the data set view. For more information, see the following example.

A layout manager locates the Item view in the RecyclerView and determines when to recycle it when it is no longer visible. When reusing or recycling a view, the layout manager can request the Adapter) to replace the content in the subview with different content. In this way, reuse views can be recycled to reduce the creation of views and avoid more findViewById (), thus improving performance.

RecyclerView provides the following built-in layout manager:

LinearLayoutManager displays items in a horizontal or vertical scroll list.

GridLayoutManager displays items as grid la S.

StaggeredGridLayoutManager displays the layout of items on the staggered grid.

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

RecylerView component

Animation:

RecyclerView has animations by default. When you delete or add an Ite. To customize an animation, inherit the RecyclerView. ItemAnimator class and use the RecyclerView. setItemAnimator () method to set the animation to our view.

The following is an example:

1. First add a RecyclerView in 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. Use it in our Java code. append the Adapter and data to display it.

 
 

  
  
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 items in the dataset, creates a view mapped to the data, and replaces the layout content data with the new Item. The following code shows a simple implementation. TextView is used 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 a Card

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

Create a shadow Card and use the card_view: cardElevation attribute. CardView uses real height and dynamic shadows in Android5.0 (API 21) and later versions, while earlier versions use traditional shadows.

Use these attributes to customize the appearance of CardView:

Use the card_view: cardCornerRadius attribute to set the radius of the rounded corner.

Use the CardView. setRadius method to set the radius of the rounded corner in java code.

Set the background color of the card and use the card_view: cardBackgroundColor attribute.

The following is an example of 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

Chaos

You can see the RecyclerView above. It is similar to the ListView we often use, but its parent class is not AbsListView, so it cannot be mixed for use. However, you can replace ListView in many places. By reusing ViewHolder and View, you can see that this is a more efficient View component, which is recommended.

CardView is essentially a component that conforms to the Material Design and uses the Card layout for better results. Many people may have used some CardUi before. Google officially published this and it is strongly recommended to use it.

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

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

Original article address: Workshop.