Cardveiw with image view design

Question

I a trying to develop the list of card view, In the cardview design height of my image is not getting auto adjusted with respect of the cardview height. Here is my image of view :

And here is my source code for the cardview :

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardView"
    app:cardUseCompatPadding="true"
    app:cardElevation="5dp"
    app:cardCornerRadius="4dp"
    android:layout_marginBottom="16dp">

    <RelativeLayout
        android:id="@+id/POIDetails"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/graylight">

        <ImageView
            android:id="@+id/POIPic"
            android:layout_width="76dp"
            android:contentDescription="@string/poiImageCaptureDescription"
            android:layout_height="113dp"
            android:maxWidth="10dp"
            android:src="@drawable/sample" />

        <TextView
            android:id="@+id/POIName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="7dp"
            android:layout_marginStart="10dp"
            android:textStyle="bold"
            android:textSize="15sp"
            android:layout_alignTop="@+id/POIPic"
            android:layout_toEndOf="@id/POIPic" />
        <TextView
            android:id="@+id/POICategory"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:textColor="@color/colorPrimary"
            android:layout_marginStart="10dp"
            android:layout_below="@id/POIName"
            android:layout_alignParentEnd="true"
            android:layout_toEndOf="@+id/POIPic" />
        <TextView
            android:id="@+id/POIAddress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/ic_location_on_black_14dp"
            android:drawablePadding="5dp"
            android:layout_marginTop="10dp"
            android:textSize="12sp"
            android:layout_marginStart="10dp"
            android:layout_below="@id/POICategory"
            android:layout_alignParentEnd="true"
            android:layout_toEndOf="@+id/POIPic" />
        <TextView
            android:id="@+id/POICreated"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:textSize="12sp"
            android:drawableStart="@drawable/ic_event_black_14dp"
            android:drawablePadding="5dp"
            android:layout_marginStart="10dp"
            android:layout_below="@id/POIAddress"
            android:layout_alignParentEnd="true"
            android:layout_toEndOf="@+id/POIPic" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="22dp"
            android:layout_below="@+id/POIPic"
            android:paddingBottom="4dp"
            android:background="@color/colorPrimary">
            <LinearLayout
                android:id="@+id/latlong"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:text="@string/latitudeText"
                    android:textStyle="bold"
                    android:layout_marginStart="5dp"
                    android:textColor="@color/graylight"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
                <TextView
                    android:id="@+id/lat"
                    android:textColor="@color/graylight"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
                <TextView
                    android:text="@string/longitudeText"
                    android:textStyle="bold"
                    android:layout_width="0dp"
                    android:textColor="@color/graylight"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
                <TextView
                    android:id="@+id/longti"
                    android:textColor="@color/graylight"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
            </LinearLayout>
        </RelativeLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

Can you help me to sort out what can be done to solve this problem, Thanks in advance?

You set the height of your image to `android:layout_height="113dp"`, how about changing it to `match_parent`? — Bach Vu, Mar 21 '19 at 04:08
I dont think that will work, as its taking the full screen. Can you put in your studio and check please ? — Piyush Sahay, Mar 21 '19 at 04:19
Have you tried yet? Your cardview is only an item of recyclerview or listview right? Then it will not take full screen — Bach Vu, Mar 21 '19 at 04:21

score 1 · Accepted Answer · answered Mar 21 '19 at 06:11

Here is your layout for single CardView. I have tried to keep same ids as you have given in question.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        app:cardUseCompatPadding="true"
        app:cardElevation="5dp"
        app:cardCornerRadius="4dp"
        android:layout_marginBottom="16dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/POIDetails"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:id="@+id/first"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/POIPic"
                    android:layout_width="76dp"
                    android:layout_height="113dp"
                    android:maxWidth="10dp"
                    android:src="@drawable/ic_launcher_background" />

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

                    <TextView
                        android:id="@+id/POIName"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="7dp"
                        android:layout_marginStart="10dp"
                        android:textStyle="bold"
                        android:textSize="15sp" />
                    <TextView
                        android:id="@+id/POICategory"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="3dp"
                        android:textColor="@color/colorPrimary"
                        android:layout_marginStart="10dp" />
                    <TextView
                        android:id="@+id/POIAddress"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:drawableStart="@drawable/ic_location_on_black_14dp"
                        android:drawablePadding="5dp"
                        android:layout_marginTop="10dp"
                        android:textSize="12sp"
                        android:layout_marginStart="10dp" />
                    <TextView
                        android:id="@+id/POICreated"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:textSize="12sp"
                        android:drawableStart="@drawable/ic_event_black_14dp"
                        android:drawablePadding="5dp"
                        android:layout_marginStart="10dp" />

                </LinearLayout>

            </LinearLayout>

            <LinearLayout
                android:id="@+id/latlong"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="@string/latitudeText"
                    android:textStyle="bold"
                    android:layout_marginStart="5dp"
                    android:textColor="@color/graylight"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
                <TextView
                    android:id="@+id/lat"
                    android:textColor="@color/graylight"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
                <TextView
                    android:text="@string/longitudeText"
                    android:textStyle="bold"
                    android:layout_width="0dp"
                    android:textColor="@color/graylight"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
                <TextView
                    android:id="@+id/longti"
                    android:textColor="@color/graylight"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />


            </LinearLayout>

        </LinearLayout>

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

