Android: Using LayoutParams to set width of View object - android-layout

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:
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.

Answer 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.