Android custom listview with space between items
Solution 1
You can do this pretty easily with the modified list view layout. Here's How I implemented:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ListView
android:id="@android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@android:color/transparent"
android:dividerHeight="10dp" />
</RelativeLayout>
And here is the resulting view:
One thing to note:
This screenshot was taken on an xhdpi device -- you can see an issue with your dashed lines. Consider using a ShapeDrawable instead and specify android:dashGap
and android:dashWidth
.
Solution 2
use these two lines in your listview in the xml:
android:divider="@android:color/transparent"
android:dividerHeight="10px"
and for your Imageview try these two additions:
<ImageView
...
android:scaleType="fitCenter"
android:adjustViewBounds="true"
/>
Solution 3
You are looking for cards style UI as found in Google Now etc. You can use the custom library Cards-UI to get a similar effect. https://github.com/afollestad/Cards-UI
iCaesar
Updated on June 18, 2022Comments
-
iCaesar over 1 year
How can I make a listview as follows:
and one more question about row layout, i have such layout
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="wrap_content" android:layout_height="100dp" android:background="@drawable/deals_list_row_gradient_background" android:orientation="horizontal" > <ImageView android:id="@+id/dealImg" android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="top" android:src="@drawable/test" /> <LinearLayout android:layout_width="match_parent" android:layout_height="100dp" android:orientation="vertical" > <TextView android:id="@+id/dealDescription" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_marginTop="5dp" android:text="Lorem Ipsum dolor sit amet dolor sed a ite amkt Lantin dolor latim dk kuitshen sed iditur anet" /> <TextView android:id="@+id/smth" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:text="...................................................." android:textAppearance="?android:attr/textAppearanceSmall" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/dealNewPrice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginRight="5dp" android:text="1248$" android:textColor="@color/deals_list_new_price" android:textSize="18sp" android:textStyle="bold" /> <TextView android:id="@+id/dealOldPrice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginRight="15dp" android:layout_toLeftOf="@+id/dealNewPrice" android:text="2500$" android:textColor="@color/deals_list_old_price" android:textSize="15sp" /> </RelativeLayout> </LinearLayout> </LinearLayout> </LinearLayout>
but i have trouble with imageview, i dont understand how will be correctly to set its width and height also lot of people say me that using RalativeLayout is bad idea