Wie macht man diese gestaffelte GridView?

Question

Hallo ich habe versucht, so etwas durch XML-Code in android Studio zu machen, kann aber nicht herausfinden, obwohl ich teilweise dort erreicht, aber fühle mich nicht richtig Ansatz kann mir bitte sagen, wie genau ich dieses Layout machen kann XML oder Java.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_margin="2dp" 
    tools:context="com.stocks.android.gridview.MainActivity"> 

    <LinearLayout 
     android:id="@+id/linear_one" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="5dp" 
     android:orientation="horizontal"> 

     <android.support.v7.widget.CardView 
      android:layout_width="280dp" 
      android:layout_height="200dp" 
      android:layout_marginRight="5dp" 
      android:layout_weight="40" 
      app:cardBackgroundColor="#BCE36E" 
      app:cardCornerRadius="4dp"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/img1" /> 

     </android.support.v7.widget.CardView> 

     <android.support.v7.widget.CardView 
      android:layout_width="200dp" 
      android:layout_height="200dp" 
      android:layout_weight="60" 
      app:cardBackgroundColor="#8BD3FB" 
      app:cardCornerRadius="4dp"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/img2" /> 

     </android.support.v7.widget.CardView> 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/linear_two" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/linear_one" 
     android:layout_margin="5dp" 
     android:orientation="horizontal"> 

     <android.support.v7.widget.CardView 
      android:layout_width="200dp" 
      android:layout_height="200dp" 
      android:layout_weight="60" 
      app:cardBackgroundColor="#FFB637" 
      app:cardCornerRadius="4dp"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/img2" /> 
     </android.support.v7.widget.CardView> 

     <LinearLayout 
      android:layout_width="200dp" 
      android:layout_height="200dp" 
      android:layout_marginLeft="5dp" 
      android:orientation="vertical"> 

      <android.support.v7.widget.CardView 
       android:layout_width="200dp" 
       android:layout_height="100dp" 
       app:cardBackgroundColor="#FB7649" 
       app:cardCornerRadius="4dp"> 

       <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/img3" /> 

      </android.support.v7.widget.CardView> 

      <android.support.v7.widget.CardView 
       android:layout_width="200dp" 
       android:layout_height="95dp" 
       android:layout_marginTop="5dp" 
       app:cardBackgroundColor="#F1F1F1" 
       app:cardCornerRadius="4dp"> 

       <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/img7" /> 

      </android.support.v7.widget.CardView> 
     </LinearLayout> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/linear_two"> 

     <android.support.v7.widget.CardView 
      android:layout_width="280dp" 
      android:layout_height="200dp" 
      android:layout_marginRight="5dp" 
      android:layout_weight="60" 
      app:cardBackgroundColor="#F34F45" 
      app:cardCornerRadius="4dp"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/img6" /> 

     </android.support.v7.widget.CardView> 

     <android.support.v7.widget.CardView 
      android:layout_width="200dp" 
      android:layout_height="200dp" 
      android:layout_weight="40" 
      app:cardBackgroundColor="#55C6FF" 
      app:cardCornerRadius="4dp"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/img4" /> 

     </android.support.v7.widget.CardView> 
    </LinearLayout> 
</RelativeLayout> 

Answer 1

eine Klasse für die dynamischen Höhenbilder machen.

public class DynamicHeightNetworkImageView extends ImageView { 
private float mAspectRatio = 1.5f; 

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

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

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

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

public void setAspectRatio(float aspectRatio) { 
    mAspectRatio = aspectRatio; 
    requestLayout(); 
} 

}

und verwenden Sie es in Ihrem XML-Datei

<com.dmitrymalkovich.android.xyzreader.ui.DynamicHeightNetworkImageView 
     android:id="@+id/thumbnail" 
     android:layout_width="match_parent" 
     android:background="@color/material_grey_300" 
     android:layout_height="wrap_content" /> 

Sehen Sie diese Github rep: https://github.com/DmitryMalkovich/make-your-app-material