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

Answer 1

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>

Answer 2

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>

Answer 3

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