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>
Related
I am coding in XML on android studios, and I am having trouble getting the EditText to be centered at the top and the Button to be centered in the center. I do not know a lot about code so the other things I've read about Relative vs Linear Layout have been very confusing. I've never coded prior to this, so I'm very sorry if most of it is wrong.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/touch" >
<EditText android:id="#+id/edit_message"
android:layout_width="225dp"
android:layout_height="225dp"
android:layout_gravity="center"
android:hint="#string/edit_message"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:textSize="62sp"
android:text="#string/begin_app"/>
</LinearLayout>
Use the below code in your layout:
android:layout_alignParentTop will align the view on Top
android:layout_alignParentTop will align the view on center of parent
android:layout_centerHorizontal="true" and android:layout_centerVertical="true" will align the view in center of the parent
Layout code with RelativeLayout
<?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:orientation="vertical">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="text" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Button" />
</RelativeLayout>
In android studio just go to the layout xml file and click Design, you can drag and drop the widgets wherever you want and the system will generate the code for you with the placement you desired. Its great for starters.
I have a button, a textView and a scrolView on my screen. I need the button and textView to be beside each other on top and the scrolView under them. How to professionally arrange views on the screen?!
this is what I have done:
<LinearLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:textDirection="inherit"
tools:context=".MainActivity" >
<Button
android:id="#+id/btnScanAndDraw"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="#string/btnShoePosition"
android:textSize="12sp"
android:onClick="ScanAndDraw"/>
<TextView
android:id="#+id/txvMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="end">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/imgViewMap"/>
</LinearLayout>
</ScrollView>
Not sure what you want actually. If you are asking questions related to layout, please post a screenshot too. If I understood your question, solution is below.
You are using a LinearLayout, which has only two orientations (vertical and horizontal). Click here to know about LinearLayout. If you want to arrange your UI in a relative manner use RelativeLayout. RelativeLayout. I have changed your code with some new attributes. It's not tested, but it should give you desired output.
<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"
tools:context=".MainActivity" >
<TextView
android:id="#+id/txvMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/btnScanAndDraw"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="#string/btnShoePosition"
android:textSize="12sp"
android:onClick="ScanAndDraw"
android:layout_toRightOf="#+id/txvMain/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below = "#+id/txvMain
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/imgViewMap"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
I red a book for android app development. reading the book I realized that it is possible to have several LinearLayout s which will go inside of each other. Using this hierarchy of LinearLayout s I am able to arrange views in the .XML file. For instance I arranged a root LinearLayout which by itself contains 3 more LinearLayouts. For the buttons on top, I wrote:
android:gravity="right"
then the buttons went to right on top. For the ImageView - under the buttons - I implemented another LinearLayout that has this line of code inside to horizontally center the ImageView:
android:gravity="center_horizontal"
In this form - as I said - using inner LinearLayouts and gravity it is possible to arrange views on the screen as intended.
may be useful for someone :)
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"
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 wish to keep a button at the bottom of my Activity screen. It has to be fixed irrespective of the size of scrollview above it. The problem is that once the textviews of the scrollview take up some place, the height of my button keeps decreasing and it eventually gets pushed out of the activity screen. This is the layout I am using.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<TextView android:id="#+id/tvBanner" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:gravity="center"
android:text="Practice Exam" />
<ScrollView android:id="#+id/Scroll" android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/LinearLayout1"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="#+id/tvDesc" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_margin="10dp"
android:gravity="center" android:paddingTop="40dp" android:text="#string/welcom"
android:textSize="20sp" />
<TextView android:id="#+id/tvURL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginBottom="30dp"
android:paddingTop="10dp" android:layout_gravity="center"
android:text="hello" android:textColor="#android:color/white"
android:typeface="sans" />
</LinearLayout>
</ScrollView>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="bottom">
<Button android:id="#+id/btBottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:text="Enter" />
</RelativeLayout>
</LinearLayout>
I have also tried using android:weight=1 and android:layout_height=0dp in the Scrollview. But this removes the entire Scrollview portion from my activity and I can't see anything.
I do know that there are many similar questions asked about this and believe me, I have tried many of these. However, none of the tricks have worked for me. I have spent almost half a day fixing this. Kindly help.
For a case like this always use RelativeLayouts. A LinearLayout is not intended for such a usage.
Try this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Enter"
android:layout_alignParentBottom="true"/>
<ScrollView
...
android:layout_above="#id/btnGetMoreResults"/>
</RelativeLayour>
You should try using RealativeLayout instead of Linear, and then you could use
android:layout_above="#+id/btBottom"
android:layout_alignParentBottom="true"
That should solve your problem.
looks like you need 'alignParentBottom' in your button like this
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Enter" />
Do not wrap Button to RelativeLayout
Set layout_height of ScrollView to 0dp
Add layout_weight of ScrollView to 1
For this it would probably be a good idea if you used RelativeLayout for the outer wrapper layout. Then you could just set the layout with the button inside to LinearLayout and set layout_alignParentButtom="true" while you set your #+id/Scroll to layout_alignParentTop="true"
Also, you should probably set the layout with the button inside´s height to wrap_content instead of fill_parent
Why do you use a LinearLayout at top level at all ?
Choose a RelativeLayout with fill/fill and the following three childern (no further nesting !):
1) TextView with android:layout_alignParentTop="true" and android:layout_centerHorizontal="true"
2) Button with android:layout_alignParentBottom="true" and android:layout_centerHorizontal="true"
3) ScrollView with android:layout_below=#id/textview_id and android:layout_above="#id/button_id"
I didn't test it though, but give it a try.