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:
