wbk727
wbk727

Reputation: 8408

TextView in ConstraintLayout (for MaterialCardView) not in vertical centre

I'm trying to vertically align my TextView to the centre using constraints within my MaterialCardView but it won't move at all for some reason. Does anyone know what's causing this problem to occur? Do constraints need to be used at all to achieve this? The affected component is the MaterialCardView with a white border. The word 'Information' + the drawable don't seem to be exactly in the vertical centre for some reason. It looks like there is a bit more space above the text view than below it for some strange reason (indicated by the orange line).

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
    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="wrap_content"
    android:id="@+id/myCardViewA"
    app:cardUseCompatPadding="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/myConstraintLayoutA"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp">

        <ImageButton
            android:id="@+id/myImageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_chevron_down"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/myTextViewTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            app:layout_constrainedWidth="true"
            app:layout_constraintStart_toEndOf="@+id/myImageButton"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            android:text=""
            android:textAppearance="?android:attr/textAppearanceMedium"
            />

        <TextView
            android:id="@+id/myTextViewSubtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            app:layout_constrainedWidth="true"
            app:layout_constraintStart_toEndOf="@+id/myImageButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/myTextViewTitle"
            app:layout_constraintHorizontal_bias="0.0"
            android:text=""
            android:textAppearance="?android:attr/textAppearanceSmall"
            />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/myButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Button"
            android:textAllCaps="false"
            android:padding="12dp"
            app:layout_constraintTop_toBottomOf="@+id/myTextViewSubtitle"
            app:layout_constraintBottom_toTopOf="@+id/myCardViewB"
            app:layout_constraintStart_toEndOf="@+id/myImageButton"
            app:layout_constraintHorizontal_bias="0.0" />

        <com.google.android.material.card.MaterialCardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/myCardViewB"
            android:clickable="false"
            android:focusable="false"
            app:cardUseCompatPadding="true"
            app:cardBackgroundColor="@android:color/transparent"
            app:contentPadding="12dp"
            app:cardElevation="0dp"
            app:layout_constraintTop_toBottomOf="@+id/myButton"
            app:layout_constraintStart_toEndOf="@+id/myImageButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/myTextViewDescription"
            app:layout_constraintHorizontal_bias="0.0">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/myConstraintLayoutB"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/myTextViewinCardView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintVertical_bias="0.0"
                    android:text=""
                    style="@android:style/TextAppearance.Medium"/>
            </androidx.constraintlayout.widget.ConstraintLayout>
        </com.google.android.material.card.MaterialCardView>

        <TextView
            android:id="@+id/myTextViewDescription"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            app:layout_constrainedWidth="true"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/myTextViewTitle"
            app:layout_constraintTop_toBottomOf="@+id/myCardViewB"
            app:layout_constraintEnd_toEndOf="parent"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

Kotlin

class MyFragment : androidx.fragment.app.Fragment() {
    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.my_fragment, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        val v = view

        val imageGetter = Html.ImageGetter { name ->
            val resId = when (name) {
                "door" -> { R.drawable.ic_door }
                else -> { throw IllegalArgumentException("what is $name") }
            }

            ResourcesCompat.getDrawable(resources, resId, requireActivity().theme)?.apply {
                setBounds(0, 0, intrinsicWidth, intrinsicHeight)
            }
        }

        val info = getString(R.string.information)
        val htmlTxt = "<img src=\"door\"/> $info
        val myTxt = Html.fromHtml(htmlTxt, Html.FROM_HTML_MODE_COMPACT, imageGetter, null)

        super.onActivityCreated(savedInstanceState)
    }
}

Upvotes: 0

Views: 733

Answers (1)

Mohammad Khair
Mohammad Khair

Reputation: 476

Just remove app:layout_constraintHorizontal_bias="0.0"

The maximum is app:layout_constraintHorizontal_bias="1.0"

When you set "0.0" that mean you want it to the left and when it is "1.0" that mean it is to the right.

Upvotes: 1

Related Questions