CODEWITHSUNDEEP
androidandroid-layoutlayoutandroid-linearlayoutandroid-relativelayout
Ajith
Ajith

Reputation: 179

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

The attached image contain 3 layouts

  1. Relative layout
  2. Linear layout
  3. 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)

enter image description here

Upvotes: 1

Views: 2094

Answers (3)

Michael Svit
Michael Svit

Reputation: 58

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.

Upvotes: 1

TapanHP
TapanHP

Reputation: 6181

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>

Upvotes: 0

Christlin Panneer
Christlin Panneer

Reputation: 1647

Here is another Way

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

Then you can get the required result.

Upvotes: 0

Related Questions