How to place one object beneath another with LinearLayout? - android

I have to use LinearLayout to make this little app type thing in Android Studio.
The instructions say we have to use vertical orientation for the root tag (and this text at the top says "Here are my widgets") and then horizontal orientation for each row. My only issue is how to place things on different rows?
It's supposed to look like:
Row 1: "Here are my widgets" (Vert orientation)
Row 2: BUTTON IMAGEBUTTON
Row 3: CHECKBOX SWITCH
My issue is, when I make a new nested LinearLayout, it shows up on row 2. How do I make a row 3 with horizontal orientation? I tried putting an empty LinearLayout thing with vertical orientation to maybe split the two rows up, but that didn't work. How do I make the CheckBox and switch show up beneath the buttons? I have to use LinearLayout, and the orientation has to be horizontal. Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_message"
android:textSize="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:gravity="fill"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="200dp"
android:text="#string/ButtonText" />
<ImageButton
android:gravity="fill"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="200dp"
android:src="#drawable/flag"
android:scaleType="centerInside"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<CheckBox
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Switch
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Here is your layout will look like briefly:
<LinearLayout
android:id="#+id/root_linear_layout"
android:orientation="vertical"
// other attributes... >
<TextView
// This is ROW 1!
//welcome text goes here />
<LinearLayout
// This is ROW 2!
android:orientation="horizontal">
<Button
... />
<ImageButton
.../>
</LinearLayout> <-- Closing of the Row2 horizontal LinearLayout
<LinearLayout
// This is ROW 3!
android:orientation="horizontal">
<CheckBox
... />
<Switch
.../>
</LinearLayout> <-- Closing of the Row3 horizontal LinearLayout
</LinearLayout> <-- Closing of the root vertical LinearLayout
You can fill in additional attributes (id, height, width, etc... ) depending on your needs.
I noticed you used android:layout_weight attribute to each Views. If you use this attribute, it is desirable to use android:weightSum to the Views parent layout. For example, if you need 50:50 width ratio of your Button and ImageButton:
<LinearLayout
android:weightSum="2"> <--- starting of Row2 LinearLayout
<Button
android:layout_weight="1" ... />
<ImageButton
android:layout_weight="1 ... />
</LinearLayout> <--- closing of Row2 LinearLayout
For more details about weight, see here :)

Like this:
<?xml version="1.0" encoding="utf-8"?>
<Button
android:gravity="center"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="Button one" />
<ImageButton
android:gravity="center"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:scaleType="centerInside"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<CheckBox
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:text="Check Box"
android:layout_weight="1"/>
<Switch
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:layout_weight="1"/>
</LinearLayout>

Related

Android Grey Out LinearLayout

I have a linear layout which contains a set of child views (mixture of text, images and other layouts).
I want to grey out the linear layout and all the child views so they look disabled (similar to how a button works).
Is this possible to achieve? I know i can set a colour filter when painting on the canvas, is there something similar for layouts?
Another way is to call setEnabled() on each child (for example if you want to do some extra check on child before disabling), check out this answer:
https://stackoverflow.com/a/7069377/4840812
You can use Frame-layout
Using TEST ONE you can achieve above text view like disabled. You can set root layout clickable false for actually disable views inside layout.
TEST TWO is for understanding purpose. Like you need to manage order of view to show effect.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--THIS IS TEST ONE-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="150dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<!--THIS IS TEST TWO-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="300dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="400dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30dp" />
</FrameLayout>
To achieve your layout you can use the RelativeLayout. In RelativeLayout you can use the 2 different views or LinearLayout. In first layout you can add views according to your need, and In second layout you can set the alpha colorcode for disable the layout.
Please try below code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1"
android:layout_marginLeft="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/trans"/>
</RelativeLayout>
Here is output for code:

Linear Layout margin added by default. How to avoid that? Android

I have created 4 buttons in linear layout. This is my xml.
<?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="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button android:id="#+id/button1"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="Account"
/>
<Button android:id="#+id/button2"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="History"
/>
<Button
android:id="#+id/button3"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="Settings"
/>
</LinearLayout>
But above layout adding margins all sides for all 3 buttons. Why is that margins is added by default? How to avoid that?
Try this,it works like you want,
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button android:id="#+id/button1"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="Account"
android:background="#80ffdd10"
/>
<Button android:id="#+id/button2"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#800aad10"
android:text="History"
/>
<Button
android:id="#+id/button3"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="Settings"
android:background="#8c9eff"
/>
</LinearLayout>
These are the shadow by default of Android Button Widget. However If you want to attach one button with another forcefully then add the following properties to each buttons as per needed
android:layout_marginRight="-5dp"
android:layout_marginLeft="-5dp"
Note : Increase or decrease the value (Currently -5dp) of the properties as it suits.
In button, set android:layout_width="0dp" rather than wrap_content
It's because you have given weight attribute to buttons in horizontal LinearLayout, each Button will fill 1/3 of the root layout horizontally.
And if you are using a vertical Linear Layout, you should set android:layout_height="0dp"
Hope this will help you.
You can use custom background, it will solve your problem
android:background="#8c9eff"

