Neo Ks Neo Ks - 2 months ago 14
Android Question

How to display listview items as items in e-commerce app?

I am a new in android developerment, I am working on a project to display listview items like this

picture

My question is:

How to write the XML layout to approximately achieve the same layout done in the picture?

I have done some research and some work but I didn't find any answer.

This is my custom layout code

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="@drawable/list_bg">

<ImageView
android:id="@+id/adPic"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher"/>

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/adPic"
android:layout_gravity="center_vertical"
>



<TextView
android:id="@+id/adTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/adPrice"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
android:text=""
android:alpha=".87"
android:textSize="14dp"
android:textColor="@color/row_black"
android:maxLines="2"
android:layout_marginLeft="10dp"
/>

<TextView
android:id="@+id/adPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
android:text=""
android:alpha=".87"
android:textSize="15dp"
android:textColor="@color/row_blue"
android:layout_marginRight="5dp"
android:singleLine="true"
/>

<TextView
android:id="@+id/adDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/adTitle"
android:layout_below="@+id/adTitle"
android:singleLine="true"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
android:text=""
android:alpha=".87"
android:textSize="10dp"
android:textColor="@color/row_gray"
android:layout_marginRight="10dp"

/>
</RelativeLayout>

</LinearLayout>

Answer

Just add this compile 'com.android.support:cardview-v7:24.1.1' in your gradel and in your xml under your linear layout do like this

  <android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/list_bg"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/adPic"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="5dp"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_toRightOf="@+id/adPic">


            <TextView
                android:id="@+id/adTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_marginLeft="10dp"
                android:layout_toLeftOf="@+id/adPrice"
                android:alpha=".87"
                android:maxLines="2"
                android:paddingBottom="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:text=""
                android:textColor="@color/row_black"
                android:textSize="14dp" />

            <TextView
                android:id="@+id/adPrice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="5dp"
                android:alpha=".87"
                android:paddingBottom="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:singleLine="true"
                android:text=""
                android:textColor="@color/row_blue"
                android:textSize="15dp" />

            <TextView
                android:id="@+id/adDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/adTitle"
                android:layout_below="@+id/adTitle"
                android:layout_marginRight="10dp"
                android:alpha=".87"
                android:paddingBottom="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:singleLine="true"
                android:text=""
                android:textColor="@color/row_gray"
                android:textSize="10dp"

                />
        </RelativeLayout>

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

you can set the curve and corner radious as you want and you have to do the rest of the thing like the normal list view.

Comments