This tutorial will guide you to display a RecylerView list item as GridLayout items. We will use GridLayoutManager rather than LinearLayoutManager with RecylerView adapter. Here, we will discuss all required stuff's to complete this project step by step.
Step 1- Create an card_view_list.xml file
android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_view"
android:layout_width="80dp"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="8dp"
android:layout_marginBottom="16dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/action_settings"
android:src="@drawable/ic_list"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/text_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="13sp"
android:text="Item"
android:textColor="@color/accent_color"
android:gravity="center"
android:layout_below="@+id/image_name"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:layout_alignParentBottom="true"
android:background="@color/color_primary_dark"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
Step 2- RecyclerView adapter as shown below.
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolders> {
private List<String> itemList;
private Context context;
public RecyclerViewAdapter(Context context, List<String> itemList) {
this.itemList = itemList;
this.context = context;
}
@Override
public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {
View layoutView =LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view_list, null);
RecyclerViewHolders rcv = new RecyclerViewHolders(layoutView);
return rcv;
}
@Override
public void onBindViewHolder(RecyclerViewHolders holder, int position) {
holder.textName.setText(itemList.get(position));
/**
* you can set image icon here as below
* holder.imageName.setBackgroundResource(R.drawable.ic_list);
*/
}
@Override
public int getItemCount() {
return this.itemList.size();
}
}
Step 3- Defined here RecyclerViewHolders class.
public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener{
public TextView textName;
public ImageView imageName;
public RecyclerViewHolders(View itemView) {
super(itemView);
itemView.setOnClickListener(this);
textName = (TextView)itemView.findViewById(R.id.text_name);
imageName = (ImageView)itemView.findViewById(R.id.image_name);
}
@Override
public void onClick(View view) {
Toast.makeText(view.getContext(), "Clicked Position = " + getPosition(), Toast.LENGTH_SHORT).show();
}
Step 4- Finally, we will create MainActivity.java class . In this class we will get instance of GridLayoutManager rather than LinearLayoutManager and set with RecylerView .
When we get instance of GridLayoutManger, we have to define spanCount variable(specify number of items in one row) also inside GridLayoutManager class constructor.
public class MainActivity extends ActionBarActivity {
private GridLayoutManager lLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// return arrayList with name of items
ArrayList<String> allItemList = getAllItemList();
// Get instance of layoutManager and specify number of items in a row
lLayout = new GridLayoutManager(MainActivity.this, 4);
// set GridLayoutManager with recyclerview
RecyclerView rView = (RecyclerView)findViewById(R.id.recycler_view);
rView.setHasFixedSize(true);
rView.setLayoutManager(lLayout);
// set adatper
RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter(MainActivity.this, allItemList);
rView.setAdapter(rcAdapter);
}
private ArrayList<String> getAllItemList(){
ArrayList<String> arrayList=new ArrayList<>();
arrayList.add("Item1");
arrayList.add("Item2");
arrayList.add("Item3");
arrayList.add("Item4");
arrayList.add("Item5");
arrayList.add("Item6");
arrayList.add("Item7");
arrayList.add("Item8");
arrayList.add("Item9");
arrayList.add("Item10");
return arrayList;
}
}
0 Comment(s)