Skip to content
Fix Code Error

onClick for buttons on custom CardView

June 19, 2021 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

  • How to properly do JSON API GET requests and assign output…
  • Unable to run Robolectric and Espresso with a…
  • MaterialCardView is in front of NavigationView. How can I…
  • Android : Fragment doesn't fit into Fragment Container
  • How to parse JSON with XE2 dbxJSON
  • Fragment Not Showing in the Activity
  • Unable to move from one fragment to another
  • Azure Availability Zone ARM Config
  • The 'compilation' argument must be an instance of…
  • Remove Text from the edit text when edit text is focused

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

Post navigation

Previous Post:

For Loop – Get Element by Id

Next Post:

Method that Takes in ArrayList removes words and returns an Acronym

Leave a Reply Cancel reply

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

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error