Make RecyclerView to wrap its content when using CardView with square ImageView

Question

I am trying to achieve following structure (image below). As you can see there are two sections with RecyclerViews and CardViews in it. These two sections are divided by two TextViews with Buttons.

Each section should match screen width (minus indent between cards). Each CardView has square ImageView in it. So the height of CardView itself depend on screen width: card_height = screen_width - indent_between_cards + space_for_card_text. To achieve this behaviour I use simple SquareImageView, which looks like this:

public class SquaredImageView extends ImageView {

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

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

  public SquaredImageView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      int width = getMeasuredWidth();
      setMeasuredDimension(width, width);
  }
}

The CardView layout looks like this:

<CardView 
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="0dp"
    android:background="@color/snow"
    android:clickable="true"
    android:orientation="vertical">

    <!-- Image -->
    <com.test.views.SquaredImageView
        android:id="@+id/card_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Content -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:orientation="horizontal">

        <!-- Title -->
        <TextView
            android:id="@+id/card_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:singleLine="true"
            android:textColor="@color/stone_dark"
            android:textSize="14sp" />

        <!-- Button -->
        <ImageView
            android:id="@+id/card_menu"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:scaleType="center"
            android:src="@drawable/ic_menu" />    
    </LinearLayout>
</CardView>

It means, that RecyclerView's adapter don't know the dimensions of CardView in advance.

As you probably know, RecyclerView has no system, which can measure its child-views, to make wrap its content correctly.

But unpredictable SquareImageView + fullscreen RecyclerView works fine in most of cases except the one described in this question.

• So what's the problem? You should use your own LayoutManager or WrappableLayoutManager by @se-solovyev to solve your problem.

The problem is in unpredictable SquareImageView. When LayoutManager tries to measure its child, it gets nothing. It means that RecyclerView displayed in fullscreen (as if height and width are set to match_parent).

So the question is: how to make RecyclerView with unpredictable SquareImageViews wrap its content correctly?