Equivalent to "Position relative" in XML android studio, overlay layouts

0

How can I superimpose two layout in order to create the effect of the image with the number 2 using XML in Android?

I think I have read at some point a property that works similar to what is in CSS position relative, which allowed moving the elements from their initial position

    
asked by César Alejandro M 19.09.2018 в 20:36
source

3 answers

2

If you set a size for the linearlayout above then you can calculate the top margin by dp to place the second linearlayout.

You need to contain your 2 linearLayout in a RelativeLayout and play with the margins as Erick Silva mentioned.

At the LinearLayout you want to be placed behind and a little below only sets a Margin top with half the size of the first LinearLayout but I repeat, the first must have a fixed size.

<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>
    
answered by 20.09.2018 / 01:22
source
1

To suppose layouts as in image 2 it is enough that they are contained in a RelativeLayout and then play a bit with the margins or the alignment, while if you want one layout to be shown after the other as in image 1 the container must be a LinearLayout

Here I leave you as I would do the XML so that it looks like the second image:

<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>
    
answered by 19.09.2018 в 22:39
1

I show you the way I would do it using 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>

I hope you serve, greetings.

    
answered by 20.09.2018 в 00:04