Full Screen With toolbar and edittext at the bottom android

Question

I am working with Chat application Android. I am creating Chat screen, exactly like Whats app.

EditText at the bottom and Toolbar at the top.

I am using following code.

<FrameLayout 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:background="@color/White"
android:id="@+id/llFrame">

<include layout="@layout/actionbar_chat"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="@color/White"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    android:layout_marginTop="?android:attr/actionBarSize"
    >

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerViewChat"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="0.8"
    android:divider="@null"
    android:dividerHeight="0dp"
    android:paddingBottom="10dp"
    android:text="@string/hello_world"
    android:layout_marginTop="@dimen/_5sdp"/>

<LinearLayout
    android:id="@+id/form"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_35sdp"
    android:background="#91f1f1f1"
    android:orientation="horizontal"
    android:paddingBottom="2dp"
    android:gravity="center">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.8"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:gravity="center_vertical"
        android:paddingRight="@dimen/_2sdp"
        android:paddingLeft="@dimen/_10sdp"
        android:paddingTop="@dimen/_2sdp"
        android:paddingBottom="@dimen/_2sdp"
        >

        <com.cloudzon.gratzeez1.property.CustomEditText
            android:id="@+id/etMessage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:ems="10"
            android:background="@drawable/rectangle_"
            android:padding="@dimen/_2sdp"
            />

    </LinearLayout>

    <com.cloudzon.gratzeez1.property.CustomTextView
        android:id="@+id/tvSendMessage"
        android:layout_width="0dp"
        android:layout_weight="0.2"
        android:layout_height="match_parent"
        android:layout_margin="@dimen/_2sdp"
        android:text="Send"
        android:textSize="@dimen/_15sdp"
        android:layout_gravity="center"
        android:gravity="center"
        />
</LinearLayout>

And to acquire full screen activity, I am using following code in activity.

requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

Now When I click on EditText at the bottom, soft keyboard opens up but pushing the above layout on top and I am not able to see Toolbar.

Instead, Toolbar should be fixed at his position once user opens edittext.

Thank you

Answer 1

try changing

        android:windowSoftInputMode="adjustResize" 

in manifest when you declare you activity where this fragment is added.

Use this layout check this layout it works as expected Just modify it as per you needs

 <?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"
android:orientation="vertical">

<LinearLayout
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentTop="true"
    android:background="@color/calendar_background_color"
    android:orientation="vertical"></LinearLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/dialog_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_above="@+id/edit_query"
    android:layout_below="@+id/toolbar"></android.support.v7.widget.RecyclerView>

<EditText
    android:id="@+id/edit_query"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:background="@color/color_orange_event_text" />

Answer 2

please check this library on GitHub: https://github.com/DeromirNeves/whatsapp-android

Answer 3

Try this:

<RelativeLayout 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:background="@color/White"
    android:id="@+id/llFrame">

    <include
        android:id="@+id/tool"
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@color/White"/>


        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerViewChat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:divider="@null"
            android:layout_below="@+id/tool"
            android:scrollbars="vertical"
            android:dividerHeight="0dp"
            android:paddingBottom="10dp"
            android:layout_marginTop="5dp"/>

        <LinearLayout
            android:id="@+id/form"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_alignParentBottom="true"
            android:background="#91f1f1f1"
            android:orientation="horizontal"
            android:paddingBottom="2dp"
            android:gravity="center">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="0.8"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:gravity="center_vertical"
                >

                <EditText
                    android:id="@+id/etMessage"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:ems="10"
                    />

            </LinearLayout>

            <TextView
                android:id="@+id/tvSendMessage"
                android:layout_width="0dp"
                android:layout_weight="0.2"
                android:layout_height="match_parent"
                android:text="Send"
                android:layout_gravity="center"
                android:gravity="center"
                />
        </LinearLayout>

    </RelativeLayout>

Answer 4

Please see below example of chat layout.

<?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:background="@color/white"
    android:clickable="true"
    android:orientation="vertical">

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

        <LinearLayout
            android:id="@+id/linearSmsLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:paddingBottom="20dp"
            android:orientation="vertical">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="120dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/ic_msg_icon_sender"
                android:text="This is long text for testing only. This is long text for testing only. This is long text for testing only. This is long text for testing only. This is long text for testing only." />

            <TextView
                android:id="@+id/txtReceiveMessage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="120dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/ic_msg_icon_receiver"/>
        </LinearLayout>
    </ScrollView>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/grey_400" />

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

        <EditText
            android:id="@+id/edtTxtSmsText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:background="@color/grey_400"
            android:hint="Write a message..."
            android:padding="10dp" />

        <ImageView
            android:id="@+id/btnSendSms"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:src="@drawable/ic_send_red" />

    </LinearLayout>

</LinearLayout>

And also use android:windowSoftInputMode="adjustResize" in android Manifeast file.

Without Keyboard.

With Keyboard.