fragment_keyagreement_id.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
	android:id="@+id/scrollView"
	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="wrap_content"
	android:orientation="vertical">

	<android.support.constraint.ConstraintLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:padding="@dimen/margin_large">

		<ImageView
			android:id="@+id/diagram"
			android:layout_width="0dp"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:adjustViewBounds="true"
			android:padding="@dimen/margin_medium"
			android:scaleType="fitCenter"
			android:src="@drawable/qr_code_intro"
			android:tint="@color/color_primary"
			app:layout_constraintBottom_toBottomOf="@id/explanationText"
			app:layout_constraintEnd_toStartOf="@id/explanationText"
			app:layout_constraintStart_toStartOf="parent"
			app:layout_constraintTop_toTopOf="parent"/>

		<ImageView
			android:id="@+id/explanationImage"
			android:layout_width="0dp"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:adjustViewBounds="true"
			android:paddingLeft="@dimen/margin_large"
			android:paddingRight="@dimen/margin_large"
			android:paddingTop="@dimen/margin_large"
			android:scaleType="fitCenter"
			android:src="@drawable/qr_code_explanation"
			app:layout_constraintBottom_toTopOf="@id/explanationText"
			app:layout_constraintEnd_toEndOf="parent"
			app:layout_constraintStart_toEndOf="@id/diagram"
			app:layout_constraintTop_toTopOf="parent"
			tools:ignore="ContentDescription"/>

		<TextView
			android:id="@+id/explanationText"
			android:layout_width="0dp"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:padding="@dimen/margin_large"
			android:text="@string/face_to_face"
			app:layout_constraintEnd_toEndOf="parent"
			app:layout_constraintStart_toEndOf="@id/diagram"
			app:layout_constraintTop_toBottomOf="@id/explanationImage"/>

		<View
			android:id="@+id/explanationBorder"
			android:layout_width="0dp"
			android:layout_height="0dp"
			android:background="@drawable/border_explanation"
			app:layout_constraintBottom_toBottomOf="@id/explanationText"
			app:layout_constraintEnd_toEndOf="@id/explanationImage"
			app:layout_constraintStart_toStartOf="@id/explanationImage"
			app:layout_constraintTop_toTopOf="@id/explanationImage"/>

		<android.support.constraint.Barrier
			android:id="@+id/barrier"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			app:barrierDirection="bottom"
			app:constraint_referenced_ids="diagram,explanationBorder"/>

		<Button
			android:id="@+id/continueButton"
			style="@style/BriarButton.Default"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:layout_gravity="center_horizontal"
			android:layout_marginTop="@dimen/margin_medium"
			android:text="@string/continue_button"
			app:layout_constraintBottom_toBottomOf="parent"
			app:layout_constraintTop_toBottomOf="@id/barrier"/>

	</android.support.constraint.ConstraintLayout>

</ScrollView>