How to set proper position of text inside TextView which is in RelativeLayout?

Question

I have RelativeLayout and inside of it, I have two TextViews. This is my current xml code fore that RelativeLayout:

    <RelativeLayout
        android:id="@+id/FullPriceInForeignLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="20"
        android:background="@drawable/bck_price_foreign"
        android:gravity="center"
        android:paddingBottom="@dimen/home_foreign_margin"
        android:paddingTop="@dimen/home_foreign_margin"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        >

        <TextView
            android:id="@+id/currencyForeign"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="USD"
            style="@style/SmallWhiteTextViewWithShadow"
            android:background="@color/orange"
            />

        <TextView
            android:id="@+id/valueInLocal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/currencyForeign"
            android:layout_marginLeft="@dimen/currency_price_margin"
            android:layout_toRightOf="@id/currencyForeign"
            android:text="0.00"
            android:background="@color/orange"
            style="@style/BigWhiteTextViewWithShadow"
            />

    </RelativeLayout>

Styles are:

<style name="SmallWhiteTextViewWithShadow">
    <item name="android:textAppearance">@android:style/TextAppearance.Medium.Inverse</item>
    <item name="android:shadowColor">#55000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">0.01</item>
</style>

<style name="BigWhiteTextViewWithShadow">
    <item name="android:textAppearance">@android:style/TextAppearance.Large.Inverse</item>
    <item name="android:textSize">50sp</item>
    <item name="android:shadowColor">#55000000</item>
    <item name="android:shadowDx">2</item>
    <item name="android:shadowDy">2</item>
    <item name="android:shadowRadius">0.02</item>
</style>

and it looks like this:

I deliberately painted background of both widgets in orange, so you could see the problem. I wish to have words EUR and 118.0 have the same alignement on top and 118.0 be centered in layout, but I can't do that.

Oh and btw, RelativeLayout is inside of horizontal LinearLayout and has its own weight.

Thanks in advance, Deveti

Answer 1

Inside a RelativeLayout, you can set the child views with alignParentTop attribute to align both views at the top of the parent view and also use android:includeFontPadding which is default to true and allows the TextView to automatically make some space for other languages than English (such as French for the accents) as follows:

<RelativeLayout
    android:id="@+id/FullPriceInForeignLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="20"
    android:background="@drawable/bck_price_foreign"
    android:gravity="center"
    android:paddingBottom="@dimen/home_foreign_margin"
    android:paddingTop="@dimen/home_foreign_margin"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp" >

    <TextView
        android:id="@+id/currencyForeign"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:includeFontPadding="false"
        android:text="USD"
        style="@style/SmallWhiteTextViewWithShadow"
        android:background="@color/orange" />

    <TextView
        android:id="@+id/valueInLocal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:includeFontPadding="false"
        android:layout_marginLeft="@dimen/currency_price_margin"
        android:layout_toRightOf="@id/currencyForeign"
        android:text="0.00"
        android:background="@color/orange"
        style="@style/BigWhiteTextViewWithShadow" />

</RelativeLayout>  

Here you can find perfect workarouds (as a Custom TextView or a negative margins).

Answer 2

add one attribute , android:gravity="center" as mentioned below,

        <TextView
        android:id="@+id/valueInLocal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/currencyForeign"
        android:layout_marginLeft="@dimen/currency_price_margin"
        android:layout_toRightOf="@id/currencyForeign" 


        android:gravity="center"


        android:text="0.00"
        android:background="@color/orange"
        style="@style/BigWhiteTextViewWithShadow"
        />