android message box layout implementation - android

I was trying to implement a message box similar with that of Hangout. I want the edittext to expand if more content is typed into it, with the button to the right remain at the bottom right corner.
My current implement is as follows. The button to the right will move up if the edit text expands due to "alignParentTop". But if I set "alignParentBottom" as true, the entire screen will get occupied by this relative layout. Any idea how to fix it
<RelativeLayout android:id="#+id/structured_relative_interaction"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#E0E0E0">
<ImageButton android:id="#+id/structured_imagebutton_takePhoto"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:background="#drawable/save_structured_button"
android:src="#drawable/take_photo"/>
<EditText android:id="#+id/structured_edittext_answer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/structured_imagebutton_takePhoto"
android:layout_margin="5dp"
android:gravity="top"
android:maxLines="5"
android:padding="10dp"
android:hint="#string/structured_hint"
android:textColorHint="#B0B0B0"
android:inputType="textCapSentences|textMultiLine">
</EditText>
</RelativeLayout>

I was able to achieve it using the following layout (some ids for images and strings were changed to make it compileable):
<!--suppress AndroidLintUselessParent, AndroidLintContentDescription -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/structured_relative_interaction"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:background="#E0E0E0">
<EditText
android:id="#+id/structured_edittext_answer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/structured_imagebutton_takePhoto"
android:layout_margin="5dp"
android:gravity="bottom"
android:maxLines="5"
android:padding="10dp"
android:hint="hint"
android:textColorHint="#B0B0B0"
android:inputType="textCapSentences|textMultiLine" />
<ImageButton
android:id="#+id/structured_imagebutton_takePhoto"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/structured_edittext_answer"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
Will produce:
Seems it's common issue with ExitText and RelativeLayout (at least, I've seen some similar questions previously).

<EditText
android:id="#+id/write_post"
android:layout_width="match_parent"
android:layout_height="85dip"
android:ems="10"
android:gravity="top"
android:hint="#string/write_post"
android:inputType="textMultiLine"
android:textAppearance="?android:attr/textAppearanceSmall" >
</EditText>
set android:inputType to textMultiLine, android automatically expands edittext if the text exceeds from its boundry.

Related

Software keyboard move editTexts for android

