Как создать схему вида карты CardView?

Question

я боролся с GridLayout и TableLayout за последние пару часов и для жизни меня не может найти способ, чтобы сделать CardView, который выглядит следующим образом:

В настоящее время у меня есть CardView родитель с этим GridLayout является ребенок:

<GridLayout 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:layout_gravity="center" 
    android:rowCount="3" 
    android:columnCount="3" 
    android:orientation="horizontal" 
    android:padding="20dp"> 
    <!--FirstRow--> 
    <ImageView 
     android:id="@+id/away_logo" 
     android:layout_row="1" 
     android:layout_column="0" 
     android:layout_columnWeight="0.3" 
     android:layout_gravity="start" 
     android:gravity="center_vertical" 
     android:src="@android:drawable/btn_star_big_on"/> 
    <LinearLayout 
    android:id="@+id/scores_layout" 
    android:layout_row="1" 
    android:layout_rowWeight="0.5" 
    android:layout_column="1" 
    android:layout_columnWeight="0.4" 
    android:layout_gravity="center" 
    android:orientation="horizontal"> 
     <TextView 
      android:id="@+id/away_score_textview" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical" 
      android:text="10" 
      android:gravity="center_vertical|start" 
      android:layout_weight="0.5"/> 
     <TextView 
      android:id="@+id/home_score_textview" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="end|center_vertical" 
      android:text="11" 
      android:gravity="center_vertical|end" 
      android:layout_weight="0.5"/> 
    </LinearLayout> 
    <ImageView 
     android:id="@+id/home_logo" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_row="1" 
     android:layout_rowWeight="0.33" 
     android:layout_column="2" 
     android:layout_columnWeight="0.3" 
     android:layout_gravity="start" 
     android:gravity="center_vertical" 
     android:src="@android:drawable/btn_star_big_on"/> 
    <!--SecondRow--> 
    <TextView 
     android:id="@+id/away_textview" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_row="2" 
     android:layout_rowWeight="0.3" 
     android:layout_column="0" 
     android:layout_columnWeight="0.33" 
     android:layout_gravity="start" 
     android:text="Team" 
     android:gravity="center_vertical"/> 
    <TextView 
     android:id="@+id/home_textview" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_row="2" 
     android:layout_rowWeight="0.3" 
     android:layout_column="2" 
     android:layout_columnWeight="0.33" 
     android:layout_gravity="end" 
     android:text="Team" 
     android:gravity="center_vertical"/> 
    <!--LastRow--> 
    <TextView 
     android:id="@+id/time_rink_textview" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_row="0" 
     android:layout_rowWeight="0.3" 
     android:layout_column="0" 
     android:layout_columnSpan="3" 
     android:layout_columnWeight="1" 
     android:text="7:00P.M.atBotany" 
     android:layout_gravity="center_horizontal"/> 
</GridLayout> 

что дает этот макет, где звезды заполнители визуализировать, где ImageViews являются и баллы 1 - 13:

Answer 1

Попробуйте этот макет

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

    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:gravity="center" 
     android:padding="10dp" 
     tools:text="7:00 P.M. at Venue"/> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="2" 
      android:orientation="vertical" 
      android:padding="5dp"> 

      <ImageView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:adjustViewBounds="true" 
       tools:src="@drawable/team_1_image"/> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:gravity="center" 
       android:padding="8dp" 
       tools:text="Team 1"/> 
     </LinearLayout> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:gravity="center" 
      tools:text="1 - 3"/> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="2" 
      android:orientation="vertical" 
      android:padding="5dp"> 

      <ImageView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:adjustViewBounds="true" 
       tools:src="@drawable/team_2_image"/> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:gravity="center" 
       android:padding="8dp" 
       tools:text="Team 2"/> 
     </LinearLayout> 
    </LinearLayout> 
</LinearLayout> 

Answer 2

Почему бы не попробовать использовать относительный макет, чтобы содержать внутренний контент (также можно сделать это для названия), а также выровнять представления в соответствии с родительскими, левыми, правыми и центральными частями, и он должен работать на вас.