How to constrain a View with a TextInputEditText nested inside a TextInputLayout

Question

I am trying to constrain the height of a MaterialButton to be the same as the height of a TextInputEditText by aligning them top to top and bottom to bottom.

However, I cannot achieve that because TextInputEditText is nested inside a TextInputLayout. With this, I can only constrain the MaterialButton with TextInputLayout which gives the following :

I would like not to remove the counter (or any helper text below the TextInputEditText).

Is there any way to constrain the MaterialButton with the nested TextInputEditText (top to top and bottom to bottom) so that they appear with the same height ?

Here is my code:

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/chat_panel"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/finish_panel">

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:id="@+id/chat_text_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/chat_send_button"
        app:endIconDrawable="@drawable/ic_clear"
        app:endIconMode="clear_text"
        app:helperTextEnabled="true"
        app:counterMaxLength="200"
        app:counterEnabled="true"
        app:errorEnabled="true"
        android:hint="Chat">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/chat_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="textNoSuggestions"
            android:maxHeight="200dp"/>

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/chat_send_button"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="@id/chat_text_container"
        app:layout_constraintBottom_toBottomOf="@id/chat_text_container"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/chat_text_container"
        android:minWidth="0dp"
        android:insetBottom="0dp"
        app:icon="@drawable/ic_send"
        app:iconPadding="0dp"
        app:iconGravity="textStart"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

I see you have used android:inputType="textNoSuggestions" for your EditText. Which prevents you to type multiline.

If you do not want to type multiline in your EditText then there won't be any chance for the height of the Button to grow. In this case you can align your Button with the EditText.

For that here is the XML code for your Button.

<com.google.android.material.button.MaterialButton
        android:id="@+id/chat_send_button"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="@id/chat_text"
        app:layout_constraintBottom_toBottomOf="@id/chat_text"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/chat_text_container"
        android:minWidth="0dp"
        android:text="Button"
        android:insetBottom="0dp"
        app:iconPadding="0dp"
        app:icon="@drawable/ic_send"
        app:iconGravity="textStart"
        tools:ignore="NotSibling" />

If you want to type multiline in the EditText then yes, you can have your Button's height grow with the EditText keeping the Button aligned with the EditText.

For that, first you need to remove android:inputType="textNoSuggestions" from EditText.

Then use the following XML.

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/chat_panel"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/finish_panel">

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:id="@+id/chat_text_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/chat_send_button"
        app:endIconDrawable="@drawable/ic_clear"
        app:endIconMode="clear_text"
        app:helperTextEnabled="true"
        app:counterMaxLength="200"
        app:counterEnabled="true"
        app:errorEnabled="true"
        android:hint="Chat">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/chat_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxHeight="200dp"/>

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/chat_send_button"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="27dp"
        app:layout_constraintTop_toTopOf="@id/chat_text_container"
        app:layout_constraintBottom_toBottomOf="@id/chat_text_container"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/chat_text_container"
        android:minWidth="0dp"
        android:text="Button"
        android:insetBottom="0dp"
        app:iconPadding="0dp"
        app:icon="@drawable/ic_send"
        app:iconGravity="textStart"/>
</androidx.constraintlayout.widget.ConstraintLayout>

I have used android:layout_marginBottom="27dp" for the Button so that it offsets the height of the counter text. That worked perfectly fine for my two emulators with landscape and portrait orientation. If you want you can adjust that as per your need.

Answer 2

ConstraintLayout can apply constraints only to direct children. Since the TextInputEditText view you want to constrain the button to is a child of the TextInputLayout and not a direct child of the ConstraintLayout, any attempt to apply constraints between the button and the TextInputEditText fails.

We could set a layout listener on the ConstraintLayout, capture the size and location of the TextInputEditText and modify the button view to set its size and position. This would require special coding to make the changes and is a valid solution.

However, what if we had a reusable type of view that could reference a view embedded in a child ViewGroup and replicate the embedded view's size and placement as a direct child of the ConstraintLayout? We could then constrain the button to this new type of view and get the placement that we want.

Such a custom view could be based upon the View class, but it could also be built upon the ConstraintHelper class which extends View. This class is the basis for other "helper" classes in ConstraintLayout such as Group, GuideLine and others. From my perspective, ConstraintHelper is a good fit for the custom view.

Here is such a custom view:

ViewSurrogate.kt

class ViewSurrogate @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : ConstraintHelper(context, attrs, defStyleAttr) {

    private lateinit var mContainer: ConstraintLayout
    private var mTargetId: Int = NO_ID
    private lateinit var mTargetView: View
    private var mDrawOutline = false
    private var mPaint: Paint? = null

