Alignment of an Android layout

Question

I have this layout file:

<?xml version="1.0" encoding="utf-8"?>
<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<RelativeLayout
    android:id="@+id/visual_compass_container"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_margin="0dp"
    android:padding="0dp" >

    <ImageView
        android:id="@+id/visual_compass"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:contentDescription="@string/visual_compass"
        android:scaleType="fitCenter"
        android:src="@drawable/compass_1000x1000_white" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/visual_compass_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/visual_compass_value_default"
            android:textColor="#ddd"
            android:textSize="@dimen/visual_compass_value_text_size" />

        <TextView
            android:id="@+id/visual_compass_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/measured_bearing"
            android:textColor="#aaa"
            android:textSize="@dimen/visual_compass_info_text_size" />
    </LinearLayout>
</RelativeLayout>

<View
    android:id="@+id/placeholder"
    android:layout_width="25dp"
    android:layout_height="match_parent"
    android:layout_toRightOf="@+id/visual_compass_container"
    android:visibility="visible"
    android:background="@android:color/darker_gray" />

<LinearLayout
    android:id="@+id/advanced_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@+id/placeholder"
    android:background="#dfff"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="30dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp"
    android:visibility="visible" >

    <TextView
        android:id="@+id/advanced_measured"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="@string/measured_bearing_default"
        android:textSize="@dimen/advanced_measured_text_size_land" />

    <TextView
        android:id="@+id/advanced_latitude"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="@string/latitude_default"
        android:textIsSelectable="true"
        android:textSize="@dimen/advanced_info_text_size_land" />

    <TextView
        android:id="@+id/advanced_longitude"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="@string/longitude_default"
        android:textIsSelectable="true"
        android:textSize="@dimen/advanced_info_text_size_land" />

    <TextView
        android:id="@+id/advanced_altitude"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="@string/longitude_default"
        android:textIsSelectable="true"
        android:textSize="@dimen/advanced_info_text_size_land" />

    <TextView
        android:id="@+id/advanced_accuracy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="@string/accuracy_default"
        android:textIsSelectable="true"
        android:textSize="@dimen/advanced_info_text_size_land" />

    <TextView
        android:id="@+id/advanced_declination"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="@string/declination_default"
        android:textIsSelectable="true"
        android:textSize="@dimen/advanced_info_text_size_land" />

    <TextView
        android:id="@+id/advanced_inclination"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="@string/inclination_default"
        android:textIsSelectable="true"
        android:textSize="@dimen/advanced_info_text_size_land" />
</LinearLayout>
</RelativeLayout>

And the result (API level 17, Galaxy S3) is this:

The Result http://xml.pfweb.eu/a.png

As you can see above, I didn't set any margins or paddings... So why is there an empty space between the placeholder view (dark grey) and the compass rose image?

That's a big problem because it causes the '46°' not the center correctly.

Answer 1

I am unuable to see why the relative layout doesn't wrap it's content, however to have the text in the center you could do following:

<ImageView
        android:id="@+id/visual_compass"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:contentDescription="@string/visual_compass"
        android:scaleType="fitCenter"
        android:src="@drawable/compass_1000x1000_white" />

So instead of having the compass image in top left corner using:

android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"

you would simply center it. I know it's not ideal, but it's the only solution I see at the moment.

EDIT: I didn't figure out what exactly causes the problem, but it has something to do with the enclosing Relative layout. As soon as I change the layout to Linear the problem disappear. In fact horizontal LinearLayout is probably the best option here as you stack your items from left to right.

Here's final look: