Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align left edge to center - RelativeLayout

I have the following requirement (drastically simplified):

enter image description here

text 2 must start from the CENTER of the screen.

I could only achieve this using LinearLayout's:

<more_code></more_code><LinearLayout
                                    android:baselineAligned="false"
                                    android:weightSum="2"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content">

                                <LinearLayout
                                        android:layout_weight="1"
                                        android:orientation="horizontal"
                                        android:layout_width="0dp"
                                        android:layout_height="wrap_content">
                                    <TextView
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:text="test one"/>
                                    <TextView
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:text="test two"/>
                                </LinearLayout>

                                <LinearLayout
                                        android:layout_weight="1"
                                        android:orientation="horizontal"
                                        android:layout_width="0dp"
                                        android:layout_height="wrap_content">
                                    <TextView
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:text="test three"/>

                                    <TextView
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:text="test four"/>
                                </LinearLayout>
                            </LinearLayout><more_code></more_code>

Since I have already too many nested views (thus getting a myfile.xml has more the 10 levels, bad for performance warning) I'd like to know if I can get the same result with one RelativeLayout. I've been through the documentation but I could not find a property that allows me that.

like image 427
Androiderson Avatar asked May 08 '13 16:05

Androiderson


1 Answers

This is very easy if you will accept 1 empty view of 0dp by 0dp as overhead. In my opinion this is better than having too many nested views, but this can serve as a reference for the other views.

Use an empty Space(of 0x0 px). If you center this Space horizontally, you can use it as a reference like so:

<RelativeLayout>

    <!-- Empty layout (0x0 dp) centered horizontally -->
    <Space android:id="@+id/dummy" 
        android:layout_width="0dp" 
        android:layout_height="0dp"
        android:layout_centerHorizontal="true" 
        android:visibility="invisible"/>

    <!-- Align to parent left -->
    <TextView
        android:id="@+id/test_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="test one"/>

    <!-- to right of the previous one, and to left of the dummy -->
    <TextView
        android:id="@+id/test_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/test_one"
        android:layout_toLeftOf="@+id/dummy"
        android:text="test two"/>

    <!-- Align to right of the dummy -->
    <TextView
        android:id="@+id/test_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/dummy"
        android:text="test three"/>

    <!-- Align to right of the previous one, and parent right -->
    <TextView
        android:id="@+id/test_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/test_three"
        android:layout_alignParentRight="true"
        android:text="test four"/>

</RelativeLayout>
like image 161
Entreco Avatar answered Nov 06 '22 12:11

Entreco