How to implement this material design feature? (Button floating above keyboard)

Question

Please check this screenshot

How to add buttons like this in android. Is there a library for it or what is it called?

Please note that when keyboard is hidden, this button takes up the space for navigation buttons.

Another question: How to change the size of the blue app bar when keyboard appears or hides?

**UPDATE : ** I can implement a similar layout using borderless buttons in frame layout and setting the gravity to bottom. Then I used android:windowSoftInputMode="adjustResize" in the manifest file to make it work with keyboard hide/unhide. Still these buttons are not taking the space of navigation buttons. Also still need guidance for change app bar size on keyboard appear.

score 2 · Answer 1 · answered Oct 01 '15 at 08:36

2

You can use

1- AppIntro

2- AppTour

answered Oct 01 '15 at 08:36

Hoshouns

2,420
23
24

1

I'll try it and check if buttons stay on the top of the keyboard. Thanks for pointing to these libs – penduDev Oct 01 '15 at 08:41
I think that AppIntro is the best. you can put a custum fragment in the slider. – Hoshouns Oct 01 '15 at 08:46

score 0 · Answer 2 · answered Oct 01 '15 at 08:37

0

Well, I would say that the button is not related in any way with they keyboard. I bet it's just a button inside a FrameLayout with the android:layout_gravity="bottom" property set.

answered Oct 01 '15 at 08:37

moictab

959
6
27

1

when I set the layout_gravity of FrameLayout to bottom, then the button appears at bottom but it doesn't stay on the top of the keyboard – penduDev Oct 01 '15 at 08:56

score 0 · Answer 3 · edited May 23 '17 at 11:53

It is a borderless button placed in a container(probably LinearLayout) container itself is called buttonBar

Borderless button

One design that can be useful is a "borderless" button. Borderless buttons resemble basic buttons except that they have no borders or background but still change appearance during different states, such as when clicked.

To create a borderless button, apply the borderlessButtonStyle style to the button. For example:
<Button
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"
    style="?android:attr/borderlessButtonStyle" />

sample for button bar

<LinearLayout android:id="@+id/footer" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:orientation="horizontal"
    android:layout_alignParentBottom="true" style="@android:style/ButtonBar">

    <Button android:id="@+id/saveButton" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:text="@string/menu_done" />

    <Button android:id="@+id/cancelButton" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:text="@string/menu_cancel" />
</LinearLayout>

Effect of everything else collapsing and this button bar being at top op keyboard can be achieved by keeping your entire view except buttonBar in a scroll view.

score 0 · Answer 4 · answered Jun 07 '16 at 08:02

Use this as a reference. Insert your layout inside ScrollView.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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"
            >

           <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lines="1"
                />

           </LinearLayout>

    </ScrollView>

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

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button"
            />

    </LinearLayout>
</LinearLayout>

How to implement this material design feature? (Button floating above keyboard)

4 Answers4