Android - ImageView overlay еще один ImageView

Question

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

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

EDIT:

К сожалению, вот мой макет код XML

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

Answer 1

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

android:layout_marginTop="-20dp"

Answer 2

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

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

Примечание: Поскольку 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> 

Answer 3

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

android:layout_alignBottom="@+id/Image1" 

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

Answer 4

Попробуйте так: Просто измените 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> 

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

Answer 5

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

<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: Placing ImageView on overlap between layouts

Надеется, что это будет help.Good Luck

Answer 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, чтобы изображение накладывалось на половину, как вам нужно на фоновом изображении.

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

Answer 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> 

Answer 8

Я бы рекомендовал d 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>