Layout won't expand with EditText - android

When I type into the EditText box, the RelativeLayout containing it does not expand. The problem is I want it to.
Here's a visual display of the problem:
There's about 5 lines of gibberish typed in there and you can see the 2nd to last line cut off. Up to a maximum of 5 lines should be showing, but they're not, most likely because they're inside a layout whose height is set to wrap the contents. How can I make the parent layout expand when the EditText expands?
Here is the problem xml displaying the message box you see in the picture:
<RelativeLayout
android:id="#+id/group_chat_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="5dp"
android:background="#drawable/transparent_background2" >
<TextView
android:id="#+id/send_msg_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/transparent_background2"
android:text="Send" />
<EditText
android:id="#+id/group_chat_input_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignBottom="#id/send_msg_button"
android:layout_toLeftOf="#id/send_msg_button"
android:background="#00000000"
android:hint="Type a message..."
android:textColorHint="#EEEEEE"
android:inputType="textMultiLine"
android:maxLines="5"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:shadowColor="#000000"
android:shadowRadius="3"
android:shadowDx="3"
android:shadowDy="3"/>
</RelativeLayout>

How can I make the parent layout expand when the EditText expands?
This isn't working because the EditText is anchored to the TextView with
android:layout_alignBottom="#id/send_msg_button"
The EditText is trying to expand down but it can't since it isn't allowed to go below that point.
Removing this and anchoring it to the top of the TextView will solve that issue but creates other problems with the placement of the TextView if the EditText grows too much.
I've tested some of my suggestions from comments and it seems to give what you want. You will find my example below with some changes in bg and colors just to work with my test project.
<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">
<RelativeLayout
android:id="#+id/group_chat_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="5dp"
android:background="#drawable/abc_item_background_holo_dark" >
<TextView
android:id="#+id/send_msg_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/group_chat_input_box"
android:background="#drawable/abc_item_background_holo_light"
android:text="Send" />
<EditText
android:id="#+id/group_chat_input_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/send_msg_button"
android:background="#FFFFFF"
android:hint="Type a message...Type a message...Type a message...Type a message...Type a message...Type a message...
Type a message...Type a..."
android:inputType="textMultiLine"
android:maxLines="5"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:shadowColor="#000000"
android:shadowRadius="3"
android:shadowDx="3"
android:shadowDy="3"/>
</RelativeLayout>
</RelativeLayout>

Related

how to ensure the min space between two views in Relativelayout

I have two TextViews in a RelativeLayout. One to the left and the other one to the right. Both of them shows a string which may become very long. I want to make a min space of 10dp between two TextViews and let the right one have ellipse if no enough space.
I have below layout definition which does not work. The right TextView may cover the first one if it is very lone.
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp">
<TextView
android:id="#+id/left_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:text=""/>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>
The only way I can do is to set the max length to the right one. But this is not what I want because if the left one is short, i want the right one to be longer than the maxWidth.
And when I added "toRightOf" this work but the textView width becomes too long for a short string shown in it. That is not acceptable
add Add android:layout_toRightOf="#+id/left_one in right_one textview
remove android:layout_alignParentRight="true" from right_one textview
replace android:layout_marginRight="10dp" by android:layout_marginLeft="10dp" in right_one textview
For right_one textview to remain right if it is short replace right_one textview portion by
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="10dp"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/left_one>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>
You can do like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<TextView
android:id="#+id/left_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:layout_weight="0.3"
android:text="Left text "/>
<TextView
android:id="#+id/right_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_weight="0.7"
android:layout_marginLeft="10dp"
android:text="edkjfcnrdskjvkjrdfvsxsdcndsjkvnjksdnvkj
sdjkvbksdbvkj zskjvn jsdnbjkvfdbde"/>
</LinearLayout>
Add:
android:layout_toLeftOf="#+id/right_one"
android:layout_marginRight="10dp"
to your left_one TextView.

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.

Edittext fields increases the size

