Move Floating Action Button above keyboard

Question

I have this Floating Action Button (GitHub link) and when I open a (software) keyboard the Floating Action Button hides behind the keyboard.

Is there a way that I can push it above the keyboard?

Edit:

tab_random.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="match_parent"
        android:layout_height="156dp"
        android:background="@color/primary_color"
        />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/from"
        android:inputType="number"
        android:imeOptions="actionNext"
        android:layout_centerHorizontal="true"
        android:hint="From"
        android:paddingStart="5dp"
        android:textColor="#FFF"
        android:fontFamily="sans-serif-light"
        android:textSize="44sp"
        android:backgroundTint="@color/fab_ripple"
        android:layout_marginStart="10dp"
            />

    <EditText
        android:textSize="44sp"
        android:layout_marginStart="10dp"
        android:paddingStart="5dp"
        android:fontFamily="sans-serif-light"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/from"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="To"
        android:inputType="number"
        android:imeOptions="actionSend"
/>
</RelativeLayout>

activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="activity.MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/tool_bar" />

    <slidingModel.SlidingTabLayout
        android:layout_below="@+id/toolbar"
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="4dp"
        android:background="@color/primary_color"
        />

    <android.support.v4.view.ViewPager
        android:layout_below="@id/tabs"
        android:id="@+id/pager"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"

        />

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        fab:fab_colorNormal="@color/fab_normal"
        fab:fab_colorPressed="@color/fab_pressed"
        fab:fab_colorRipple="@color/fab_ripple"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

@IntelliJAmiya Yeah I did. All it did was open the keyboard when I opened the app. — Gursimran Bedi, Aug 26 '15 at 04:52

score 1 · Accepted Answer · answered Aug 26 '15 at 02:31

1

Your layout is like this right now:

<Relative Layout>
    <View/>
    <EditText/>
    <other stuff.../>
</RelativeLayout>

You need to add a scrollview inside the RelativeLayout tags. Also, scrollviews don't like having more than one direct child view, so you'll need a Relativelayout inside of the scrollview. So, your layout will wind up looking like this:

<RelativeLayout> (this was already here)
    <ScrollView> (this is new)
        <RelativeLayout> (this is also new)
            <View, EditText, Etc. in here/> (this is what used to be inside that original relative layout.)
        </RelativeLayout> (closing up the new Relativelayout)
    </ScrollView> (closing the new Scrollview)
</RelativeLayout> (closing the original Relative Layout.)

answered Aug 26 '15 at 02:31

MrPlow

1,214
10
9

FAB is still behind keyboard :( – Gursimran Bedi Aug 26 '15 at 02:35
posted my activity_main if it helps – Gursimran Bedi Aug 26 '15 at 02:42
looks like all you need to do is apply this fix to your activity_main layout instead of whatever that other thing was. Put the scrollview around the whole page except the very outermost viewgroup. – MrPlow Aug 26 '15 at 02:46

score 1 · Answer 2 · answered Mar 27 '16 at 23:59

I had a similar problem, followed suggestion by @MrPlow, but where he added a Scrollview inside the original RelativeLayout and then added another RelativeLayout inside of the ScrollView (to preserve the formatting structure), I just wrapped the entire layout in a ScrollView and it 'just worked'. Final for OP would then be:

<Scrollview>
    <RelativeLayout>
        <View/>
        <EditText/>
        <other stuff.../>
    </RelativeLayout>
</Scrollview>

score 0 · Answer 3 · answered Aug 26 '15 at 01:30

0

A solution can be to put your whole layout inside a ScrollView.

answered Aug 26 '15 at 01:30

Kabir

1,419
17
33

How can I do that? I'l post my layout and you can tell me how to do it. – Gursimran Bedi Aug 26 '15 at 01:55

score 0 · Answer 4 · edited Dec 20 '15 at 04:39

Try with this:

activity_main.xml

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="activity.MainActivity">

<include
    android:id="@+id/toolbar"
    layout="@layout/tool_bar" />

<slidingModel.SlidingTabLayout
    android:layout_below="@+id/toolbar"
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    android:background="@color/primary_color"
    />

<android.support.v4.view.ViewPager
    android:layout_below="@id/tabs"
    android:id="@+id/pager"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"

    />

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_margin="@dimen/fab_margin" />

</ScrollView>

All I have done is put the fab inside a ScrollView.

score 0 · Answer 5 · answered Sep 24 '20 at 06:27

Whether FAB moves above the keyboard or not, depends on manifest file and the tag "android:windowSoftInputMode" in particular.

To make it move above the soft keyboard, this is the code I use (manifest file):

<activity 
    android:name=".activities.YourActivity" 
    android:screenOrientation="portrait" 
    android:windowSoftInputMode="adjustPan" 
    android:theme="@style/AppTheme.NoActionBar" />

To make it stay behind the soft keyboard, use this:

<activity 
    android:name=".activities.YourActivity" 
    android:screenOrientation="portrait" 
    android:theme="@style/AppTheme.NoActionBar" />

score -1 · Answer 6 · answered Aug 26 '15 at 02:25

Do this

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

<View
    android:layout_width="match_parent"
    android:layout_height="156dp"
    android:background="@color/primary_color"
    />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/from"
    android:inputType="number"
    android:imeOptions="actionNext"
    android:layout_centerHorizontal="true"
    android:hint="From"
    android:paddingStart="5dp"
    android:textColor="#FFF"
    android:fontFamily="sans-serif-light"
    android:textSize="44sp"
    android:backgroundTint="@color/fab_ripple"
    android:layout_marginStart="10dp"
        />

<EditText
    android:textSize="44sp"
    android:layout_marginStart="10dp"
    android:paddingStart="5dp"
    android:fontFamily="sans-serif-light"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/from"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="To"
    android:inputType="number"
    android:imeOptions="actionSend"
  />
  </ScrollView>
  </RelativeLayout>

Since your items are now inside scrollview they will scroll.

The FAB is still behind the keyboard when I put that code. – Gursimran Bedi Aug 26 '15 at 02:32 — Gursimran Bedi, Aug 26 '15 at 02:32
Posted my activity_main.xml – Gursimran Bedi Aug 26 '15 at 02:43 — Gursimran Bedi, Aug 26 '15 at 02:43

score -1 · Answer 7 · answered Aug 26 '15 at 02:52

-1

TRU TO DO THIS. iT WORKED FOR ME.

add stateVisible|adjustPan TO YOUR ACTIVTY IN YOUR MANIFEST FILE.

<activity 
android:name="com.comapny.applicationname.activityname"
android:screenOrientation="portrait"
android:windowSoftInputMode="stateVisible|adjustPan"/>

answered Aug 26 '15 at 02:52

RajSharma

1,941
3
21
34

Did not help me at all :( – Gursimran Bedi Aug 26 '15 at 04:51
Do you wnat to display it on top of the keyboard or shift it little up so that it can be vissbile?. If you diplay it on top of the key board keyboard can't be pressed. – RajSharma Aug 26 '15 at 05:10
I want to display it on top of the keyboard so it will be visible. – Gursimran Bedi Aug 26 '15 at 05:14
do it if you want fab button behind keyboard, thank you – vuhung3990 Oct 25 '15 at 16:23

Move Floating Action Button above keyboard

7 Answers7

Linked