Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to show RecylerView as GridView in Android?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 454
    Comment on it

    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;
        }
    }
    
    

     

    How to show RecylerView as GridView in Android?

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: