Create a new Constraint layout from scratch
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:
→