Don't bring button to foreground on click

Question

My app currently looks like below. Three Buttons in a RelativeLayout, the middle button has negative margin left and right to overlap the other two buttons.

Issue: When I click either the left or the right button, it gets to the foreground for a second and overlaps the middle button, which looks very ugly.

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

        <Button
            android:id="@+id/voices"
            android:layout_width="160dp"
            android:layout_height="wrap_content"

            android:layout_gravity="center_vertical"

            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:onClick="clickVoices"
            android:background="#333"
            android:textColor="#fff"
            android:text="@string/main_voices" />

        <Button
            android:id="@+id/chat"
            android:layout_width="160dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"

            android:onClick="clickChat"
            android:background="#333"
            android:textColor="#fff"
            android:text="@string/main_chat" />

        <Button
            android:id="@+id/record"
            android:layout_width="60dp"
            android:layout_height="100dp"

            android:clickable="true"
            android:onClick="clickRecord"
            android:scaleType="centerInside"
            android:src="@drawable/record"
            android:text="Record"
            android:layout_toRightOf="@+id/voices"
            android:layout_toLeftOf="@+id/chat"
            android:layout_marginLeft="-20dp"
            android:layout_marginRight="-20dp"
            android:layout_marginTop="-30dp"
            android:background="@drawable/round_button"

            android:paddingTop="30dp"
            android:layout_marginBottom="10dp" />
    </RelativeLayout>

Just answered yesterday. Possible Dup? https://stackoverflow.com/questions/36392715/overlapping-buttons-prevent-button-from-raising-on-touch/36414403#36414403. Regardless, the answer I posted works. — CaptJak, Apr 05 '16 at 14:20
Hmmmm. Your question is better than the one I linked above, and per [this post](https://meta.stackexchange.com/questions/147643/should-i-vote-to-close-a-duplicate-question-even-though-its-much-newer-and-ha/147651#147651), the other should be flagged as dupe. But I don't know what to do with my answer. [Went to Meta for guidance](https://meta.stackoverflow.com/questions/320470/should-i-move-my-answer-to-a-new-duplicate). — CaptJak, Apr 05 '16 at 14:42
What about move the `recordButton` out of the RelativeLayout... or put the other two buttons into a LinearLayout then `recordButton` can float on the top naturally. — sakiM, Apr 06 '16 at 03:41

CaptJak · Accepted Answer · 2019-08-22T16:54:00.907

6

The default button has animations that run when it's touched and uses a StateListAnimator to do this. The animations that elevate the button changes the android:elevation and android:translateZ properties of the view.

To prevent this from animating, simply stop animations from running on this View by setting: android:stateListAnimator="@null"

edited Aug 22 '19 at 16:54

answered Apr 05 '16 at 14:30

CaptJak

3,592
1
29
50

Even though it works, it would be useful to know how to keep all the properties of StateListAnimator while changing only the translation+elevation so that Android does not bring it to the front. Is there a way to do that? – BourbonCreams Feb 21 '21 at 13:29

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

Use a FrameLayout. All items you put in there are stacked on top of each other.

Or try:

Put the image view above (on top - first child of the parent) the layout in the xml file that way the image will be behind the layout.

It shouldnt matter that you are using a button, it should be the same. Hope it helps.

I got this information from this link

EDIT:

This is how it looks like when i take your code and convert it into a frame layout maybe im missing something cause i cant launch it on an emulator atm.

edited May 23 '17 at 10:29

Community

1
1

answered Apr 05 '16 at 12:29

Robbert

68
2
12

Hey, I thought so as well, but I have no idea how to actually realize it with a FrameLayout in a manner that it still looks exactly as above. – poitroae Apr 05 '16 at 13:55
@poitroae Quickly made the same layout and i CAN get it to look like this, but i don have all the res files needed, can you try and delete this layout and make a new one? -- Im editing my awnser to show you my view -- – Robbert Apr 05 '16 at 14:01
@poitroae btw did you try moving the code from the record button up above the other buttons? i read somewhere that that sometimes helps aswell. I am new to android myself so i dont have the most knowledge about this :) – Robbert Apr 05 '16 at 14:15

Don't bring button to foreground on click

2 Answers2

Linked