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

Question

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

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>

Sorry, one more question: it seems in price field the background have a color and have also transparency in same way,how could the background color also have transparency? — Neo Ks, Sep 06 '16 at 15:02

score 2 · Answer 1 · answered Sep 06 '16 at 14:33

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.

if the answer is correct then you can approve the ans by clicking the like button — Neelay Srivastava, Sep 06 '16 at 15:13
Sry it s not correct i should use cardview with recyclerview instead of listview to achieve the image layout — Neo Ks, Sep 06 '16 at 15:18
You can use card view with list view also http://stackoverflow.com/questions/30751870/can-one-use-cardview-for-listview-item-and-how — Neelay Srivastava, Sep 06 '16 at 15:26
plesure to help you bro cardview can be used with grid view also if you want you can up vote the ans too — Neelay Srivastava, Sep 06 '16 at 16:50

score -1 · Accepted Answer · answered Sep 06 '16 at 14:13

-1

in Photo that is not only list view , its a card view ,here is linkCreating Lists and Cards to learn how to creat cardview

answered Sep 06 '16 at 14:13

Hamza

2,017
1
19
40

Thanks Ameer i will see that – Neo Ks Sep 06 '16 at 14:47
Wow that s what approximately what i am looking at ! Thanks Ameer Hamza. I have another question but i don t know if i post it here or publish a new question ! – Neo Ks Sep 06 '16 at 18:24
you can comment here – Hamza Sep 06 '16 at 19:03
Before this cardview i have a login page..i searched a lot and didn t find a solution ..how to customize my login layout to fit all screen size? when testing on nexus4 all goes well and when i tested on my nexus9 a huge blank space is generated between textviews and editexts – Neo Ks Sep 06 '16 at 19:08
create different layouts for tablets and handsets, beause tablets have more biger screen ,read this post you will get idea what i am saying http://stackoverflow.com/q/4185507/5727285 http://stackoverflow.com/q/24074226/5727285 https://developer.android.com/guide/practices/tablets-and-handsets.html – Hamza Sep 06 '16 at 19:13
watch this video Supporting layouts tablets and Handsets https://www.youtube.com/watch?v=9mFQ389UzVA – Hamza Sep 06 '16 at 19:20
Thanks a lot Ameer i am reading them carefully and i will post my comment soon if i get it – Neo Ks Sep 06 '16 at 19:32
Sorry Ameer the videos related to supporting layouts tablets and handsets are for who used Fragment,but i am not using fragment anymore. What should i do? If i can pass u the xml file to check it .. – Neo Ks Sep 07 '16 at 09:37
yas pass me your xml – Hamza Sep 07 '16 at 09:54
please if u can send your email it s better than publishing layout here – Neo Ks Sep 07 '16 at 11:03

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

2 Answers2