android button same height as textview

Question

I am struggling creating the UI for a list item which should look like this:

I am trying to build a similar layout for my list items like in the picture above. However, I am stuck, because I don't exactly know, how to nest the views so the sell-buttons has the same height as both textviews.

If I use the RelativeLayout than I cannot use the layout_weight attribute anymore which position the views evenly horizontally on the screen.

However, if I use the LinearLayout than I cannot use the relative-attributes like alignTop and so on. I am trying to nest the views in a way so I can achieve this, however I am failing so far... (sry for my poor english skills)

This is what I have so far, however I still cannot get the desired result:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:padding="16dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="45dp">

        <TextView
            android:id="@+id/productname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="Google Pixel" />

        <TextView
            android:id="@+id/price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/productname"
            tools:text="699$" />

        <TextView
            android:id="@+id/quantity_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            tools:text="Quantity" />

        <TextView
            android:id="@+id/quantity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/quantity_textview"
            android:layout_centerHorizontal="true"
            tools:text="31" />
    </RelativeLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        tools:text="SELL"
        android:layout_alignParentTop="true" />
</RelativeLayout>

Answer 1

I'd recommend ConstraintLayout. This will allow you to set the top of the button to be constrained to the top of first text view, the bottom of the button to be constrained to the bottom of the second text view, and maintain the even distribution left to right with a horizontal chain.

Here's a an example I just threw together for funsies:

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

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="0dp"
        android:text="TextView"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView4"
        app:layout_constraintTop_toTopOf="@+id/textView4"
        tools:text="Google Pixel" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="@+id/textView5"
        app:layout_constraintLeft_toLeftOf="@+id/textView2"
        app:layout_constraintRight_toRightOf="@+id/textView2"
        tools:text="6995" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintLeft_toRightOf="@+id/textView2"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Quantity" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="32dp"
        android:text="TextView"
        app:layout_constraintLeft_toLeftOf="@+id/textView4"
        app:layout_constraintRight_toRightOf="@+id/textView4"
        app:layout_constraintTop_toBottomOf="@+id/textView4"
        tools:text="31" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="0dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="@+id/textView5"
        app:layout_constraintLeft_toRightOf="@+id/textView4"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView4"
        tools:text="Sell" />
</android.support.constraint.ConstraintLayout>

This gives you this layout in the preview:

And this is what the preview looks like showing the constraints. You can see the button being constrained to the two views (dashed lines), and the chain across the "Google Pixel" label, the "Quantity" label, and the button that keeps everything evenly distributed.

Note that if you want the button to be smaller to shrink down to match the bottom of the second text view, you have to set the button's minHeight attribute to 0. You'll probably also have to replace the default background of the button if you want pixel-perfect alignment of the top and bottom as the default background drawable has some built-in padding.

Hope that helps!