CODEWITHSUNDEEP
androidandroid-constraintlayout
RuAware
RuAware

Reputation: 969

constraintWidth_percent does not calculate correctly

This layout will display a View with a color and another with another color.

When layout_constraintWidth_percent = 1 the views are the same width. When I set it between 0.92 <> 1 the foreground view becomes bigger then the background.

Can anyone solve this? I need the foreground to be x percentage of the background

<?xml version="1.0" encoding="utf-8"?>
<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:paddingTop="15dp"
    android:paddingBottom="15dp"
    >

  <View
      android:id="@+id/background"
      android:layout_width="match_parent"
      android:layout_height="100dp"
      android:layout_marginEnd="16dp"
      android:layout_marginStart="16dp"
      android:background="@color/colorPrimary"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      />

  <View
      android:id="@+id/foreground"
      android:layout_width="0dp"
      android:layout_height="80dp"
      android:background="@color/colorAccent"
      app:layout_constraintWidth_percent="0.94"
      app:layout_constraintHorizontal_bias="0"
      app:layout_constraintBottom_toBottomOf="@id/background"
      app:layout_constraintLeft_toLeftOf="@id/background"
      app:layout_constraintRight_toRightOf="@id/background"
      app:layout_constraintTop_toTopOf="@id/background"
      />
</android.support.constraint.ConstraintLayout>

enter image description here

Upvotes: 3

Views: 1180

Answers (3)

Tyler V
Tyler V

Reputation: 10910

Remove the start and end margins of the background. If you want left and right margins, put them on the parent ConstraintLayout instead. As it is now you have margins on background but not on foreground.

Also set the background width to 0dp (the same as foreground). This way the background will be the full width of the parent ConstraintLayout (which can itself apply the margins you want) and the foreground will be the specified percentage of the background. Also set the horizontal bias of the foreground to 0.5 if you want it to be centered.

Like this (here's what this layout looks like)

<?xml version="1.0" encoding="utf-8"?>
<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:paddingTop="15dp"
    android:paddingBottom="15dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    >

  <View
      android:id="@+id/background"
      android:layout_width="0dp"
      android:layout_height="100dp"
      android:background="@color/colorPrimary"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      />

  <View
      android:id="@+id/foreground"
      android:layout_width="0dp"
      android:layout_height="80dp"
      android:background="@color/colorAccent"
      app:layout_constraintWidth_percent="0.94"
      app:layout_constraintHorizontal_bias="0.5"
      app:layout_constraintBottom_toBottomOf="@id/background"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="@id/background"
      />
</android.support.constraint.ConstraintLayout>

Upvotes: 3

Pawel Laskowski
Pawel Laskowski

Reputation: 6316

The app:layout_constraintWidth_percent attribute is calculated according to the parent ConstraintLayout's dimension and not the horizontal constraints of the View. So you need to wrap the foreground in another ConstraintLayout like this (which is a bit ugly because of the nested layout):

<?xml version="1.0" encoding="utf-8"?>
<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:paddingTop="15dp"
    android:paddingBottom="15dp">

    <View
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/background"
        app:layout_constraintLeft_toLeftOf="@id/background"
        app:layout_constraintRight_toRightOf="@id/background"
        app:layout_constraintTop_toTopOf="@id/background">

        <View
            android:id="@+id/foreground"
            android:layout_width="0dp"
            android:layout_height="80dp"
            android:background="@color/colorAccent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintWidth_percent="0.94"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

Keep in mind that using app:layout_constraintWidth_percent and margins on a View at the same time can potentially lead to some problems because the margins aren't taken into account for the width percentage.

You can also consider removing the margins from the background and possibly adding them to root ConstraintLayout as padding and I think this would help avoid having a nested layout:

<?xml version="1.0" encoding="utf-8"?>
<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:paddingTop="15dp"
    android:paddingBottom="15dp"
    android:paddingStart="16dp"
    android:paddingEnd="16dp">

    <View
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/foreground"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@color/colorAccent"
        app:layout_constraintWidth_percent="0.94"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toBottomOf="@id/background"
        app:layout_constraintLeft_toLeftOf="@id/background"
        app:layout_constraintRight_toRightOf="@id/background"
        app:layout_constraintTop_toTopOf="@id/background"/>
</android.support.constraint.ConstraintLayout>

Upvotes: 0

Benjamin
Benjamin

Reputation: 7368

As stated from the doc, the percentage is relative to the parent:

When a dimension is set to MATCH_CONSTRAINT, the default behavior is to have the resulting size take all the available space. Several additional modifiers are available:

  • layout_constraintWidth_min and layout_constraintHeight_min : will set the minimum size for this dimension
  • layout_constraintWidth_max and layout_constraintHeight_max : will set the maximum size for this dimension
  • layout_constraintWidth_percent and layout_constraintHeight_percent : will set the size of this dimension as a percentage of the parent

Upvotes: 0

Related Questions