CODEWITHSUNDEEP
android-layoutandroidandroid-viewlayoutparams
David
David

Reputation: 1996

Android: Using LayoutParams to set width of View object

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.

Upvotes: 2

Views: 4545

Answers (1)

Sam Judd
Sam Judd

Reputation: 7387

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.

Upvotes: 1

Related Questions