I'm making an android app in which there's an activity having an EditText on the top and three Buttons at the bottom. I've set android:windowSoftInputMode="adjustResize" in my manifest to activity so that it gets re-sized automatically when the virtual keyboard is being used. But, as I type in a long sentence in the EditText, it's size increases and it goes beneath the Buttons. I want the EditText to expand only upto the free space between the 3 Buttons and the ActionBar.
Here's what's happening -
Here's the XML code of the activity -
<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:background="#eaeaea"
tools:context=".AddNoteEditor" >
<EditText
android:id="#+id/noteEditor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#drawable/card"
android:ems="10"
android:hint="#string/nn"
android:inputType="textMultiLine"
android:padding="12.5dp"
android:singleLine="true"
android:textSize="19dp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickAddNote"
android:text="#string/ok"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />
<ToggleButton
android:id="#+id/highlighter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_toLeftOf="#+id/button2"
android:layout_toRightOf="#+id/button1"
android:text="#string/hglt"
android:textOff="Highlighting Off"
android:textOn="Highlighting On" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickDiscardNote"
android:text="#string/cancel"
android:layout_alignTop="#+id/highlighter"
android:layout_alignParentRight="true" />
</RelativeLayout>
Thanks in Advance.
The problem is with the Relative Layout, in which EditText fills up the entire available space (in this layout) when text is long enough. As a result it fills also the space that is under those buttons.
You have basically two solutions.
Add a bottom margin to your EditText that will be equal in size to the height of a button.
Use Linear Layout(s) instead of Relative Layout (one Linear Layout to replace the Relative Layout - a vertical one, and another Linear Layout - horizontal - to place those buttons side by side).
maybe you must try your EditText as scrollable:
for horizontal scroll:
<EditText
android:scrollHorizontally="true"
../>
for vertical scroll:
<EditText
android:scrollbars = "vertical"
../>
Related
I got a RelativeLayout:
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/auto_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|left"
android:layout_marginBottom="5sp"
android:layout_marginTop="5sp"
android:layout_toLeftOf="#+id/ButtonBackspace"
android:completionHint="#string/a_string"
android:completionThreshold="1"
android:gravity="center"
android:hint="#string/a_string"
android:textAppearance="#android:style/TextAppearance.Large" />
<ImageButton
android:id="#+id/ButtonBackspace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/myButton"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#android:color/white"
android:soundEffectsEnabled="true"
android:src="#drawable/dialer_btn_bks" />
<Button
android:id="#+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="New"
android:visibility="gone" />
</RelativeLayout>
The visibility of myButton starts as Gone. I was hoping that when I change the visibility of the button in run time to Visible, it would push the ImageButton and AutoCompleteTextView to the left but both the button and imageButton appear on top of each other since they both got android:layout_alignParentRight="true". I tried adding the android:layout_toLeftOf="#+id/myButton" to the ImageButton but that did not work.
How can I make the button push the other elemets when it become visible and have its own space?
if these elements are just next to each other, you can use a linear layout and set the gravity to right. the linear layout automatically pushes the elements.
in relative layout all elements are "relative" to another element or the parent view, but just to one element for each direction. and if this object is "gone" the relation in this direction also is gone.
I have a RelativeLayout which includes following RelativeLayout:
<RelativeLayout
android:id="#+id/buttons_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingTop="10dip" >
<Button
android:id="#+id/day_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="day"
android:layout_alignParentLeft="true"
android:textSize="14sp"/>
<Button
android:id="#+id/month_button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="month"
android:layout_alignParentRight="true"
android:textSize="14sp"/>
<EditText
android:id="#+id/week_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/day_button"
android:layout_toLeftOf="#id/month_button1"
android:maxLines="5"
android:minLines="1"
android:textSize="16sp"
android:layout_marginBottom="15dp"/>
</RelativeLayout>
This layout will be shown as a footer for the page.
As you see the maxLines for EditText is 5. When the line size is more than 2 in EditText, buttons around it start to move a bit up.
I want buttons stick to the end of page and do not move. Any solution?
I tried adding android:layout_alignParentBottom="true" for buttons but it did not work.
Try to add android:layout_alignParentBottom="true" for all child elements.
It works at least in Android Studio.
UPDATED
Add android:layout_alignBottom="#+id/week_button" for both buttons.
it sounds to be as a bug in the UI framework, but there's usually work around to achieve the same visual effect.
For example, replacing this RelativeLayout you show in the XML to a LinearLayout with orientation="horizontal" should give the same visual effect.
pseudo code
<LinearLayout horizontal>
<Button wrap_content layout_gravity=bottom/>
<EditText width=0dp weight=1/> // makes EditText fill remaining space
<Button wrap_content layout_gravity=bottom/>
</LinearLayout>
So in my layout, I've got three buttons on the same line, one left, center and right aligned. I also have TextViews below the buttons to serve as labels, but they too are aligned left, center and right respectively. I'd like them to instead be centered below the buttons and on the same line as one another, but I can't figure out how to do this without explicitly setting coordinates, which will then break on some phones. I tried setting various weights and layout options, but it just doesn't work how I'd like. Is there a way to do this in a RelativeLayout? Or maybe it's just not possible. Finally, I've got more three TextViews on the same line and one button on the bottom. I would like to align as shown bellow:
http://imgur.com/vYuqk
Thanks in advance.
You can't center one element below another with RelativeLayout. You could try a horizontal LinearLayout with three RelativeLayouts (one for each column). You could contain the whole thing in a vertical LinearLayout to get the bottom button.
TableLayout or GridLayout are possibilities as well.
As people suggested, there is no way to center a View below another View in RelativeLayout. You could maybe use this hack if you can confirm that the TextView width need not be more the Button width. The solution is: you make the TextView align its left and right edge to the Button above. Then set the gravity of the TextView to center so that the text inside TextView is centered.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="130dp"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_centerHorizontal="true"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_alignParentRight="true"
android:text="Button3" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button1"
android:layout_alignRight="#id/button1"
android:layout_below="#+id/button1"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt1" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button2"
android:layout_alignRight="#id/button2"
android:layout_below="#+id/button2"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt2" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button3"
android:layout_alignRight="#id/button3"
android:layout_below="#+id/button3"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt3" />
</RelativeLayout>
It seems there is a padding between the bottom input section and bottom margin of an edittext by default. I have a linearlayout(horizon) including one edittext and one button. I just can't make them in one single line perfectly, since the padding between the bottom input section and bottom margin make the edittext lower than the button through I set the same height and alignment for them.
I also tried Relative layout but cannot solve the problem either, here is my layout
<RelativeLayout
android:id="#+id/SearchLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginTop="10dp" >
<EditText
android:id="#+id/FilterEditText"
android:layout_width="fill_parent"
android:layout_height="38dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_toLeftOf="#+id/SearchButton"
android:gravity="center_vertical"
android:hint="#string/search_or_add_a_place"
android:imeOptions="flagNoExtractUi"
android:inputType="text|textNoSuggestions"
android:textSize="15dp" />
<Button
android:id="#+id/SearchButton"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_alignParentRight="true"
android:background="#drawable/search_btn"
android:enabled="false"
android:gravity="center_vertical" />
</RelativeLayout>
changing the background of editText can solve my problem
i prefer relative layout and if you write android:layout_toLeft or android:layout_toRight it puts them beside correctly but even after that it doesnt, there is ALIGN_TOP or ALIGN_BOTTOM or ALIGN_BASELINE.
I had the same problem as you and turned to relative layout. Its easier to me.
I currently have this in my layout.xml
<EditText android:id="#+id/body" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:hint="Type to compose" />
<ImageButton android:id="#+id/attach"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/attach_photo" />
<Button android:id="#+id/send" android:text="#string/send"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
Problem I'm facing is the top of the ImageButton is not aligned like the Button and EditText. The other 2 fill up the height nicely but the ImageButton seems to be sticking out upwards. Any ideas?
Try using a RelativeLayout. You can align views to the sides, top and bottom of the parent or any other view.
Using android:layout_alignParentTop="true" or similar.
There are loads of xml commands you can use in RelativeLayout.
You can also set the layout weight property on the children of your linear layout. You can set the weight of edittext, imagebutton and button which will align your components on screen.