CODEWITHSUNDEEP
androidandroid-layoutandroid-xml
Daiwik Daarun
Daiwik Daarun

Reputation: 3974

Android: Placing ImageView on overlap between layouts

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

Upvotes: 16

Views: 20300

Answers (4)

MD. NAHIAN AHMED
MD. NAHIAN AHMED

Reputation: 7

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

Upvotes: 0

Tushar Saha
Tushar Saha

Reputation: 2106

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

Upvotes: 0

paul
paul

Reputation: 1223

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>

Upvotes: 37

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

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>

Upvotes: 0

Related Questions