Reputation: 1217

Constraint layout not aligning textview

i am using contraint layout to align my textview in each corner of the screen but it looks like it is not working. the text on the right size of the screen gets align according to text length on the left size. take a look at the attach pic. text on the right is not properly align. for some reason there are a few spaces off. how can fix that?

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


    <TextView
        android:id="@+id/payout_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:maxLines="1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black"
        android:text="@string/payout_label"
        app:layout_constraintBottom_toTopOf="@+id/income_icon"/>


    <ImageView
        android:id="@+id/income_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="30dp"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="-50dp"
        android:padding="1dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_income"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="16dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black"
        android:text="Salary"
        app:layout_constraintTop_toTopOf="@+id/income_icon"
        app:layout_constraintStart_toEndOf="@+id/income_icon"
        />

    <TextView
        android:id="@+id/income_amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$0.00"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/green"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.91"
        app:layout_constraintStart_toEndOf="@+id/category"
        app:layout_constraintTop_toTopOf="@+id/income_icon" />

    <TextView
        android:id="@+id/frequency"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="-5dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@color/grey"
        android:text="Monthly"
        app:layout_constraintStart_toEndOf="@+id/income_icon"
        app:layout_constraintBottom_toBottomOf="@+id/income_icon" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pending"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:textColor="@color/grey"
        app:layout_constraintBottom_toBottomOf="@+id/income_icon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.91"
        app:layout_constraintStart_toEndOf="@+id/frequency" />
</android.support.constraint.ConstraintLayout>

Upvotes: 1

Answers (4)

Kourosh

Reputation: 2299

your mistakes are these - you must remove these

this line in income_amount

app:layout_constraintStart_toEndOf="@+id/category"

this line in status

app:layout_constraintStart_toEndOf="@+id/frequency"

this is correct design

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


  <TextView
    android:id="@+id/payout_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="12dp"
    android:maxLines="1"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/black"
    android:text="payout_label"
    app:layout_constraintBottom_toTopOf="@+id/income_icon"/>


  <ImageView
    android:id="@+id/income_icon"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_marginTop="30dp"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="-50dp"
    android:padding="1dp"
    android:scaleType="centerCrop"
    android:src="@drawable/leak_canary_icon"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintVertical_chainStyle="packed" />

  <TextView
    android:id="@+id/category"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="8dp"
    android:text="Salary"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/black"
    app:layout_constraintEnd_toStartOf="@+id/income_amount"
    app:layout_constraintStart_toEndOf="@+id/income_icon"
    app:layout_constraintTop_toTopOf="@+id/income_icon"/>

  <TextView
    android:id="@+id/income_amount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="$0.00"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/green"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/income_icon"/>

  <TextView
    android:id="@+id/frequency"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-5dp"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="8dp"
    android:text="Monthly"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:textColor="@color/grey"
    app:layout_constraintBottom_toBottomOf="@+id/income_icon"
    app:layout_constraintEnd_toStartOf="@+id/status"
    app:layout_constraintStart_toEndOf="@+id/income_icon"/>

  <TextView
    android:id="@+id/status"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="Pending"
    android:textAppearance="@style/TextAppearance.AppCompat.Body2"
    android:textColor="@color/grey"
    app:layout_constraintBottom_toBottomOf="@+id/income_icon"
    app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>

Upvotes: 0

Mehul Kabaria

Reputation: 6632

Design your layout like below.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="@dimen/_5sdp">


    <TextView
        android:id="@+id/payout_date"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_5sdp"
        android:maxLines="1"
        android:text="payout_label"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/color_black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <ImageView
        android:id="@+id/income_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="@dimen/_5sdp"
        android:padding="1dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_inbox_active"
        app:layout_constraintLeft_toLeftOf="@+id/payout_date"
        app:layout_constraintTop_toBottomOf="@+id/payout_date"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="30dp" />

    <TextView
        android:id="@+id/category"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Salary"
        android:layout_marginRight="@dimen/_5sdp"
        android:layout_marginStart="@dimen/_5sdp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/color_black"
        app:layout_constraintLeft_toRightOf="@+id/income_icon"
        app:layout_constraintRight_toLeftOf="@+id/income_amount"
        app:layout_constraintTop_toTopOf="@+id/income_icon"
        tools:layout_editor_absoluteX="61dp"
        tools:layout_editor_absoluteY="34dp" />

    <TextView
        android:id="@+id/income_amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$0.00"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/color_black"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/payout_date"
        tools:layout_editor_absoluteX="344dp"
        tools:layout_editor_absoluteY="30dp" />

    <TextView
        android:id="@+id/frequency"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Monthly"
        app:layout_constraintLeft_toLeftOf="@+id/category"
        app:layout_constraintTop_toBottomOf="@+id/category"
        app:layout_constraintRight_toLeftOf="@+id/status"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@color/color_black"
        tools:layout_editor_absoluteX="61dp"
        tools:layout_editor_absoluteY="59dp" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pending"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:textColor="@color/color_black"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/income_amount" />
</android.support.constraint.ConstraintLayout>

Upvotes: 0

Cheticamp

Reputation: 62841

If you want the amount to be right-justified and aligned, you don't need the following two lines of XML:

    app:layout_constraintHorizontal_bias="0.91"
    app:layout_constraintStart_toEndOf="@+id/category"

So, just delete them to give the following:

<TextView
    android:id="@+id/income_amount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="$0.00"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/green"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/income_icon" />

If you need a margin on the right of, say, 16dp, add:

android:layout_marginEnd="16dp"

Upvotes: 1

Harsh Jain

Reputation: 1372

I have aligned the status TextView to amount TextView and have given an 8 dp from right to status TextView so that it aligns to the amount TextView. Below is the code for it.

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


    <TextView
        android:id="@+id/payout_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:maxLines="1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@android:color/black"
        android:text="payout_label"
        app:layout_constraintBottom_toTopOf="@+id/income_icon"/>


    <ImageView
        android:id="@+id/income_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="30dp"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="-50dp"
        android:padding="1dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        android:layout_marginLeft="8dp" />

    <TextView
        android:id="@+id/category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="16dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@android:color/black"
        android:text="Salary"
        app:layout_constraintTop_toTopOf="@+id/income_icon"
        app:layout_constraintStart_toEndOf="@+id/income_icon"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="16dp" />

    <TextView
        android:id="@+id/income_amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$0.00"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@android:color/holo_green_light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.91"
        app:layout_constraintStart_toEndOf="@+id/category"
        app:layout_constraintTop_toTopOf="@+id/income_icon" />

    <TextView
        android:id="@+id/frequency"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="-5dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@android:color/darker_gray"
        android:text="Monthly"
        app:layout_constraintStart_toEndOf="@+id/income_icon"
        app:layout_constraintBottom_toBottomOf="@+id/income_icon"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="16dp" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="Pending"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:textColor="@android:color/darker_gray"
        app:layout_constraintBottom_toBottomOf="@+id/income_icon"
        app:layout_constraintEnd_toEndOf="@+id/income_amount"
        app:layout_constraintStart_toStartOf="@+id/income_amount" />
</android.support.constraint.ConstraintLayout>

Hope that helps!!!!

Upvotes: 0

Constraint layout not aligning textview

Answers (4)

Related Questions