Button not visible when keyboard is shown

user_15305849 0
Viewed 122

I am trying to implement a functionality where the button below EditText moves up when the keyboard is shown, this is a login fragment and I would like to have this functionality similiar to what Instagram has. Right now, when keyboard is pressed, the EditText moves up but the button is hidden. I am attaching the xml below for the same.

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

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

        <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="150dp">

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

                <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:padding="20dp">

                    <ImageButton
                            android:layout_width="40dp"
                            android:layout_height="40dp"
                            android:layout_gravity="center"
                            android:scaleType="center"
                            android:src="@drawable/ic_back" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:layout_gravity="bottom"
                    android:layout_marginBottom="20dp"
                    android:orientation="vertical" />

            <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/root_constraints"
                    android:layout_width="130dp"
                    android:layout_height="130dp"
                    android:layout_gravity="top|center"
                    android:layout_marginTop="20dp"
                    android:elevation="20dp"
                   >

                <ImageView
                        android:id="@+id/std_imageView"
                        android:layout_width="100dp"
                        android:layout_height="100dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />
            </androidx.constraintlayout.widget.ConstraintLayout>
        </FrameLayout>

        <androidx.appcompat.widget.AppCompatTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginTop="144dp"
                android:layout_marginEnd="30dp"
                android:fontFamily="@font/montserrat_bold"
                android:textColor="#0B3148"
                android:textSize="48sp"
                android:textStyle="bold"/>

        <androidx.appcompat.widget.AppCompatTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginEnd="30dp"
                android:fontFamily="@font/sf_bold"
                android:textColor="#0B3148"
                android:textSize="14sp"
                android:textStyle="bold"
                />

        <androidx.appcompat.widget.AppCompatTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginEnd="30dp"
                android:fontFamily="@font/sf_regular"
                android:textColor="#0B3148"
                android:textSize="14sp" />

        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <androidx.appcompat.widget.AppCompatEditText
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="30dp"
                    android:layout_marginEnd="30dp"
                    android:fontFamily="@font/roboto_light"
                    android:hint=""
                    android:visibility="gone"
                    android:inputType="number"
                    android:paddingStart="16dp"
                    android:textSize="14sp"
                    android:paddingTop="11dp"
                    android:paddingEnd="0dp"
                    android:paddingBottom="10dp"
                    android:textColorHint="@color/color_text"
                    android:text=""
                    android:drawablePadding="8dp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintStart_toStartOf="parent" />

            <androidx.appcompat.widget.AppCompatEditText
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="30dp"
                    android:layout_marginEnd="30dp"
                    android:backgroundTint="#E4E4E4"
                    android:fontFamily="@font/roboto_light"
                    android:inputType="number"
                    android:paddingStart="16dp"
                    android:textSize="14sp"
                    android:paddingTop="11dp"
                    android:paddingEnd="0dp"
                    android:paddingBottom="10dp"
                    android:textColorHint="@color/color_text"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent" />

            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constraintTop_toBottomOf="@+id/et_countrycode"
                    android:visibility="gone"
                    android:textSize="12sp"
                    android:layout_marginTop="6dp"
                    app:layout_constraintStart_toStartOf="@+id/et_countrycode"
                    app:layout_constraintEnd_toEndOf="@+id/et_countrycode" />

        </androidx.constraintlayout.widget.ConstraintLayout>

        <Button
                android:id="@+id/finish"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:layout_marginHorizontal="30dp"
                android:background="@drawable/bg_button_1"
                android:textColor="#111B21"
                android:textSize="14sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />
    </LinearLayout>
</FrameLayout>

Note: I have removed a bit of text and backgrounds but remember that all these views are essential

