Develop Reference

Align a LinearLayout at the bottom of a RelativeLayout

I have these nested layouts and i want to put a LinearLayout anchored to the bottom (internally) of the first RelativeLayout but i don't know how to do it. Can someone help me? I want something like this: https://imgur.com/eCCYS8Q
<RelativeLayout 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:background="#fff"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.65"
android:background="#drawable/background_gradient">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.35">
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

To make layout_weight work properly set android:layout_height="0dp" for both relative layouts
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.65"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_marginTop="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_height="match_parent"
android:background="#color/colorAccent">
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.35"
android:background="#color/colorPrimaryDark">
</RelativeLayout>
</LinearLayout>
change 10dp to whatever suits you.
I set the colors just to distinguish the layouts

If you want to align a view to the bottom of a relative layout you need to use
android:layout_alignParentBottom="true"
in the view that is going to be stuck at the bottom of the relative

Align LinearLayout to the bottom using id.
take the id of relative layout and then align LinearLayout to the bottom at the end of relative layout id.

Since you need weighttoo in your UI so This will work for you
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.65"
android:background="#drawable/background_gradient">
<LinearLayout
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content">
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.35">
</RelativeLayout>
</LinearLayout>

Android Layout with height in percent

I want to make layout like that:
But I don't know how to make panel 2 and 3 filling remaining space (after adding fixed size panel 1) in 50:50 ratio. There must be something I am missing or just don't know about Android layout, but what is it?
I forgot to mention that I want to use Constraint Layout for these panels. I use Android Studio.

Use a LinearLayout and layout_weight
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<View
android:layout_width="match_parent"
android:background="#color/blue"
android:layout_height="16dp" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/black"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/red"/>
</LinearLayout>
The Views can be changed to ConstraintLayouts

<?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">
<RelativeLayout
android:id="#+id/panel1Layout"
android:layout_width="match_parent"
android:layout_height="100dp" />
<LinearLayout
android:id="#+id/otherPanelContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/panel1Layout"
android:orientation="vertical"
android:weightSum="2">
<RelativeLayout
android:id="#+id/panel2Layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RelativeLayout
android:id="#+id/panel3Layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

How to set the height of a child view of a relative layout as a percentage of the total screen height

I have a main layout that I make relative so I can set a view to align at the bottom of the layout. The problem is that I want to set the width of the view as a percentage using layout gravity, but I am unable to do this as relative layouts do not support layout gravity.
How can I set the height of a child view of a relative layout as a percentage of the total screen height?
edit
I already tried using linear layout, but I cannot use android:layout_alignParentBottom="true" with a linear layout. The whole point is that the view needs to be at the bottom of the screen, but with the height as a percentage which I can't do with lay out gravity. It's a catch 22. What is the solution? Resort to programmatic settings?
<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:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
tools:context=".MainActivity"
android:id="#+id/activity_main"
android:orientation="vertical">
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<View android:id="#+id/rectangle_at_the_bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#00FFFF"
android:layout_alignParentBottom="true" />
</RelativeLayout>

Use LinearLayout instead of RelativeLayout and assign weights as required.

Please Check the following Layout File as I created one in my Screen:
<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:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<!-- The view I want to set the height as a percentage -->
<View
android:id="#+id/rectangle_at_the_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#00FFFF" />
<!-- My list view -->
</RelativeLayout>

Replace
<View android:id="#+id/rectangle_at_the_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#00FFFF"
android:layout_alignParentBottom="true"/>
with
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/listView1"
android:orientation="vertical"
android:weightSum="1">
<View android:id="#+id/rectangle_at_the_top"
android:layout_width="match_parent"
android:background="#00FFFF"
android:layout_height="0dp"
android:layout_weight="0.5" />
</LinearLayout>
Here, I have assumed you want to fill 50% of the remaining space, and hence put layout_weight as 0.5. You may replace it with your required percentage.

I figured out the solution on my own.
<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:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
tools:context=".MainActivity"
android:id="#+id/activity_main"
android:orientation="vertical">
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_alignParentBottom="true"
android:layout_above="#id/listView1">
<View android:id="#+id/rectangle_at_the_bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FFFF" />
</LinearLayout>
</LinearLayout>

Put elements between layouts [ANDROID]

