Android - ImageView overlay another ImageView

问题

I would like to make an ImageView overlay another ImageView like this; only half of the circle green is overlaying the image:

I have tried using RelativeLayout and put both ImageView inside. Then I overlay the circle over the image by using android:layout_alignBottom. It did overlay the but I have no idea how to set the offset so that only half of the circle is overlaying the base image.

EDIT:

Sorry, here is my layout 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:

I get lots of upvote for this answer.So i try to improve that answer. May be this is the better way to do that compare to other two, because this solution doesn't required to fix the layout or divide screen in equal part so may be this is better to do that.

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

Alternate way Try this

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

its look like this

found one more solution for that (Edit) if your big image size is fixed height you can try this

 <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

Hope this will help.Good Luck

回答2:

Try out this way: Just change layout_width and layout_height according to your need.

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

It will look like this:

回答3:

I would recommend Constraintlayout as it gives excellent control over the positioning of individual view items. Sample based on your example below

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

回答4:

Use layout_marginTop = -20dp ( Half of your image size ). It will go up.

android:layout_marginTop="-20dp"

回答5:

put both the image in Relative layout first define the image you want to put behind the green circle than define the green circle as

android:layout_alignBottom="@+id/Image1"

Than adjust the position by giving margin to the green circle image.

回答6:

I recommend you to use a framelayout with these two images.

with the refresh imageview at the bottom and the table fan at the top.

Note : As the framelayout behaves like a stack, the item at the bottom will appear at the top.

And do the set the gravity of the refresh icon to be bottom|center to make it look this way.

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

回答7:

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

I think this should help you i have edited your code and made changes as below
- I change circle imageview height to 40dp and then i give margin top -20 dp so that image will overlay half as you need on background image.

I did not run this code so if you face any issues just let me know i hope this works well for you..

回答8:

Screenshot:

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>

来源：https://stackoverflow.com/questions/33864422/android-imageview-overlay-another-imageview

标签

android

android-layout

android-xml