Dynamically setting view width as a percentage of parent layout

Question

I have a simple progress bar view that i want to dynamically change the width as a percentage of the parent layout.

I see there is a set minimumWidth api. But what is the correct number to be passed in? Should I get the parent width and then just calculate the percentage and width of child and pass that as minimumWidth.

Alternatively, is this something achievable with only xml layout code?

Edson Menegatti · Answer 1 · 2016-11-30T15:56:44.390

This is achievable without any code by using weights in a LinearLayout, as follows:

 <LinearLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:weightSum="10"
         android:orientation="horizontal">

     <ProgressBar
         android:layout_widthPercent="0dp"
         android:layout_heightPercent="wrap_content"
         android:weight="1"/>
 </LinearLayout>

And because the parent has a total sum of 10 units and the child will only take 1 of those, the child will actually have 10% of the parent's width.

It is also possible to use the power of the support library through the PercentRelativeLayout. The basic usage is as follows:

 <android.support.percent.PercentRelativeLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

     <ProgressBar
         app:layout_widthPercent="50%"
         app:layout_heightPercent="wrap_content"
         app:layout_marginTopPercent="10%"/>

 </android.support.percent.PercentRelativeLayout>

To add it to your project, you will need to include the percent support library in your project. To do so, include the following line in your build.gradle file

compile 'com.android.support:percent:{lastest_support_library_version}'

score 2 · Accepted Answer · answered Nov 01 '17 at 15:54

Classes from android.support.percent.* package such as PercentRelativeLayout, are currently deprecated

This class was deprecated in API level 26.1.0.
consider using ConstraintLayout and associated layouts instead. The following shows how to replicate the functionality of percentage layouts with a ConstraintLayout. The Guidelines are used to define each percentage break point, and then a Button view is stretched to fill the gap:

Just use ConstraintLayout with GuideLines

Example:

<android.support.constraint.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

 <android.support.constraint.Guideline
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/left_guideline"
     app:layout_constraintGuide_percent=".15"
     android:orientation="vertical"/>

 <android.support.constraint.Guideline
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/right_guideline"
     app:layout_constraintGuide_percent=".85"
     android:orientation="vertical"/>

 <android.support.constraint.Guideline
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/top_guideline"
     app:layout_constraintGuide_percent=".15"
     android:orientation="horizontal"/>

 <android.support.constraint.Guideline
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/bottom_guideline"
     app:layout_constraintGuide_percent=".85"
     android:orientation="horizontal"/>

 <Button
     android:text="Button"
     android:layout_width="0dp"
     android:layout_height="0dp"
     android:id="@+id/button"
     app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
     app:layout_constraintRight_toRightOf="@+id/right_guideline"
     app:layout_constraintTop_toTopOf="@+id/top_guideline"
     app:layout_constraintBottom_toBottomOf="@+id/bottom_guideline" />

</android.support.constraint.ConstraintLayout>

Unfortuntelly this does not work properly if the parent has `layout_width = "wrap_content"`. Do you have any idea how to make a view's width 70% of the parent, so i can use it in a horizontal Recycler View? — Lucas P., Apr 16 '19 at 07:54

score 1 · Answer 3 · answered Nov 30 '16 at 15:23

This sould be done from code, not from xml.

Look at the code snippet:

ProgressBar view_instance = (ProgressBar)findViewById(R.id.nutrition_bar_filled);
LayoutParams params=view_instance.getLayoutParams();
params.width=newOne;
view_instance.setLayoutParams(params);

Now, lets say your xml looks like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <ProgressBar
android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</LinearLayout>

You will use the code above like this:

ProgressBar view_instance = (ProgressBar)findViewById(R.id.nutrition_bar_filled);
LinearLayout.LayoutParams params=(LinearLayout.LayoutParams)view_instance.getLayoutParams();
params.width= yourLinearLayout.getWidth() / 100 * percent;
view_instance.setLayoutParams(params);

Dynamically setting view width as a percentage of parent layout

3 Answers3