Akeshwar Jha
Akeshwar Jha

Reputation: 4576

Aligning two textviews in a listview

Here's what I have:

enter image description here

There are options and there are content to every option. Option numbers (A, B, C, D) are in a separate textview and their contents are in a separate textview.

All I'm trying is aligning the option number with the first line of the option content. I tried setting the constant paddingTop, but as the number of lines in the option-content changes, it goes out of alignment. Any suggestions upon how to do it?

Here's part of the xml:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/options"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp">

    <TextView
        android:id="@+id/option_number"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="10"
        android:text="A"
        android:paddingLeft="5dp"
        android:textSize="17sp"
        android:textStyle="bold"
        android:textColor="@color/charcoal"/>



    <TextView
        android:id="@+id/option_content"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="100"
        android:textSize="17sp"
        android:gravity="center|left"
        android:paddingRight="20dp"
        android:text="option content...."
        android:textColor="@color/charcoal"/>

Can I do it by getting the paddingTop of option content dynamically and setting the same padding to the option number?

Upvotes: 0

Views: 109

Answers (5)

Jay Rathod
Jay Rathod

Reputation: 11255

Try with below.

Replace this in your xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/options"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="5">

        <TextView
            android:id="@+id/option_number"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:paddingLeft="5dp"
            android:text="A"
            android:maxLines="4"
            android:textColor="@color/charcoal"
            android:textSize="17sp"
            android:textStyle="bold" />


        <TextView
            android:id="@+id/option_content"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:maxLines="4"
            android:text="option content...."
            android:textColor="@color/charcoal"
            android:textSize="17sp" />

    </LinearLayout>

And It's Done.

Surely it will help you.

Upvotes: 1

Mtl Dev
Mtl Dev

Reputation: 1622

use: android:layout_centerVertical="true".

Suggestion, can use the following three in combination to easily achieve what you want:
1) CenterVertical
2) ToRightOf
3) RelativeLayout.

e.g:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/options"
    android:layout_width="match_parent"
    android:layout_height="80dp">

    <TextView
        android:layout_centerVertical="true"

        android:id="@+id/option_number"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:text="A"
        android:paddingLeft="5dp"
        android:textSize="17sp"
        android:textStyle="bold"
        android:textColor="@color/charcoal"/>

    <TextView
        android:layout_toRightOf="@id/option_number"
        android:layout_centerVertical="true"

        android:id="@+id/option_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="17sp"
        android:text="option content...."
        android:textColor="@color/charcoal"/>

Upvotes: 0

Srikanth Reddy
Srikanth Reddy

Reputation: 119

Set android:gravity="top" for option_number TextView android:gravity="top|left" for option_content. Or, User a Relative Layout and use layout_aligntop

Upvotes: 1

Pete Trikhin
Pete Trikhin

Reputation: 51

You can use Relative layout instead of linear layout, but you wll have to change your xml a bit. So if you decide to use it you can just set the next property to first TextView

android:layout_alignTop="@+id/option_content"

It should help you.

Upvotes: 0

Joakim
Joakim

Reputation: 3294

Try setting android:layout_alignBaseline="@id/option_number" on option_content

Upvotes: 0

Related Questions