11

Button widget draws on top of any other widget no matter what the layout structure is. It repeats in both RelativeLayout and FrameLayout when Material Dark/Light theme is applied. Check out the screenshots below for better illustration of this strange behaviour.

Checked on Nexus 4 and Nexus 5. However I doubt it is related to devices.

How it looks in Android Studio

How it looks on my Nexus 4

halfer
  • 19,824
  • 17
  • 99
  • 186
Sergey Dmitriev
  • 454
  • 3
  • 13

2 Answers2

9

Android 5.0 Lollipop along with Material Design introduced new property to specify the elevation (Z-index) of widgets. It is described here.

To draw the view over the button you can add android:elevation="1dp" to the View

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Don't look so deep"
    />
<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#C00"
    android:elevation="1dp"
    />

Following is part of earlier answer to misunderstood question, kept for future reference

With RelativeLayout you have to specify the position of elements relative to other elements.

So say you want to have the View below the button, you'll have to add id's to the elements and specify that the view is below the button:

<Button
    android:id="+id/myactivity_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Don't look so deep"
    />
<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#C00"
    android:layout_below="@id/myactivity_button"
    />

Check out the Android Developer Guide for RelativeLayout and the available LayoutParameters for RelativeLayouts

FrameLayout is usually not good for organize multiple components. The FrameLayout is designed to block out an area on the screen to display a single item. The position of the FrameLayout childs can be controlled by using the android:layout_gravity attribute.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:text="Don't look so deep"
    />
<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#C00"
    android:layout_gravity="bottom"
    />

Check out the Android docs for FrameLayout and the available parameters for the layout_gravity

Sven
  • 1,648
  • 1
  • 21
  • 31
arnfada
  • 482
  • 2
  • 9
  • @holtaf : You can see from his example that he's using relative layout. If he does not specify the layout options for the widgets, they will all draw on top of each other. Hence the solution to the problem (as I understand it) is to add the layout options to his layout xml. – arnfada Jan 23 '15 at 08:50
  • 1
    Yes they will draw on top of each other, that's not the problem, the problem is their draw order. They suppose to draw in order, from top to bottom, but they draw from bottom to top .. – holtaf Jan 23 '15 at 08:53
  • @holtaf , you're correct. Although I can't reproduce the problem at my side. The view is drawn completely over the Button. – arnfada Jan 23 '15 at 09:21
  • @arnfada Have you tried to reproduce it with material theme? It happens only if material theme is set. Could you also tell me what version of support library you are using? – Sergey Dmitriev Jan 23 '15 at 13:40
  • @SergeyDmitriev. Yes it happens only with the material theme. See the top part of the answer I gave. I updated it with a solution. – arnfada Jan 23 '15 at 14:13
  • @arnfada I see, but it doesn't help… Do you confirm this strange behaviour or not? I'm confused because you just said above that you can not reproduce this. So how could you find a solution if there is no bug on your side? :) – Sergey Dmitriev Jan 23 '15 at 14:35
  • @SergeyDmitriev I was able to reproduce it. The button was above the red view. After I added `android:elevation="1"`` to the view xml the view covered the button completely. Tell me, what is your target and minimum framework? – arnfada Jan 23 '15 at 18:47
  • 4
    @arnfada You were right man, changing the elevation fixed this, but I think I have better solution. To completely remove your button elevation do so: `` This will remove `stateListAnimator` that controls buttons elevation. – Sergey Dmitriev Jan 24 '15 at 14:19
  • In my case android:elevation="1dp" didn't work... android:elevation="2dp" did, but when I was pressing the button, the images on top of button disappear. So I ended up using 1dp for button and 10dp for images. – Borzh Apr 05 '16 at 16:32
1

From Lollipop (API 21) onwards, Android applies elevation / Z animation to buttons by default. To avoid this, add the following to your Button XML:

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

This will make the button respect its Z-index.

Source

Maksim Ivanov
  • 3,991
  • 31
  • 25