UI flicker while pressing back in android

Question

I am creating a UI for my company which has a edit-text at top and a frame layout at bottom. this frame-layout contains a mic image and animation on pressing of which it goes through 3 main state like listening.thinking and idle state. So in short, user can provide query either by typing in edit text or by providing command by voice. My problem occurs when user click on edit-text to provide text command. When user do so the android keyboard comes up and user insert text but after entering text if user press back button the ,the whole UI comes up before going down. This all happens very quickly and to a user it gives bad impression. It feels like UI is getting stuck but this is how by default android is handling it. Is there a way by which I can stop this flickering or make this move smoothly.?

Currently I am making this frame layout invisible when user start editing and visible when user has finished editing but this also does not help.

I know by not providing complete code it is not a good way of asking a doubt.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLayout"
    style="@style/main_style_mainLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <RelativeLayout
        android:id="@+id/dialog"
        style="@style/main_style_dialog"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:layout_width="360dp"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <ScrollView
                >

                <!--will dynamically add here widgets and edit text button as required>

                <LinearLayout
                    android:id="@+id/linearLayout"
                    style="@style/main_style_scrollViewlinearLayout"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </LinearLayout>

            </ScrollView>
        </LinearLayout>
    </RelativeLayout>

    <FrameLayout
        android:id="@+id/mainControlLL"
        style="@style/main_style_mainControlLL"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" > // Act as parent container for mic image and text view

        <FrameLayout> //contains text view which gets displayed on top of mic image

            <TextView/>
        </FrameLayout>

        <FrameLayout
            android:id="@+id/mic_btn_layout"
            style="@style/main_style_mic_btn_layout"
            android:layout_width="wrap_content"
            android:layout_height="118dp" >// contains mic images

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clipChildren="false" >// contains mic image for listening state

                <ImageView/>            
                <ImageButton />
                <ImageButton/>
                <ImageView />

            </FrameLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|center_vertical|center" >//contain mic images for thinking state
                <ImageButton />
                <ImageButton />

                <ImageView />
            </RelativeLayout>

          <ImageButton />//contains mic image for idle state
        </FrameLayout>
    </FrameLayout>

</RelativeLayout>

And in my manifest I have

android:windowSoftInputMode="stateAlwaysHidden|adjustResize" and
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|locale"

Please let me know how i can correct my UI behavior.

Answer 1

Below is API which I have modified to stop flickering.

@Override
public boolean onKeyPreIme(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_UP) {
        this.clearFocus();
        //Fix- Ui Flicker
       //  this.setFocusable(false);
       // this.setFocusableInTouchMode(false);          
        return false;
    }
    return super.dispatchKeyEvent(event);
}

In above API I commented the piece of code shown above. But Can some one explain why it was causing the jumping(going up) of UI. It was only disabling the focus of view.

Answer 2

You should put your activity state on a stack, since you are using fragments(more on this here) and override the onBackPressed() function and restore your fragment state there.

@Override
public void onBackPressed()
{
     // restore fragment/activity state here
     super.onBackPressed();  
}