Zenn
📱

メモ：ConstraintLayoutで画面を覆い隠せなかった時はelevationを確認する(layerの話)

2020/11/13に公開
Android
Kotlin
XML
layout
tech

背景

  • ConstraintLayoutでボタンを押せないように一時的にViewを覆うViewを表示したかった
  • オーバーレイするViewを作成し制約をparentにつけたが、一部View（今回の場合、ヘッダー）がオーバーレイViewより上にきてしまった

対応

ヘッダーにelevationが設定されており、オーバーレイViewの上に表示されてしまっていた。
ヘッダーは引き続き影をつけておきたいので、オーバーレイViewにもelevation（ヘッダーのevlevation以上の必要がある）をつける。

    <!-- ヘッダー -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:background="@color/toolbar_background"
        android:elevation="4dp"
        android:padding="4dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
	
   ....
   
     <!-- オーバーレイ -->
     <TextView
        android:id="@+id/overlay"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="@string/stop"
        android:textSize="40sp"
        android:elevation="4dp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

ちなみにtranslationZでもいける。（並行投影なので）

android:translationZ="4dp"

Discussion