Android - ImageView накладывает еще один ImageView

Я хотел бы сделать ImageView наложение другого ImageView следующим образом; только половина зеленого круга накладывается на изображение:

Я попытался использовать RelativeLayout и поместить оба ImageView внутрь. Затем я накладываю круг на изображение с помощью android:layout_alignBottom. Он оверлел, но я понятия не имею, как установить смещение так, чтобы только половина круга накладывалась на базовое изображение.

EDIT:

Извините, вот мой макет xml code

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginBottom="32sp" >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_person_black"
            android:adjustViewBounds="true"
            android:id="@+id/image_view_product" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/image_view_product"
            android:layout_centerHorizontal="true"
            android:background="@drawable/image_view_circle"
            android:src="@drawable/ic_circle" />

</RelativeLayout>

Ответы

Ответ 1

Я получаю много поддержки для этого ответа. Поэтому я пытаюсь улучшить этот ответ. Может быть, это лучший способ сделать это по сравнению с другими двумя, потому что это решение не требует исправления макета или разделить экран в равной части, поэтому может быть, это лучше сделать.

<android.support.design.widget.CoordinatorLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/viewA"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/subject"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="Thi"
            android:textColor="@android:color/white"
            android:textSize="17sp"
            />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/viewB"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="Thi"
            android:textColor="@android:color/black"
            android:textSize="17sp"
            />
    </LinearLayout>

 </LinearLayout>

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/plus"
    app:layout_anchor="@+id/viewA"
    app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

Альтернативный способ Попробуйте это

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    // this is your first layout to put the big image
    // use src or backgroud image as per requirement

    <LinearLayout
        android:background="@color/red_error"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </LinearLayout>

   // this is your bottom layout
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </LinearLayout>
</LinearLayout>

// This is the imageview which overlay the first LinearLayout 
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/success"
    android:adjustViewBounds="true"
    android:layout_gravity="center"/>
</FrameLayout>

выглядит так:

нашел еще одно решение для этого (Edit) если ваш большой размер изображения фиксированной высоты, вы можете попробовать это

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

<RelativeLayout
    android:id="@+id/layoutTop"
    android:background="@color/red_error"
    android:layout_width="match_parent"
    android:layout_height="200dp" >
</RelativeLayout>

<RelativeLayout
    android:id="@+id/layoutBottom"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@id/layoutTop" >
</RelativeLayout>

<ImageView
    android:id="@+id/overlapImage"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_above="@id/layoutBottom"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="-20dp" 
    android:adjustViewBounds="true"
   android:src="@drawable/testimage" />

 </RelativeLayout>

Refernce: - Android: размещение ImageView при перекрытии между макетами

Надеюсь, это поможет. Удачи.

Ответ 2

Попробуйте этот способ: Просто измените layout_width и layout_height в соответствии с вашими потребностями.

<?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" >

    <View
        android:id="@+id/viewOne"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#126989" />

    <View
        android:id="@+id/viewTwo"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_below="@+id/viewOne"
        android:background="#547866" />

    <View
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_alignBottom="@+id/viewTwo"
        android:layout_centerHorizontal="true"
        android:background="#ff7800"
        android:layout_marginBottom="35dp" />

</RelativeLayout>

Он будет выглядеть следующим образом:

Ответ 3

Используйте layout_marginTop = -20dp (половина вашего размера изображения). Он будет расти.

android:layout_marginTop="-20dp"

Ответ 4

поместите оба изображения в относительную компоновку сначала определите образ, который вы хотите положить за зеленый круг чем определить зеленый круг как

android:layout_alignBottom="@+id/Image1"

Затем отрегулируйте положение, указав маржу на изображение зеленого круга.

Ответ 5

Я рекомендую вам использовать рамку с этими двумя изображениями.

с обновленным представлением изображения внизу и вентилем стола вверху.

Примечание. Поскольку функция framelayout ведет себя как стек, элемент внизу отображается вверху.

И сделайте набор, чтобы гравитация значка обновления была снизу вверх, чтобы заставить ее выглядеть так.

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

   <ImageView 
      android:src="@drawable/ic_fan"
      android:scaleType="centerCrop"
      android:layout_height="wrap_content"
      android:layout_width="match_parent"/>

   <ImageView
            android:src="@drawable/ic_refresh"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:gravity="center|bottom"/>
</FrameLayout>

Ответ 6

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >

<ImageView
android:id="@+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="@+id/image_view_product" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="-20dp"
android:layout_below="@+id/ivBackground"
android:layout_centerHorizontal="true"
android:background="@drawable/image_view_circle"
android:src="@drawable/ic_circle" />

Я думаю, что это должно помочь вам, я отредактировал ваш код и внес изменения, как указано ниже - Я изменяю высоту обрамления круга до 40dp, а затем даю margin top -20 dp, чтобы изображение накладывалось на половину по мере необходимости на фоновое изображение.

Я не запускал этот код, поэтому, если вы сталкиваетесь с любыми проблемами, просто дайте мне знать, я надеюсь, что это хорошо сработает для вас.

Ответ 7

Скриншот:

activity_main.xml:

   <RelativeLayout
            android:id="@+id/rl_image"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <ImageView
                android:id="@+id/thumbnail"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:contentDescription="null"
                android:scaleType="fitXY"
                android:src="@drawable/album9" />


            <ImageView
                android:id="@+id/imageView_round"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_alignParentBottom="true"
                 android:layout_centerHorizontal="true"
                android:src="@drawable/user_profile" />

        </RelativeLayout>

Ответ 8

Я бы порекомендовал Constraintlayout, поскольку он дает отличный контроль над позиционированием отдельных элементов представления. Пример, основанный на вашем примере ниже

<android.support.constraint.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:id="@+id/parentLayout">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_person_black"
        android:adjustViewBounds="true"
        android:id="@+id/image_view_product"/>

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintTop_toBottomOf="@+id/image_view_product"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignBottom="@id/image_view_product"
        android:layout_centerHorizontal="true"
        android:background="@drawable/circle"
        android:src="@drawable/ic_add_circle_green_24dp"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>