android - Display a view on top of keyboard

Question

I am making a application in which i want a linear layout to be displayed on top of the keyboard.When the user closes the keyboard that linear layout should also be gone. I want it something like this

Layout what i want

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <RelativeLayout
            android:id="@+id/root"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

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

                <ImageView
                    android:id="@+id/iv_Img1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:scaleType="fitXY" />

                <ImageView
                    android:id="@+id/iv_Img2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:scaleType="fitXY" />
            </LinearLayout>
        </RelativeLayout>

        <ImageView
            android:id="@+id/iv_Edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:padding="5dp"
            android:scaleType="center"
            android:src="@drawable/cam" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/llEditOptions"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:layout_weight="0"
        android:visibility="gone" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" >

            <ImageView
                android:id="@+id/iv_background"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginRight="50dp"
                android:layout_toLeftOf="@+id/iv_font"
                android:scaleType="center"
                android:src="@drawable/save_1" />

            <ImageView
                android:id="@+id/iv_font"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:scaleType="center"
                android:src="@drawable/cam" />

            <ImageView
                android:id="@+id/iv_size"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="50dp"
                android:layout_toRightOf="@+id/iv_font"
                android:scaleType="center"
                android:src="@drawable/share_1" />
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/llCamOptions"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:layout_weight="0" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/iv_Save"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginRight="50dp"
                android:layout_toLeftOf="@+id/iv_Camera"
                android:scaleType="center"
                android:src="@drawable/save_1" />

            <ImageView
                android:id="@+id/iv_Camera"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:scaleType="center"
                android:src="@drawable/cam" />

            <ImageView
                android:id="@+id/iv_Share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="50dp"
                android:layout_toRightOf="@+id/iv_Camera"
                android:scaleType="center"
                android:src="@drawable/share_1" />
        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

This is from ios phone but can we implement this functionality in android???

Answer 1

When the keyboard is shown the whole layout is squashed because there is less space available. All you have to do is align the LinearLayout to the bottom of the screen and it will be displayed directly above the keyboard. You could for example use a layout like this:

<?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:paddingBottom="60dp"
        android:clipToPadding="false">

        <RelativeLayout
            android:id="@+id/rlContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            ... // The content of your layout goes here            

        </RelativeLayout>

    </ScrollView>

    <LinearLayout
        android:id="@+id/llFooter"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true">

        // This LinearLayout will be aligned to the 
        // bottom of the screen and displayed above your keyboard

    </LinearLayout>   

</RelativeLayout> 

The ScrollView is just there to make your layout scrollable when the keyboard opens and there isn't enough room anymore to display all of it at once. The LinearLayout at the bottom will be positioned independently at the bottom of the screen and overlap anything else.

The ScrollView also has a padding which is equal to the size of the footer View and has clipToPadding set to false. This means the ScrollView can use paddings to display content. You need this or otherwise the bottom part of your layout would be hidden behind the LinearLayout at the bottom. You can make the LinearLayout a little transparent for a nice effect when scrolling.