Android arrange layout with height as percentage

Question

I am very new to android and practicing. I am trying to design a screen. which will contain a background image and a floating container with sliding menus. ( For more details please find the attached image )

My layout consists of a background image, a container with some icons which float at the bottom but with some margin to the bottom ( see attached photo )

As best of my knowledge this can be achieved by arranging a "Relative Layout" at the bottom and place images in it. Is it correct ?

Also I would likes to add a repeating transparent image as the background of the floating div.

Please give me a good advise or point me to a good tutorial

Thanks in advance

enter image description here

NcJie · Accepted Answer · 2013-05-24T10:10:49.583

38

You can use LinearLayout and set the layout_weight as % in xml

As for the repeating background you can use tileMode

Example: Note that the weightSum is set to 100, to indicate the total weight will be 100. Having layout_weight=10 will give it 10% space allocation.

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:layout_gravity="bottom"
    android:weightSum="100">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:background="@drawable/bg"
        android:orientation="horizontal"
        android:tileMode="repeat" >
    </LinearLayout>
    <View 
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />
</LinearLayout>

edited May 24 '13 at 10:10

answered May 24 '13 at 09:34

NcJie

812
7
14

3

you can set `layout_weight=11` it will give 11% height. For its parent we need to set `weightSum=100` as shown in the example. – NcJie May 24 '13 at 09:55
1

@ramesh add layout_gravity="bottom" and layout_marginBottom="20dp" to the root layout of the answer and put it in in FrameLayout. If hardcoded 20dp does not suit you and you really want 5% you can set the marginBottom by calculating the percents in code. – Yaroslav Mytkalyk May 24 '13 at 10:08
The general idea is correct but would `weight=10` mean that it would take 100 - 10 % of height (=90%)? The more weight the less space they have, right? – Bakhshi May 10 '17 at 02:03
1

@Bakhshi notice that there's `weightSum` in the parent layout. The height will therefore be `/ = 10/100 = 10%`, not 90%. If `weigthSum` is not specified, then `` values will be normalized to 1 with its sibling views – NcJie May 10 '17 at 03:51

score 4 · Answer 2 · answered Aug 24 '15 at 07:10

You can achieve this with the new percent support library: https://developer.android.com/tools/support-library/features.html#percent

By doing something like this:

<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">

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        app:layout_heightPercent="11%"
        app:layout_widthPercent="100%" />

</android.support.percent.PercentRelativeLayout>

score 1 · Answer 3 · answered May 24 '13 at 09:36

1

if you want to divide height in percentage then you need a linear layout with orientation horizontal and add layout_weight for each item.

linear layout guide

answered May 24 '13 at 09:36

Iftikar Urrhman Khan

1,131
1
10
21

score 0 · Answer 4 · edited May 23 '17 at 12:02

0

For your requirement any Layout is ok. You can achieve this by Linear layout too. If I understand your requirement right, then check this discussion.

How to make android app's background image repeat

edited May 23 '17 at 12:02

Community

1
1

answered May 24 '13 at 09:37

Amrit

2,295
4
25
42

score 0 · Answer 5 · answered Jan 09 '14 at 13:21

<view android:layout_width="wrap_content"
      class="net.zel.percentage.PercentageButton"
      android:id="@+id/button"
      android:layout_height="wrap_content"

      customView:percentage_width="50"
      customView:percentage_height="50"

      />

so you can add the desired attributes in a library
https://github.com/metrolog3005/percentage_view

Android arrange layout with height as percentage

5 Answers5