title: specify layout width of cardview to fit all phone screen sizes
body: <p>need some advice here!</p>
  
  <p>Basically, I want my card view to be like the 2nd pic but without specifying a specific width size, as specifying a specific size will cause the layout to look differently to in other phones.</p>
  
  <p><strong>What I have tried:</strong></p>
  
  <p>1) tried wrap_content, but the sizes of the card view will be different depending on the contents inside it. Some will be long until it's overlaying the index panel, then some will be short. Also, it is definitely not match_parent because the index panel will overlay the cardview. <a href="https://i.stack.imgur.com/kB3Vu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kB3Vu.jpg" alt="wrapcontent"></a></p>
  
  <p>2) specify a specific number (315dp) for the width. It looked great on my actual phone, but not on other emulators. <a href="https://i.stack.imgur.com/qxpRR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qxpRR.jpg" alt="specified the width to 315dp"></a></p>
  
  <p>3) added <em>"android:layout_toStartOf="@+id/recycler_search"</em> to my card view layout, but there is no effect.</p>
  
  <hr>
  
  <p>Perhaps I could just demonstrate using my phone, but that will not be efficient isn't it? </p>
  
  <p>As such, anyone knows how I could overcome this? Any help is greatly appreciated! </p>
  
  <p>Here are my codes:</p>
  
  <p><strong>card view layout</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.v7.widget.CardView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="315dp"
  android:layout_height="wrap_content"
  android:layout_margin="10dp"
  app:cardCornerRadius="10dp"
  app:cardBackgroundColor="#f5f0f0"
  app:cardElevation="5dp"&gt;
  
  &lt;LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:layout_margin="5dp"&gt;
  
  
  &lt;LinearLayout
      android:orientation="vertical"
      android:layout_weight="9"
      android:layout_width="0dp"
      android:layout_height="wrap_content"&gt;
  
      &lt;TextView
          android:id="@+id/keyword"
          android:layout_marginLeft="10dp"
          android:gravity="center_vertical|start"
          android:textAllCaps="true"
          android:textStyle="bold"
          android:textColor="#000000"
          android:textSize="15dp"
          android:text="Baggage Management Interface Device 
          (BMID) Testing 123"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" /&gt;
  
      &lt;LinearLayout
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"&gt;
  
          &lt;TextView
              android:id="@+id/codeHeader"
              android:layout_marginLeft="10dp"
              android:layout_marginTop="5dp"
              android:gravity="center_vertical|start"
              android:textStyle="bold"
              android:textColor="#a8000000"
              android:text="Code:"
              android:textSize="13dp"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" /&gt;
  
          &lt;TextView
              android:id="@+id/acronym"
              android:layout_marginLeft="5dp"
              android:layout_marginTop="5dp"
              android:gravity="center_vertical|start"
              android:textStyle="italic"
              android:textColor="#a8000000"
              android:text="GST"
              android:textSize="13dp"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" /&gt;
  
      &lt;/LinearLayout&gt;
  
      &lt;!--&lt;LinearLayout--&gt;
          &lt;!--android:layout_width="wrap_content"--&gt;
          &lt;!--android:layout_height="wrap_content"&gt;--&gt;
  
          &lt;!--&lt;TextView--&gt;
              &lt;!--android:id="@+id/ruleHeader"--&gt;
              &lt;!--android:layout_marginLeft="10dp"--&gt;
              &lt;!--android:layout_marginTop="5dp"--&gt;
              &lt;!--android:gravity="center_vertical|start"--&gt;
              &lt;!--android:textStyle="bold"--&gt;
              &lt;!--android:textColor="#a8000000"--&gt;
              &lt;!--android:text="Desc:"--&gt;
              &lt;!--android:textSize="13dp"--&gt;
              &lt;!--android:layout_width="wrap_content"--&gt;
              &lt;!--android:layout_height="wrap_content" /&gt;--&gt;
  
          &lt;!--&lt;TextView--&gt;
              &lt;!--android:id="@+id/description"--&gt;
              &lt;!--android:layout_marginLeft="5dp"--&gt;
              &lt;!--android:layout_marginTop="5dp"--&gt;
              &lt;!--android:gravity="center_vertical|start"--&gt;
              &lt;!--android:textColor="#a8000000"--&gt;
              &lt;!--android:text="If none are set then 'GST' is 
              set to NULL"--&gt;
              &lt;!--android:textSize="13dp"--&gt;
              &lt;!--android:maxLines="2"--&gt;
              &lt;!--android:layout_width="wrap_content"--&gt;
              &lt;!--android:layout_height="wrap_content" /&gt;--&gt;
  
      &lt;!--&lt;/LinearLayout&gt;--&gt;
  
      &lt;!--&lt;LinearLayout--&gt;
          &lt;!--android:layout_width="wrap_content"--&gt;
          &lt;!--android:layout_height="wrap_content"&gt;--&gt;
  
      &lt;!--&lt;TextView--&gt;
          &lt;!--android:id="@+id/relatedKeyword"--&gt;
          &lt;!--android:layout_marginLeft="10dp"--&gt;
          &lt;!--android:layout_marginTop="5dp"--&gt;
          &lt;!--android:gravity="center_vertical|start"--&gt;
          &lt;!--android:textColor="#a8000000"--&gt;
          &lt;!--android:text="Related Keyword:"--&gt;
          &lt;!--android:textSize="12sp"--&gt;
          &lt;!--android:textStyle="bold"--&gt;
          &lt;!--android:layout_width="wrap_content"--&gt;
          &lt;!--android:layout_height="wrap_content" /&gt;--&gt;
  
          &lt;!--&lt;TextView--&gt;
              &lt;!--android:id="@+id/relatedKeyword1"--&gt;
              &lt;!--android:clickable="true"--&gt;
              &lt;!--android:layout_marginLeft="5dp"--&gt;
              &lt;!--android:layout_marginTop="5dp"--&gt;
              &lt;!--android:textColor="#a8000000"--&gt;
              &lt;!--android:text="Keyword 1,"--&gt;
              &lt;!--android:textSize="12sp"--&gt;
              &lt;!--android:layout_width="wrap_content"--&gt;
              &lt;!--android:layout_height="wrap_content"/&gt;--&gt;
  
          &lt;!--&lt;TextView--&gt;
              &lt;!--android:id="@+id/relatedKeyword2"--&gt;
              &lt;!--android:clickable="true"--&gt;
              &lt;!--android:layout_marginLeft="5dp"--&gt;
              &lt;!--android:layout_marginTop="5dp"--&gt;
              &lt;!--android:textColor="#a8000000"--&gt;
              &lt;!--android:text="Keyword 2,"--&gt;
              &lt;!--android:textSize="12sp"--&gt;
              &lt;!--android:layout_width="wrap_content"--&gt;
              &lt;!--android:layout_height="wrap_content"/&gt;--&gt;
  
          &lt;!--&lt;TextView--&gt;
              &lt;!--android:id="@+id/relatedKeyword3"--&gt;
              &lt;!--android:clickable="true"--&gt;
              &lt;!--android:layout_marginLeft="5dp"--&gt;
              &lt;!--android:layout_marginTop="5dp"--&gt;
              &lt;!--android:textColor="#a8000000"--&gt;
              &lt;!--android:text="Keyword 3"--&gt;
              &lt;!--android:textSize="12sp"--&gt;
              &lt;!--android:layout_width="wrap_content"--&gt;
              &lt;!--android:layout_height="wrap_content"/&gt;--&gt;
  
      &lt;!--&lt;/LinearLayout&gt;--&gt;
  
  
      &lt;TextView
          android:id="@+id/tv_rules_read_more"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="right"
          android:textStyle="bold"
          android:textSize="14sp"
          android:clickable="true"
          android:padding="5dp"
          android:textColor="@android:color/holo_blue_dark"
          android:text="@string/read_more"/&gt;
  
  
  &lt;/LinearLayout&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p></p>
  
  <hr>
  
  <p><strong>main layout</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.v4.widget.DrawerLayout
  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"
  xmlns:fab="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".KnowledgeActivity"
  android:background="@drawable/bokeh10"
  android:id="@+id/drawerLayout"&gt;
  
  &lt;RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
  app:layout_behavior="@string/appbar_scrolling_view_behavior"&gt;
      &lt;ImageView
          android:id="@+id/drawable_header"
          android:layout_width="match_parent"
          android:layout_height="70dp"
          android:src="@drawable/bg_login"/&gt;
  
      &lt;com.mancj.materialsearchbar.MaterialSearchBar
          android:id="@+id/search_bar"
          android:layout_alignParentTop="true"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:mt_speechMode="false"
          app:mt_hint="Search" /&gt;
  
  &lt;in.myinnos.alphabetsindexfastscrollrecycler.IndexFastScrollRecyclerView
          android:id="@+id/recycler_search"
          android:layout_below="@+id/search_bar"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:setIndexBarColor="#ffffff"
          app:setIndexBarTextColor="#000000"/&gt;
  
  &lt;/RelativeLayout&gt;
  
  &lt;android.support.design.widget.NavigationView
      android:id="@+id/nvNavView"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      app:menu="@menu/navigation_menu"
      android:layout_gravity="start"&gt;
  &lt;/android.support.design.widget.NavigationView&gt;
  </code></pre>
  
  <p></p>
  
  <hr>
  
  <p><strong>Edit: For everyone asking why not match_parent</strong></p>
  
  <p>This is how it looked like! The index panel is covering some parts of the card view. You may say it's just a little bit, but I have more card views with longer title.</p>
  
  <p><a href="https://i.stack.imgur.com/yd5G9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yd5G9.jpg" alt="match parent"></a></p>