EDIT: I tried the following approach with adjustresize but the button is not overlapping with edittext

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

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ScrollView
            android:id="@+id/scrollView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent">

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

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="150dp">

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

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal"
                            android:padding="20dp">

                            <ImageButton
                                android:layout_width="40dp"
                                android:layout_height="40dp"
                                android:layout_gravity="center"
                                android:scaleType="center"
                                android:src="@drawable/back" />
                        </LinearLayout>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:layout_gravity="bottom"
                        android:layout_marginBottom="20dp"
                        android:orientation="vertical" />

                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/root_constraints"
                        android:layout_width="130dp"
                        android:layout_height="130dp"
                        android:layout_gravity="top|center"
                        android:layout_marginTop="20dp"
                        android:elevation="20dp">

                        <ImageView
                            android:id="@+id/std_imageView"
                            android:layout_width="100dp"
                            android:layout_height="100dp"
                            android:backgroundTint="#38A19C"                                
                         app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintLeft_toLeftOf="parent"
                            app:layout_constraintRight_toRightOf="parent"
                            app:layout_constraintTop_toTopOf="parent" />
                    </androidx.constraintlayout.widget.ConstraintLayout>
                </FrameLayout>

                <androidx.appcompat.widget.AppCompatTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="144dp"
                    android:layout_marginEnd="30dp"
                    android:fontFamily="@font/montserrat_bold"
                    android:textColor="#0B3148"
                    android:textSize="48sp"
                    android:textStyle="bold"
                    />

                <androidx.appcompat.widget.AppCompatTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:layout_marginEnd="30dp"
                    android:fontFamily="@font/sf_bold"
                    android:text="@string/welcome_to_isaac"
                    android:textColor="#0B3148"
                    android:textSize="14sp"
                    android:textStyle="bold" />

                <androidx.appcompat.widget.AppCompatTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:layout_marginEnd="30dp"
                    android:fontFamily="@font/sf_regular"
                    android:textColor="#0B3148"
                    android:textSize="14sp" />

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <androidx.appcompat.widget.AppCompatEditText
                        android:id="@+id/et_countrycode"
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="30dp"
                        android:layout_marginTop="30dp"
                        android:layout_marginEnd="30dp"
                        android:backgroundTint="#E4E4E4"
                        android:drawablePadding="8dp"
                        android:fontFamily="@font/roboto_light"
                        android:hint=""
                        android:inputType="number"
                        android:paddingStart="16dp"
                        android:paddingTop="11dp"
                        android:paddingEnd="0dp"
                        android:paddingBottom="10dp"
                        android:text=""
                        android:textColorHint="@color/color_text"
                        android:textSize="14sp"
                        android:visibility="gone"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <androidx.appcompat.widget.AppCompatEditText
                        android:id="@+id/et_email"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginStart="30dp"
                        android:layout_marginTop="30dp"
                        android:layout_marginEnd="30dp"
                        android:backgroundTint="#E4E4E4"
                        android:fontFamily="@font/roboto_light"
                        android:hint="@string/phone_number"
                        android:inputType="number"
                        android:paddingStart="16dp"
                        android:paddingTop="11dp"
                        android:paddingEnd="0dp"
                        android:paddingBottom="10dp"
                        android:textColorHint="@color/color_text"
                        android:textSize="14sp"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="6dp"
                        android:textSize="12sp"
                        android:visibility="gone"
                        app:layout_constraintEnd_toEndOf="@+id/et_countrycode"
                        app:layout_constraintStart_toStartOf="@+id/et_countrycode"
                        app:layout_constraintTop_toBottomOf="@+id/et_countrycode" />

                </androidx.constraintlayout.widget.ConstraintLayout>

            </LinearLayout>

        </ScrollView>

        <Button
            android:id="@+id/bt_finish"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="30dp"
            android:layout_marginTop="12dp"
            android:background="@drawable/bg_button_1"
            android:text="@string/continue_txt"
            android:textColor="#111B21"
            android:textSize="14sp"
            app:layout_constraintTop_toBottomOf="@id/scrollView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
kotlin android
2 Answers

Use ConstraintLayout to position the button to the bottom of the screen and then add.

<activity
    android:name=".activity"
    android:windowSoftInputMode="adjustResize"
    android:exported="false" />

...in the activity that would host that Fragment's layout.

Note

The button should be layout in this manner:

<androidx.constraintlayout.widget.ConstraintLayout>

     <Button
        android:id="@+id/finish"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        ... /> 

</androidx.constraintlayout.widget.ConstraintLayout>

... but right now in your code, I can see the button inside a LinearLayout. Change the layout to make the button be positioned at the bottom of a ConstraintLayout and make that ConstraintLayout the parent of that button. The ConstraintLayout should also fill the whole screen.

Edit:

When you use windowSoftInputMode="adjustResize the system positions the element at the bottom of the screen on top of the keyboard and makes your layout shrink in size. So you need to attach a ScrollView to make your layout scrollable.

Like this:

 <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
         android:layout_height="match_parent"
         ...>
    
    // Position this scrollView to fill the entire screen

      <ScrollView
         android:layout_width="0dp"
         android:layout_height="0dp"
         ...>

    // This scroll view layout would contain all your other layout views

      </ScrollView>    

       <Button
          android:id="@+id/finish"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" 
          ... /> 
    
</androidx.constraintlayout.widget.ConstraintLayout>

Working principle

The button should not be a child view of the ScrollView, it should be a child view of the root view, which is a ConstraintLayout that fills the screen, then the button is positioned to the bottom of the root view. The bottom of the ScrollView should be positioned to the top of the Button. That way, the child views of the ScrollView is scrollable and the button stays on top of the keyboard.

user_137378430

Go to your AndroidMenifest File, Inside you <activity> tag put android:windowSoftInputMode = "adjustpan" it would handle the view after showing up keyboard. if adjustpan doesn't work, there are more property, use one respect to your need.

example:

<activity
    android:name=".YourActivityName"
    android:windowSoftInputMode="adjustPan"
    android:exported="false" />
user_133049130
Related