CODEWITHSUNDEEP
androidandroid-layout
Kris B
Kris B

Reputation: 3578

Mimicking the Gmail app label listing

I'm trying to build a layout for my ListView items similar to the Gmail app's listing of labels, where it has the label text on the left and the count to the right. What I have mostly works, except with long text. What I have results in the text overlapping the count.

This is what I'm trying to mimic:

enter image description here

As you can see, the bottom label isn't wrapping where the top label is (read below for more details on this).

When both labels have a count, the count lineup on each row:

enter image description here

With what I have there should be a 3 showing for the last item but it's getting overlapped. Also, I'd like the "count" TextView to lineup on each row the same way the Gmail app is (center, right aligned, I guess?):

enter image description here

Layout code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent" 
    android:orientation="horizontal" 
    android:weightSum="1"       
>

    <TextView 
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:padding="10dp"
        android:gravity="left"
        android:layout_weight=".75"
    />

    <TextView 
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="right|center_vertical" 
        android:padding="10dp"
        android:layout_weight=".25"
    />
</LinearLayout>

I know when you're using layout_weight you're supposed to set the layout_width to 0px, however, this results in every row being cutoff at the same spot. I only want the text wrapping if it goes longer than the count TextView.

I am not good with Android layouts, I think they are extremely frustrating to work with, so this may be something easy. Thanks.

Upvotes: 1

Views: 160

Answers (2)

Kris B
Kris B

Reputation: 3578

Figured it out. I needed to add android:layout_toLeftOf="@+id/count" to the first TextViewwhich Ernir answered above

Upvotes: 0

Ernir
Ernir

Reputation: 345

You should be able to prevent the views from overlapping by using a RelativeLayout instead of your LinearLayout, using the layout_toRightOf or layout_toLeftOf XML attributes to position the views relative to one another.

Upvotes: 1

Related Questions