Alignment of two Relative layout within a main relative layout

Question

    <RelativeLayout
        android:id="@+id/OtherWeatherInfo_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/margin_space"
        android:layout_marginLeft="@dimen/margin_space"
        android:layout_marginRight="@dimen/margin_space" >

        <RelativeLayout
            android:id="@+id/OtherWeatherInfo"
            android:layout_width="@dimen/weather_space"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:gravity="center_vertical"
            android:layout_alignParentLeft="true"
            android:background="@drawable/rect_block" >

            <LinearLayout
                android:id="@+id/humidityLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/humidityTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="@string/str_humidity"
                    android:textSize="@dimen/weather_size"
                    android:textStyle="bold" >
                </TextView>

                <TextView
                    android:id="@+id/humidityValue"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="@string/str_no_data"
                    android:textColor="@color/color_white"
                    android:textStyle="bold" >
                </TextView>
            </LinearLayout>
           </RelativeLayout>

            <RelativeLayout
                android:id="@+id/OtherWeatherInfo2"
                android:layout_width="@dimen/weather_space"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:gravity="center_vertical"
                android:layout_toRightOf="@+id/OtherWeatherInfo"
                android:background="@drawable/rect_block" >

                <LinearLayout
                    android:id="@+id/visiLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/visiTitle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="@string/str_visi"
                        android:textSize="@dimen/weather_size"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/visiValue"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="@string/str_no_data"
                        android:textColor="@color/color_white"
                        android:textStyle="bold" />
                </LinearLayout>


        </RelativeLayout>
    </RelativeLayout>

The above code is written by me to achieve the following figure: enter image description here .But what I am achieving is this: or this:.

I have absolutely no clue about what is the mistake I am doing here??I am just using a main relative layout OtherWeatherInfo_main and within that I am embedding two relative layouts to represent the two weather attributes. @dimen/weather_space is 145 dp.I am unable to align the two relative layout within the main layout equally.Any help will be appreciated.

You could try wrapping the two relative layouts inside a LinearLayout with horizontal orientation and give the two relative layouts equal weight. — JDJ, Jul 04 '14 at 10:58
JDJ...you beauty...now it works like a charm.post this as answer and i will accept it — kgandroid, Jul 04 '14 at 11:06

score 1 · Accepted Answer · answered Jul 04 '14 at 11:08

Wrap the two RelativeLayouts inside a LinearLayout with horizontal orientation and then assign both the RelativeLayouts equal weight.

In general, something like this:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="1" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weight="0.5" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weight="0.5" />

</LinearLayout>

score 0 · Answer 2 · answered Jul 04 '14 at 11:04

Remove either this

android:layout_alignParentRight="true"

or this

android:layout_toRightOf="@+id/OtherWeatherInfo"

from your second layout.

Also you can wrap both your RelativeLayouts to the horizontal LinearLayout and use android:layout_weight attribute

score 0 · Answer 3 · answered Jul 04 '14 at 13:03

Try this way,if you wan achieved your design using LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">


    <TextView
        android:id="@+id/txtCityName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kolkata"/>

    <ImageView
        android:id="@+id/imgWeather"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_marginTop="20dp"/>

    <TextView
        android:id="@+id/txtTemprature"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="28 C"
        android:layout_margin="10dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Humidity"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="29"/>
            </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginLeft="20dp"
            android:gravity="center">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Humidity"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="29"/>
        </LinearLayout>
        </LinearLayout>

    <TextView
        android:id="@+id/txtDateTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fri 28"
        android:layout_margin="10dp"/>

</LinearLayout>

Alignment of two Relative layout within a main relative layout

3 Answers3