In my android project, main_activity.xml is looks like:--
<?xml version="1.0" encoding="utf-8"?>
<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:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linear1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal|top"
android:orientation="horizontal"
android:paddingBottom="8dp" >
<EditText
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:layout_weight="10"
android:gravity="center_horizontal|center_vertical"
android:inputType="text"
android:textAlignment="center"
android:textAppearance="#style/AppTheme"
android:textSize="20sp" />
<EditText
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="75"
android:gravity="center_horizontal|center_vertical"
android:inputType="text"
android:textAlignment="center"
android:textAppearance="#style/AppTheme"
android:textSize="20sp" />
<Button
android:id="#+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="10"
android:maxWidth="48dp"
android:minHeight="48dp"
android:minWidth="48dp"
android:text="OK"
android:textAlignment="center"
android:textAppearance="#style/AppTheme"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>
this format is looks like:-- "Mr. Annonomus button(ok)"...Mr. is an edittext field,Annonomus is also a edittext field and a ok button..
It displays fine..But the problem is when I start writting into the second edittext field(means want to write "Annonomus" ) the edittext size is increasing and the ok button and another edittext field is decreasing in size..
How can i get that when I write any long name to edittext field the edittext field will remain same..
Use this code for your editText:
int px = editTextMessage.getWidth();
editTextMessage.setMaxWidth(px);
You're using android:layout_width="wrap_content" and android:layout_weight in all the components inside the linearlayout.
You must change the android:layout_width to match_parent or a fixed value and remove the android:layout_weight of them. Don't forget to remove the latter, otherwise it won't work.
Set android:maxLines="1" or android:singleLine="true" property in your EditText.

android message box layout implementation

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.

Android RelativeLayout with wrap_content truncates some children

I have a RelativeLayout whose width/height is set to wrap_content. However, the button in the bottom right is truncated on its lower side.
Changing the RelativeLayout's paddingBottom doesn't help, neither does adding a marginBottom to the button.
Any ideas?
Here's my code:
<RelativeLayout
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:background="#ff6aa639"
>
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="29dp"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sign_up_signuphere"
android:layout_alignLeft="#id/sign_up_signuphere"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="46dp"
android:layout_below="#id/sign_up_signuphere"
android:layout_toRightOf="#id/sign_up_emaillabel"
android:ems="10"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignRight="#id/sign_up_email"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_signup" />
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/sign_up_emaillabel"
android:layout_marginTop="27dp"
android:layout_below="#id/sign_up_email"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
...and this is what it looks like in the emulator:
Any thoughts on how I can get the bottom of my button to show?
TIA!
My fast idea is to set button bottom border to height of text on the left by using xml code
android:layout_alignBottom="#+id/sign_up_haveaccount"
because you've setted layout_below option already. However your xml code is quite not proper :) I will try write here better xml code for you, later.
Well, I found your problem. And I was searching for solution.
I setted for textview new padding bottom because button was aligned to this textview basline. I know that it could be a nice hack but I coudln't find andy good way to handle it :)
According to your layout I changed behaviour for edittext to make it stretchable. Also I grouped all elements into 3 groups. Each one per row to make it more readable.
Also do not forget that first 2 lines about xmls.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/sign_up_phase_enteraddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ff6aa639"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<!-- 1 row -->
<RelativeLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="29dp" >
<TextView
android:id="#+id/sign_up_signuphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sign_up_signuphere"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<!-- 2 row -->
<RelativeLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row1" >
<TextView
android:id="#+id/sign_up_emaillabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_email"
android:text="#string/sign_up_emailaddress"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/sign_up_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/sign_up_emaillabel"
android:inputType="textEmailAddress" >
<requestFocus />
</EditText>
</RelativeLayout>
<!-- 3 row -->
<RelativeLayout
android:id="#+id/row3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/row2" >
<TextView
android:id="#+id/sign_up_haveaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="27dp"
android:paddingBottom="15dp"
android:text="#string/sign_up_haveaccount"
android:textAppearance="?android:attr/textAppearanceSmall" />
<Button
android:id="#+id/sign_up_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/sign_up_haveaccount"
android:layout_alignParentRight="true"
android:text="#string/sign_up_signup" />
</RelativeLayout>
</RelativeLayout>
This is happening because of your padding , you have given 10 dp padding in bottom and your button view doesn't have enough space.Remove padding and check it .

Categories

Resources