Search code examples
androidandroid-recyclerviewgrid-layoutrecyclerview-layoutgridlayoutmanager

Resizing and positioning RecyclerView items


I am using RecyclerView to show items in Grid layout. Below is the image of emulator and the desire results i need to achieve. Left side (executing) image is the output on my emulator, while Right Side (Desired) is the output i want to achieve.

Activity Layout XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/parentLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#d3c3c3">

 <include
    android:id="@+id/toolBarIncluded"
    layout="@layout/toolbar_new_layout" />


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolBarIncluded"
    android:orientation="vertical"
    android:weightSum="1">

    <RelativeLayout

        android:id="@+id/recyclerAdView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="0.65"
        android:background="#009688" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/recyclerAdView"
        android:layout_gravity="center"
        android:layout_weight="0.35"
        android:background="#00000000"
        android:gravity="center">

        <android.support.v7.widget.RecyclerView

            android:id="@+id/recyclerGridView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:background="#00000000"
            android:foregroundGravity="center" />

    </RelativeLayout>

</LinearLayout>

List Item XML

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/llGridItemLayout"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="6dp"
 android:background="@drawable/drawable_grid_item_background"
 android:gravity="center"
 android:paddingStart="2dp"
 android:paddingEnd="2dp"
 android:orientation="vertical">

 <ImageView
    android:id="@+id/ivItemIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitCenter"
    android:src="@drawable/ic_new_receipt_wrong" />

  <TextView
    android:layout_marginTop="6dp"
    android:id="@+id/tvItemName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:lines="1"
    android:text="My Complaints"
    android:textSize="14sp" />

 </LinearLayout>

Activity Code Snippet

    gridLayoutManager = new GridLayoutManager(MainActivity.this, 3);
    recyclerView.setHasFixedSize(true);
    recyclerView.setLayoutManager(gridLayoutManager);
    recyclerView.setAdapter(demoDashAdapter);

Adapter Code Snippet

int viewHeight ,viewWidth ;
public onCreateViewHolder(){
   viewHeight = viewGroup.getMeasuredHeight() / 4;
   viewWidth = viewGroup.getMeasuredWidth() / 3;
  ...
}

public onBindViewHolder(){

  viewHolder.itemLayout.setMinimumWidth(viewWidth);
  viewHolder.itemLayout.setMinimumHeight(viewHeight);
  ...
}

Image Hence my question here is, how can i dynamically resize the items in the recyclerView. Please note that i am using layout weight as 0.65 and 0.35 against the weightSum 1;

please guide me.


Solution

  • why viewHeight = viewGroup.getMeasuredHeight() / 4?

    if you want to display 3 rows just divide by 3. Take also into account margins that you have inside your item.xml

    So getting height for each item in a row should be something like:

    (viewGroup.getMeasuredHeight()/3) - (marginTop + marginBot)