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>

Smocking

Just answered yesterday. Possible Dup? #36393215. Regardless, the answer I posted works. – Stirps

Hmmmm. Your question is better than the one I linked above, and per this post, the other should be flagged as dupe. But I don't know what to do with my answer. Went to Meta for guidance. – Stirps

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. – Titanism

Answer 1

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"

Stirps

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? – Lollapalooza

Answer 2

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.

Salep

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. – Smocking

@Smocking 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 -- – Salep

@Smocking 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 :) – Salep