Nine Patch With Constraint Layout

Question

Is it possibile to use 9-patch drawable with constraint layout? I'm trying to render an editable fraction. Two edittext separated by a nine patch drawable that is basically a black line that can expand horizontally:

<android.support.constraint.ConstraintLayout
    android:id="@+id/constraint_content"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/numerator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:hint="@string/x"
        android:inputType="number"
        android:textColorHint="@android:color/transparent"
        android:textSize="24sp"
        mr:layout_constraintBottom_toTopOf="@id/denominator" />

    <EditText
        android:id="@+id/denominator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:hint="@string/x"
        android:inputType="number"
        android:textColorHint="@android:color/transparent"
        android:textSize="24sp"
        mr:layout_constraintBottom_toBottomOf="@id/numerator" />

    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/fraction"
        mr:layout_constraintEnd_toEndOf="@id/denominator"
        mr:layout_constraintStart_toStartOf="@string/numerator" />

</android.support.constraint.ConstraintLayout>

The line is rendered correctly, but it's not stretching itself, when numerator or denominator increase length. The drawable is working fine with "classic" layout (LinearLayout).

Link for 9 patch drawable

EDIT: adding:

mr:layout_constraintWidth_default="percent"
mr:layout_constraintWidth_percent="1"

to View layout seems to work, now I need to center the content...

Answer 1

There is a mistake in one of the constraints of the View used to display your nine-patch drawable:

mr:layout_constraintStart_toStartOf="@string/numerator"

You are trying to constraint the end of the View to a string resource and this actually doesn't throw any errors.

Since you would like this View to expand along with the nominator or denominator (whichever is longer) and your parent ConstraintLayout has android:layout_width set to wrap_content you can constrain the View's horizontal constraints to parent like this:

<View
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@drawable/fraction"
    mr:layout_constraintBottom_toTopOf="@id/denominator"
    mr:layout_constraintEnd_toEndOf="parent"
    mr:layout_constraintStart_toStartOf="parent"
    mr:layout_constraintTop_toBottomOf="@id/numerator" />

Result: