To create complex list and cards we have to use RecyclerView and CardView.
RecyclerView is a view that shows items in scrolling list (vertical/horizontal) or in grid layout. RecyclerView have advanced features over ListView. RecyclerView provides maximum flexibility to design different kind of views. RecyclerView provides build-in Layout managers like LinearLayoutManager for vertical and horizontal scrolling list, GridLayoutManager for grid view, and StaggeredGridLayoutManager for items in a staggered grid look. Similar like list view RecyclerView also uses adapter class which extends RecyclerView.Adapter class.
Card view can have consistent look across the platform. Card view helps to wrap other UI elements like TextView, EditText, Buttons, ImageView as Google style cards. CardView widgets can have elevation, background color, shadows, rounded corners and compact padding.
MainActivity Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#C4AC79"
android:scrollbars="vertical" />
</LinearLayout>
MainActivity using Recycler View
import android.os.Bundle;
import android.app.Activity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
public class MainActivity extends Activity {
private RecyclerView mRecyclerView;
private RecyclerView.Adapter mAdapter;
private RecyclerView.LayoutManager mLayoutManager;
private ArrayList<MyList> list = new ArrayList<MyList>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
mRecyclerView.setHasFixedSize(true);
// LinearLayoutManager shows items in a vertical or horizontal scrolling list.
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
for (int i=1;i<5;i++){
list.add(new MyList(i +". Android Developers","Evon-Tech",R.drawable.download+i));
}
// Attach an adapter for the data to be displayed
mAdapter = new MyAdapter(list);
mRecyclerView.setAdapter(mAdapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Card View Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 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_width="match_parent"
android:layout_height="225dp"
android:layout_gravity="center"
card_view:cardBackgroundColor="#497AB8"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="10.5sp"
card_view:cardMaxElevation="0dp"
card_view:cardPreventCornerOverlap="true"
card_view:cardUseCompatPadding="true"
card_view:contentPadding="5dp">
<ImageView
android:id="@+id/ivImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:layout_alignParentTop="true" />
<TextView
android:id="@+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:text="@string/forest"
android:textSize="15dp"
android:layout_marginBottom="12dp"
android:textColor="#FFFFFF"
android:layout_gravity="bottom|center" />
</android.support.v7.widget.CardView>
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"/>
<TextView
android:id="@+id/tvSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:padding="2dp"
android:layout_marginLeft="10dp" />
</LinearLayout>
Creating Recycler View Adapter
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private ArrayList<MyList> list;
public static class ViewHolder extends RecyclerView.ViewHolder {
// each data item is just a string in this case
public View view;
public ViewHolder(View v) {
super(v);
view = v;
}
}
// Provide a suitable constructor (depends on the kind of dataset)
public MyAdapter(ArrayList<MyList> list) {
this.list = list;
}
// Create new views (invoked by the layout manager)
@Override
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_my_adapter, parent, false);
// set the view's size, margins, paddings and layout parameters
ViewHolder viewHolder = new ViewHolder(v);
return viewHolder;
}
// Replace the contents of a view (invoked by the layout manager)
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
TextView title = (TextView) holder.view.findViewById(R.id.tvTitle);
TextView desc = (TextView) holder.view.findViewById(R.id.tvSubtitle);
final ImageView imageView = (ImageView) holder.view.findViewById(R.id.ivImage);
title.setText(list.get(position).getTitle());
desc.setText(list.get(position).getSubtitle());
imageView.setImageResource(list.get(position).getSrc_image());
}
// Return the size of your dataset (invoked by the layout manager)
@Override
public int getItemCount() {
return list.size();
}
}
MyList class for adding data
public class MyList {
String title;
String subtitle;
int src_image;
public int getSrc_image() {
return src_image;
}
public String getTitle() {
return title;
}
public String getSubtitle() {
return subtitle;
}
public MyList(String title, String subtitle, int src_image) {
this.title = title;
this.subtitle = subtitle;
this.src_image = src_image;
}
}
Add Dependencies:-
The RecyclerView and CardView widgets are part of the v7 Support Libraries. Android Studio users can add the following graddle dependency to project build.graddle file.
dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
0 Comment(s)