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.

Solution 1

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:

• Defining custom attrs

• Declaring styleable attributes in Android

Solution 2

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!

Solution 3

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.

Solution 4

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>

View more solutions