Adjust Constraintlayout

Question

I’m trying to adjust a layout using the new ConstraintLayout, but I’m not getting it, could you give me a help? follows below my layout:

<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"
tools:context="com.pdibar.pdibarlio.frags.VendaFragment"
tools:layout_editor_absoluteY="81dp">


<EditText
    android:id="@+id/edProdutoCarrinho"
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_weight="1"
    android:drawableRight="@drawable/busca"
    android:ems="10"
    android:hint="Selecione o produto..."
    android:inputType="textPersonName"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/lbValorItemCarrinho"
    android:layout_width="180sp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_weight="1"
    android:text="R$ 0,00"
    android:textColor="@color/colorPrimaryDark"
    android:textSize="30sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/edProdutoCarrinho" />

<EditText
    android:id="@+id/edQntItemCarrinho"
    android:layout_width="80sp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_weight="1"
    android:ems="10"
    android:inputType="number"
    android:selectAllOnFocus="true"
    android:text="1"
    android:textAlignment="center"
    android:textSize="18sp"
    app:layout_constraintStart_toEndOf="@+id/lbValorItemCarrinho"
    app:layout_constraintTop_toBottomOf="@+id/edProdutoCarrinho" />

<Button
    android:id="@+id/btAddItemCarrinho"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@color/colorPrimary"
    android:text="Adicionar"
    android:textColor="@android:color/white"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/edQntItemCarrinho"
    app:layout_constraintTop_toBottomOf="@+id/edProdutoCarrinho" />


<ListView
    android:id="@+id/lvCarrinho"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:divider="@drawable/list_driver"
    android:dividerHeight="1sp"
    app:layout_constraintBottom_toTopOf="@+id/btFechaCarrinho"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/lbValorItemCarrinho" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:text="Itens"
    app:layout_constraintBottom_toTopOf="@+id/lbQntItensCarrinho"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/lbQntItensCarrinho"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:text="0000"
    android:textSize="26sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:text="Total"
    app:layout_constraintBottom_toTopOf="@+id/lbTotalCarrinho"
    app:layout_constraintStart_toEndOf="@+id/lbQntItensCarrinho" />

<TextView
    android:id="@+id/lbTotalCarrinho"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:text="R$ 0,00"
    android:textSize="26sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toEndOf="@+id/lbQntItensCarrinho" />

<Button
    android:id="@+id/btFechaCarrinho"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_green_dark"
    android:text="Fechar"
    android:textColor="@android:color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>

I want the total of items, the total value and the close button, always stay at the end and as picture, they look like this, even though they have items in the listview, and the listview is not appearing...

Answer 1

When you are using Constraintlayout you define where your component is linked, that is, what will be the position reference for it.

You can set using the Android Studio properties side box as per this image:

In this case the txtTitle component is linked to the top of the Activity with a distance between them of size 16dp. You can see on the blue side where are the constraints that define its position.

If you manually position and then go to this magic wand on top of the screen it creates these settings automatically based on the placement you set.

Via code, you can do it using the layout_constraint... options (here are several and depends on what you want. The image textView code looks like this:

<TextView
            android:id="@+id/txtTitulo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@string/cadastrar_pat"
            android:textAlignment="center"
            android:textColor="@color/viewfinder_laser"
            android:textSize="18sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />