Android ImageButton not aligned with EditText and Button - android

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.

Related

Different Gravity of two textviews in a horizontal Linear Layout

I am using the following code and when I set gravity to the first textview to center, automatically the second textview's text is also getting aligned with the first one. Even Though I set the gravity of second view to top
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="96dp"
android:text="New Text"
android:id="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="48dp"
android:text="New Text"
android:id="#+id/textView2" />
</LinearLayout>
There was a solution in another question which says to wrap the 2nd textview in another LinearLayout. But why is it so?

A horizontal LinearLayout aligns its child Views by their baselines by default, so the second TextView is being moved to align its text with the first's. To fix your problem, simply set the LinearLayout's baselineAligned attribute to false.
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false">

How to let a TextView overlap over an ImageButton

I have a RelativeLayout and want to that my textfield will overlap over the given ImageButton. Currently the textfield is behind the imagebutton. I tried several options but did not find the correct one, any idea?
Thanks
<TextView
android:id="#+id/qrCode_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/qrCode_hint"
android:textSize="20dp"
android:layout_alignBottom="#+id/btn_start_barcode"
android:layout_marginBottom="53dp"
/>
<ImageButton
android:id="#+id/btn_start_barcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/select_form"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:background="#ffffffff"
android:onClick="startBarcodeAction"
android:src="#drawable/barcode_bg" />

The RelativeLayout sets the Z-Index based on ordering of children.
So when you add a view below the others it will set Z-Index of that child higher than the last child.

Use a FrameLayout and put in the following order:
ImageButton
TextView
This will ensure that the TextView will be on top of the ImageButton.

Android - Button Keeps overlapping Editext

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"
../>

Right-align button with dynamic text

In my user interface, I have a fragment with a RelativeLayout. At the bottom of this RelativeLayout, I have two buttons: one should be on the left, the other on the right, with empty space between them. The left one has static text (but because the app will be translated, I don't know what width it will be). The text in the right one can change arbitrarily.
Since I already have a RelativeLayout, I started out trying to lay them out inside the RelativeLayout like this:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/right" />
But this has the problem that if the text in the right-hand button is too long, it will overlap the left-hand button.
I next tried to constrain the left-hand edge of the right-hand button by adding android:layout_toRightOf="#+id/button_left", but with this, the right-hand button would always fill the available width. When the text in the right-hand button is short, I want it to shrink to leave a gap between it and the left-hand button.
I next tried to use a LinearLayout, so I could set layout_gravity on the buttons, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:drawableLeft="#drawable/pass"
android:text="#string/right" />
</LinearLayout>
Still no joy. I expected this to work, but the right-hand button stays just to the right of the left-hand button, instead of sticking to the right edge of the screen. I can see in the layout editor that the LinearLayout correctly fills the width of the screen, but the button stubbornly stays next to its friend.
I tried adding android:layout_weight="1" to the right-hand button too, but again, that made it always expand to fill the available space.
Next, I tried to add an empty View between the buttons, to expand and force the right button to the right, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</LinearLayout>
This works fine when the text is short, just like my original RelativeLayout did, but now when the text on the right-hand button is long, its width is limited by the width of the screen, not the available space, so it extends off the right-hand edge of the screen. Again, I can see in the layout editor that the LinearLayout has the correct width, but the button is extending ourside its parent's bounds. This happens even if the button has android:layout_width="match_parent". Oddly enough, increasing the layout_gravity on the right-hand button makes it smaller until it fits inside the available space, but of course that also makes it fill the space when the text is small.
I can't believe it's this hard to get this right. I've seen half a dozen similar questions on SO, but they all have easy workarounds. If the button text is fixed, you can set the margin to a fixed width by hand. If the expanding widget is a TextView instead of a Button, you can just let it expand and use android:gravity to move the text inside the widget, but you can't do that with a button because the background and borders are visible on the screen.

It turns out that adding the LinearLayout was the wrong approach. Using android:layout_toRightOf="#+id/button_left" android:layout_alignParentRight="true" works fine with a TextView, because that can soak up the available space without changing its appearance. Instead of trying to change the layout, I just need to use something that can expand to fill the available space and contain the Button: a FrameLayout. Here's the working code, which still goes inside my root RelativeLayout:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/button_left" >
<Button
android:id="#+id/Turn_button_pass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</FrameLayout>
Now, the FrameLayout always takes up all the space to the right of the left-hand button, and lays out the right-hand button inside that space using android:layout_gravity="right".
This answer only adds one extra layout, but if someone has a way to do it only using the existing RelativeLayout, to minimise the number of ViewGroups in the layout, I'll accept that as a solution.

IF you can live with the constraint, that the right button only can take up to up half of the available space, this could be a solution for you:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A short text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="A very long text which is limited to one half of the available space" />
</RelativeLayout>
</LinearLayout>

You could just use a TextView and make it look like a button. Create a dummy button, extract the background and set that background to the textfield programmatically.
(Not tested but should give it the apperance of a button)
Drawable d = button1.getBackground();
textView1.setBackground(d);
then you just set the onClickListener and that should yield what you're looking for. The TextView would take the place of the "button_right" in your first layout.
**Edit
Your xml would look something like this
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<TextView
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:maxEms="10"
android:text="TextView" />

Android:how to remove the padding between the bottom input section and bottom margin of an edittext

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.

Categories

Resources