Android : 3 elements side by side

I don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>
You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?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="wrap_content"
android:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.
For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />
You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.
You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.
You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you

RelativeLayout views overlapping

Desired layout is a header, with two frames below (to contain fragments later) and buttons fixed at the bottom of the screen:
Header Text
----------------------
frame 1 | frame 2
----------------------
btn 1 btn 2 btn 3
I pretty much have this sorted (xml at end), with one problem... the two frames are overlapping the buttons.
I've done some searching on the issue and found this, but all that does is change my problem from the frames overflowing the buttons to the frames overflowing the header.
I also tried setting the buttons to appear below the frames instead of aligned to the bottom of the parent, but that just pushed them off the screen.
current layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/fdname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:clickable="true"
android:gravity="center"
android:text="No department info has been entered yet"
android:textSize="25dp" />
<TextView
android:id="#+id/fdaddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/fdname"
android:gravity="center"
android:text="address"
android:textSize="15dp" />
<TextView
android:id="#+id/horizontalline"
android:layout_width="match_parent"
android:layout_height="2dip"
android:layout_below="#id/fdaddress"
android:background="#ff23cf"
android:gravity="center_vertical"
android:paddingBottom="2dip"
android:paddingTop="2dip" />
<LinearLayout
android:id="#+id/frames"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalline"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/leftpane"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/verticalline"
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#ff23cf"
android:gravity="center_horizontal"
android:paddingLeft="5dip"
android:paddingRight="5dip" />
<FrameLayout
android:id="#+id/rightpane"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" >
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/EventViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_event_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
<Button
android:id="#+id/MemberViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_member_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
<Button
android:id="#+id/AttendanceViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_atnd_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
</LinearLayout>
</RelativeLayout>
Try to declare the LinearLayout containing your buttons before the LinearLayout containing your frames, preserving the android:layout_alignParentBottom="true" attribute.
Then, to your frames container, add an above constraint:
android:layout_below="#id/horizontalline"
android:layout_above="#id/buttons"
This way should force your frames to be last thing to be drawn on the screen, thus filling the remaining space.
Hope it works!
<LinearLayout
android:id="#+id/frames"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalline"
android:orientation="horizontal" >
Why is your layout_height="match_parent"? You'll need to specify some height, or wrap_content.
http://developer.android.com/resources/samples/ApiDemos/res/layout/relative_layout_1.html
Refer to this for top layer/alignment of you three views.(three text views in example)
Then use linearlayout with orientation horizontal, for your two frames, and same again for buttons
--
so basically to the frames id add alignbottom true , and provide
android:layout_above
android:layout_below
parameters

How do I align views at the bottom of the screen?

