In this layout I have two Views - the ImageButton at bottom right and the TextView at center bottom. When android:visibility of both of views is set to visible - all is aligned as needed. But if I set android:visibility for ImageButton to gone - EditText goes to the left edge of layout.
Questions:
1) Why it is happening so?;
2) How to achieve not changing place of EditText on setting ImageButton visibility to gone? I need to get the same layout as on the left picture (see below), but without ImageButton. (I know, one possibility would be setting visibility not to gone, but to invisible, but I'm more interested in the solution with visibility = "gone")
P.s.: The first two layouts - RelativeLayout and FrameLayout are mandatory - they are used for other stuff, I just removed all that is not related to question.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/mForSearchFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/mForAdMediation"
android:layout_alignWithParentIfMissing="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/mSearchEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:ems="5"
android:imeOptions="actionSearch"
android:inputType="text"
android:visibility="visible" >
<requestFocus />
</EditText>
<ImageButton
android:id="#+id/mSearchButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#drawable/dark_button"
android:src="#drawable/tab_search"
android:visibility="visible" />
</RelativeLayout>
</FrameLayout>
</RelativeLayout>
Here are layouts:
The problem is that your inner RelativeLayout is inside of a FrameLayout that is set to wrap_content for the width. So, when the ImageView goes away, the width of the RelativeLayout shrinks to the width of the EditText. So, the EditText is still centered within the RelativeLayout, but the RelativeLayout is only as wide as the EditText.
Maybe you could simplify your layout something like this?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="#+id/mSearchEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:ems="5"
android:imeOptions="actionSearch"
android:inputType="text"
android:visibility="visible" >
<requestFocus />
</EditText>
<ImageButton
android:id="#+id/mSearchButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#drawable/dark_button"
android:src="#drawable/tab_search"
android:visibility="visible" />
</RelativeLayout>
Hmm, It seems I found a solution:
I need to set layout_width of first FrameLayout to "match_parent"
Related
I have a relative layout that sits at the bottom of screen
It has 3 elements horizontal
firstElement - fixed width
middleElement - width as fill_parent
last element - fixed width
MiddleElement is edit text with maxLines = 5. It starts with fixed width and then expands as typed.
With the layout below, I use center_vertical for left/right and they adjust accordingly to center.
My goal is to keep left/right elements to bottom while the edit text expands. I could not make it work,
Below is just one example of layout I tried. I have tried align_parentBottom, layout_gravity=bottom, gravity=bottom.
I could not make it work.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottomComponent"
android:background="#color/red"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="50dp">
<LinearLayout
android:background="#color/green_theme"
android:id="#+id/firstElement"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="center"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp">
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_width="20dp"
android:layout_height="20dp">
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/firstImage" />
</LinearLayout>
</LinearLayout>
<EditText
android:id="#+id/middleElement"
android:layout_centerVertical="true"
android:layout_marginTop="7.5dp"
android:layout_marginBottom="7.5dp"
android:maxLines="5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="35dp"
android:layout_toLeftOf="#+id/lastElement"
android:layout_toRightOf="#+id/firstElement"
android:paddingLeft="6dp"
android:paddingRight="0dp"/>
<Button
android:id="#+id/lastElement"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_width="65dp"
android:layout_height="50dp"
android:textColor="#color/title_gray"
android:background="#color/green_theme"
android:textSize="18dp"
android:textAllCaps="false"
android:text="#string/lastElement" />
</RelativeLayout>
Ok this post solved my issue Android LinearLayout fill-the-middle
What I did not know that for linearlayout layout_weight=1 will work as fill_parent in relative layout
I have looked at a lot of answers and not found one that isn't a work-around. So, excuse me if this has been asked and answered.
I have a RelativeLayout that I want to appear at the bottom of the screen regardless of the size of the stuff outside the RelativeLayout and above it. Can this work as designed (Relative below Relative)? If so, please tell me what I'm doing wrong.
Note: I have removed most of the guts that make it obvious why the first RelativeLayout has to be a RelativeLayout and the 2nd RelativeLayout is usually an <include... that I use in other places and put in explicitly for this example.
Thanks.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/enter_Game_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:hint="Enter Game Name"
android:inputType="text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/d_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#android:string/cancel" />
</RelativeLayout>
Here's what I get...
In your second RelativeLayout you have android:layout_alignParentBottom="true" , this attribute will not work because the parent is a LinearLayout where this attribute doesn't work and has no effect, make you parent layout RelativeLayout instead of LinearLayout and remove the Orientation attribute since it will has no effect, then you will get the button at the bottom of the screen no matter the size of the screen and layout above your Button
You parent layout is a linear layout. Make it a Relative layout. Then Put two Views (Edit Text and Button) in it and set one to align top and one to align bottom.
Your code would look like something like this (not tested)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="#+id/enter_Game_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:hint="Enter Game Name"
android:layout_alignParentTop="true"
android:inputType="text" />
<Button
android:id="#+id/d_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#android:string/cancel" />
</RelativeLayout>
I need to create navigation bar (which I include in many activities.xml) with background which has TextView at center with titlw and back button (sometimes Back button is visible sometimes is not). How to to center TextView to be always in center of Layout ? At the moment when Back is visible TextView is moved slightly to right.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:background="#drawable/header_background"
android:gravity="center_vertical"
android:orientation="horizontal" >
<Button
android:id="#+id/btnPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_previous_arrow"
android:visibility="gone" />
<TextView
android:id="#+id/title"
style="#style/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical|center_horizontal"
android:text="Title" />
</LinearLayout>
A RelativeLayout will suit your needs better:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_background" >
<Button
android:id="#+id/btnPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:paddingLeft="5dp"
android:background="#drawable/selector_previous_arrow"
android:visibility="gone" />
<TextView
android:id="#+id/title"
style="#style/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Title" />
</RelativeLayout>
Attribute layout_centerInParent will only work if the width and height are set to wrap_content. Alternatively, you can set the height and width to fill_parent and set the TextView's android:gravity="center".
Why your original layout was not working:
A LinearLayout does not allow overlapping of views. So, even though you set the TextView's height and width to fill_parent, it actually only fills up the space leftover after placing the back button. So, when the button is not visible, TextView is centered. When the button is visible, TextView is centered in the remainder of space: thus shifted a bit to the right.
Edit: Correction made (replaced android:layout_alignLeft="true" with android:layout_alignParentLeft="true")
<TextView
android:id="#+id/title"
style="#style/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="Title" />
I've used a relative layout and I want to set the button at bottom of the screen, However this puts it all the down to the bottom and I would like to have some margin so it there's some space between the end of the screen/view and the button. However whatever I do the button margin just doesn't do anything on 2.1+ for some reason. The relative layout contains a background so I cant but the margin on that.
Anyone know a fix for this?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="0dp"
android:background="#drawable/background" >
<Button
android:id="#+id/confirm_mobile_button_next"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_centerHorizontal="false"
android:layout_centerInParent="false"
android:layout_margin="15dp"
android:background="#drawable/button_shape_selector"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:text="#string/confirm_mobile_no_continue"
android:textColor="#color/white"
android:textStyle="bold" />
</RelativeLayout>
You can simply add a padding to the RelativeLayout instead of a margin to the Button, e.g. android:paddingBottom="15dp".
In general I'm always testing my layout in the Exclipse preview using API Level 8 setting. This gives quite accurate results for most devices, including ICS and JB.
The other thing you can do is put a View that's aligned to the bottom of the RelativeLayout, and set its height to the bottom margin you would want to use (or simply specify a value for layout_marginBottom) like so:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/some_image"
android:adjustViewBounds="true"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some Overlay"
android:padding="3dip"
android:gravity="center_vertical|center_horizontal"
android:layout_above="#+id/empty_view"
android:layout_marginBottom="35dip"
/>
<View
android:id = "#+id/empty_view"
android:layout_height = "30dip"
android:layout_width = "match_parent"
android:visibility="invisible"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
This example fills the RelativeLayout with the ImageView, and positions a TextView over the ImageView.
Yu can use translateY attribute
translateY="-16dp"
Final code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="0dp"
android:background="#drawable/background">
<Button
android:id="#+id/confirm_mobile_button_next"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_centerHorizontal="false"
android:layout_centerInParent="false"
android:layout_margin="15dp"
android:background="#drawable/button_shape_selector"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:text="#string/confirm_mobile_no_continue"
android:textColor="#color/white"
android:textStyle="bold"
android:translateY="-16dp" />
</RelativeLayout>
only working solution suggested by #franny zhao is below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/fl_layout"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_layout"
android:text="hello world"
android:layout_marginBottom="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</RelativeLayout>
If you add padding to the bottom aligned view as suggested by others, the view background will also extend. If you have colored background then the view will look like it is glued to the bottom. Padding and margin are entirely different, padding is part of view, but margin leaves space between views.
I think the best way is to set android:layout_alignParentBottom in XML
then in java code behind:
Button confirm_mobile_button_next = (Button)findViewById(R.id.confirm_mobile_button_next)
and
confirm_mobile_button_next.setTransitionY(-THE_VALUE) or setTransitionX(-THE_VALUE)
I think the best way is to set:
<...
android:layout_alignParentBottom="true" />
then in java code behind:
Button confirm_mobile_button_next = (Button)findViewById(R.id.confirm_mobile_button_next)
confirm_mobile_button_next.setTransitionY(-THE_VALUE) or setTransitionX(-THE_VALUE)
You can use a ViewGroup(for example, FrameLayout or LinearLayout) to wrap the view. Set alignParentBottom in the outside ViewGroup, then marginBottom can work in the inside View.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/fl_layout"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_layout"
android:text="hello world"
android:layout_marginBottom="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</RelativeLayout>
Since I stumbled upon this issue, and saw no answers fit to my situation I started thinking for half a second and resolved it by setting a negative margin on the view inside the RelativeLayout sample:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="-8dp"
android:layout_marginStart="-8dp">
</RelativeLayout>
This should prove useful to some people.
Well this is 2022, but if you still are not using ConstraintLayout for some reason, like the one legacy project code I am fixing, use this property for a Bottom margin type visual.
android:translationY="-8dp"
and your code should look like this (in my case this a FAB in Relative Layout)
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/cart_check_out_btn"
style="#style/FABThemeDark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginHorizontal="16dp"
android:layout_marginVertical="16dp"
android:text="#string/cart_check_out_btn"
android:textAllCaps="false"
android:translationY="-8dp" />
And it will work like this
Try in this way :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="17dp"
android:text="Button" />
Here is another alternative. If you want to set the child's margin instead of parent's padding, you should set the value of android:layout_marginTop to double of the desired margin and then set the android:layout_centerVertical to true. Top margin is given double the desired value to compensate the bottom margin. That way you will have an equal top and bottom margin around the child view.
<Button
android:id="#+id/confirm_mobile_button_next"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_centerVertical="true"
android:layout_centerInParent="false"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="30dp"
android:background="#drawable/button_shape_selector"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:text="#string/confirm_mobile_no_continue"
android:textColor="#color/white"
android:textStyle="bold" />
It will give you the same result.
I have the following layout for a custom title bar. However, the problem is this: both the imageview and the imagebutton are coming at the centre. I was expecting the imagebutton to be at the extreme right. Can anyone kindly let me know what I did wrong here ? Thanks.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="35dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:background="#323331">
<ImageView
android:src="#drawable/header"
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
</ImageView>
<ImageButton
android:id="#+id/saveButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/savetap"
android:background="#null"
android:gravity="right"
android:layout_above="#+id/header">
</ImageButton>
</LinearLayout>
Your layout is only 35dip tall, so pressumibly if you show your ImageView the ImageButton gets positioned outside the screen. Consider changing your layout_height to wrap_content, if appropiate.
You're using a vertically oriented LinearLayout, all View will be presented in a vertical fashion. Use a RelativeLayout so that you'll have more control over where Views are positioned. If you'd still like to use a LinearLayout, you'll have to use horizontal orientation so that the Views can be on the same "line".
Use layout_gravity to layout the item to the right, just gravity is used by the contents of the view.
At first if width is set to fill parent it really fills parent so it use all the width.
Second: why not RelativeLayout? It provides more options and control.
Maybe this is what you looking for:
`
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="35dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:background="#323331">
<ImageView
android:src="#drawable/header"
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left">
</ImageView>
<ImageButton
android:id="#+id/saveButton"
android:layout_height="wrap_content"
android:src="#drawable/savetap"
android:background="#null"
android:layout_marginLeft="20dp"
android:layout_width="wrap_content" android:layout_alignParentRight="true">
</ImageButton>
</RelativeLayout>
`