Pfthb

How to make this type of view in Android Studio using constraint layout

If you're wondering about how to place the menu to fall half on the top view and half on the bottom view, just drag it manually to the position you want to have it, and on the design tab of Android studio select the Magic Wand icon, to "infer constraints". As for the views in the background make sure you add app:layout_constraintBottomToTopOf="yourBottomView" to your view on top and app:layout_constraintTopToBottomOf="yourTopView".

Check the codelabs tutorial on Constraint Layout here for more info, or the documentation on the developers' website here

EDIT:

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
 android:layout_height="100dp"
 android:layout_marginEnd="8dp"
 android:layout_marginStart="8dp"
 android:layout_marginTop="8dp"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:srcCompat="@android:color/holo_blue_bright" />

 <ImageView
 android:id="@+id/imageView2"
 android:layout_width="match_parent"
 android:layout_height="450dp"
 android:layout_marginEnd="8dp"
 android:layout_marginStart="8dp"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/imageView"
 app:srcCompat="@android:color/darker_gray" />

 <android.support.constraint.ConstraintLayout
 android:id="@+id/constraintLayout"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintBottom_toBottomOf="@+id/imageView"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/imageView">

 <TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="TextView"
 app:layout_constraintEnd_toStartOf="@+id/textView2"
 app:layout_constraintHorizontal_chainStyle="packed"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

 <TextView
 android:id="@+id/textView2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="TextView"
 app:layout_constraintEnd_toStartOf="@+id/textView3"
 app:layout_constraintHorizontal_chainStyle="packed"
 app:layout_constraintStart_toEndOf="@+id/textView"
 app:layout_constraintTop_toTopOf="parent" />

 <TextView
 android:id="@+id/textView3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="TextView"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintHorizontal_chainStyle="packed"
 app:layout_constraintStart_toEndOf="@+id/textView2"
 app:layout_constraintTop_toTopOf="parent" />
 </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

This is what I get from the above: