How to adjust different height of cardview on tablet and android phone?

Question

I am making an android app that has a cardview inside a recyclerview. Cardview looks good on tablet and takes 40% size of screen. When i run it on a 5" android device, cardview covers 80% of screen size. Please check the code below and suggest some solutions to correct layout that automatically fits itself according to the screen sizes.

MainLayout.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="false"
       android:layout_alignParentEnd="true"
       android:layout_below="@+id/empty_view"
       android:orientation="vertical">
    <SearchView
      android:id="@+id/searchbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
    />
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:scrollbars="vertical"
        android:clipToPadding="false"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load More"
        android:id="@+id/btnLoad"
        android:layout_gravity="center_horizontal"
        android:layout_below="@+id/recyclerview"
        android:background="#42a7f4" />
  </LinearLayout>
</LinearLayout>

CardViewTemplate.xml

<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">
  <android.support.v7.widget.CardView
      android:id="@+id/card_view"
      android:layout_gravity="start"
      android:layout_width="match_parent"
      card_view:cardUseCompatPadding="true"
      android:layout_height="500dp"
      android:layout_marginBottom="20dp"
      android:layout_marginLeft="20dp"
      android:layout_marginRight="20dp"
      android:layout_marginTop="10dp"
      card_view:contentPaddingLeft="5dp"
      card_view:contentPaddingRight="5dp"
      card_view:contentPaddingTop="5dp"
      card_view:cardCornerRadius="0dp">
    <RelativeLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent">
      <LinearLayout
          android:id="@+id/greenBoxView"
          android:background="#EBEFF2"
          android:layout_height="50dp"
          android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_alignParentTop="true"
          >
         <ImageView
          android:layout_height="30dp"
          android:layout_width="30dp"
          android:layout_alignParentLeft="true"
                    android:layout_marginLeft="5dp"
          android:src="@drawable/lab"
          android:layout_gravity="center_vertical"
             />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Yay! This is a Sample Title Text"
            android:textColor="#002868"
            android:textStyle="bold"
            android:paddingRight="70dp"
            android:paddingLeft="60dp"

            android:textSize="25dp"
            android:layout_gravity="center_vertical" />
      <ImageView
          android:layout_height="30dp"
          android:layout_width="30dp"
          android:layout_alignParentRight="true"
          android:src="@drawable/lab"
          android:layout_marginRight="8dp"
          android:layout_gravity="center_vertical"
             />
      </LinearLayout>
      <LinearLayout
          android:layout_below="@id/greenBoxView"
          android:layout_above="@+id/footer"
          android:id="@+id/centeralPart"
          android:paddingTop="5dp"
          android:paddingLeft="5dp"
          android:paddingRight="5dp"
          android:layout_height="match_parent"
          android:layout_width="match_parent"
          android:gravity="center_horizontal"
          android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#000"
            android:textSize="20dp"
            android:id="@+id/txtMaintitle" />
        <TextView
            android:textColor="#0080ff"
            android:textSize="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtSecondTitle" />
        <ListView
            android:id="@+id/mainlist_view"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:divider="@null"
            android:dividerHeight="0dp"/>
      </LinearLayout>
      <LinearLayout
          android:id="@id/footer"
          android:layout_height="80dp"
          android:layout_width="match_parent"
          android:layout_alignParentBottom="true"
          android:gravity="center_horizontal"
          android:orientation="horizontal">
        <Button
          android:id="@+id/btnOrder"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Order"
            android:background="#00AF50"
            android:textColor="#FFFFFF"
            android:layout_marginRight="10dp" />
        <Button
            android:id="@+id/btnCompare"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Compare"
            android:textColor="#FFFFFF"
            android:background="#0071C1" />
      </LinearLayout>
    </RelativeLayout>
  </android.support.v7.widget.CardView>
</LinearLayout>

kalabalik · Answer 1 · 2017-12-08T10:56:57.020

This is what CardViewTemplate.xml should look like:

<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:ignore="HardcodedText,ContentDescription" >

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        card_view:cardCornerRadius="0dp"
        card_view:cardUseCompatPadding="true"
        card_view:contentPaddingLeft="5dp"
        card_view:contentPaddingRight="5dp"
        card_view:contentPaddingTop="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:id="@+id/greenBoxView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#EBEFF2"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginStart="5dp"
                    android:src="@drawable/lab"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:paddingEnd="70dp"
                    android:paddingStart="60dp"
                    android:text="Yay! This is a Sample Title Text"
                    android:textColor="#002868"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginEnd="8dp"
                    android:src="@drawable/lab" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/centeralPart"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_above="@+id/footer"
                android:layout_below="@id/greenBoxView"
                android:gravity="center_horizontal"
                android:orientation="vertical"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:paddingTop="5dp">

                <TextView
                    android:id="@+id/txtMaintitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#000"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/txtSecondTitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#0080ff"
                    android:textSize="20sp" />

                <ListView
                    android:id="@+id/mainlist_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:divider="@null"
                    android:dividerHeight="0dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@id/footer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:gravity="center_horizontal"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/btnOrder"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginEnd="10dp"
                    android:background="#00AF50"
                    android:text="Order"
                    android:textColor="#FFFFFF" />

                <Button
                    android:id="@+id/btnCompare"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:background="#0071C1"
                    android:text="Compare"
                    android:textColor="#FFFFFF" />
            </LinearLayout>
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

In case this does not fit with your idea, please provide a screenshot of an inflated item view or a drawing of the layout.

Thanks. It was helpful. But now problem is that first card is now taking entire screen. When i scroll down, second card and remaining cards are of .33 of screen size with a lot of spacing between each card. when i go up to the first card, it shrunk itself to .33 like other cards. Can you tell me work around to this, why is this so ? — Ali Raza, Dec 08 '17 at 04:48
Sorry, a misunderstanding. Afaik, there is no easy way to make a list item's height correspond to the list's height (except for the edge case of `match_parent`). You could, of course, set item height in your adapter, but is this really what you want? Or shouldn't the item height rather correspond to its content? To do this you set your items to `wrap_content` so each item of the list will be as low as its content allows. Since you have `ImageView`s and `TextView`s with fixed sizes this will look differently on different devices. By the way, you should set `textSize` with `sp` units (not `dp`). — kalabalik, Dec 08 '17 at 07:30
Did you mean that Listview's height is creating problem coz it's height was set to match_parent. Should I set it's height to some hard coded value in listview adapter ? — Ali Raza, Dec 08 '17 at 09:22
`RecyclerView` is fine as it is (not talking about inner `ListView` at all). As I understand it, we are talking about item height in `RecyclerView`, right? I am saying that you have to make a decision: Wrap content, making item height fit whatever is in it? Then set item view and its children to `wrap_content`. Or make item height relative to its parent (say 33%)? Do this in the adapter and deal with the trouble this gets you into: Large devices will display space in item views and small devices can't fit content into item views. So I suggest to `wrap_content`. Will edit my answer accordingly. — kalabalik, Dec 08 '17 at 10:40

How to adjust different height of cardview on tablet and android phone?

1 Answers1