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>

i want to set the textview and imageview in center horizontal position using constraint layout, not vertically. — Kumar, Jan 23 '18 at 13:14
You want to overlap the ImageView and the TextView? It is not clear — Juan Cruz Soler, Jan 23 '18 at 13:14
@JuanCruzSoler left side of the parent i want textview , right side of the textview i want imageview . — Kumar, Jan 23 '18 at 13:22

Juan Cruz Soler · Accepted Answer · 2018-01-24T12:17:58.457

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:

no left side -textview right side-imageview in the same line horizontally so that textview should be center to imageview — Kumar, Jan 23 '18 at 13:27
Just remove this line then `app:layout_constraintLeft_toLeftOf="@+id/title1"` — Juan Cruz Soler, Jan 23 '18 at 13:34
app:layout_constraintLeft_toLeftOf="parent" like this it s der in my code — Kumar, Jan 23 '18 at 13:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163770/discussion-between-kumar-and-juan-cruz-soler). — Kumar, Jan 24 '18 at 07:21

score 2 · Answer 2 · answered Jan 23 '18 at 13:22

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

hi, see my updated Question with image. – Kumar Jan 24 '18 at 10:21 — Kumar, Jan 24 '18 at 10:21

score 1 · Answer 3 · answered Jan 23 '18 at 13:19

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>

imageview size is not increasing its fixed .this is not expected answer. — Kumar, Jan 24 '18 at 06:00
@kumar I just checked the code with increased size of the image and setting up scale type of image of my snippet its perfectly aligned here! no matter what image size is — Rizwan Atta, Jan 24 '18 at 06:32

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

3 Answers3