Android, как установить вид сверху кнопки, не вызывая серый фон

Question

Я пытаюсь реализовать макет, где у меня есть ImageView и TextView поверх кнопки.

target:

Я пытался использовать "android: высота "или" android: translationZ ", чтобы достичь этого, но результат действительно разочаровывает, вид может быть сверху, но он также будет иметь серый фон, от которого я не знаю, как избавиться.

что я получаю:

Пробовал с помощью "android: background =" @ android: color / transparent "", но это не сработало.

Мой макет:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/table_page_turn_item_height">

<Button
    android:id="@+id/turn_btn_voice"
    android:layout_width="@dimen/table_page_turn_btn_width"
    android:layout_height="@dimen/table_page_turn_btn_height"
    app:layout_constraintTop_toBottomOf="@id/turn_text_name"
    app:layout_constraintRight_toRightOf="parent"
    android:gravity="center"       
    android:background="@drawable/rounded_corner_generic_light_blue_fill" 
    />

<ImageView
    android:id="@+id/turn_play_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="@id/turn_btn_voice"
    app:layout_constraintTop_toTopOf="@id/turn_btn_voice"
    app:layout_constraintBottom_toBottomOf="@id/turn_btn_voice"
    android:translationZ="2dp"
    android:src="@drawable/ic_play_arrow_24px"
    android:background="@android:color/transparent"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="@id/turn_btn_voice"
    app:layout_constraintBottom_toBottomOf="@id/turn_btn_voice"
    app:layout_constraintLeft_toRightOf="@id/turn_play_icon"
    android:layout_marginStart="20dp"
    android:elevation="2dp"
    android:textColor="@color/colorEugraBlue"
    android:text="1:30"
    android:textSize="@dimen/font_size_ctrl_large"/>

</android.support.constraint.ConstraintLayout>

Спасибо!

Редактировать: попытался установить высоту равной 1, тогда ImageView все еще будет скрываться за кнопкой, оставляя только серую рамку.

Левый серый квадрат - это вид, высота которого составляет 1

Answer 1

Высота Button выше, чем у двух других видов. Для ImageView это точно 1dp выше. Следовательно, просто установите высоту ImageView на то же значение высоты - 1dp, например:

<ImageView
    android:id="@+id/turn_play_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="@id/turn_btn_voice"
    app:layout_constraintTop_toTopOf="@id/turn_btn_voice"
    app:layout_constraintBottom_toBottomOf="@id/turn_btn_voice"

    android:elevation="1dp"

    android:src="@drawable/ic_play_arrow_24px"
    android:background="@android:color/transparent"/>

Интерфейс макета приложения, который я закодировал, отлично смотрится с возвышением. Панель предварительного просмотра среды IDE или эмулятора может отличаться от реального пользовательского интерфейса приложения:

Answer 2

Полагаю, это не вопрос, материал с панели предварительного просмотра Android Studio сбивал с толку, любой вид с возвышением выше 1 будет иметь серый фон, но на эмуляторе все будет в порядке.

И для этого конкретного случая я установил высоту 5, получил желаемое расположение.Высота ниже или равна 2 скрывает вид за кнопкой.

Поэтому я предполагаю, что кнопка будет иметь угол возвышения 2 по умолчанию.

Answer 3

не используйте высоту используйте это

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/colorBlack">
    </LinearLayout>

     <!--It will be on top of linear layout-->
    <TextView
        android:textColor="@color/white"
        android:text="test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</androidx.constraintlayout.widget.ConstraintLayout>

вывод: порядок верстки Android обратный. если вы хотите поместить виджет A поверх виджета B, просто добавьте виджет A ниже виджета B на xml