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
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:
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
.
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"
/>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With