0

I am trying to copy whatsapps UI for sending pictures, it opens a screen with a keyboard and a textfield at the bottom.

I have a relative layout with a textinputfield at the bottom. The relative layout has a background image. If the user clicks on the textinputfield the textinputfield must stay visible above the keyboard however the Relative layout background image needs to not resize.

Currently my layout looks like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/cover"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="@drawable/newbg"
android:orientation="vertical"
>



<LinearLayout
    android:layout_alignParentBottom="true"
    android:id="@+id/chatFooter"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ECEFF1"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/sendLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:weightSum="2"
        android:paddingTop="@dimen/scale_5dp"
        android:paddingBottom="@dimen/scale_5dp">



        <LinearLayout
            android:layout_width='0dp'
            android:layout_height="wrap_content"
            android:layout_weight="1.8">


            <com.heyjude.heyjudeapp.customview.EditRobotoRegular
                android:id="@+id/editChatMsg"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:background="@drawable/linear_back"
                android:hint="Add a message..."
                android:padding="@dimen/scale_5dp"
                android:inputType="textMultiLine|textCapSentences|text"
                android:textColor="#5f6060"
                android:textColorHint="#5f6060"
                android:textSize="@dimen/text_14"
                android:imeOptions="actionSend"
                />
        </LinearLayout>


        <ImageView
            android:id="@+id/ivSend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_chat_icon"
            android:layout_weight="0.3" />

    </LinearLayout>
</LinearLayout>

And i have android:windowSoftInputMode="adjustResize|stateHidden"

Which is working great for the inputfield moving up above the keyboard, but the background image is distorting horribly.

Thanks for any help!

Here is how it looks on whatsapp which is what i want to recreate

Here is the keyboard down

enter image description here

and here is keyboard up

enter image description here

Adam Katz
  • 6,999
  • 11
  • 42
  • 74
  • Did you tried adjustPan? – Hari_krish4 Oct 18 '16 at 12:37
  • take look at this answer http://stackoverflow.com/questions/21201569/android-resize-only-parts-of-view-with-soft-keyboard-on-screen – Andrew F Oct 18 '16 at 12:39
  • your problem is that you're using linear layout and you can't move editText without scaling remain elements. Try to use only relative layout. – Andrew F Oct 18 '16 at 12:40
  • Hari_kirsh4, that never worked although it did look better than what I had been trying, unfortuanately although it does not resize it does push the top of tthe picture through the top of the screen, where i want to cover the bottom part of the picture – Adam Katz Oct 18 '16 at 12:48
  • Andrew F, mine is a bit different since i want the textview to be the entire background and not just an image – Adam Katz Oct 18 '16 at 12:48
  • @AdamKatz Could you show screen shot exactly what you want as backgeound when keyboard goes up with `Edit Text` and `Button`. – Jay Rathod Oct 18 '16 at 13:15
  • Jaydroider, I want it to look exactly like whatsapp looks like when you take a picture to send as messge. Picture in background and a textfield at bottom, if you click on the textfield the textfield stays on screen and the bottom half of the background image is overlaid with the keyboard – Adam Katz Oct 18 '16 at 13:20
  • @AdamKatz Actually if you will post an image for same in OP then it will be better to understand easily. – Jay Rathod Oct 18 '16 at 13:28

0 Answers0