I want to make a card view for listing . But I am not getting proper view

Question

I want to make a card view for listing . But I am not getting proper view .

I want to display image in left side . on right side of image i want to display Hotel name, area ,rating,Cuisine .

But all is getting overlapping now via this code .

Can anyone help me ? I am uploading image what i am getting use of this code .

see in the image Hotel name, area ,rating,Cuisine is overlapping . how to get solve this ? This is the screen shot what i want through card view

.

list_row.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"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
     >
<!--<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_row_selector"
    android:padding="8dp" >-->

    <!-- Thumbnail Image -->
    <android.support.v7.widget.CardView
        android:id="@+id/ly_root"
        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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FEFEFE"
        android:layout_margin="8dp"
        app:cardCornerRadius="4dp">


    <!--<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="4dp">-->
    <com.android.volley.toolbox.NetworkImageView
        android:id="@+id/thumbnail"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"
        android:layout_marginRight="8dp"  />

    <!-- Restaurant name  -->
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_toRightOf="@+id/thumbnail"
        android:textSize="@dimen/title"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/area"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:textColor="#D2691E"
        android:layout_toRightOf="@+id/thumbnail"
        android:textSize="@dimen/rating" />

    <!-- Rating -->
    <TextView
        android:id="@+id/average_ratings"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/area"
        android:textColor="#D2691E"
        android:layout_toRightOf="@+id/thumbnail"

        android:textSize="@dimen/rating" />

    <TextView
        android:id="@+id/cuisine"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/average_ratings"
        android:textColor="#D2691E"
        android:layout_toRightOf="@+id/thumbnail"
        android:textSize="@dimen/rating" />

    <!-- Genre -->
   <!-- <TextView
        android:id="@+id/genre"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/rating"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@+id/thumbnail"
        android:textColor="@color/genre"
        android:textSize="@dimen/genre" />-->
<!--
    &lt;!&ndash; Release Year &ndash;&gt;
    <TextView
        android:id="@+id/releaseYear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:textColor="@color/year"
        android:textSize="@dimen/year" />-->
    </android.support.v7.widget.CardView>
</LinearLayout>

Use combination of linear layouts inside your card layout. It will help as card layout itself cant control the arrangement of views — Mohammed Atif, Jul 25 '16 at 12:12

Vinothkumar Nataraj · Accepted Answer · 2016-07-25T17:40:06.443

Use CardView child of RelativeLayout

<android.support.v7.widget.CardView 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/ly_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:background="#FEFEFE"
    app:cardCornerRadius="4dp">
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <com.android.volley.toolbox.NetworkImageView
            android:id="@+id/thumbnail"
            android:layout_width="120dp"
            android:layout_height="80dp"
            android:layout_marginRight="8dp"
            android:scaleType="centerCrop" />

        <!-- Restaurant name  -->
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:layout_toRightOf="@+id/thumbnail"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/area"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/name"
            android:layout_toRightOf="@+id/thumbnail"
            android:textColor="#D2691E"/>

        <!-- Rating -->
        <TextView
            android:id="@+id/average_ratings"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/area"
            android:layout_toRightOf="@+id/thumbnail"
            android:textColor="#D2691E" />

        <TextView
            android:id="@+id/cuisine"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/average_ratings"
            android:layout_toRightOf="@+id/thumbnail"
            android:textColor="#D2691E" />
    </RelativeLayout>

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

i have to use card view . It will get simple list view. It will get like a 1st image .While i want like a second image see in the second image it is a card view but text are overlapping. — user6313669, Jul 25 '16 at 12:12

score 1 · Answer 2 · answered Jul 25 '16 at 12:12

In general your CardView should contain only one Layout - the RelativeLayout you've used before. The CardView itself can't position the items as you want them.

If you look at the documentation you will see that CardView extends FrameLayout which should only contain one child and thus it doesn't give control over the positioning within the CardView.

score 0 · Answer 3 · answered Jul 25 '16 at 12:18

CardView is like a FrameLayout. Successive items within the cardView in the layout will be placed on top of the previous one.

You can set the layout_gravity to "right" for the TextView. It wouldn't be a perfect way to do it. So, I suggest encapsulating the TextView inside a Linear Layout with orientation="vertical" and set that LinearLayout's layout_gravity to right.

I want to make a card view for listing . But I am not getting proper view

3 Answers3