CODEWITHSUNDEEP
androidandroid-manifestandroid-constraintlayoutandroid-softkeyboard
Mohan K
Mohan K

Reputation: 484

How show bottom view above key board without resizing layouts in Android

I have developed an image preview screen like WhatsApp the problem is when tapping on the description edit text keyboard opened and it moves the Image View Above keyboard. I want to achieve when the keyboard opens then the bottom layout alone should place above the keyboard and the rest of the layouts should remain in the same position as WhatsApp.

<?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="@color/black"
tools:context=".activities.MediaPreviewActivity">

<com.contusfly.views.CustomViewPager
    android:id="@+id/media_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.03" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.97" />

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/margin_20"
    app:layout_constraintEnd_toEndOf="@+id/guideline_right"
    app:layout_constraintStart_toStartOf="@+id/guideline_left"
    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"
        android:background="?attr/selectableItemBackground"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
        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:background="?attr/selectableItemBackground"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
        android:padding="@dimen/margin_5"
        app:srcCompat="@drawable/ic_delete_media" />
</RelativeLayout>


<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/bottom_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/color_black_opacity_55"
    android:focusable="true"
    android:focusableInTouchMode="true"
    app:layout_constraintBottom_toBottomOf="parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/left_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.03" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/right_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.97" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group_add_more"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:constraint_referenced_ids="add_more_media, separator_view"
        app:layout_constraintBottom_toBottomOf="@+id/image_caption"
        app:layout_constraintEnd_toStartOf="@+id/emoji"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/image_caption" />

    <ImageView
        android:id="@+id/add_more_media"
        android:layout_width="@dimen/margin_18"
        android:layout_height="@dimen/margin_18"
        android:contentDescription="@null"
        android:background="?attr/selectableItemBackground"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
        app:layout_constraintBottom_toBottomOf="@+id/image_caption"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="@+id/image_caption"
        app:srcCompat="@drawable/ic_add_more_media" />

    <View
        android:id="@+id/separator_view"
        android:layout_width="@dimen/margin_0.5"
        android:layout_height="@dimen/margin_25"
        android:layout_marginStart="@dimen/margin_15"
        android:layout_marginEnd="@dimen/margin_15"
        android:background="@color/color_text_hint"
        app:layout_constraintBottom_toBottomOf="@+id/image_caption"
        app:layout_constraintEnd_toStartOf="@+id/emoji"
        app:layout_constraintStart_toEndOf="@+id/add_more_media"
        app:layout_constraintTop_toTopOf="@+id/image_caption" />

    <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:background="?attr/selectableItemBackground"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/image_caption"
        app:layout_constraintEnd_toStartOf="@+id/image_caption"
        app:layout_constraintStart_toEndOf="@+id/separator_view"
        app:srcCompat="@drawable/ic_emoji_black" />


    <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_marginEnd="@dimen/margin_60"
        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_toTopOf="@+id/group_to_user"
        app:layout_constraintEnd_toEndOf="@+id/right_guideline"
        app:layout_constraintStart_toEndOf="@+id/emoji" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group_to_user"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:constraint_referenced_ids="image_right_arrow, to_user_text_view"
        app:layout_constraintBottom_toBottomOf="@+id/to_user_text_view"
        app:layout_constraintEnd_toEndOf="@id/right_guideline"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintTop_toTopOf="@+id/to_user_text_view" />

    <ImageView
        android:id="@+id/image_right_arrow"
        android:layout_width="@dimen/padding_6"
        android:layout_height="@dimen/margin_9"
        android:layout_marginStart="@dimen/margin_12"
        android:layout_marginTop="@dimen/margin_10"
        android:layout_marginEnd="@dimen/margin_12"
        android:layout_marginBottom="@dimen/margin_10"
        android:contentDescription="@null"
        app:layout_constraintBottom_toBottomOf="@+id/to_user_text_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/to_user_text_view"
        app:srcCompat="@drawable/ic_right_arrow" />

    <TextView
        android:id="@+id/to_user_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_10"
        android:layout_marginTop="@dimen/margin_20"
        android:layout_marginEnd="@dimen/margin_10"
        android:layout_marginBottom="@dimen/margin_10"
        android:fontFamily="@font/sf_ui_display_semi_bold"
        android:includeFontPadding="false"
        android:textColor="@color/color_text_black_bg"
        android:textSize="@dimen/text_size_13"
        app:layout_constraintBottom_toTopOf="@+id/images_preview_list"
        app:layout_constraintStart_toEndOf="@+id/image_right_arrow" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/images_preview_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:visibility="gone"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintBottom_toTopOf="@+id/emojicons" />


    <FrameLayout
        android:id="@+id/emojicons"
        android:layout_width="match_parent"
        android:layout_height="@dimen/margin_250"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<ImageView
    android:id="@+id/send_media"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@null"
    android:background="?attr/selectableItemBackground"
    android:foreground="?android:attr/selectableItemBackgroundBorderless"
    android:src="@drawable/ic_send_media"
    app:layout_constraintBottom_toTopOf="@+id/bottom_layout"
    app:layout_constraintEnd_toEndOf="@id/guideline_right"
    app:layout_constraintTop_toTopOf="@+id/bottom_layout" />
 </androidx.constraintlayout.widget.ConstraintLayout>

and the manifest file like this

  <activity
        android:name=".activities.MediaPreviewActivity"
        android:configChanges="orientation|screenSize|keyboardHidden"
        android:windowSoftInputMode="stateVisible|adjustResize" />

Refer current behaviour

before keyboard open

after keyboard open

WhatsApp behavior

before keyboard open

after keyboard open

How to achieve like this?

Upvotes: 1

Views: 190

Answers (1)

Skizo-ozᴉʞS ツ
Skizo-ozᴉʞS ツ

Reputation: 20626

One option is to have for instance a LinearLayout that inside contains a ScrollView with all the data you want to show and then outside the ScrollView you have the view you want to be sticky in the keyboard.

Example of layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >

            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 1"
                />

            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 2"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 3"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 4"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 5"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 6"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 7"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 8"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 9"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 10"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 11"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 12"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 13"
                />
            <androidx.appcompat.widget.AppCompatTextView
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="EXAMPLE 14"
                />

        </LinearLayout>

    </ScrollView>

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn"/>

</LinearLayout>

Output :

enter image description hereenter image description here

Upvotes: 2

Related Questions