How to arrange two linear layouts inside a relative layout in android?

Question

The attached image contain 3 layouts

Relative layout
Linear layout
Linear layout

Both the linear layouts are of same size and are overlapped.

All i want to know is how to arrange those two linear layouts inside the relative layout so that Linear layout 1 & Linear layout 2 will have 90% of parent height. Also linear layout 1 must be aligned to the top of relative layout while linear layout 2 to the bottom of relative layout.

Any simple working solution will be appreciated.( I'm a newbie to android studio)

Nesting layouts is bad for performances. Consider overlapping Views, in your RelativeLayout, instead. — Phantômaxx, Jul 17 '16 at 13:54

score 1 · Accepted Answer · edited Jul 17 '16 at 15:23

From the Android documentation:

<android.support.percent.PercentRelativeLayout
         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"
         app:layout_heightPercent="90%"
         android:layout_alignParentTop="true"/>
     <LinearLayout
         android:layout_width="match_parent"
         app:layout_heightPercent="90%"
         android:layout_alignParentBottom="true"/>
 </android.support.percent.PercentRelativeLayout>

The order in which the LinearLayouts will overlap corresponds to the order in which they are defined.

Nice answer almost our answers are same @Svit, try to explain how things work, +1 for you — TapanHP, Jul 17 '16 at 14:05

score 0 · Answer 2 · edited May 23 '17 at 12:14

Nice question, What you can do is use PercentRelativeLayout instead of RelativeLayout so you can adjust that 90% height, and then use this property

android:layout_alignParentTop = true

for your first LinearLayout and

android:layout_alignParentBottom = true

for second RelativeLayout

It will stick your LinearLayouts inside RelativeLayout as you want.

See this questions for how to use PercentRelativeLayout here

Sample Layout here

And If you also want Layering effect as you saw in one of pic use

android:elevation  property on your both `LinearLayout`.

Code taken from another answer by @Svit for full explaination

<android.support.percent.PercentRelativeLayout
         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"
         app:layout_heightPercent="90%"
         android:layout_alignParentTop="true"/>
     <LinearLayout
         android:layout_width="match_parent"
         app:layout_heightPercent="90%"
         android:layout_alignParentBottom="true"/>
 </android.support.percent.PercentRelativeLayout>

score 0 · Answer 3 · answered Jul 17 '16 at 14:01

0

Here is another Way

Set Linear Layout Height to your desired level (fixed)
Specify android:gravity property for both Linear Layouts (1'st Layout Top & 2'nd Layout Bottom.

Then you can get the required result.

answered Jul 17 '16 at 14:01

Christlin Panneer

1,599
2
19
31

but it will cause problem on different screens the aspect ratio wanted will not maintain accurately @Christlin – TapanHP Jul 17 '16 at 14:03
i don't think so, because you will be having different layout files for different screen density. So adjust your height property for each type of screens. Then it will be good. – Christlin Panneer Jul 17 '16 at 14:05
but a long way, not preferable @Christlin – TapanHP Jul 17 '16 at 14:10
okay, no problem, yours will work. I already mentioned that this is another way :) @parmar – Christlin Panneer Jul 17 '16 at 14:12
@ChristlinJoseph Tried it ! But still both linear layouts are aligned at the top. Note : One of the linear layout is a nested one. – Ajith Jul 17 '16 at 14:13
Yes will work but efficiency matters a lot, Although good try @Christlin Welcome to SO – TapanHP Jul 17 '16 at 14:14
try fill_parent for Relative layout height – Christlin Panneer Jul 17 '16 at 14:14

How to arrange two linear layouts inside a relative layout in android?

3 Answers3

Code taken from another answer by @Svit for full explaination