android - How to adjust layout when soft keyboard appears

ID : 20262

viewed : 11

Tags : androidandroid-layoutandroid-softkeyboardandroid

Top 5 Answer for android - How to adjust layout when soft keyboard appears

vote vote

91

Just add

android:windowSoftInputMode="adjustResize" 

in your AndroidManifest.xml where you declare this particular activity and this will adjust the layout resize option.

enter image description here

some source code below for layout design

<?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" >      <TextView         android:id="@+id/textView1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_centerHorizontal="true"         android:layout_marginTop="20dp"         android:text="FaceBook"         android:textAppearance="?android:attr/textAppearanceLarge" />      <EditText         android:id="@+id/editText1"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@+id/textView1"         android:layout_marginTop="30dp"         android:ems="10"         android:hint="username" >          <requestFocus />     </EditText>      <EditText         android:id="@+id/editText2"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@+id/editText1"         android:layout_marginTop="20dp"         android:ems="10"         android:hint="password" />      <Button         android:id="@+id/button1"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@+id/editText2"         android:layout_centerHorizontal="true"         android:layout_marginLeft="18dp"         android:layout_marginTop="20dp"         android:text="Log In" />      <TextView         android:id="@+id/textView2"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:layout_marginTop="17dp"         android:gravity="center"         android:text="Sign up for facebook"         android:textAppearance="?android:attr/textAppearanceLarge" />  </RelativeLayout> 
vote vote

83

This question has beeen asked a few years ago and "Secret Andro Geni" has a good base explanation and "tir38" also made a good attempt on the complete solution, but alas there is no complete solution posted here. I've spend a couple of hours figuring out things and here is my complete solution with detailed explanation at the bottom:

<?xml version="1.0" encoding="utf-8"?> <ScrollView     xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fillViewport="true">      <RelativeLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:padding="10dp">          <RelativeLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_above="@+id/mainLayout"             android:layout_alignParentTop="true"             android:id="@+id/headerLayout">              <LinearLayout                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_centerVertical="true"                 android:gravity="center_horizontal">                  <TextView                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:id="@+id/textView1"                     android:text="facebook"                     android:textStyle="bold"                     android:ellipsize="marquee"                     android:singleLine="true"                     android:textAppearance="?android:attr/textAppearanceLarge" />              </LinearLayout>          </RelativeLayout>          <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_centerVertical="true"             android:id="@+id/mainLayout"             android:orientation="vertical">              <EditText                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:id="@+id/editText1"                 android:ems="10"                 android:hint="Email or Phone"                 android:inputType="textVisiblePassword">                  <requestFocus />             </EditText>              <EditText                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginTop="10dp"                 android:id="@+id/editText2"                 android:ems="10"                 android:hint="Password"                 android:inputType="textPassword" />              <Button                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginTop="10dp"                 android:id="@+id/button1"                 android:text="Log In"                 android:onClick="login" />          </LinearLayout>          <RelativeLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_alignParentBottom="true"             android:layout_below="@+id/mainLayout"             android:id="@+id/footerLayout">              <LinearLayout                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_alignParentBottom="true">                  <RelativeLayout                     android:layout_width="match_parent"                     android:layout_height="wrap_content">                      <TextView                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:id="@+id/textView2"                         android:text="Sign Up for Facebook"                         android:layout_centerHorizontal="true"                         android:layout_alignBottom="@+id/helpButton"                         android:ellipsize="marquee"                         android:singleLine="true"                         android:textAppearance="?android:attr/textAppearanceSmall" />                      <Button                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_alignParentRight="true"                         android:id="@+id/helpButton"                         android:text="\?"                         android:onClick="help" />                  </RelativeLayout>              </LinearLayout>          </RelativeLayout>      </RelativeLayout>  </ScrollView> 

And in AndroidManifest.xml, don't forget to set:

android:windowSoftInputMode="adjustResize" 

on the <activity> tag that you want such layout.

Thoughts:

I've realized that RelativeLayout are the layouts that span thru all available space and are then resized when the keyboard pops up.

And LinearLayout are layouts that don't get resized in the resizing process.

That's why you need to have 1 RelativeLayout immediately after ScrollView to span thru all available screen space. And you need to have a LinearLayout inside a RelativeLayout else your insides would get crushed when the resizing occurs. Good example is "headerLayout". If there wouldn't be a LinearLayout inside that RelativeLayout "facebook" text would get crushed and wouldn't be shown.

In the "facebook" login pictures posted in the question I've also noticed that the whole login part (mainLayout) is centered vertical in relation to the whole screen, hence the attribute:

android:layout_centerVertical="true" 

on the LinearLayout layout. And because mainLayout is inside a LinearLayout this means that that part does't get resized (again see picture in question).

vote vote

73

Add this line in your Manifest where your Activity is called

android:windowSoftInputMode="adjustPan|adjustResize" 

or

you can add this line in your onCreate

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE|WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE); 
vote vote

67

It can work for all kind of layout.

  1. add this to your activity tag in AndroidManifest.xml

android:windowSoftInputMode="adjustResize"

for example:

<activity android:name=".ActivityLogin"     android:screenOrientation="portrait"     android:theme="@style/AppThemeTransparent"     android:windowSoftInputMode="adjustResize"/> 
  1. add this on your layout tag in activitypage.xml that will change its position.

android:fitsSystemWindows="true"

and

android:layout_alignParentBottom="true"

for example:

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

57

Android Developer has the right answer, but the provided source code is pretty verbose and doesn't actually implement the pattern described in the diagram.

Here is a better template:

<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:fillViewport="true">      <RelativeLayout android:layout_width="match_parent"                     android:layout_height="match_parent">          <LinearLayout android:layout_width="match_parent"                       android:layout_height="wrap_content"                       android:orientation="vertical">                  <!-- stuff to scroll -->          </LinearLayout>          <FrameLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_alignParentBottom="true">              <!-- footer -->          </FrameLayout>      </RelativeLayout>  </ScrollView> 

Its up to you to decide what views you use for the "scrolling" and "footer" parts. Also know that you probably have to set the ScrollViews fillViewPort .

Top 3 video Explaining android - How to adjust layout when soft keyboard appears

Related QUESTION?