Макет перекрывается кнопками. Как мне спрятать кнопки?

Question

Я учился пару недель и боролся с макетами в этой ситуации. Это просто небольшой проект, предназначенный для обучения. Кнопка upg вызывает LinearLayout ShopL как всплывающее окно, но оно перекрывается. В основном, я хочу, чтобы красные кнопки были позади (скрыты от) синего Linearlayout (см. Рисунок).

<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"
    android:background="@android:color/background_dark"
    tools:context="com.example.daniela.test003.MainActivity"
    tools:layout_editor_absoluteY="81dp">

    <TextView
        android:id="@+id/Total"
        android:layout_width="287dp"
        android:layout_height="25dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Total Geld"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/perClickShower"
        android:layout_width="188dp"
        android:layout_height="25dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="perClickShower"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/perSecondShower"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.262"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/Total"
        app:layout_constraintVertical_bias="0.85" />

    <TextView
        android:id="@+id/perSecondShower"
        android:layout_width="188dp"
        android:layout_height="0dp"
        android:layout_marginBottom="372dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="perSecondShower"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.262"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:background="@android:color/holo_red_dark"
        android:text="btn1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/upg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/holo_red_dark"
        android:text="upg"
        app:layout_constraintBottom_toTopOf="@+id/btn1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.16"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/perSecondShower"
        app:layout_constraintVertical_bias="0.892" />

    <LinearLayout
        android:id="@+id/ShopL"
        android:layout_width="300dp"
        android:layout_height="450dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/holo_blue_dark"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="81dp"
            android:layout_marginTop="159dp"
            android:layout_weight="0"
            android:baselineAligned="false"

            android:text="Button" />
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

Answer 1

Если вы запустите эту раскладку на нескольких телефонах, вы заметите, что «плохое» поведение (кнопки появляются, даже если они «покрыты» линейной раскладкой) будет иметь место только на телефонах с Android Lollipop или новее.

В Lollipop введено понятие «высота», и все кнопки в Lollipop + имеют высоту по умолчанию. Нажатие на одну из этих кнопок также увеличивает высоту на время нажатия (поэтому кажется, что тень, которую отбрасывает кнопка на фоне, увеличивается).

Возвышение работает так же, как в реальном мире; вещи с более высоким возвышением появляются над вещами с более низким возвышением. Ваш линейный макет не определяет значение высоты, и линейные макеты не имеют высоты по умолчанию, поэтому его высота составляет 0dp. Кнопка в состоянии по умолчанию по умолчанию имеет высоту 2dp. Пока высота кнопки больше линейного макета, кнопка будет отображаться «впереди» линейного макета.

Простым решением было бы добавление большого количества возвышений в линейный макет:

android:elevation="12dp"

У этого могут быть другие побочные эффекты, но, возможно, это будет работать только для вас.