I'm currently developing a Piano app for Android. In my XML layout, I have created two rectangular buttons representing white and black keys. The challenge I'm facing is getting the black key to overlap the two white keys, similar to how a real piano looks.
Each button has two states - pressed and unpressed, with each state having its own drawable XML file. When pressing the black key, everything works as expected. However, when I press a white key, the new drawable shape seems to overlap the black key.
It seems that since I defined the black key last in the XML layout, it should naturally be on top of the white keys. Perhaps the issue arises from accessing a new drawable file as the source for the button when it's pressed, causing it to draw the view on top. Is there a solution to prevent this overlapping behavior? Below, I've included the code for each XML file. Thank you for any assistance!
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>