How to show view 50% below bottom layout and 50% above bottom layout?

Question

I want to display a view that is 50% should overlay anchor view and remain 50% should show above the view. if bottom layout moves up then send media icon also move up

Like the Send button in Whatsapp. How to achieve this?

Here is my XML code

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="?attr/color_black"
    tools:context=".activities.MediaPreviewActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/media_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/color_white"/>


    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_20"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/back_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginStart="@dimen/margin_10"
            android:contentDescription="@null"
            app:srcCompat="@drawable/ic_back_arrow_white" />

        <com.contusfly.views.CircularImageView
            android:id="@+id/image_chat_picture"
            android:layout_width="@dimen/margin_30"
            android:layout_height="@dimen/margin_30"
            android:layout_marginStart="@dimen/margin_15"
            android:layout_toEndOf="@+id/back_arrow"
            android:contentDescription="@null"
            app:srcCompat="@drawable/ic_profile" />

        <ImageView
            android:id="@+id/delete_media"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:contentDescription="@null"
            android:padding="@dimen/margin_5"
            app:srcCompat="@drawable/ic_delete_media" />
    </RelativeLayout>

    <ImageView
        android:id="@+id/send_media"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        android:src="@drawable/ic_send_media"
        app:layout_constraintBottom_toTopOf="@+id/bottom_layout"
        app:layout_constraintEnd_toEndOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:background="@color/color_black_opacity_55"
        android:focusable="true"
        android:focusableInTouchMode="true"
        app:layout_constraintBottom_toBottomOf="parent">
        
        <ImageView
            android:id="@+id/emoji"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_18"
            android:layout_marginEnd="@dimen/margin_15"
            android:layout_marginBottom="@dimen/margin_18"
            android:contentDescription="@null"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="@+id/image_caption"
            app:layout_constraintEnd_toStartOf="@+id/image_caption"
            app:layout_constraintStart_toStartOf="parent"
            app:srcCompat="@drawable/ic_emoji" />


        <io.github.rockerhieu.emojicon.EmojiconEditText
            android:id="@+id/image_caption"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_10"
            android:layout_marginBottom="@dimen/margin_10"
            android:background="@null"
            android:fontFamily="@font/sf_ui_display_regular"
            android:hint="@string/title_hint_caption"
            android:inputType="textMultiLine|textCapSentences"
            android:maxLines="6"
            android:paddingTop="@dimen/margin_15"
            android:paddingBottom="@dimen/margin_15"
            android:textColor="@color/color_white"
            android:textColorHint="@color/color_text_hint"
            android:textSize="@dimen/text_size_16"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/emoji" />
        
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

I wanted to display send_media image view above bottom_layout can any have an idea how to implement this?

Answer 1

Assuming the button you're referring to is send_media you have to change it's constraints to:

<ImageView
    android:id="@+id/send_media"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@null"
    android:src="@drawable/ic_send_media"
    app:layout_constraintTop_toTopOf="@+id/bottom_layout"
    app:layout_constraintBottom_toTopOf="@+id/bottom_layout"
    app:layout_constraintEnd_toEndOf="parent" />

This way both top and bottom are constrained to te top of bottom_layout, giving you the desired result.