I am doing an user interface in Android.
My idea is divide this interface in three equals parts (this is easy, three layouts with weight), but I want to put a images in interesctions of these layouts.
For example an image that overlapes some space in layout1 and layout2, and the same in 2 and 3.
How can do this? My code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1.0">
<LinearLayout
android:id="#+id/first"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33">
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33"></LinearLayout>
<LinearLayout
android:id="#+id/third"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33"></LinearLayout>
</LinearLayout>
And my idea: Android: Placing ImageView on overlap between layouts
Thanks

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="6.0" >
<LinearLayout
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="6.0" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:orientation="vertical" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/firstDividerLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.0" >
<ImageView
android:id="#+id/firstDividerImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/secondDividerLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.0" >
<ImageView
android:id="#+id/secondDividerImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0" >
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
Note that I wrapped your original LinearLayout in RelativeLayout and then I added another LinearLayout with 'dividers'. Dividers size is set by weights precisely so that it overlays your sections in the center.
This is the result (if you set red background for your 'second' layout):

Three options:
Make the view in between also percent. i. e. Each of your
LinearLayouts gets a weight of 0.30 and your views in between get a
weight of 0.05
Put the view on top of your LinearLayout 2 and 3 (not exactly same
height of each of them then)
Do it programmatically, in code set the height of each of them.

How do I rearrange my linear layout with weights?

I am currently using a linear layout structure that looks as follows:
The associated xml code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/altercolor2"
android:layout_gravity="top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="true">
<LinearLayout
android:id="#+id/columnOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".53"
android:orientation="vertical">
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".47"
android:orientation="vertical">
<include
android:id="#+id/second_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/second_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="top" />
<include
android:id="#+id/third_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/third_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</LinearLayout>
</LinearLayout>
</com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView>
However, I would like to rearrange that so that it looks like:
Is there a way I can rearrange the same with linearlayout? or do I have to use some other form of layout like relativelayout. I am pretty confused about the same. Also, would like to include the headers with the containers(the include code), is there a way I can easily achieve this?
Thanks!
After altering a code a bit, i had a little success moving the second header and second layout on top, but the first header is next to first layout instead on top, and same for third.Is there a way to fix it? I have attached the image here:
and the code is as follows:
<com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/altercolor2"
android:layout_gravity="top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:baselineAligned="true">
<LinearLayout
android:id="#+id/columnOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/second_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/item_header" />
<LinearLayout
android:id="#+id/second_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="true">
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
<include
android:id="#+id/third_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/third_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:orientation="vertical" />
</LinearLayout>
</LinearLayout>
</com.handmark.pulltorefresh.library.PullToRefreshLoadMoreScrollView>

Something like this should get you close to what you want. Use the same amount of weight for the two Views to take up equal amounts of space. This is obviously pseudocode for the layout because it seems you know the properties.
<LinearLayout
android:orientation="vertical"
...>
<SecondView
width="match_parent"
height="wrap_content"
.../>
<LinearLayout
width="match_parent"
height="wrap_content"
...>
<LinearLayout
width="0dp"
height="wrap_content"
layout_weight="1"
orientation="vertical">
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
</LinearLayout>
<LinearLayout
width="0dp"
height="wrap_content"
layout_weight="1"
orientation="vertical">
<include
android:id="#+id/third_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/third_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:orientation="vertical" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
When you use weight in a horizontal LinearLayout your width should be "0dp" and in a vertical LinearLayout your height should be "0dp".
Now wrap these
<include
android:id="#+id/first_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
layout="#layout/item_dashboard_header" />
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
in a vertical LinearLayout as I have above with ThirdView and FirstView. In whatever order you need them.

Use a RelativeLayout and it's really easy -
Just use Android:Layout_AlignToRightOf="#id/LeftView"
and Android:Layout_AlignBelow="#id/TopView" for the various views.
Ie: Your xmxl for your second pic should be:
<RelativeLayout
android:id="#+id/Organize"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout //or Whatever type of view you want
android:id="#+id/Second"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<include.../>
</LinearLayout>
<LinearLayout //or Whatever type of view you want
android:id="#+id/First"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/Second">
<include.../>
</LinearLayout>
<LinearLayout //or Whatever type of view you want
android:id="#+id/Third"
androidlayout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/Second"
android:layout_ToRightOf="#id/First>
<include.../>
</LinearLayout>
</RelativeLayout>
In your first pic, and your original MXML, you have created a LinearLayout and set it to horizontal (left to right) and then put a second LinearLayout after (to the right of) it. Inside that second one, you have populated it with two items, that get distributed top to bottom. Using RelativeLayout is personal preference, but it makes controlling where you want things to appear on the screen a little more straightforward.