CODEWITHSUNDEEP
androidkeyboardbottomnavigationviewfloating-action-buttonwindow-soft-input-mode
Rasmus Israelsson
Rasmus Israelsson

Reputation: 11

FloatingActionButton above keyboard and BottomNavigationView hidden under keyboard in Android

I'm faced with a problem I just can't wrap my head around. It's fairly straight forward;

I have a view in which I have an EditText, a FloatingActionButton and a BottomNavigationView. When I select the EditText the keyboard pops up. This is when I want the FloatingActionButton to float above the keyboard and the BottomNavigationView to stay hidden behind the keyboard.

I have tried using both android:windowSoftInputMode as adjustResize and as adjustPan. The former will make the FloatingActionButton and the BottomNavigationView stay hidden behind the keyboard. The latter will push both the FloatingActionButton and the BottomNavigationView up above the keyboard.

In addition to this I tried using a simple custom BottomNavigationView element that set it's own visibility to hidden when the keyboard is detected (using viewTreeObserver and addOnGlobalLayoutListener). This works in tandem with adjustResize, but there is a slight delay after the kayboard pops up where you can see the BottomNavigationView, making it look very "jumpy".

My question is now; Are there are alternative solutions to this?

Edit This is my current xml, it's very straight forward.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:fitsSystemWindows="false">

<EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="Name" />

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/navigation"
    android:layout_margin="10dp"
    android:layout_gravity="top|end"
    app:layout_anchorGravity="right"/>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    android:layout_gravity="bottom"
    android:elevation="20dp"
    app:menu="@menu/navigation" />

</android.support.design.widget.CoordinatorLayout>

Upvotes: 0

Views: 3265

Answers (2)

Hitesh Sarsava
Hitesh Sarsava

Reputation: 680

change your main parent layout property android:fitsSystemWindows="false" to android:fitsSystemWindows="true" and put android:windowSoftInputMode="adjustResize" in your activity in AndroidManifest.xml file

Upvotes: 0

Khemraj Sharma
Khemraj Sharma

Reputation: 58934

The one thing that i use always to get rid of this problem.

  1. Wrap your view inside ScrollView that you dont want to come up of keyboard.
  2. Keep views outside Scrollview which you want float upon keyboard when keyboard opens.

Does not this sounds good and pretty easy :)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/button_next"
        android:background="#0ff"
        >
       // these views will not come up.
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="250dp"
                android:hint="Hint"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ABC"
                android:textSize="50sp"
                />
        </LinearLayout>
    </ScrollView>
    // this will float on keyboard
    <Button
        android:id="@+id/button_next"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_margin="10dp"
        android:text="Button Next"
        />

</RelativeLayout>

in the manifest.xml

<application
        ...
        >
        <activity android:name=".YourActivity"
            android:windowSoftInputMode="adjustResize"
           >
        </activity>
</application>

Edit:

Try this, it is used to move fab upon keyboard.

Add android:windowSoftInputMode="adjustResize" to your activity in manifest Make sure your root view in layout xml, has android:fitsSystemWindows="true" property

Upvotes: 1

Related Questions