在两个视图之间查看 android XML

Question

我需要在卡片和 activity 的背景之间显示图像。附上示例图片。到目前为止，我一直在为布局而苦苦挣扎。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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:background="#D3E6ED"
tools:context=".MainActivity">


<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="10dp"
    android:layout_marginTop="120dp"
    android:layout_marginEnd="10dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:cardCornerRadius="10dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

附上图片。

Answer 1

将卡片和图像视图放在同一位置，但在卡片上添加等于图像视图高度一半的上边距。并将图像视图放在 xml 中的第二位，以便它在 z 顺序中位于顶部。

Answer 2

Here is some near output. Only you need to change cardview shape as you want.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="#D3E6ED">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="10dp"
        android:layout_marginTop="120dp"
        android:layout_marginEnd="10dp"
        app:cardCornerRadius="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageView"
        android:layout_width="@dimen/_100sdp"
        android:layout_height="@dimen/_100sdp"
        android:layout_marginTop="@dimen/_50sdp"
        android:translationZ="@dimen/_90sdp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@drawable/current_location" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/img_camera"
        android:layout_width="@dimen/_20sdp"
        android:layout_height="@dimen/_20sdp"
        android:layout_marginEnd="@dimen/_5sdp"
        android:layout_marginBottom="@dimen/_15sdp"
        android:tint="@color/black"
        android:translationZ="@dimen/_90sdp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        tools:src="@drawable/ic_icon_camera_attendant" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

Use this library for the circular image. This code will resolve your problem.

implementation 'de.hdodenhof:circleimageview:2.2.0'

Layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f36121">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.cardview.widget.CardView
            android:id="@+id/card_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:foreground="?android:attr/selectableItemBackground"
            card_view:cardBackgroundColor="#ffffff"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="0dp"
            card_view:cardUseCompatPadding="false">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="50dp"
                android:orientation="vertical"
                android:padding="24dp">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Login" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:hint="Password"
                    android:inputType="textPassword" />

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:background="@android:color/holo_blue_dark"
                    android:text="Sign In" />

            </LinearLayout>
        </androidx.cardview.widget.CardView>
        
        <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/profile_image"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_alignParentTop="true"
            android:layout_centerInParent="true"
            android:layout_marginEnd="@dimen/_5sdp"
            android:src="@mipmap/template_icon"
            app:civ_border_color="#f36121"
            app:civ_border_width="10dp"
            app:layout_constraintBottom_toTopOf="@+id/card_login"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

在两个视图之间查看 android XML

View between two views android XML

user-interface

android

android-layout

kotlin

android-constraintlayout