layout_below - Android: 2 diseños relativos divididos en media pantalla

relativelayout layout params

Question

Intenté muchas veces dibujar 2 diseños relativos alineados horizontalmente y divididos en media pantalla.

Diseño la imagen con pintura para explicar un poco mejor lo que quiero decir.

¿Cualquier sugerencia?

Answer 1

Otra forma de llevar a cabo la misma tarea sin la necesidad de utilizar LinearLayout es colocar una "cuña" alineada en el centro en el centro del diseño principal y luego alinear otros elementos. Si establece el ancho del elemento de ancho medio para match_parent, pero alinea sus lados izquierdo y derecho, terminarán encogiéndose para ajustarse.

<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="com.example.EqualWidthExample" >

    <!-- An invisible view aligned to the center of the parent. Allows other
    views to be arranged on either side -->
    <View 
        android:id="@+id/centerShim"
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:visibility="invisible"
        android:layout_centerHorizontal="true"/>

    <!--Set width to match_parent sets maximum width. alignParentLeft aligns 
    the left edge of this view with the left edge of its parent. toLeftOf 
    sets the right edge of this view to align with the left edge of the 
    given view. The result of all three settings is that this view will 
    always take up exactly half of the width of its parent, however wide 
    that may be. -->
    <Button
        android:id="@+id/btLeft"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/centerShim"
        android:text="Left Button" />

    <!--Same deal, but on the right -->
    <Button
        android:id="@+id/btRight"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/centerShim"
        android:layout_below="@+id/tvLeft"
        android:text="Right Button" />
</RelativeLayout>

Answer 2

Podría usar una estructura no recomendada con valores anidados

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:baselineAligned="false"
    android:weightSum="5">
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:layout_gravity="center">
        <TextView
            android:id="@+id/TopTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Top Text View"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"/>

    </RelativeLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:weightSum="2"
        android:layout_weight="4">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin">
            <TextView
                android:id="@+id/LeftTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Left Text View"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="30dp"/>

        </RelativeLayout>
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin">
                <TextView
                    android:id="@+id/RightTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:text="Right Text View"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="30dp"/>
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

Answer 3

Puede poner estos 2 RelativeLayouts dentro de LinearLayout con orientación horizontal, y luego usar el weight para ambos RelativeLayouts. Esto dividirá el LinearLayout en 2 partes iguales.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:baselineAligned="false">
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">
   </RelativeLayout>
   <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">
   </RelativeLayout>
</LinearLayout>

Answer 4

Veo 4 relativas en su dibujo ...?

Si se refiere a los dos en el medio, colóquelos en un LinearLayout (orientación horizontal), deje que todos ellos tengan un ancho de match_parent y otorgue a ambos diseños relativos un peso de 1

Answer 5

ahora puedes hacerlo fácilmente usando PercentRelative Layout

<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context=".MainActivity">


<Button
    android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:text="Button"
    app:layout_widthPercent="50%"/>

<Button
    android:id="@+id/button2"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/button"
    android:text="Button 2"
    app:layout_widthPercent="50%"/>
</android.support.percent.PercentRelativeLayout>

no olvides agregar la dependencia gradle

dependencies {
     compile ''com.android.support:percent:25.3.1''
}

código en github

Actualizar

PercentRelativeLayout está en desuso desde el nivel de API 26.0.0