在两个不同的布局之上重叠 circleView

Question

我正在尝试获取这个：

但我只能得到这个：

使用此布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical" >
    <!--android:background="@mipmap/background_poly"-->
    <RelativeLayout android:id="@+id/headerL"
        android:layout_width="match_parent" android:layout_height="100dp"
        android:background="@color/account_grey_200">

</RelativeLayout>

<RelativeLayout android:id="@+id/account_det"
    android:layout_width="match_parent" android:layout_height="wrap_content">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/usrAvatar"
        android:layout_width="90dp" android:layout_height="90dp"
        android:src="@mipmap/aka"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="38dp"/>

    <TextView android:id="@+id/usrName"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginLeft="8dp" android:layout_marginStart="8dp"
        android:layout_marginTop="2dp"
        android:text="CrisRe"
        android:textColor="#000000" android:textSize="14sp" android:textStyle="normal"
        android:layout_toEndOf="@id/usrAvatar"
        android:layout_toRightOf="@id/usrAvatar"
        android:layout_alignTop="@id/usrAvatar" />
    <!--android:layout_alignBaseline="@id/usrAvatar"-->

    <TextView android:id="@+id/usrEmail"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="normal"
        android:text="crisRe@mymail.com"
        android:layout_alignLeft="@id/usrName"
        android:layout_alignStart="@id/usrName"
        android:layout_below="@id/usrName" />
</RelativeLayout>

<LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent"
    android:layout_below="@+id/headerL"
    android:background="@color/account_grey_400"/>

怎么了？如何将 CircleView 重叠在两个布局之上？我也考虑过使用 drawable layer-list 但我无法让它工作。这个似乎是最简单的解决方案，尽管我也在考虑其他替代方案。

Answer 1

对您的xml稍作修改：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- android:background="@mipmap/background_poly" -->

    <RelativeLayout
        android:id="@+id/headerL"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/account_grey_200" >
    </RelativeLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/headerL"
        android:background="@color/account_grey_400" />

    <RelativeLayout
        android:id="@+id/account_det"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/usrAvatar"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="38dp"
            android:src="@mipmap/aka" />

        <TextView
            android:id="@+id/usrName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/usrAvatar"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="2dp"
            android:layout_toEndOf="@id/usrAvatar"
            android:layout_toRightOf="@id/usrAvatar"
            android:text="CrisRe"
            android:textColor="#000000"
            android:textSize="14sp"
            android:textStyle="normal" />
        <!-- android:layout_alignBaseline="@id/usrAvatar" -->

        <TextView
            android:id="@+id/usrEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/usrName"
            android:layout_alignStart="@id/usrName"
            android:layout_below="@id/usrName"
            android:layout_marginTop="6dp"
            android:text="crisRe@mymail.com"
            android:textColor="#000000"
            android:textSize="16sp"
            android:textStyle="normal" />
    </RelativeLayout>

Answer 2

根据您的要求更改以下代码

<RelativeLayout
    android:id="@+id/top_layout"
    android:layout_width="match_parent"
    android:background="#FFFF0000"
    android:layout_height="100dp"></RelativeLayout>

<RelativeLayout
    android:id="@+id/bottom_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></RelativeLayout>

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_below="@+id/top_layout"
    android:layout_marginTop="-45dp" //It should be half of the height
    android:src="@drawable/ic_launcher" />

在两个不同的布局之上重叠 circleView

Overlapping circleView on top of two different Layouts

android

android-layout

overlap