16

I am trying to place an ImageView on the overlap point between two layouts. In the picture below, my goal would be to place the ImageView where the white square is. NOTE: The overlap point will not necessarily be centered vertically as shown below

enter image description here

Is this possible in XML?

My only guess right now is to do this in the actual code itself.

EDIT 8/3/2016: For reference, I think ConstraintLayouts may be the best future solution for these types of problems http://tools.android.com/tech-docs/layout-editor

Daiwik Daarun
  • 3,804
  • 7
  • 33
  • 60

4 Answers4

37

This will do what you want, with either an image of fixed height, or calculated programatically.

<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: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" <!-- This should be always half the height, can also be calculated and added programtically -->
        android:adjustViewBounds="true"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>
paul
  • 1,193
  • 8
  • 11
0

Try this way,hope this will help you to solve your problem.

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:adjustViewBounds="true"
        android:layout_gravity="center"/>
</FrameLayout>
Haresh Chhelana
  • 24,720
  • 5
  • 57
  • 67
0

use constraint layout then assume there is a top_view and bottom_view you want to place the view between top_view and bottom_view

<androidx.constraintlayout.widget.ConstraintLayout 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"
android:orientation="vertical">
<LinearLayout
    android:id="@+id/top_view"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_size_100"
    android:background="@color/white"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<LinearLayout
    android:id="@+id/middle_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="@id/top_view"
    app:layout_constraintTop_toBottomOf="@id/top_view">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="abcd" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ipsum" />

</LinearLayout>

This should do it

Tushar Saha
  • 1,978
  • 24
  • 29
0
<RelativeLayout 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"
tools:context=".MainActivity2"
android:orientation="vertical"
>



<RelativeLayout
    android:id="@+id/layouttop"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:background="@drawable/dhaka"
    android:layout_alignParentTop="true"
    android:layout_marginTop="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginLeft="15dp"
    >



</RelativeLayout>



<RelativeLayout
    android:id="@+id/layoutbutton"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:layout_marginRight="15dp"
    android:layout_marginLeft="15dp"
    android:layout_below="@+id/layouttop"
    >


</RelativeLayout>




<ImageView
    android:id="@+id/imagemiddle"
    android:layout_width="wrap_content"
    android:layout_height="150dp"
    android:src="@drawable/man"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="-50dp"
    android:layout_above="@+id/layoutbutton"
    />
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 14 '22 at 19:07