Best way to achieve grid RecyclerView, where items are square images with some text below it

Question

I'm developing a music store where we show the albums in a grid. Each item is comprised of a cover album (which is a square image) and some text below it which shows artist name, album name, etc. This is the approximate result that I want:

Cover images are not uni-sized, some are 1000x1000, some are 500x500, and maybe there'll be some other sizes.

This is the current xml layout that I use for each item:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/cover"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/artistName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

Here is the important part of the RecyclerView's Adapter, the rest is typical stuff:

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    holder.artistName.setText(mAlbums.get(position).name);

    Picasso.with(holder.cover.getContext())
            .load(mAlbums.get(position).primaryImage)
            .into(holder.cover);
}

I get this result:

The right picture is 500x500 and the other two are 1000x1000

However if I add some resize to the images

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    holder.artistName.setText(mAlbums.get(position).name);

    Picasso.with(holder.cover.getContext())
            .load(mAlbums.get(position).primaryImage)
            .resize(300, 300)
            .centerInside()
            .into(holder.cover);
}

I'll get a better result like:

300 is just a random number. I can replace it with SCREEN_WIDTH/3.

So.... Is there a better approach to tackle this problem (which I think is a very general problem in apps)?

score 1 · Answer 1 · edited May 23 '17 at 12:34

use the following SquareRelativeLayout

package net.simplyadvanced.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

/** A RelativeLayout that will always be square -- same width and height,
 * where the height is based off the width. */
public class SquareRelativeLayout extends RelativeLayout {

public SquareRelativeLayout(Context context) {
    super(context);
}

public SquareRelativeLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public SquareRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@TargetApi(VERSION_CODES.LOLLIPOP)
public SquareRelativeLayout(Context context, AttributeSet attrs,         int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // Set a square layout.
    super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}

}

look at the answer Recyclerview - GridLayoutManager: Set square dimensions

score -1 · Answer 2 · answered Sep 09 '15 at 11:45

you can do like this. on your activity/fragment.

private void setRecyclerView() {
    productRecyclerView.setHasFixedSize(true);
    final GridLayoutManager layoutManager = new GridLayoutManager(getActivity(), 3);
    productRecyclerView.setLayoutManager(layoutManager);
    recyclerViewAdapter = new ProductListAdapter(getActivity());
    productRecyclerView.setAdapter(recyclerViewAdapter);
}

or you can achieve by adding different viewholders of different row/column heights.

score -3 · Answer 3 · answered Sep 09 '15 at 11:41

Use a fixed height for item xml Like

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="wrap_content"
              android:layout_height="100dp">

    <ImageView
        android:id="@+id/cover"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/artistName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

Hope this will solve the problem

Best way to achieve grid RecyclerView, where items are square images with some text below it

3 Answers3