Here's my layout code;
<?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="fill_parent">
<TextView android:text="#string/welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
<LinearLayout android:id="#+id/LinearLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom">
<EditText android:id="#+id/EditText"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</EditText>
<Button android:text="#string/label_submit_button"
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
What this looks like is on the left and what I want it to look like is on the right.
The obvious answer is to set the TextView to fill_parent on height, but this causes no room to be left for the button or entry field.
Essentially the issue is that I want the submit button and the text entry to be a fixed height at the bottom and the text view to fill the rest of the space. Similarly, in the horizontal linear layout I want the submit button to wrap its content and for the text entry to fill the rest of the space.
If the first item in a linear layout is told to fill_parent it does exactly that, leaving no room for other items. How do I get an item which is first in a linear layout to fill all space apart from the minimum required by the rest of the items in the layout?
Relative layouts were indeed the answer:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="#string/welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
</TextView>
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:text="#string/label_submit_button"
android:id="#+id/Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<EditText
android:id="#+id/EditText"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/Button"
android:layout_height="wrap_content">
</EditText>
</RelativeLayout>
</RelativeLayout>
The modern way to do this is to have a ConstraintLayout and constrain the bottom of the view to the bottom of the ConstraintLayout with app:layout_constraintBottom_toBottomOf="parent"
The example below creates a FloatingActionButton that will be aligned to the end and the bottom of the screen.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
For reference, I will keep my old answer.
Before the introduction of ConstraintLayout the answer was a relative layout.
If you have a relative layout that fills the whole screen you should be able to use android:layout_alignParentBottom to move the button to the bottom of the screen.
If your views at the bottom are not shown in a relative layout then maybe the layout above it takes all the space. In this case you can put the view, that should be at the bottom, first in your layout file and position the rest of the layout above the views with android:layout_above. This enables the bottom view to take as much space as it needs, and the rest of the layout can fill all the rest of the screen.
In a ScrollView this doesn't work, as the RelativeLayout would then overlap whatever is in the ScrollView at the bottom of the page.
I fixed it using a dynamically stretching FrameLayout :
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<!-- content goes here -->
<!-- stretching frame layout, using layout_weight -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<!-- content fixated to the bottom of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- your bottom content -->
</LinearLayout>
</LinearLayout>
</ScrollView>
You can keep your initial linear layout by nesting the relative layout within the linear layout:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:text="welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:text="submit"
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true">
</Button>
<EditText android:id="#+id/EditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/Button"
android:layout_alignParentBottom="true">
</EditText>
</RelativeLayout>
</LinearLayout>
The answer above (by Janusz) is quite correct, but I personnally don't feel 100% confortable with RelativeLayouts, so I prefer to introduce a 'filler', empty TextView, like this:
<!-- filler -->
<TextView android:layout_height="0dip"
android:layout_width="fill_parent"
android:layout_weight="1" />
before the element that should be at the bottom of the screen.
You can do this with a LinearLayout or a ScrollView, too. Sometimes it is easier to implement than a RelativeLayout. The only thing you need to do is to add the following view before the Views you want to align to the bottom of the screen:
<View
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1" />
This creates an empty view, filling the empty space and pushing the next views to the bottom of the screen.
1. Use ConstraintLayout in your root Layout
And set app:layout_constraintBottom_toBottomOf="parent" to let the Layout on the bottom of the screen:
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
</LinearLayout>
2. Use FrameLayout in your root Layout
Just set android:layout_gravity="bottom" in your layout
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
</LinearLayout>
3. Use LinearLayout in your root Layout (android:orientation="vertical")
(1) Set a layout android:layout_weight="1" on the top of the your Layout
<TextView
android:id="#+id/TextView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="welcome" />
(2) Set the child LinearLayout for android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom"
The main attribute is ndroid:gravity="bottom", let the child View on the bottom of Layout.
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal">
</LinearLayout>
4. Use RelativeLayout in the root Layout
And set android:layout_alignParentBottom="true" to let the Layout on the bottom of the screen
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
</LinearLayout>
Output
This also works.
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_below="#+id/linearLayout3"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_marginTop="20dp"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
</LinearLayout>
Following up on Timores's elegant solution, I have found that the following creates a vertical fill in a vertical LinearLayout and a horizontal fill in a horizontal LinearLayout:
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
You don't even need to nest the second relative layout inside the first one. Simply use the android:layout_alignParentBottom="true" in the Button and EditText.
If you don't wish to make many changes, then you could just put:
android:layout_weight="1"
for the TextView having ID as #+id/TextView i.e
<TextView android:text="#string/welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</TextView>
Creating both header and footer, here is an example:
Layout XML
<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"
android:background="#color/backgroundcolor"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="#FF0000">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#FFFF00">
</RelativeLayout>
</RelativeLayout>
Screenshot
For a case like this, always use RelativeLayouts. A LinearLayout is not intended for such a usage.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Place your layout here -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp" >
<Button
android:id="#+id/setup_macroSavebtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/setup_macroCancelbtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>
Use the below code. Align the button to buttom. It's working.
<?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:orientation="vertical" >
<Button
android:id="#+id/btn_back"
android:layout_width="100dp"
android:layout_height="80dp"
android:text="Back" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.97"
android:gravity="center"
android:text="Payment Page" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"/>
</LinearLayout>
</LinearLayout>
Use android:layout_alignParentBottom="true" in your <RelativeLayout>.
This will definitely help.
In case you have a hierarchy like this:
<ScrollView>
|-- <RelativeLayout>
|-- <LinearLayout>
First, apply android:fillViewport="true" to the ScrollView and then apply android:layout_alignParentBottom="true" to the LinearLayout.
This worked for me perfectly.
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:scrollbars="none"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/linearLayoutHorizontal"
android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>
</ScrollView>
You can just give your top child view (the TextView #+id/TextView) an attribute:
android:layout_weight="1".
This will force all other elements below it to the bottom.
This can be done with a linear layout too.
Just provide Height = 0dp and weight = 1 to the layout above and the one you want in the bottom. Just write height = wrap content and no weight.
It provides wrap content for the layout (the one that contains your edit text and button) and then the one that has weight occupies the rest of the layout.
I discovered this by accident.
I used the solution Janusz posted, but I added padding to the last View since the top part of my layout was a ScrollView.
The ScrollView will be partly hidden as it grows with content. Using android:paddingBottom on the last View helps show all the content in the ScrollView.

Categories

Resources