0

¿Como puedo superponer dos layout con el fin de crear el efecto de la imagen con el numero 2 mediante XML en android?

Creo haber leído en algún momento una propiedad que funciona parecido a lo que es en CSS position relative, que permitía mover los elementos desde su posición inicial

introducir la descripción de la imagen aquí

3 respuestas 3

2

Si fijas un tamaño para el linearlayout de encima entonces pueden calcular el margen superior por medio de medidas dp para colocar el segundo linearlayout.

Necesitas contener tus 2 linearLayout en un RelativeLayout y jugar con los márgenes como ya te mencionó Erick Silva.

Al LinearLayout que quieres que se situé detrás y un poco abajo solo establece un Margin top con la mitad del tamaño del primer LinearLayout pero te repito, el primero debe tener tamaño fijo.

introducir la descripción de la imagen aquí

<RelativeLayout 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="8dp">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="8dp"
    android:layout_marginTop="33dp"
    android:background="@android:color/holo_blue_bright"
    android:orientation="horizontal">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center_horizontal"
        android:text="linear" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginEnd="50dp"
    android:layout_marginStart="50dp"
    android:layout_marginTop="8dp"
    android:background="@android:color/holo_orange_dark"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center_horizontal"
        android:text="linear" />

</LinearLayout>

</RelativeLayout>
1

Para suporponer layouts como en la imagen 2 basta que esten contenidos en un RelativeLayout y luego jugar un poco con los margenes o la alineacion, mientras que si queres que un layout se muestre despues del otro como en la imagen 1 el contenedor debe ser un LinearLayout

Aca te dejo como yo haria el XML para que quede como en la segunda imagen:

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:layout_margin="20dp"
      android:background="#DD00AA">
   </LinearLayout>

   <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_marginTop="40dp"
      android:background="#0066ff"/>
   </LinearLayout>

</RelativeLayout>
1

Te muestro la forma en que lo haría utilizando CardView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--EL CardView te permitira establecer una elevacion para el primer contenedor del Titulo-->
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="30dp"
        card_view:cardBackgroundColor="#b459ff"
        card_view:cardCornerRadius="0dp"
        card_view:cardElevation="1dp">

        <!-- Contenedor 1 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- Titulo -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Linear"
                android:textSize="30sp"
                android:textStyle="bold"
                android:textColor="@color/colorWhite" />
        </LinearLayout>

    </android.support.v7.widget.CardView>

    <!-- Contenedor 2 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"
        android:background="#595cff">

        <!-- Titulo -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:gravity="center"
            android:text="Linear"
            android:textSize="30sp"
            android:textStyle="bold"
            android:textColor="@color/colorWhite" />
    </LinearLayout>

</RelativeLayout>

Espero te sirva, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.