Android Drawable: Specifying shape width in percent in the XML file?

Question

I'm trying to create a simple Drawable that I want to set as the background for a view (using setBackgroundDrawable). I simply want to divide the background of the drawable into 2 equal rectangles (50% - 50%), the first want filled with black, the second with white:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/back_color_1">
        <shape android:shape="rectangle">
          <solid android:color="#000000" />
        </shape>
    </item>
    <item android:id="@+id/back_color_2">
        <shape android:shape="rectangle">
          <solid android:color="#FFFFFF" />
        </shape>
    </item>
</layer-list>

How can I specify that each shape should have a width of 50% in the drawable XML definition file? Something like android:width="50%".

(I'm working on Android 3.0, but I think it is a general Android question.)

P.S: You can do this in CSS or XAML.

score 13 · Accepted Answer · edited May 23 '17 at 12:17

You can't specify a percentage. You need to specify a Dimension value to it.

android:width is defined here: http://developer.android.com/reference/android/R.attr.html#width :

(emphasis mine)

Must be a dimension value, which is a floating point number appended with a unit such as "14.5sp". Available units are: px (pixels), dp (density-independent pixels), sp (scaled pixels based on preferred font size), in (inches), mm (millimeters).

For a definition of each dimension type, see: http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

You will need to create your own attribute (see styleable) and perform the calculations yourself in onDraw(...).

See these two questions and the links therein for examples:

chris · Answer 2 · 2011-05-19T16:11:16.597

there is no true percentage setting, but you might get close.

it seems like the easiest way to achieve this is to use an image as your background drawable and just do a black and white split image.

the only other way I know to split anything is to use 2 views, each with its own bg color, and each given the same positive value for android:layout_weight attribute (ie. 50/50). they will then split the available space.

hope this helps!

score 2 · Answer 3 · answered Mar 04 '13 at 09:20

android:layout_weight=".20" is best way to implement in percentage

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
    android:id="@+id/logTextBox"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight=".20"
    android:maxLines="500"
    android:scrollbars="vertical"
    android:singleLine="false"
    android:text="@string/logText" >
</TextView>

</LinearLayout>

score 2 · Answer 4 · answered Oct 11 '11 at 14:08

The way I found to do this was by creating my own class inheriting from RelativeLayout, where I override the onMeasure method. At this stage, the height of the view is known, so I fetched the background, and manually set the inset of the items using setLayerInset.

    LayerDrawable bg = (LayerDrawable)getBackground();
    int h = getMeasuredHeight();
    bg.setLayerInset(1, 0, 0, 0, h/2);

This method is a bit cumbersome though. In most cases, the answer provided by chris should be sufficient.

score 0 · Answer 5 · answered Jul 03 '13 at 16:01

The best way as swapnil stated, is to use layout_weight in a LinearLayout. If you're going horizontally, set layout_width to "fill_parent" then set the layout_weight to a percentage that you want. Start with something like below and play around with the layout_width values to get a feel of it (or add more Views just to get a better understanding).

<LinearLayout    
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation = "horizontal" >

    <View
      android:layout_width="fill_parent"
      android:layout_height="30dip"
      android:layout_weight="0.5"
      android:background="#aaffaa" />
    <View
      android:layout_width="fill_parent"
      android:layout_height="30dip"
      android:layout_weight="0.5"
      android:background="#aaaaff" />
</LinearLayout>

Android Drawable: Specifying shape width in percent in the XML file?

5 Answers5

Linked