ConstraintLayout left align the middle element of two horizontal chains?

Question

I am creating a layout where i need to create 2 rows of three elements each. For the middle elements (Qty and 4901) of both rows I want the text to left align.

I have created 2 horizontal chains with chainStyle as spread_inside.

Here is the layout xml:

https://gist.github.com/asheshb/cb2effdbb92e34d897672eb730339896

Any idea how to do that?

Are you opposed to using a couple Linear Layouts with weights within your constraint-layout to achieve this effect ? (There is normally no reason to do this apart from the fact that you can properly align rows of elements using the weights property of Linear Layouts, which seems to be what you need) — Karan Shishoo, Mar 01 '18 at 10:15
I'm not sure exactly what result you're looking for. Do you want "Qty" and "4901" to have their left edges align with each other, but have the overall column be centered on screen? Or do you want the column to also be left-aligned? — Ben P., Mar 01 '18 at 19:47
@casualcoder thanks, i was looking for ConstraintLayout specific solution only. — Ashesh Bharadwaj, Mar 02 '18 at 12:41
@BenP.thanks that's right I wanted "Qty" and "4901" to be left aligned while them being in the center on screen. I guess Weighted Chain as suggested by Rabee would do the job. — Ashesh Bharadwaj, Mar 02 '18 at 12:41
Start by changing `layout_width` of middle element from `wrap_content` to `0dp` — Alex Semeniuk, Jul 19 '19 at 11:06

score 1 · Accepted Answer · answered Mar 01 '18 at 11:05

Try the layout below although I don't recommend this approach, because if you insert a value in the TextView (for example that Curr. Value) that is too long, only the element attached (in this case the TextView containing this number 15,13,184) will adapt to these changes and the than the layout will be corrupted.

<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:id="@+id/nse_item_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">

<TextView
    android:id="@+id/tvStockName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="18sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="ICICI BANK LIMITED" />

<TextView
    android:id="@+id/tvStockSymbol"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12sp"
    app:layout_constraintStart_toStartOf="@+id/tvStockName"
    app:layout_constraintTop_toBottomOf="@+id/tvStockName"
    tools:text="ICICIBANK" />

<TextView
    android:id="@+id/tvStockValue"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="end"
    android:textSize="24sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="306.75" />

<TextView
    android:id="@+id/tvStockPercent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="2dp"
    android:textSize="12sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvStockValue"
    tools:text="(1.44%)"
    />


<TextView
    android:id="@+id/tvStockDifference"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="4dp"
    android:textSize="16sp"
    app:layout_constraintEnd_toStartOf="@+id/tvStockPercent"
    app:layout_constraintTop_toBottomOf="@+id/tvStockValue"
    tools:text="-4.50"
    />

<TextView
    android:id="@+id/tvAvgPriceTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:textSize="16sp"
    tools:text="Avg. Price"
    app:layout_constraintHorizontal_weight="50"
    app:layout_constraintEnd_toStartOf="@+id/tvQtyTitle"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvStockDifference" />

<TextView
    android:id="@+id/tvQtyTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:textSize="16sp"
    tools:text="Qty"
    app:layout_constraintHorizontal_weight="10"
    app:layout_constraintEnd_toStartOf="@+id/tvCurrentValueTitle"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/tvAvgPriceTitle"
    app:layout_constraintTop_toBottomOf="@+id/tvStockDifference" />

<TextView
    android:id="@+id/tvCurrentValueTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    tools:text="Curr. Value"
    android:textSize="16sp"
    app:layout_constraintHorizontal_weight="20"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/tvQtyTitle"
    app:layout_constraintTop_toBottomOf="@+id/tvStockDifference" />


<TextView
    android:id="@+id/tvAvgPrice"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    app:layout_constraintHorizontal_weight="50"
    app:layout_constraintEnd_toStartOf="@+id/tvQty"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvAvgPriceTitle"
    tools:text="241.83" />

<TextView
    android:id="@+id/tvQty"
    android:layout_width="0dp"
    android:layout_height="20dp"
    app:layout_constraintHorizontal_weight="10"
    app:layout_constraintEnd_toStartOf="@+id/tvTotalStockInvestment"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toEndOf="@+id/tvAvgPrice"
    app:layout_constraintTop_toBottomOf="@+id/tvQtyTitle"
    tools:text="4901" />

<TextView
    android:id="@+id/tvTotalStockInvestment"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    app:layout_constraintHorizontal_weight="20"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/tvQty"
    app:layout_constraintTop_toBottomOf="@+id/tvCurrentValueTitle"
    tools:text="15,13,184" />


<TextView
    android:id="@+id/tvTotalStockPercent"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:textSize="12sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvTotalStockInvestment"
    tools:text="(+27.69%)"
    />


<TextView
    android:id="@+id/tvTotalStockDifference"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="4dp"
    android:textSize="14sp"
    app:layout_constraintEnd_toStartOf="@+id/tvTotalStockPercent"
    app:layout_constraintTop_toBottomOf="@+id/tvTotalStockInvestment"
    tools:text="+3,28,234"
    />

<TextView
    android:id="@+id/tvDayStockDifference"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:textSize="14sp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvTotalStockDifference"
    tools:text="-24,015"
    />


<TextView
    android:id="@+id/tvTitleDayStockDifference"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    tools:text="Today's Gain"
    android:textSize="14sp"
    app:layout_constraintEnd_toStartOf="@+id/tvDayStockDifference"
    app:layout_constraintTop_toBottomOf="@+id/tvTotalStockDifference" />

Output of the layout above:

thanks @Rabee I guess Weighted Chains is what I was looking for. BTW can you tell what difference it would make if I just use weights without chain like we do in LinearLayout? — Ashesh Bharadwaj, Mar 02 '18 at 12:43
what I mean was if I don't use `layout_constraintHorizontal_chainStyle` and just use `layout_constraintHorizontal_weight` that also works in this case — Ashesh Bharadwaj, Mar 02 '18 at 13:06
I tried it. If you remove it, it doesn't make a difference provided that you keep the android:layout_width="0dp" rather than wrap_content or... Also, note that in your layout you were using @+id when using app:layout_constraintEnd or Start or Top... You should remove the +, because these are already defined Views(ids). Also, regarding my comment above (layout looks corrupted when text too long), you can try to constraint all the view to below the changing text rather than to below the fixed one(the one directly above), so that when it does change it also moves the ones connected. — Brainnovo, Mar 02 '18 at 13:22

ConstraintLayout left align the middle element of two horizontal chains?

1 Answers1