ConstantLayoutちょっと重ねて配置する

ConstantLayoutでViewをちょっと重ねて配置する方法です。

私のやり方が正解かはわかりませんが、苦しんで苦しんでなんとかレイアウトをを作り上げました。ちょっとずらすのが大変でした…

重ねて配置する

三角の画像を緑の画像に半分だけ載せたいときは、 このように制約をつけます。

上下が下、左右が右

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark"
        tools:context=".MainActivity">
    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" app:srcCompat="@drawable/ic_launcher_background"
            android:id="@+id/imageView2"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp" android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
            android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent"/>
    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" app:srcCompat="@android:drawable/ic_dialog_alert"
            android:id="@+id/imageView3"
            app:layout_constraintEnd_toEndOf="@+id/imageView2"
            android:layout_marginEnd="8dp" app:layout_constraintStart_toEndOf="@+id/imageView2"
            android:layout_marginStart="8dp" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/imageView2"
            app:layout_constraintBottom_toBottomOf="@+id/imageView2"/>
</android.support.constraint.ConstraintLayout>

上下が下、左右が左

上下が上、左右が左

上下が上、左右が右

上下が上、左が左、右が右

ちょっとずらす

簡単な重ねてずらすのなら簡単なんですが、はみ出すピクセルを指定されていると面倒です。
三角マークは8dp:8dpの画像ですが、下にはみ出すdpを2dpにするというデザインを実装するときハマりました。

結論から言うとpaddingを使うことによってレイアウトを実現しました。

bottomに4dpのパディングを設定して2px上に設定することができました。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark"
        tools:context=".MainActivity">
    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" app:srcCompat="@drawable/ic_launcher_background"
            android:id="@+id/imageView2"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp" android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
            android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent"/>
    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" app:srcCompat="@android:drawable/ic_dialog_alert"
            android:id="@+id/imageView3"
            android:paddingBottom="4dp"
            app:layout_constraintEnd_toEndOf="@+id/imageView2" android:layout_marginEnd="8dp"
            app:layout_constraintStart_toEndOf="@+id/imageView2" android:layout_marginStart="8dp"
            app:layout_constraintTop_toBottomOf="@+id/imageView2"
            app:layout_constraintBottom_toBottomOf="@+id/imageView2"/>
</android.support.constraint.ConstraintLayout>