CODEWITHSUNDEEP
androidandroid-layoutandroid-listview
Ismar Slomic
Ismar Slomic

Reputation: 5514

What android layout should I use for this listview item layout?

I'm trying to define layout for listview item that looks like attached image (made in Photoshop). What layout(s) should I use? enter image description here

Upvotes: 0

Views: 251

Answers (4)

Juangcg
Juangcg

Reputation: 1048

You only need to play now with paddings and margins.

Result

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout 
            android:id="@+id/gray_layout"
            android:layout_width="40dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="#888888"
            android:layout_alignParentLeft="true"
            android:gravity="center_vertical">

        <TextView android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="AUG"/>

        <TextView android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="18"/>

        <TextView android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="2011"/>

    </LinearLayout>

    <View 
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#000088"
        android:layout_toRightOf="@id/gray_layout"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="30dp"/>

    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/divider"
        android:text="Title"
        android:layout_marginBottom="5dp"
        android:layout_alignBottom="@id/divider"/>

    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/divider"
        android:text="18. aug 23:49"
        android:layout_marginBottom="5dp"
        android:layout_alignBottom="@id/divider"/>

    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/divider"
        android:text="Short msg"
        android:layout_marginTop="10dp"
        android:layout_alignTop="@id/divider"/>

    <ImageView 
        android:id="@+id/info_button"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true" 
        android:background="#ff0000"/>

    <ImageView 
        android:id="@+id/arrow_button"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_above="@id/info_button"
        android:layout_toLeftOf="@id/info_button"
        android:background="#00ff00"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"        
        android:layout_above="@id/arrow_button"
        android:layout_toLeftOf="@id/info_button"
        android:layout_alignLeft="@id/arrow_button"
        android:gravity="center_horizontal"
        android:text="30" />

</RelativeLayout>

Upvotes: 1

codeMagic
codeMagic

Reputation: 44571

I would suggest using a RelativeLayout for this. Otherwise, you may up with too much nesting. I'm not going to write the layout but you should look through the RelativeLayout Docs and see all the possible properties you can give Views. You may possibly end up with child LinearLayouts also and that's ok. But I would use RelativeLayout for the parent.

If you are undecided a good thing to do is to draw it out really quick in xml how you think each might go and see with ViewGroup seems like the most efficient. Sometimes its hard to say until you get going on it by either writing the xml code or at least some pseudocode.

Upvotes: 1

S.Thiongane
S.Thiongane

Reputation: 6905

i propose a LinearLayoutwith horizontal orientation first, and inside a RelativeLayoutto place other views from left / top to right / bottom using attributes : layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight etc ...

Upvotes: 1

Aleksander Lech
Aleksander Lech

Reputation: 1325

You can nest multiple LinearLayouts with different orientation to achieve this.

Upvotes: -1

Related Questions