To make Piano like layout, I've used RelativeLayout and put buttons in such a way that black buttons would overlap white buttons as shown in screenshot below.
When I click white Buttons, they overlaps Black Buttons. In HTML there is property named z-Index. Similarly elevation property of Android Button is there but it is not solving the problem. White Buttons should not overlap black buttons while playing Piano. What should I do?
XML Code :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:id="@+id/cmbRaag"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:width="50dp"
android:text="राग"
android:textSize="20dp" />
<Spinner
android:id="@+id/spnRaag"
android:layout_width="150dp"
android:layout_height="38dp"
android:layout_margin="5dp" />
<TextView
android:id="@+id/textView3"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:width="50dp"
android:text="थाट"
android:textSize="20dp" />
<EditText
android:id="@+id/tThaat"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:ems="10"
android:inputType="textPersonName" />
<TextView
android:id="@+id/textView4"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:width="50dp"
android:text="प्रहर"
android:textSize="20dp" />
<EditText
android:id="@+id/tPrahar"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView5"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:width="50dp"
android:text="वादी"
android:textSize="20dp" />
<EditText
android:id="@+id/tVaadi"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" />
<TextView
android:id="@+id/textView6"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:width="50dp"
android:text="संवादी"
android:textSize="20dp" />
<EditText
android:id="@+id/tSamvaadi"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" />
<TextView
android:id="@+id/textView7"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:width="50dp"
android:text="वर्ज्य"
android:textSize="20dp" />
<EditText
android:id="@+id/tVarjya"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView8"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:width="50dp"
android:text="आरोह"
android:textSize="20dp" />
<EditText
android:id="@+id/tAroh"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_span="2"
android:ems="10"
android:inputType="textPersonName" />
<TextView
android:id="@+id/textView9"
android:layout_width="103dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:width="50dp"
android:text="अवरोह"
android:textSize="20dp" />
<EditText
android:id="@+id/tAvroh"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_span="2"
android:ems="10"
android:inputType="textPersonName" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<CheckBox
android:id="@+id/chk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Init Sa" />
<ToggleButton
android:id="@+id/tglScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton"
android:textOff="SCANNING ON"
android:textOn="SCANNING OFF" />
<Button
android:id="@+id/show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="show" />
<Button
android:id="@+id/clear"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="clear" />
</TableRow>
</TableLayout>
<HorizontalScrollView
android:layout_width="721dp"
android:layout_height="167dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#FFFFFF">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="36dp"
android:orientation="horizontal">
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="38"
android:progress="15" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#673AB7">
<Button
android:id="@+id/w1"
android:layout_width="40dp"
android:layout_height="160dp"
android:contentDescription="0"
android:tag="1" />
<Button
android:id="@+id/w2"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w1"
android:contentDescription="1"
android:tag="3" />
<Button
android:id="@+id/w3"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w2"
android:contentDescription="2"
android:tag="5" />
<Button
android:id="@+id/w4"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w3"
android:contentDescription="3"
android:tag="6" />
<Button
android:id="@+id/w5"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w4"
android:contentDescription="4"
android:tag="8" />
<Button
android:id="@+id/w6"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w5"
android:contentDescription="5"
android:tag="10" />
<Button
android:id="@+id/w7"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w6"
android:contentDescription="6"
android:tag="12" />
<Button
android:id="@+id/w8"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w7"
android:contentDescription="7"
android:tag="13" />
<Button
android:id="@+id/w9"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w8"
android:contentDescription="8"
android:tag="15" />
<Button
android:id="@+id/w10"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w9"
android:contentDescription="9"
android:tag="17" />
<Button
android:id="@+id/w11"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w10"
android:contentDescription="10"
android:tag="18" />
<Button
android:id="@+id/w12"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w11"
android:contentDescription="11"
android:tag="20" />
<Button
android:id="@+id/w13"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w12"
android:contentDescription="12"
android:tag="22" />
<Button
android:id="@+id/w14"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w13"
android:contentDescription="13"
android:tag="24" />
<Button
android:id="@+id/w15"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w14"
android:contentDescription="14"
android:tag="25" />
<Button
android:id="@+id/w16"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w15"
android:contentDescription="15"
android:tag="27" />
<Button
android:id="@+id/w17"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w16"
android:contentDescription="16"
android:tag="29" />
<Button
android:id="@+id/w18"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w17"
android:contentDescription="17"
android:tag="30" />
<Button
android:id="@+id/w19"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w18"
android:contentDescription="18"
android:tag="32" />
<Button
android:id="@+id/w20"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w19"
android:contentDescription="19"
android:tag="34" />
<Button
android:id="@+id/w21"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w20"
android:contentDescription="20"
android:tag="36" />
<Button
android:id="@+id/w22"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w21"
android:contentDescription="21"
android:tag="37" />
<Button
android:id="@+id/w23"
android:layout_width="40dp"
android:layout_height="160dp"
android:layout_toRightOf="@+id/w22"
android:contentDescription="22"
android:tag="39" />
<Button
android:id="@+id/b1"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-10dp"
android:layout_marginRight="-6dp"
android:layout_toRightOf="@+id/w1"
android:background="#000"
android:contentDescription="0"
android:tag="2" />
<Button
android:id="@+id/b2"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-6dp"
android:layout_marginRight="-10dp"
android:layout_toRightOf="@+id/w2"
android:background="#000"
android:contentDescription="1"
android:tag="4" />
<Button
android:id="@+id/b3"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-10dp"
android:layout_marginRight="-6dp"
android:layout_toRightOf="@+id/w4"
android:background="#000"
android:contentDescription="2"
android:tag="7" />
<Button
android:id="@+id/b4"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-8dp"
android:layout_marginRight="-8dp"
android:layout_toRightOf="@+id/w5"
android:background="#000"
android:contentDescription="3"
android:tag="9" />
<Button
android:id="@+id/b5"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-6dp"
android:layout_marginRight="-10dp"
android:layout_toRightOf="@+id/w6"
android:background="#000"
android:contentDescription="4"
android:tag="11" />
<Button
android:id="@+id/b6"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-10dp"
android:layout_marginRight="-6dp"
android:layout_toRightOf="@+id/w8"
android:background="#000"
android:contentDescription="5"
android:tag="14" />
<Button
android:id="@+id/b7"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-6dp"
android:layout_marginRight="-10dp"
android:layout_toRightOf="@+id/w9"
android:background="#000"
android:contentDescription="6"
android:tag="16" />
<Button
android:id="@+id/b8"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-10dp"
android:layout_marginRight="-6dp"
android:layout_toRightOf="@+id/w11"
android:background="#000"
android:contentDescription="7"
android:tag="19" />
<Button
android:id="@+id/b9"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-8dp"
android:layout_marginRight="-8dp"
android:layout_toRightOf="@+id/w12"
android:background="#000"
android:contentDescription="8"
android:tag="21" />
<Button
android:id="@+id/b10"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-6dp"
android:layout_marginRight="-10dp"
android:layout_toRightOf="@+id/w13"
android:background="#000"
android:contentDescription="9"
android:tag="23" />
<Button
android:id="@+id/b11"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-10dp"
android:layout_marginRight="-6dp"
android:layout_toRightOf="@+id/w15"
android:background="#000"
android:contentDescription="10"
android:tag="26" />
<Button
android:id="@+id/b12"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-6dp"
android:layout_marginRight="-10dp"
android:layout_toRightOf="@+id/w16"
android:background="#000"
android:contentDescription="11"
android:tag="28" />
<Button
android:id="@+id/b13"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-10dp"
android:layout_marginRight="-6dp"
android:layout_toRightOf="@+id/w18"
android:background="#000"
android:contentDescription="12"
android:tag="31" />
<Button
android:id="@+id/b14"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-8dp"
android:layout_marginRight="-8dp"
android:layout_toRightOf="@+id/w19"
android:background="#000"
android:contentDescription="13"
android:tag="33" />
<Button
android:id="@+id/b15"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-6dp"
android:layout_marginRight="-10dp"
android:layout_toRightOf="@+id/w20"
android:background="#000"
android:contentDescription="14"
android:tag="35" />
<Button
android:id="@+id/b16"
android:layout_width="25dp"
android:layout_height="100dp"
android:layout_marginLeft="-6dp"
android:layout_toRightOf="@+id/w22"
android:background="#000"
android:contentDescription="15"
android:tag="38" />
</RelativeLayout>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
