Develop Reference

Android app freezes when app soft keyboard is displayed or hide

I have an activity which has a fragment. Inside that fragment, there are 5 fragmnets inside ViewPager. Each fragment has either more than 30 input fields including EditTexts, custom Dropdowns and Date Pickers or nested ViewPagers with fragments having same amount of input fields.
The problem is; when user taps on any EditText to input data, soft keyboard gets visible and when it is completely visible, the app freezes for around 2 seconds. When user presses back button to hide soft keyboard, keyboard gets off from screen and screen area which is underneath soft keyboard becomes white and app freezes again for same amount of time. This happens every time. Here is activity configuration from manifest:
<activity
android:name=".activities.HomeActivity"
android:launchMode="singleTask"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustPan|adjustResize" />
I have tried different combinations for android:windowSoftInputMode nothing worked. Although this does not happen in other activities with same manifest configuration and with less number of fields. With so many input fields, its very annoying for user that app freezes after inputting data in textfields. Can anyone suggest me workaround for this?

I have found the solution. In most of the layouts, the views were aligned vertical to each other inside RelativeLayout using android:layout_below property like:
<?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">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--nested form view containers-->
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/layout1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--nested form view containers-->
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/layout2"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--nested form view containers-->
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I replaced root RelativeLayouts with vertical oriented LinearLayouts and it did the magic trick like this:
<?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">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--nested form view containers-->
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--nested form view containers-->
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--nested form view containers-->
</RelativeLayout>
</LinearLayout>
</LinearLayout>
I am still looking for some technical details on how it impacts keyboard visibility states. Will update here if I find something.

I will need to hands-on debug to find the issue, but what I think I will do is:
Check whether this is actually because of those many fragments and input controls. Can you try with only 1 fragment instead of 5 fragments and see if the speed improves? If yes, then try to display a fragment at once (ex: if you change from tab 1 to tab 2, explicitly remove fragment 1 from the pager view hierarchy and explicitly add fragment 2 to the pager view hierarchy). If after you simplify your controls, you still see the freeze, then that might not be because of too many controls.
Check whether there is offending control(s).Maybe you have a control or two that unexpectedly do a routine that heavily taxed your resources. If from point #1 you can find a fragment that significantly slowing down your app when it gets displayed, you might want to check further into that fragment and controls inside.

android questions about poping the soft keyboard

i want the whole layout move up to show while popping the soft keyboard, but the button on the bottom of the view cannot be seen.
the AndroidManifest.xml:
<activity
android:name="cn.duckr.android.plan.PlanConfirmPaymentActivity"
android:windowSoftInputMode="adjustPan"
style="#style/base_activity_style"
android:theme="#style/confirm_payment_anim_theme" />

To ensure that the system resizes your layout to the available space—which ensures that all of your layout content is accessible (even though it probably requires scrolling)—use "adjustResize".
link
android:windowSoftInputMode="adjustResize"

You can put whole layout except the particular button in a ScrollView to achieve this.
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"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollView5"
android:fillViewport="true">
//put your contents here..
</ScrollView>
<ImageButton
android:id="#+id/ibSample"
android:layout_width="50dp"
android:layout_height="50dp"
android:adjustViewBounds="true"/>
</RelativeLayout>

Blank space at bottom of ListView not filled

EDIT
I originally thought this issue was related to the search widget and keyboard.
Original Question
I added the search widget to my app recently. Now when I land on MainActivity, the view is cut right where the keyboard would pop up. The content scrolls within that smaller box. When I hit the search widget in the action bar, the keyboard pops up and fills the blank space. When I collapse the keyboard, my view is complete and there is no blank space. Check this photo to see what I mean.
Here are my layouts
activity_main.xml
<?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" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null" />
</LinearLayout>
feed_item.xml (inflates listview)
<?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/feed_bg"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="#dimen/feed_item_margin"
android:layout_marginRight="#dimen/feed_item_margin"
android:layout_marginTop="#dimen/feed_item_margin"
android:background="#drawable/bg_parent_rounded_corner"
android:orientation="vertical"
android:paddingBottom="#dimen/feed_item_padding_top_bottom"
android:paddingTop="#dimen/feed_item_padding_top_bottom" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="#dimen/feed_item_padding_left_right"
android:paddingRight="#dimen/feed_item_padding_left_right" >
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/vendorPic"
android:layout_width="#dimen/feed_item_vendor_pic_width"
android:layout_height="#dimen/feed_item_vendor_pic_height"
android:scaleType="fitCenter" >
</com.android.volley.toolbox.NetworkImageView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/feed_item_profile_info_padd" >
<TextView
android:id="#+id/timestamp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/timestamp"
android:textSize="#dimen/feed_item_timestamp" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/txtHeadlineMsg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="#dimen/feed_item_status_pad_left_right"
android:paddingRight="#dimen/feed_item_status_pad_left_right"
android:paddingTop="#dimen/feed_item_status_pad_top" />
<com.example.myapp.FeedImageView
android:id="#+id/feedImage1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:scaleType="fitXY"
android:visibility="visible" />
</LinearLayout>
</LinearLayout>
Here's my searchable config xml.
<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
android:label="#string/app_name"
android:hint="#string/search_hint" >
</searchable>
Let me know if you need more to go on, thanks!!
P.S. min sdk is 12.
UPDATE
The problem ended up being that the content didn't really fill the whole screen until the images were loaded from the Volley request. The text content was loaded and set the height of the listview, and subsequently loaded content did not dynamically change the listiview height. In production this won't be a problem probably, but is there a way to make sure that the ListView height can change dynamically?

