onClick for buttons on custom CardView

by Code Error
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

Related Articles

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Leave a Reply

Your email address will not be published. Required fields are marked *