How to setup the Layout files in Android for the text views in percentage terms?

Question

I am starting with the android development and wondering how to make the widgets fit accurately on my android canvas. Here is the picture. My aim is to fill the widget based in percentage terms.

For example FIRST FIRST one widget - Text View should have width and height of 50%. The next widget - Text View should have width and height of 50%.

The next half of the screen - the right hand side should have the three text views - Each text view should have 1/3 height and the height should be 50%. How can I do so?

At the bottom, I want to place slider. Here is the screen shot of the UI design. enter image description here

Here was my poor attempt.

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.tune2wizard.modernartui.MainActivity" >

    <TextView
        android:id="@+id/textViewLabel"
        android:layout_width="fill_parent"
        android:layout_height="25dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_gravity="top|start"
        android:background="#ff0000ff"
        android:textColor="#ffffffff"
        android:text="Modern Art UI" />

    <LinearLayout
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_below="@+id/name">

     <TextView
        android:id="@+id/textFirstFirst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000ff"
        android:textColor="#ffffffff"
        android:text=" HELLO FIRST FIRST" />

    </LinearLayout>
</RelativeLayout>

If I remember correctly, you'll need to use `fill_parent` (rather `match_parent` since it was renamed in API 8), and use `android:layout_weight`. — Reed, Jun 06 '15 at 16:13

score 1 · Answer 1 · edited May 23 '17 at 10:27

1

Read about "layout_weight" parameter and you'll got it. I have started from Coursera too, good luck)

And for borders check "layout_margin"...

edited May 23 '17 at 10:27

Community

1
1

answered Jun 06 '15 at 16:16

sttimchenko

401
3
15

score 1 · Answer 2 · answered Jun 06 '15 at 16:17

You have to put all your child views in a LinearLayout instead of a RelativeLayout. So you can use the weight parameter to fit the view in accordance with your specifications.

For example, to force a View to fit the half of the screen you tell its width to 0 and its weight to 1, and the put another view to the side with width 0 and weght 1.

score 1 · Answer 3 · answered Jun 06 '15 at 16:32

You can use nested linearlayout with "weight", eg:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <View
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"/>

    <LinearLayout android:orientation="horizontal"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_above="@+id/slider">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".5"
                android:background="@android:color/holo_blue_light"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".5"
                android:background="@android:color/holo_purple"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".33"
                android:background="@android:color/holo_red_dark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".33"
                android:background="@android:color/white"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".33"
                android:background="@android:color/holo_blue_dark"/>

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

score 0 · Answer 4 · answered Jun 06 '15 at 16:17

Something like this would do the trick :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


  <LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="#9b59b6"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#95a5a6" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#f39c12" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#9b59b6" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#fffff" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#e74c3c" />

  </LinearLayout>
</LinearLayout>

How to setup the Layout files in Android for the text views in percentage terms?

4 Answers4