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