    init {
        context.theme.obtainStyledAttributes(
            attrs, R.styleable.ViewSurrogate, 0, 0
        ).apply {
            try {
                mDrawOutline = getBoolean(R.styleable.ViewSurrogate_drawOutline, false)
                mTargetId = getResourceId(R.styleable.ViewSurrogate_targetView, NO_ID)
            } finally {
                recycle()
            }
        }

        if (mTargetId == NO_ID) throw InvalidTarget("app:targetId was not specified.")
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        if (this::mContainer.isInitialized) return

        mContainer = (parent as ConstraintLayout).also { container ->
            mTargetView = container.findViewById(mTargetId)
                ?: throw InvalidTarget("Can't find target view in layout.")
        }
    }

    override fun draw(canvas: Canvas) {
        super.draw(canvas)
        if (!mDrawOutline) return

        val paint = mPaint
            ?: Paint().apply {
                style = Paint.Style.STROKE
                color = Color.RED
                strokeWidth = 10f
                pathEffect = DashPathEffect(floatArrayOf(15f, 15f, 15f, 15f), 0f)
            }
        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        setDimensionsFromTarget(mTargetView)
    }

    override fun updatePostLayout(container: ConstraintLayout?) {
        super.updatePostLayout(container)

        mTargetView.let { targetView ->
            val pos = getPositionInCommonAncestor(targetView)
            val lp = layoutParams as ViewGroup.MarginLayoutParams
            if (lp.marginStart != pos.x || lp.topMargin != pos.y) {
                lp.setMargins(pos.x, pos.y, 0, 0)
                requestLayout()
            } else if (width != targetView.width || height != targetView.height) {
                requestLayout()
            }
        }
    }

    override fun getBaseline() = mTargetView.baseline 

    private fun getPositionInCommonAncestor(targetView: View): TargetViewOffset {
        var viewY = targetView.y
        var viewX = targetView.x
        var targetAncestor: ViewGroup? = targetView.parent as ViewGroup
        while (targetAncestor != null && targetAncestor != parent) {
            viewY += targetAncestor.y
            viewX += targetAncestor.x
            targetAncestor = targetAncestor.parent as ViewGroup
        }
        if (targetAncestor == null) {
            throw WrongParentException("ViewSurrogate must be a direct child of an ancestor of the target view.")
        }
        return TargetViewOffset(viewX.toInt(), viewY.toInt())
    }

    private fun setDimensionsFromTarget(targetView: View) {
        if (width == targetView.width && height == targetView.height) return
        setMeasuredDimension(targetView.width, targetView.height)
    }

    private data class TargetViewOffset(val x: Int, val y: Int)
    private class WrongParentException(msg: String) : Exception(msg)
    private class InvalidTarget(msg: String) : Exception(msg)
}

Add the following to the layout and constrain the button to the top and bottom of this view:

<[your package name].ViewSurrogate
    android:id="@+id/surrogateView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:drawOutline="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:targetView="@id/chat_text"
    tools:layout_marginTop="359dp" />

drawOutline is a boolean that determines whether the outline of the view is drawn to aid in debugging.

targetView is the id of the view to replicate. Here it is the TextInputEditText.

Positioning of the surrogate view will be accomplished by setting the top and left margins of the surrogate view, so we constrain the view to the top and left of the parent.

The layout editor doesn't completely replicate the Android system's layout processing, so the tools:layout_marginTop is needed to approximate the location of the surrogate view in the Android Studio designer. We would also need to do this if the position of the button were hard-coded in our app.

Here are the styleable definitions:

<resources>
    <declare-styleable name="ViewSurrogate">
        <attr name="drawOutline" format="boolean" />
        <attr name="targetView" format="reference" />
    </declare-styleable>
</resources>    

Here is the layout as it appears in an emulator. The red outline shows the extent of the surrogate view. Notice how the button is centered on the TextInputEditText. (The red outline shows the extent of the surrogate view.)

If we want the button to appear to extend to the top and bottom of the TextInputEditText we would need to set the top and bottom insets to 0dp.

android:insetTop="0dp"  
android:insetBottom="0dp"

So, it will now look like this:

I think that this could be a general solution to reach inside any ViewGroup embedded within a ConstraintLayout to pull out a view for the purpose of applying constraints.

(Lightly tested with ConstraintLayout 2.0.4)

Answer 3

If you want button height as per TextInputEditText The only solution is to set button height dynamically and button text gravity will be centre. Because you can not constraint your child view with the parent container. Also, If you want to change button height as per increase edit text height then also change the button's height in text change listener.