CODEWITHSUNDEEP
androidtextviewcenterandroid-relativelayout
darja
darja

Reputation: 5025

Align TextViews with RelativeLayout

I have layout like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:background="@drawable/bgr">
    <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true"
            >
        <TextView android:layout_width="60dp" android:layout_height="wrap_content"
                  android:id="@+id/label"
                  style="@style/ConnectionPoint.Label"
                  android:text="Title"
                />
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                  android:id="@+id/code"
                  style="@style/ConnectionPoint.Code"
                  android:text="CODE"
                />
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                  android:id="@+id/name"
                  android:layout_toRightOf="@id/label"
                  android:layout_toLeftOf="@id/code"
                  style="@style/ConnectionPoint.Name"
                  android:text="Some text"
                />
    </RelativeLayout>
</RelativeLayout>

And the styles:

<style name="ConnectionPoint.Text" parent="android:TextAppearance">
    <item name="android:layout_alignParentBottom">true</item>
</style>
<style name="ConnectionPoint.Label" parent="ConnectionPoint.Text">
    <item name="android:textColor">@color/from_to</item>
    <item name="android:layout_marginLeft">5dp</item>
    <item name="android:layout_marginRight">10dp</item>
    <item name="android:textSize">16dp</item>
</style>
<style name="ConnectionPoint.Name" parent="ConnectionPoint.Text">
    <item name="android:textSize">26dp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:singleLine">true</item>
    <item name="android:ellipsize">end</item>
</style>
<style name="ConnectionPoint.Code" parent="ConnectionPoint.Text">
    <item name="android:textColor">@color/iata</item>
    <item name="android:textSize">18dp</item>
    <item name="android:singleLine">true</item>
    <item name="android:layout_alignParentRight">true</item>
    <item name="android:layout_marginRight">5dp</item>
    <item name="android:layout_marginLeft">5dp</item>
</style>

But in the result TextViews are not properly aligned:

enter image description here

I want them to be aligned by bottom and can't understand why RelativeLayout can't do this. What should I do to make RelativeLayout align TextViews?

Upvotes: 2

Views: 14577

Answers (4)

k0nig
k0nig

Reputation: 340

Select textview and goto properties

select Center Vertical for each textview

or

put android:layout_centerVertical="true" in xml

Upvotes: 6

triggerhippy
triggerhippy

Reputation: 1

I know this question is 2 years old, but I think I've got a better answer if anyone else comes across this. It solved my problem trying to bottom-align text views in nested relative layouts.

Assuming OP's code:

<RelativeLayout 
        android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true">
<TextView 
        android:layout_width="60dp" android:layout_height="wrap_content"
        android:id="@+id/label"
        style="@style/ConnectionPoint.Label"
        android:text="Title"/>
<TextView 
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:id="@+id/code"
        style="@style/ConnectionPoint.Code"
        android:text="CODE"/>
<TextView 
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:id="@+id/name"
        android:layout_toRightOf="@id/label"
        android:layout_toLeftOf="@id/code"
        style="@style/ConnectionPoint.Name"
        android:text="Some text"/>

The following should work to align these elements by bottom:

<RelativeLayout
          android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true">
        <TextView
                android:layout_width="60dp" android:layout_height="wrap_content"
                android:id="@+id/label"
                android:text="Title"/>
        <TextView
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:id="@+id/code"
                android:layout_alignBottom="@+id/label"
                android:text="CODE"/>
        <TextView
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:id="@+id/name"
                android:layout_toRightOf="@id/label"
                android:layout_toLeftOf="@id/code"
                android:layout_alignBottom="@+id/label"
                android:text="Some text"/>
    </RelativeLayout>

The only change here is the addition of the following line:

android:layout_alignBottom="@+id/{your-id-here}"

You may need to tweak it some based on your layout - in the example above, the TextView with id=label is essentially the root, and the other elements get their bottom from it. That's why id=label doesn't have a layout_alignBottom property.

Upvotes: 0

darja
darja

Reputation: 5025

Unfortunately the only working solution is not to use LinearLayout instead of nested RelativeLayout

Upvotes: 1

SubbaReddy PolamReddy
SubbaReddy PolamReddy

Reputation: 2113

try this code:

<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" >
<

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true" >

    <TextView
        android:id="@+id/label"
        style="@style/ConnectionPoint.Label"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Title" />

    <TextView
        android:id="@+id/code"
        style="@style/ConnectionPoint.Code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="CODE" />

    <TextView
        android:id="@+id/name"
        style="@style/ConnectionPoint.Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Some text" />
  </RelativeLayout>

  </RelativeLayout>

Upvotes: 3

Related Questions