It sounds like the keyboard is trying to expand when you open the activity. It is strange that it stays blank and doesn't show the actual keyboard, but maybe preventing the keyboard from opening in the beginning will help. Try setting
android:windowSoftInputMode="stateHidden"
in your <activity> tag for this Activity in AndroidManfest.xml.

try this in the manifest.
android:windowSoftInputMode="adjustResize"
and to your list view("id"),try adding
android:alignParentBottom:"true"

This ended up having nothing to do with the search widget or keyboard. the sizing was coincidental.
The problem lies in the fact that each item in the ListView had an image that was being loaded from the API via volley. the height of the ListView was being set by the content that was loaded first (i.e. text). Once the image loaded, it expanded each item in the list, but did not change the height of the parent ListView. This left the ugly gap at the bottom of the view.
On advice from #mattgmg1990, I changed the height of the ListView to match_parent in order to allow for late loading images.

Android layout design: image above form above button. When the keyboard appears my layout is screwed

In my application I want to have a layout like this:
I did it with a Relative Layout holding an ImageView, TableLayout and a Button. The problem is that when I open the keyboard to modify a EditText the keyboard is on top of the EditText, so the user can't see what he is writing. I want the layout to be like this when the keyboard is shown:
The user should be able to scroll up the view to see the whole image while the keyboard is shown, even if he doesn't see the EditText then, because he wants to copy some data of the image into the EditTexts. I tried to do it like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/buttonEditStop"
android:padding="10dip" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/stopImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:clickable="true"
android:contentDescription="#string/entry_img"
android:onClick="ImageClick" />
<TableLayout
android:id="#+id/formLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/stopImg"
android:layout_marginRight="10dp" >
...
</TableLayout>
</RelativeLayout>
</ScrollView>
<ImageButton
android:id="#+id/buttonEditStop"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#string/edit_stop"
android:onClick="EditButtonClicked"
android:src="#drawable/ic_menu_edit" />
Using this code my whole layout is screwed. I see the form on top of the image, followed by a ImageButton with the image that should be seen in the imageView.
Anyone knows how I can get a layout like the one I want?
Thanks!

To avoid the EditText to be overlapped I had to use
android:windowSoftInputMode="adjustPan"
in my manifest.

WindowSoftInputMode and ScrollView

My Android app's main activity looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:orientation="vertical"
android:paddingLeft="60dp"
android:paddingTop="53dp" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/billAmountText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/billAmount_string"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/billAmount"
android:layout_width="173dp"
android:layout_height="wrap_content"
android:layout_below="#id/billAmountText"
android:layout_marginTop="3dp"
android:inputType="numberDecimal" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
In order to make sure the background image (defined in the first RelativeLayout) does not get squeezed when the keyboard pops up, I have set android:windowSoftInputMode="stateVisible|adjustPan in the manifest file for my activity. All good with the background and layout now, nothing gets resized.
But the problem is that my ScrollView doesn't work now because I suppose the system thinks the window doesn't need resizing due to my above modification to the manifest - so the ScrollView is not activated. The opposite happens when I take android:windowSoftInputMode="stateVisible|adjustPan out, the scrolling works, but the background gets squeezed when the keyboard pops out.
Is there any way to code it so that my background doesn't get squeezed, and my ScrollView still works? Thanks!

Try to use in your activity the property windowSoftInputMode with the following values:
android:windowSoftInputMode="stateAlwaysHidden|adjustResize"
I don't know if it's necessary but you can try to add to your layout's ScrollView tag the fillViewPort to true.
So it should look like something I show you below:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<!-- Other Views -->
</ScrollView>
Let me know about your progress.

In your scrollview put a relative layout, child 0 is an imageview, and child 1 is your content. Use the imageview for your background image (src) rather than the background of the scrollview. The imageview will respect scaleTypes, whereas the background of a layout will not.