Overlapping buttons with different states in Android

Question

I'm making a Piano application for Android. Using xml, I've made two rectangular buttons, a white key and a black key. I need the black key to overlap the two white keys like a normal piano.

I have two different states(pressed and unpressed) for the button in which I have created two different drawable xml files. On pressing the black key, it works fine. However when I press a white key, the new drawable shape overlaps the black key.

Normal

White Pressed

From my knowledge, by default, the black key is on top of the other two white keys since I defined it last in the XML. Maybe since I'm accessing a new drawable file as source to the button when pressing it, it's drawing the view on top? Is there anyway to prevent this? I've provided the code for each XML file below. Thanks for the help!

Main XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:background="#ffcccccc"
android:gravity="top|center"
tools:context=".MainActivity">
<Button
    android:layout_width="45dp"
    android:layout_height="150dp"
    android:layout_marginTop="100dp"
    android:background="@drawable/wselector"
    android:id="@+id/button1"


    />

<Button
    android:layout_width="45dp"
    android:layout_height="150dp"
    android:layout_marginTop="100dp"
    android:background="@drawable/wselector"
    android:id="@+id/button2"
    android:layout_toRightOf="@id/button1"

    />
<Button
    android:layout_width="40dp"
    android:layout_height="100dp"
    android:layout_marginTop="100dp"
    android:background="@drawable/selector"
    android:id="@+id/button3"
    android:layout_toRightOf="@id/button1"
    android:layout_marginLeft="-20dp"
    android:onClick="soundmmm"
    />

Selector XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/wpressed"
    android:paddingTop="10sp"></item>
<item android:drawable="@drawable/wnormal" android:layout_marginTop="50dp">
</item>
</selector>

Unpressed XML:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shadow" />

<item android:bottom="@dimen/layer_padding">
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/corner_radius" />
        <solid android:color="#ffffffff"/>
    </shape>
</item>
</layer-list>

Pressed XML:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#00000000"/>
    </shape>
</item>
<item android:top="@dimen/layer_padding">
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/corner_radius" />
        <solid android:color="#ffffffff" />
    </shape>
</item>
</layer-list>

Possibly duplicate http://stackoverflow.com/questions/18074303/how-to-create-custom-shape-button-with-selector-in-android — aslamhossin, Mar 21 '17 at 16:45

score 0 · Answer 1 · answered Mar 22 '17 at 13:24

Take each Button and wrap it in a FrameLayout like this:

    <FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/button1">

    <Button
        android:id="@+id/button2"
        android:layout_width="45dp"
        android:layout_height="150dp"
        android:layout_marginTop="100dp"
        android:background="@drawable/wselector"
        android:onClick="soundmmm" />
</FrameLayout>

(This is a demo of the right white key only.) Android should honor the layout order of the FrameLayouts and keep the white key image behind the black key.

The downside of this solution is that it will complicate your layout. If you can find a solution that avoids additional layout, I would go with it; otherwise, this is something that should work for you.

score 0 · Accepted Answer · edited May 23 '17 at 12:02

0

android:stateListAnimator="@null"

Don't bring button to foreground on click

This worked for me. Turns out it was not related to the button states at all, but instead the default Android button animations.

edited May 23 '17 at 12:02

Community

1
1

answered Apr 01 '17 at 06:19

Cashew

85
6

Overlapping buttons with different states in Android

2 Answers2