Create a new Constraint layout from scratch

- Posted in Uncategorized by

Create a new constraint layout from scratch.

  • ImageView to add images. Images should already be added to the Resource folder.
  • TextView to add text. Text should ideally be in the strings XML file.
  • app:layout_constraintX_toY property to define the placement of each element. Specify how each element should be placed beside other elements.
  • Button to add a button.
  • View to add empty space.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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_margin="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <ImageView
        android:id="@+id/kInfo"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:scaleX="0.7"
        android:scaleY="0.7"
        app:layout_constraintRight_toLeftOf="@+id/kInfoView"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/icon_info"
        android:contentDescription="@string/infoIcon" />
    <TextView
        android:id="@+id/kInfoView"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:padding="3dp"
        android:textStyle="bold"
        android:textColor="@color/silver"
        app:layout_constraintLeft_toRightOf="@+id/kInfo"
        app:layout_constraintTop_toTopOf="parent"
        android:text="@string/information" />


    <ImageView
        android:id="@+id/kAddress"
        android:layout_width="24dp"
        android:layout_height="34dp"
        android:scaleX="1"
        android:scaleY="1"
        app:layout_constraintRight_toLeftOf="@+id/kAddress_Line"
        app:layout_constraintTop_toTopOf="@id/kAddress_Line"
        app:srcCompat="@drawable/icon_map"
        android:contentDescription="@string/addressLine" />
    <TextView
        android:id="@+id/kAddress_Line"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:padding="3dp"
        android:textSize="20sp"
        app:layout_constraintLeft_toRightOf="@+id/kAddress"
        app:layout_constraintTop_toBottomOf="@id/kInfoView"
        android:text="@string/addressLine" />


    <ImageView
        android:id="@+id/kNotes"
        android:layout_width="24dp"
        android:layout_height="34dp"
        android:scaleX="1"
        android:scaleY="1"
        android:contentDescription="@string/pinIcon"
        app:layout_constraintRight_toLeftOf="@+id/kNoteContent"
        app:layout_constraintTop_toTopOf="@id/kNoteContent"
        app:srcCompat="@drawable/icon_notes" />
    <TextView
        android:id="@+id/kNoteContent"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:padding="3dp"
        android:textSize="20sp"
        app:layout_constraintLeft_toRightOf="@+id/kNotes"
        app:layout_constraintTop_toBottomOf="@id/kAddress_Line"
        android:text="@string/noteContent" />


    <Button
        android:id="@+id/kStreetViewLink"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="@string/goToStreetView"
        app:layout_constraintTop_toBottomOf="@id/kNoteContent"
        app:layout_constraintStart_toStartOf="@id/kNoteContent" />

    <View
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:layout_constraintTop_toBottomOf="@id/kStreetViewLink" />

</androidx.constraintlayout.widget.ConstraintLayout>

This is how it looks like:

Screenshot of new constraint layout