I'm trying to get the editTexts, and sign in button to move up when the software keyboard is out however I want the background to not be compressed(I'm going to add an image soon). I have the TextView(Login), two EditTexts(email and password) and signin button in a ScrollView because I thought that might help however I have not be able to figure anything out.
http://i.imgur.com/vlYifc6.png
http://i.imgur.com/vlYifc6.png
This is the xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/scrollView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:id="#+id/textLayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Login"
android:id="#+id/loginView"
android:textSize="22dp"
android:layout_above="#+id/textLayout"
android:layout_centerHorizontal="true" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/emailTextfield"
android:inputType="textEmailAddress"
android:background="#android:drawable/edit_text"
android:textColor="#android:color/primary_text_light"
android:text="andresc1305#yahoo.com"
android:hint="Email" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="Password"
android:text="Andres123"
android:background="#android:drawable/edit_text"
android:textColor="#android:color/primary_text_light"
android:ems="10"
android:id="#+id/passwordTextfield" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SIGN IN"
android:background="#android:color/transparent"
android:textSize="24dp"
android:id="#+id/signinButton"
android:layout_below="#+id/textLayout"
android:layout_centerHorizontal="true"
android:onClick="onSigninClick"/>
</LinearLayout>
</ScrollView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forgot your password?"
android:background="#android:color/transparent"
android:textSize="14dp"
android:id="#+id/forgotButton"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="onPasswordRecoverClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:background="#android:color/transparent"
android:textSize="14dp"
android:id="#+id/registerButton"
android:layout_alignTop="#+id/forgotButton"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:onClick="onRegisterClick"/>
</RelativeLayout>
Look at this answer. In short, your problem can most likely be solved by setting the following in your AndroidManifest.xml inside the relevant activity or application element:
android:windowSoftInputMode="adjustResize"
#PPartisan
This is without:
android:windowSoftInputMode="adjustResize"
http://i.imgur.com/tbNioU2.png
This is with:
http://i.imgur.com/7ZePHjS.png
Beside the compression you can see my "Forgot your password" and "Register" buttons but I have those outside my ScrollView in the XML. Is there a way to scroll the LinearLayout (which contains the Login(TextView, email(EditText), password(EditText), and Signin(button) up when the software keyboard comes up?
The answer by zmilojko seems like what I want to do but he only says to add the ScrollView and not what to do after that has been added. Is there something I can place in the to make it move up when the software keyboard comes up?
see this thread, i think it can help you
layout of the screen moves up when keyboard is displayed
or just try to put this in your xml:
android:windowSoftInputMode="adjustPan"
or this
android:windowSoftInputMode="adjustNothing"
Seems like it works different in each case.

Make a ScrollView scroll to the bottom when the soft keyboard appears in Android?

So I am making a texting app just to mess around with the different things in android programming and have yet to run into a problem that I can't find the answer for online. I have tried several different answers from this site and other android programming forums and not one of them has worked every time. There are some examples that work every other time, whereas other examples will work only once. This is the only thing left in the app that I need to figure out for UI functionality.
I have an XML layout file as such:
<RelativeLayout
android:id="#+id/rlActionBar2"
android:layout_width="fill_parent"
android:layout_height="44dp" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/rlAddContact"
android:layout_width="fill_parent"
android:layout_height="44dp"
android:layout_below="#+id/rlActionBar2"
android:background="#drawable/new_message_background"
android:padding="0dp" >
<TextView
android:id="#+id/tvTo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:text="#string/text_to"
android:textColor="#7F7F7F"
android:textSize="17sp" />
<EditText
android:id="#+id/txtContact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/tvTo"
android:layout_marginLeft="6dp"
android:layout_toLeftOf="#+id/btnAddContact"
android:layout_toRightOf="#id/tvTo"
android:background="#00000000"
android:hint="#string/contact_name"
android:inputType="textPersonName"
android:maxLines="1"
android:textColor="#000000"
android:textSize="16sp" >
</EditText>
<Button
android:id="#+id/btnAddContact"
android:layout_width="28.5dp"
android:layout_height="28.5dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="#drawable/add_button"
android:padding="0dp" />
</RelativeLayout>
<ScrollView
android:id="#+id/svMessageView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/rlNewMessage"
android:layout_alignParentLeft="true"
android:layout_below="#id/rlAddContact"
android:background="#DBE2ED" >
<LinearLayout
android:id="#+id/llMessages"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DBE2ED"
android:isScrollContainer="true"
android:orientation="vertical"
android:paddingTop="11dp" >
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/rlNewMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/messagebar_background"
android:gravity="bottom"
android:padding="0dp" >
<Button
android:id="#+id/btnAttatchment"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_alignBottom="#+id/txtMessageBox"
android:layout_marginLeft="6dp"
android:background="#drawable/camera_icon" />
<EditText
android:id="#+id/txtMessageBox"
android:layout_width="253dp"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:layout_marginLeft="6dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="#id/btnAttatchment"
android:background="#drawable/messagebox_background"
android:hint="#string/app_name"
android:inputType="textMultiLine"
android:maxLines="6"
android:minHeight="26dp"
android:textSize="17sp" >
</EditText>
<Button
android:id="#+id/btnSend"
android:layout_width="58dp"
android:layout_height="26dp"
android:layout_alignBottom="#id/txtMessageBox"
android:layout_alignParentRight="true"
android:layout_marginRight="6dp"
android:background="#drawable/send_button"
android:text="#string/send_button"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>
</RelativeLayout>
My problem is getting the ScrollView svMessageView to automatically scroll to the bottom every time the soft keyboard comes onto the screen for the user to type. The RelativeLayout rlNewMessage moves up when the keyboard appears, and the bottom of svMessageView is set to stick to the top of rlNewMessage and that works, but I can't get the svMessageView to scroll to the bottom by itself.
Images:
After soft keyboard loads (not what I want): http://imgur.com/8Kptge3
After soft keyboard loads (what I want): http://imgur.com/BcDcFPY
If more information is needed for you to figure out the problem let me know and I will post it asap.
I did not test it, but you may try scrollView.fullScroll(View.FOCUS_DOWN); on EditText touch listener perhaps.
Add this in your Manifest.xml for Activity and feed me back
android:windowSoftInputMode="adjustNothing"

Android edittext auto grow with text and pushing things down

Yes, this is yet another edittext grow question on SO. And yes I've already gone through all those edittext grow questions. But this ones a bit specific.
UI:
A simple android layout with edittext and button below it. When text is less, the edittext view is still covering whole screen leaving space for button below.
Once user starts entering text, edittext grows vertically to accommodate text. At the same time, the button should also kept pushing downwards to let edittext grow.
User can vertically scroll through screen to view full text.
UI after entering significant text:
Here's the layout with edittext and button below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:clipToPadding="false"
android:fadingEdge="none"
android:fillViewport="true"
android:padding="13dp"
android:scrollbarStyle="outsideOverlay" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- some fixed width image -->
<ImageView
android:id="#+id/someimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:src="#drawable/page_white_text" />
<EditText
android:id="#+id/some"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/someimage"
android:background="#null"
android:gravity="top"
android:minLines="10"
android:minHeight="50dp"
android:textColor="#222222"
android:textSize="15dp"
android:typeface="serif" >
<requestFocus />
</EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
This works more or less. But when I enter to much text, instead of pushing button downwards. It goes behind it like:
Any help here is much appreciated. Thanks :)
Here's my recommendation: inside the ScrollView, put a RelativeLayout in which you can place every element in a certain order using android:layout_below. For the auto-growing of your EditText, use this solution.
Let's see an example:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center">
<RelativeLayout
android:id="#+id/general2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20sp" >
<TextView
android:id="#+id/textFirstOpinion"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/titleFirstOpinion"
android:textStyle="bold"
android:textSize="23sp"
android:textColor="#FFFFFF"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/fieldFirstOpinion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textFirstOpinion"
android:minHeight="80sp"
android:isScrollContainer="true"
android:inputType="textMultiLine"
android:textSize="20sp"
android:gravity="top|left" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_below="#id/fieldFirstOpinion"
android:layout_centerHorizontal="true"
android:layout_marginTop="37sp"
android:textSize="23sp"
android:text="#string/textSendButton"
android:gravity="center_horizontal"
android:padding="10dp" />
</RelativeLayout>
</ScrollView>
try adding android:layout_below="#id/some" in your LinearLayout like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical"
android:layout_below="#id/some" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Since you want the button to be at the bottom of the page, add the following line
android:layout_below="#+id/some"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
in your LinearLayout code here like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/some"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
Also make sure the layout:height parameter of EditText is set to wrap_content
Try this and tell me if it works or not

Android increase height of parent when textMultiLine wraps to new line

I have a fragment that shows a chat session and then below it an EditText and a Button
Right now I have the height of the RelativeLayout containing the EditText and Button hard coded.
How do i have the RelativeLayout height only be the height of a single line EditText and when the user types enough text to warrant a new line of text dynamically re-size the height to be just big enough to contain the now larger EditText?
For anyone that has used the Google Voice app or the stock messaging app you can see this in action when replying to a message.
I've include my current layout below.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:id="#+id/bottom_bar"
android:layout_width="fill_parent"
android:layout_height="90dp"
android:layout_alignParentBottom="true"
android:minHeight="60dp" >
<ImageButton
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_alignParentRight="true"
android:layout_centerInParent="false"
android:layout_centerVertical="true"
android:background="#null"
android:onClick="sendMessage"
android:paddingBottom="15dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:src="#drawable/send" />
<EditText
android:id="#+id/sendText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_centerVertical="true"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_toLeftOf="#id/sendButton"
android:hint="Enter Message"
android:inputType="textMultiLine" >
</EditText>
</RelativeLayout>
<fragment
android:id="#+id/chatfragment"
android:name="android.support.v4.app.ListFragment"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/bottom_bar"
android:layout_alignParentTop="true" />
</RelativeLayout>
Have you tried setting the height of your nested RelativeLayout to wrap_content?
<RelativeLayout
android:id="#+id/bottom_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:minHeight="60dp" >

Shrinking a ScrollView on resize for IME - what am I doing wrong?

I'm trying to get the following ScrollView to shrink down so that all the other elements above it will still be visible when using the IME, or, at the very least, so that the top of the ScrollView is moved down to the top of the screen.
Main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="match_parent"
android:orientation="vertical" android:id="#+id/gameLayout">
<TextView android:id="#+id/gameTitle" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:textColor="#color/Red"
android:maxLines="1" />
<ScrollView android:id="#+id/gameScroll"
android:layout_width="match_parent" android:layout_height="fill_parent"
android:fillViewport="false" android:layout_above="#+id/gameEntry"
android:layout_below="#+id/gameTitle">
<TextView android:id="#+id/gameText" android:layout_width="match_parent"
android:layout_height="wrap_content" android:scrollbars="vertical" />
</ScrollView>
<AutoCompleteTextView android:id="#+id/gameEntry"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" android:layout_toLeftOf="#+id/gameSubmit"
android:hint="#string/Hint" android:imeOptions="actionDone"
android:lines="1" />
<TextView android:id="#+id/gameSubmit" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignBaseline="#+id/gameEntry"
android:layout_alignParentRight="true" android:gravity="center"
android:text="#string/Submit" android:textColor="#color/Red"
android:textSize="18dp" android:lines="1" />
</RelativeLayout>
Can this be done?
I probably made some stupid mistake... Oh, I did everything they recommended on How to prevent that the keyboard hides my EditText?
And, I also added android:windowSoftInputMode="adjustResize" to the manifest, and it's still panning... Cue the "wow that's a silly question" in 3..2..1......
Try changing the android:layout_height="fill_parent" on the ScrollView to android:layout_height="wrap_content" and adding android:layout_above="#+id/gameEntry" to the ScrollView.

Categories

Resources