onClick for buttons on custom CardView
Posted By: Anonymous
I have a custom CardView that contains a Button, a RadioButton and some Text. I have several of these card placed in a GridLayout. My goal is that each button will play a different sound that will be assigned to it. Is there a way to create one onClick method, that will change the sound played based on which button is clicked? Or do I have to assign a new onClick for each button?
Here is my activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="@+id/adView"
android:layout_width="409dp"
android:layout_height="94dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111"/>
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black"
app:layout_scrollFlags="scroll|enterAlways"
app:subtitle="Board1"
app:subtitleTextColor="@color/white"
app:title="SoundBoard"
app:titleTextColor="@color/white" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#838080"
app:tabIndicatorAnimationMode="linear"
app:tabIndicatorColor="@color/black"
app:tabIndicatorGravity="bottom"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/black"
app:tabTextColor="#000000">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/Tab1" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<GridLayout
android:layout_width="409dp"
android:layout_height="531dp"
android:layout_marginBottom="11dp"
android:numColumns="2"
android:scrollbars="vertical"
android:useDefaultMargins="true"
app:layout_constraintBottom_toTopOf="@+id/adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/appbar"
app:layout_constraintVertical_bias="0.0">
<include
android:id="@+id/playButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center_horizontal"
android:layout_row="0"
android:layout_column="0"
layout="@layout/custom_card" />
<include
android:id="@+id/playButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center_horizontal"
android:layout_row="0"
android:layout_column="1"
layout="@layout/custom_card" />
<include
android:id="@+id/playButton3"
layout="@layout/custom_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center_horizontal"
android:layout_row="0"
android:layout_column="2" />
<include
android:id="@+id/playButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center_horizontal"
android:layout_column="0"
android:layout_row="1"
layout="@layout/custom_card" />
<include
android:id="@+id/playButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center_horizontal"
android:layout_column="1"
android:layout_row="1"
layout="@layout/custom_card" />
<include
android:id="@+id/playButton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="center_horizontal"
android:layout_column="2"
android:layout_row="1"
layout="@layout/custom_card" />
</GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here is my custom_card.xml
<?xml version="1.0" encoding="utf-8"?>
<!--XML implementation of Card Layout
Keep the width of card layout to match parent-->
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="135dp"
android:layout_height="100dp"
android:id="@+id/customCardView"
android:layout_gravity="center"
android:layout_margin="5dp"
app:cardCornerRadius="5dp"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/playButton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/black"
android:contentDescription="@string/image"
android:text="@string/play"
android:onClick="playSound"/>
<RadioButton
android:id="@+id/loopSelect"
android:layout_width="92dp"
android:layout_height="26dp"
android:layout_gravity="center"
android:text="@string/Loop"
android:textAlignment="center" />
<TextView
android:id="@+id/cardText"
android:layout_width="86dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/example"
android:textAlignment="center" />
</LinearLayout>
</androidx.cardview.widget.CardView>
And here is my MainActivity.java
package com.saskpolytech.cst.soundboard;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;
public class MainActivity extends AppCompatActivity {
private AdView mAdView;
MediaPlayer ice;
Button playTest;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MobileAds.initialize(this, new OnInitializationCompleteListener() {
@Override
public void onInitializationComplete(InitializationStatus initializationStatus) {
}
});
mAdView = findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();
mAdView.loadAd(adRequest);
}
public void playSound(View view) {
}
}
Solution
As of the current implementation, you’ll need to implement onClick for each include button in the grid layout.
Try implementing a recycler view with the grid layout manager, and work with their positions. Work with their positions(store them in a list, or hashmap along with the sound name that you need to play), and onItemClick check the id and play the sound required for the button using an interface.
Other implementation may include creating a custom view class using the custom_card.xml, and making your own functions inside the view class to work with each button id and song ids.
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
