CODEWITHSUNDEEP
androidtextviewandroid-constraintlayout
Anton Makov
Anton Makov

Reputation: 845

Textviews alignment in ConstraintLayout

I'm attempting to create a simple layout which will contain an imageview (it will be centered in the layout) and 3 textviews (which will centered but aligned to the left of the imageview). Currently I accomplished to create the layout as I wanted except for the alignment of the textviews (they are basically centered to the layout rather being aligned to the left). I tried to remove the constraint 

app:layout_constraintLeft_toLeftOf="parent"

It didn't helped and created a new issue which is creating too big space between the imageview and the textviews.

This is my layout 

    <?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"
    xmlns:tools="http://schemas.android.com/tools">


    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item 1"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textview2"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Production date:"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/textview3"
        app:layout_constraintTop_toBottomOf="@+id/textview1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="Item price"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        />


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"
        android:layout_marginLeft="16dp" />

</android.support.constraint.ConstraintLayout>

This is will make the following layout output

Upvotes: 0

Views: 99

Answers (1)

Nikos Hidalgo
Nikos Hidalgo

Reputation: 3756

I understand that you want to centre all views vertically, and have the text on the right of the imageview. If so, try this:

EDIT - added new layout based on your comment

  <?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"
    xmlns:tools="http://schemas.android.com/tools">


    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Item 1"
        app:layout_constraintBottom_toTopOf="@+id/textview2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2"
        app:layout_constraintVertical_chainStyle="spread" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Production date:"
        app:layout_constraintBottom_toTopOf="@+id/textview3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/textview1" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Item price"
        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@id/textview2" />


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"
        android:layout_marginLeft="16dp" />

</android.support.constraint.ConstraintLayout>

Upvotes: 1

Related Questions