Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Move Floating Action Button above keyboard

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>
like image 716
Gursimran Bedi Avatar asked Aug 26 '15 01:08

Gursimran Bedi


People also ask

How do I change the position on my floating action button?

By default, the shape of the floating action button (FAB) in the flutter is circular and the location is bottom right floated. You can change the location and shape of the floating action button using properties in Scaffold() widget class and FloatingActionButton() widget class.

How do I hide the floating action button?

To show and hide a FloatingActionButton with the default animation, just call the methods show() and hide() . It's good practice to keep a FloatingActionButton in the Activity layout instead of putting it in a Fragment, this allows the default animations to work when showing and hiding.


2 Answers

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.)
like image 145
MrPlow Avatar answered Oct 30 '22 11:10

MrPlow


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>
like image 30
jack bochsler Avatar answered Oct 30 '22 11:10

jack bochsler