Android Constraint Layout Center Aligning Horizontally With Textview and Imageview Not Working

Question

i want my textview and imageview like above mentioned image.

1.I want to set the Textview and Imageview Horizontally in single line using constraint layout.

2.Textview is not coming to middle(center) of the Imageview.(left and right position)

3.Also layout gravity is not working to make textview center,due to Cosntraint layout

4.Help me to achieve this.

Thanks in advance.

  <android.support.v7.widget.CardView
            android:id="@+id/cv2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:cardCornerRadius="4dp"
            app:layout_constraintTop_toBottomOf="@+id/cv1">

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

                <TextView
                    android:id="@+id/title1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:paddingLeft="10dp"
                    android:text="Hero"
                    android:textColor="@color/colorPrimary"
                    android:textSize="16dp"
                    android:textStyle="bold"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toLeftOf="@+id/display_pic"
                    />


                <ImageView
                    android:id="@+id/display_pic"
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:layout_alignParentEnd="true"
                    android:layout_margin="16dp"
                    android:adjustViewBounds="false"
                    android:scaleType="centerCrop"
                    app:layout_constraintLeft_toLeftOf="@+id/title1"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:srcCompat="@android:color/holo_red_light" />


            </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

Solution 1

If you want the ImageView in the right side of the parent remove this attribute:

app:layout_constraintLeft_toLeftOf="@+id/title1"

And if you want to align vertically the TextView add these attributes:

app:layout_constraintTop_toTopOf="@id/display_pic"
app:layout_constraintBottom_toBottomOf="@id/display_pic"

The xml with changes:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android:id="@+id/cv2"
    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:layout_gravity="center"
    app:cardCornerRadius="4dp"
    app:layout_constraintTop_toBottomOf="@+id/cv1">

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

        <TextView
            android:id="@+id/title1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:text="Hero"
            android:textColor="@color/colorPrimary"
            android:textSize="16dp"
            android:textStyle="bold"
            app:layout_constraintTop_toTopOf="@id/display_pic"
            app:layout_constraintBottom_toBottomOf="@id/display_pic"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/display_pic"/>


        <ImageView
            android:id="@+id/display_pic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:color/holo_red_light"/>

    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

Result:

Solution 2

<?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">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hero"
        android:textColor="@color/colorPrimary"
        android:textSize="16dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2" />


</android.support.constraint.ConstraintLayout>

With above code you can keep textview in the center of image view. To position the image view, adjust vertical and horizonrtal bias. Hope this helps.

Solution 3

I guess this is the one you want! see the image and comment

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="@+id/textView2"
            app:layout_constraintEnd_toEndOf="@+id/textView2"
            app:layout_constraintTop_toTopOf="@+id/textView2"
            app:srcCompat="@drawable/ic_favorite_border_black_24dp"
            tools:ignore="VectorDrawableCompat" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imageView2"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="8dp" />


    </android.support.constraint.ConstraintLayout>


</android.support.v7.widget.CardView>