Reputation:

Android percentage width layout

I need to set the width of my view as 50% of the width of the screen and then center this view horizontally while potentially having 1 or more buttons which can appear attached to the left or the right side of the screen.

I'm using a relative layout so that I can place a linear layout with weights to get my 50% centered while placing any buttons on top of that LL attached to the left or right edge of the RL. However this layout is missing the blue middle bar. If I set the middle view layout_weight to 1 I get 3 equal sized bars.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="48dp">

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

        <View
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:background="#FF0000"
            android:layout_weight="1" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:background="#0000FF"
            android:layout_weight="2" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:background="#00FF00"
            android:layout_weight="1" />

    </LinearLayout>

</RelativeLayout>

Upvotes: 10

Answers (4)

QArea

Reputation: 4981

If I understand correctly, you need this:

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

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

        <View
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:background="#FF0000"
            android:layout_weight="1" ></View>

        <View
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:background="#0000FF"
            android:layout_weight="1.5" ></View>

        <View
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:background="#00FF00"
            android:layout_weight="1.5" ></View>

    </LinearLayout>

</RelativeLayout>

Upvotes: -2

Magesh Pandian

Reputation: 9369

Use new percentage support library.

compile 'com.android.support:percent:24.0.0'

Example :

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"

        >

        <View
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF0000"
            app:layout_widthPercent="33%" />

        <View
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:background="#0000FF"
            app:layout_marginLeftPercent="33%"
            app:layout_widthPercent="33%" />

        <View
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00FF00"
            app:layout_marginLeftPercent="66%"
            app:layout_widthPercent="33%" />

    </android.support.percent.PercentRelativeLayout>


</LinearLayout>

For more Info Android Doc

*For Sample & Tutorial * Tutorial1 Tutorial2 Tutorial3

Upvotes: 0

dor506

Reputation: 5404

You can achieve this with the new percent 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="48dp">

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#FF0000"
        app:layout_widthPercent="25%" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:background="#0000FF"
        android:centerHorizontal="true"
        app:layout_marginLeftPercent="25%"
        app:layout_widthPercent="50%" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:alignParentRight="true"
        android:background="#00FF00"
        app:layout_marginLeftPercent="75%"
        app:layout_widthPercent="25%" />

</android.support.percent.PercentRelativeLayout>

Upvotes: 2

Vladimir Mironov

Reputation: 30864

You should set view's width to 0dip

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="48dp">

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

        <View
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:background="#FF0000"
            android:layout_weight="1" />

        <View
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:background="#0000FF"
            android:layout_weight="2" />

        <View
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:background="#00FF00"
            android:layout_weight="1" />

    </LinearLayout>

</RelativeLayout>

Upvotes: 21

Android percentage width layout

Answers (4)

Related Questions