title: Best way to achieve grid RecyclerView, where items are square images with some text below it
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/MPSWT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MPSWT.png" alt="desired result"></a></p>
  
  <p>Cover images are not uni-sized, some are 1000x1000, some are 500x500, and maybe there'll be some other sizes.</p>
  
  <p>This is the current xml layout that I use for each item:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"&gt;
  
      &lt;ImageView
          android:id="@+id/cover"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"/&gt;
  
      &lt;TextView
          android:id="@+id/artistName"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"/&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>Here is the important part of the RecyclerView's Adapter, the rest is typical stuff:</p>
  
  <pre><code>@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);
  }
  </code></pre>
  
  <p>I get this result:</p>
  
  <p><a href="https://i.stack.imgur.com/DwtTc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DwtTc.png" alt="enter image description here"></a></p>
  
  <p>The right picture is 500x500 and the other two are 1000x1000</p>
  
  <p>However if I add some resize to the images</p>
  
  <pre><code>@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);
  }
  </code></pre>
  
  <p>I'll get a better result like:</p>
  
  <p><a href="https://i.stack.imgur.com/MYAsA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MYAsA.png" alt="enter image description here"></a></p>
  
  <p>300 is just a random number. I can replace it with SCREEN_WIDTH/3.</p>
  
  <p>So.... Is there a better approach to tackle this problem (which I think is a very general problem in apps)?</p>