</LinearLayout>

Thanks for the effort. But in your solution even you added the height of imageview limit. — Piyush Sahay, Mar 21 '19 at 08:09
You can make imageview height to `match_parent` but you have to make sure that all your image are of same height. — Ashish Kudale, Mar 21 '19 at 09:01

score 1 · Answer 2 · answered Mar 21 '19 at 08:25

Change your code like this

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardView"
    app:cardUseCompatPadding="true"
    app:cardElevation="5dp"
    app:cardCornerRadius="4dp"
    android:layout_marginBottom="16dp">

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

    <ImageView
        android:id="@+id/POIPic"
        android:layout_width="76dp"
        android:layout_height="match_parent"
        android:maxWidth="10dp"
        android:src="@drawable/app_bg" />


    <RelativeLayout
        android:id="@+id/POIDetails"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/gray">

        <TextView
            android:id="@+id/POIName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="7dp"
            android:layout_marginStart="10dp"
            android:textStyle="bold"
            android:textSize="15sp"
            android:layout_alignTop="@+id/POIPic"
            android:layout_toEndOf="@id/POIPic" />
        <TextView
            android:id="@+id/POICategory"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:textColor="@color/colorPrimary"
            android:layout_marginStart="10dp"
            android:layout_below="@id/POIName"
            android:layout_alignParentEnd="true"
            android:layout_toEndOf="@+id/POIPic" />
        <TextView
            android:id="@+id/POIAddress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/ic_location_on_black_14dp"
            android:drawablePadding="5dp"
            android:layout_marginTop="10dp"
            android:textSize="12sp"
            android:layout_marginStart="10dp"
            android:layout_below="@id/POICategory"
            android:layout_alignParentEnd="true"
            android:layout_toEndOf="@+id/POIPic" />
        <TextView
            android:id="@+id/POICreated"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:textSize="12sp"
            android:drawableStart="@drawable/ic_event_black_14dp"
            android:drawablePadding="5dp"
            android:layout_marginStart="10dp"
            android:layout_below="@id/POIAddress"
            android:layout_alignParentEnd="true"
            android:layout_toEndOf="@+id/POIPic" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="22dp"
            android:layout_below="@+id/POIPic"
            android:paddingBottom="4dp"
            android:background="@color/colorPrimary">
            <LinearLayout
                android:id="@+id/latlong"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:text="@string/latitudeText"
                    android:textStyle="bold"
                    android:layout_marginStart="5dp"
                    android:textColor="@color/graylight"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
                <TextView
                    android:id="@+id/lat"
                    android:textColor="@color/graylight"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
                <TextView
                    android:text="@string/longitudeText"
                    android:textStyle="bold"
                    android:layout_width="0dp"
                    android:textColor="@color/graylight"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
                <TextView
                    android:id="@+id/longti"
                    android:textColor="@color/graylight"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".70" />
            </LinearLayout>
        </RelativeLayout>
    </RelativeLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

score 0 · Answer 3 · answered Mar 21 '19 at 04:26

Based on my understanding, you want your image (POIPic) height auto adjust to avoid It overflow when the right text (Picname, category, location, created_date).I give you two solutions:

Make use of Constraint Layout. It flexible and easy to design layout.Or you can try to set android:layout_height="match_parent".
Get the Card Height on real device, then adjust it. You can check the sample here

Please let's me know, If I am understand wrong to your question.

Cardveiw with image view design

3 Answers3