Android - ImageView superpose un autre ImageView

Question

Je voudrais faire une ImageView superposer une autre ImageView comme ceci; seule la moitié du cercle vert recouvre l'image:

 

J'ai essayé d'utiliser RelativeLayout et de mettre les deux ImageView à l'intérieur. Ensuite, je superpose le cercle sur l'image en utilisant Android:layout_alignBottom. Cela a superposé le mais je ne sais pas comment régler le décalage de sorte que seule la moitié du cercle recouvre l'image de base.

MODIFIER:

Désolé, voici mon code XML de mise en page

<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

Je reçois beaucoup de votes positifs pour cette réponse. J'essaie donc d'améliorer cette réponse. Peut-être est-ce la meilleure façon de le faire par rapport aux deux autres solutions, car cette solution ne nécessite pas de corriger la disposition ou la division de l'écran en partie égale, c'est peut-être préférable.

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

Manière alternative Essayez ceci

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

ça ressemble à ça 

 

trouvé une solution de plus pour cela (Edit) si votre grande taille d’image est à hauteur fixe, vous pouvez essayer ceci

 <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: Placer ImageView sur le chevauchement de dispositions

J'espère que cela vous aidera. Bonne chance

Answer 2

Essayez de cette façon: Changez simplement layout_width et layout_height en fonction de vos besoins.

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

Il ressemblera à ceci:

 

Answer 3

Je recommanderais Constraintlayout car cela donne un excellent contrôle sur le positionnement des éléments de vue individuels. Échantillon basé sur votre exemple ci-dessous

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

Answer 4

Utilisez layout_marginTop = -20dp (la moitié de la taille de votre image). Ça va monter.

Android:layout_marginTop="-20dp"

Answer 5

mettez les deux images en disposition relative Définissez d’abord l’image que vous voulez mettre derrière le cercle vert Définissez ensuite le cercle vert comme

Android:layout_alignBottom="@+id/Image1"

Ajustez ensuite la position en donnant une marge à l’image du cercle vert.

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

Je pense que cela devrait vous aider. J'ai modifié votre code et apporté les modifications ci-dessous.
- Je change la hauteur du cercle imageview en 40dp, puis je donne une marge supérieure à -20 dp afin que l’image se superpose à la moitié de la distance dont vous avez besoin sur l’image de fond.

Je n'ai pas exécuté ce code, donc si vous rencontrez des problèmes, faites-le moi savoir et espérons que cela fonctionnera bien pour vous .. 

Answer 7

Je vous recommande d'utiliser un framelayout avec ces deux images.

avec le rafraîchissement imageview en bas et le ventilateur de table en haut.

Remarque: comme framelayout se comporte comme une pile, l'élément en bas apparaîtra en haut.

Et définissez la gravité de l'icône d'actualisation sur bas | centre pour lui donner l'apparence suivante.

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

Capture d'écran:

 

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>