Поместите ImageView над кнопкой Android

Я пытаюсь разместить ImageView над кнопкой, используя RelativeLayout. Вот мой xml:

<RelativeLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="0.50" >

                <Button
                    android:id="@+id/btnFindDaysInBetween"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/blue_500"
                    android:text="@string/dt_text_days" />

                <ImageView
                    android:id="@+id/imageview_find_days_in_between"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:contentDescription="@string/empty"
                    android:src="@drawable/ic_check_circle_white" />
            </RelativeLayout>

Вот скриншот изображения:

Как вы можете видеть, изображение ImageView src не отображается. Однако, если я изменяю кнопку в обратном направлении к ImageView, изображение верхнего ImageView видимо. Пожалуйста, см. Ниже..

Изменен xml:

 <RelativeLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="0.50" >

                <!-- 
                <Button
                    android:id="@+id/btnFindDaysInBetween"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/blue_500"
                    android:text="@string/dt_text_days" />
                -->
                <ImageView
                    android:id="@+id/imageview_find_days"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:contentDescription="@string/empty"
                    android:src="@drawable/ic_send_black" />

                <ImageView
                    android:id="@+id/imageview_find_days_in_between"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:contentDescription="@string/empty"
                    android:src="@drawable/ic_check_circle_white" />
            </RelativeLayout>

Изменен скриншот xml:

Что я делаю неправильно в первом макете?

Ответ 1

Причина на самом деле очень проста.:) Мы настолько увлечены мыслями в 2D, что не видим elevation - в Z.

Нет ничего плохого в вашем первом макете. Button просто имеет более высокий elevation чем ImageView - ровно 1dp выше. Поэтому, независимо от того, как вы упорядочиваете два вида, Button поднимается выше.

Немного доказательств:

Кнопка A по умолчанию получает стиль Widget.Material.Button:

<!-- Bordered ink button -->
<style name="Widget.Material.Button">
    <item name="background">@drawable/btn_default_material</item>
    <item name="textAppearance">?attr/textAppearanceButton</item>
    <item name="minHeight">48dip</item>
    <item name="minWidth">88dip</item>
    <item name="stateListAnimator">@anim/button_state_list_anim_material</item>
    <item name="focusable">true</item>
    <item name="clickable">true</item>
    <item name="gravity">center_vertical|center_horizontal</item>
</style>

Атрибут, который вводит это повышение, android:stateListAnimator. StateListAnimator похож на StateListDrawable и обеспечивает анимацию изменения состояния. Полный xml находится здесь: Ссылка. Но здесь базовое состояние кнопки:

<!-- base state -->
<item android:state_enabled="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
                        android:duration="@integer/button_pressed_animation_duration"
                        android:valueTo="0"
                        android:startDelay="@integer/button_pressed_animation_delay"
                        android:valueType="floatType"/>
        <objectAnimator android:propertyName="elevation"
                        android:duration="0"
                        android:valueTo="@dimen/button_elevation_material"
                        android:valueType="floatType" />
    </set>
</item>

Как вы можете видеть, значение высоты для кнопки установлено на @dimen/button_elevation_material:

<dimen name="button_elevation_material">1dp</dimen>

И что как ImageView заканчивается за/ниже Button.

Итак, что мы можем сделать?

Прямым решением было бы установить возвышение ImageView's на ту же сумму - 1dp.

Другим решением, которое потребует немного работы, является удаление возвышения Button's, а не изменение ImageView's. Основываясь на стандартном StateListAnimator, мы можем создать наш собственный - и удалить высоту. Затем в res/values-v21/styles.xml укажите стиль, который наследуется от Widget.Material.Button:

<style name="MyDepressedButtonStyle" parent="android:Widget.Material.Button">
    <item name="android:stateListAnimator">@anim/customized_state_animator</item>
</style>

Теперь установите этот стиль на Button:

<Button
    style="@style/MyDepressedButtonStyle"
    ....
    .... />

Edit

Собственно, мы можем напрямую применить настроенный StateListAnimator:

<Button
    android:stateListAnimator="@anim/customized_state_animator"
    ....
    .... />

Не нужно брать маршрут scenic!

Ответ 2

Я нашел решение: просто android: elevation = "2dp"

<Button
        android:id="@+id/btnAccess"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_gravity="right|center"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"/>

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView4"
        android:background="@drawable/or"
        android:layout_alignBottom="@+id/btnRegister"
        android:layout_centerHorizontal="true"
        android:layout_margin="5dp"
        android:elevation="2dp" />

Ответ 3

Используйте ImageButton замените Button и установите ImageButton фон как прозрачный.

<ImageButton
    android:id="@+id/btnFindDaysInBetween"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/blue_500_text"
    android:background="@android:color/transparent"  
    />

<ImageView
    android:id="@+id/imageview_find_days_in_between"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:contentDescription="@string/empty"
    android:src="@drawable/ic_check_circle_white" />

Вы можете создать изображение с цветом и текстом blue_500 (которое легко создать), а затем установить это изображение на ImageButton. После этого ваш ImageView будет видеть вверху ImageButton.

Надеюсь на эту помощь!

Ответ 4

android:background существует для всех представлений. Как видно из названия, это то, что будет в фоновом режиме.

android:src существует для ImageViews и его подклассов. Вы можете думать об этом как о переднем плане. Поскольку ImageView является подклассом View, у вас даже есть android:background.

Если передний план меньше фона, то видимая часть фона, которая не покрывается передним планом, будет видна. Кроме того, вы можете использовать прозрачность на переднем плане, и в этом случае фон будет видимым (прозрачным). Вы можете использовать ПРЕДПОСЫЛКУ ДЛЯ ВСЕХ ВИДОВ.. Но вы можете использовать SRC только для ImageView и ImageButton.....

Ответ 5

@Vamsi Я пробовал ваши обе комбинации, и первый из них не работает с Button. Вы должны пройти через ImageView. Это то, что я пытался с помощью ImageView:

Пока я пытался сделать это с помощью Button и посмотреть, что получилось:

Я попытался изменить порядок, но все напрасно! Кажется, вам нужно идти с помощью ImageView или ImageButton.

В конце! Вы можете видеть, что я пробовал:

<RelativeLayout 
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <!-- <ImageView
        android:id="@+id/btnTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher_web"
        android:contentDescription="@string/app_name"
        android:text="@string/app_name" /> -->

    <ImageView
        android:layout_width="wrap_content"
        android:id="@+id/imgView"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_launcher" />

    <Button
        android:id="@+id/btnTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/imgView"
        android:layout_alignTop="@+id/imgView"
        android:text="@string/app_name" />

</RelativeLayout>

Я выполнял такую же работу либо с ImageView, либо ImageButton (возможно, с ImageView) и пробовал тот же подход, что и вы, используя Button.

Спасибо

Ответ 6

На самом деле гораздо проще просто установить StateListAnimator в @null

<Button
    ...
    android:stateListAnimator="@null" />

Источник Android 5.0 android: высота Работает для просмотра, но не кнопка?

Ответ 7

Кнопка - это просто TextView с определенным стилем, применяемым к нему, поэтому, если вы замените Button с помощью TextView, вы можете отобразить ImageView поверх него. Это также работает на API < 21.

Ответ 8

Я разместил ImageView на кнопке с отключением RelativeLayout, надеюсь, что это поможет.

 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <View
        android:id="@+id/tempview"
        android:layout_width="0dp"
        android:layout_height="0dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tempview"
        android:background="@drawable/ic_launcher" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tempview"
        android:src="@drawable/img_cancel" />
</RelativeLayout>