Patrick Oramah
Patrick Oramah

Reputation: 41

Android Soft Keyboard Disrupt's My Layout

I know a ton of questions on this topic have been asked but none seem to work for me. I have a linear layout with an an edit text and icons below but when the keyboard pops up it covers the icons and half the edit text.

My Manifest File:

<activity
    android:name="com.social.pages.Post"
    android:windowSoftInputMode="stateVisible|adjustResize"
    android:screenOrientation="portrait" >
</activity>

My Layout File:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/feed_bg" >

    <LinearLayout
        android:id="@+id/stories_post_entire"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/story_post"
        android:layout_centerHorizontal="true"
        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:id="@+id/stories_post_text"
            android:layout_width="fill_parent"
            android:layout_height="300dp"
            android:layout_marginTop="15dp"
            android:orientation="horizontal"
            android:paddingBottom="@dimen/feed_item_padding_top_bottom"
            android:paddingLeft="@dimen/feed_item_padding_left_right"
            android:paddingRight="@dimen/feed_item_padding_left_right" >
        -->

        <EditText
            android:id="@+id/stories_post_story"
            android:layout_width="fill_parent"
            android:layout_height="300dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/bg_parent_rounded_corner"
            android:ems="10"
            android:gravity="top"
            android:hint="Tell Your Story..."
            android:padding="10dp"
            android:paddingLeft="10dp"
            android:scrollbars="vertical"
            android:typeface="serif" />

        <LinearLayout
            android:id="@+id/stories_post_bar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="10dp"
            android:paddingLeft="@dimen/feed_item_padding_left_right"
            android:paddingRight="@dimen/feed_item_padding_left_right" >

            <ImageView
                android:id="@+id/stories_post_tag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitCenter"
                android:src="@drawable/tag" />

            <ImageView
                android:id="@+id/stories_post_take_pic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30dp"
                android:scaleType="fitCenter"
                android:src="@drawable/take_pic" />
        </LinearLayout>
    </LinearLayout>

    <!-- </LinearLayout> -->

    <Button
        android:id="@+id/story_post"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Post" />

</RelativeLayout>

No Java code has been written yet.

Upvotes: 2

Views: 74

Answers (2)

Phiat
Phiat

Reputation: 506

You're setting the EditText element to 300dp height which prevents anything from moving up. I was able to fix this by wrapping the EditText and following LinearLayout (that houses your images) in a RelativeLayout. By doing this, you can set the image-housing LinearLayout to alignParentBottom="true". I believe this is your desired effect.

    <?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/stories_post_entire"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/story_post"
        android:layout_centerHorizontal="true"
        android:orientation="vertical" >

        <!-- ADDITION -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">



        <EditText
            android:id="@+id/stories_post_story"
            android:layout_width="fill_parent"
            android:layout_height="300dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="10dp"
            android:ems="10"
            android:gravity="top"
            android:hint="Tell Your Story..."
            android:padding="10dp"
            android:paddingLeft="10dp"
            android:scrollbars="vertical"
            android:typeface="serif" />

        <LinearLayout
            android:id="@+id/stories_post_bar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="10dp" >
            <!-- ADDITION    ^^^ alignParentBottom-->

            <ImageView
                android:id="@+id/stories_post_tag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitCenter"
                android:src="@drawable/osumu_blur"/>

            <ImageView
                android:id="@+id/stories_post_take_pic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30dp"
                android:scaleType="fitCenter"
                android:src="@drawable/osumu_blur"/>
        </LinearLayout>

            <!-- ADDITION -->
        </RelativeLayout>
    </LinearLayout>


    <!-- </LinearLayout> -->

    <Button
        android:id="@+id/story_post"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Post" />

</RelativeLayout>

NOTE: I replaced your drawable src with "dummy_image"

Upvotes: 1

Gabe Sechan
Gabe Sechan

Reputation: 93542

THe only thing you can do about the soft keyboard is to set the android:windowSoftInputMode in the manifest (or to change it on the fly programatically). The allowed modes are basically nothing (just let the keyboard pop up and cover whatever), pan (scrolls the app such that the cursor is on the screen), and resize (resizes your app to lay out completely above the keyboard).

You obviously want resize. However to make that work, your layout needs to be resizable- there needs to be some element that can be shrunk and still fit your app in the smaller size, or there needs to be empty space that can be shrunk. If you have to much on screen, that won't work. And in that case Android will still ensure that the cursor is on screen, but will not do anything else.

Looking at your layout- I don't see anything that can shrink. You may be able to refactor it to make the edit text use fill_parent so it can be shrunk, but that would require making it (or its direct parent) layout_above and layout_below two other elements so it is sized to be the remaining space between them. That's about all I can see for you to do, other than remove elements.

Upvotes: 1

Related Questions