Android: Using LayoutParams to set width of View object

Question

I have a UI element that I am working with in my Android app that has a custom width. The UI element essentially is a block with two green circles - one circle on the left of the block, and the other circle on the right of the block.

I want to be able to set the width of the whole UI element programmatically. The circles should always have a constant size, and then the block sitting in the middle should size itself to fill up the rest of the space.

Here is what I currently have:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <View
        android:background="@drawable/green_circle"
        android:id="@+id/left_green_circle"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
    />

    <View
        android:background="@drawable/blue_rectangle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal" 
    />

    <View
        android:background="@drawable/green_circle"
        android:id="@+id/right_green_circle"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
    />

</LinearLayout>

I then set the layout parameters of the View in code like this:

int layoutLeft = block_x_position - green_circle_width;
int layoutWidth = block_width + (green_circle_width * 2);

RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(layoutWidth, block_height);
layoutParams.setMargins(layoutLeft, block_y_position, 0, 0);
this.setLayoutParams(layoutParams);

this.requestLayout();

I am using a RelativeLayout in the code above because the parent of this whole View element is a RelativeLayout. Unfortunately, I am not getting the results that I would expect. My "block_width" variable is "40dp", and my "green_circle_width" variable is "20dp". Here is what I am getting:

enter image description here

I have tried using "wrap_content" instead of "match_parent" in my View XML, but that doesn't have any affect at all. Any idea why my block is getting extended past the width that I would like it to be extended?

Thanks for any help.

how about some padding to the right? – Mathew Kurian Dec 29 '11 at 20:39 — Mathew Kurian, Dec 29 '11 at 20:39

score 1 · Answer 1 · answered Dec 29 '11 at 21:39

1

You are seeing cut off circles because (I'd imagine) the width of the green circle images (jpg or png) is greater than 20dp. If you want to scale the green circles use an imageView and set the scaleType attribute.

Otherwise you're getting exactly what you want. By forcing the circle views to be 20dp, you're creating a lot of extra space for the block to fill up. Set the circle width correctly or use a scaleType and it will work.

As an aside, you probably shouldn't use match_parent as the width of the block (which implies it will take up the whole width, including the space that is supposed to be occupied by the circles). Instead use some arbitrary width (0dp for example) and set the layout_weight to 1.

answered Dec 29 '11 at 21:39

Sam Judd

7,317
1
38
38

I'm more worried about the extra width I am seeing in the rectangular block than the fact that the circles are cut off. The circles are being cut off simply because the rectangular block is pushing them off the boundaries of the measured width. I simply want the blue block to take up all the space the green circles don't take up. – David Dec 29 '11 at 21:56
Sorry, one more comment: The green circles aren't images. They are separately defined XML drawable shapes, defined as such: So I define the shape independently, and then I use that shape in the XML I posted previously, and I give it a size there. – David Dec 29 '11 at 22:02
Ahh got it, thanks for the correction. You don't want to set all three views to have layout weight of 1, that implies that you want them all to be of equal width. Just set the block to layout_weight of 1, and the circles to be whatever size with no weight. Try that (and setting the block width to something other than fill_parent). – Sam Judd Dec 30 '11 at 01:27

Android: Using LayoutParams to set width of View object

1 Answers1