Android Build an Interactive Story App User Input Using ConstraintLayouts and ImageViews

Kirtan Patel
Kirtan Patel
14,931 Points

Next, we want to position the EditText directly below the ImageView. We do this by constraining its top to the bottom of

Next, we want to position the EditText directly below the ImageView. We do this by constraining its top to the bottom of the ImageView. Set the top margin of the EditText to be "0dp".

activity_main.xml
<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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType=""
        app:srcCompat="@drawable/grumpy_cat"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <EditText
        android:id="@+id/captionField"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Enter a caption"
        android:layout_marginTop=""
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>