The cascading effect is visible on an inactive button contained within an interactive card

I've encountered an issue where I've set the button property clickable="false" inside a card that has properties clickable=true and

android:foreground="?android:attr/selectableItemBackground"
. However, when I click on the card, the button also displays a ripple effect. Here's the code snippet:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_marginTop="8dp">

    <android.support.v7.widget.CardView
        android:id="@+id/payment_card_view"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        card_view:cardCornerRadius="2dp"
        card_view:cardElevation="2dp"
        card_view:cardBackgroundColor="#fff"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="4dp">

                <Button
                    android:id="@+id/monthlySubscriptionPayButton"
                    style="?android:attr/borderlessButtonStyle"
                     android:layout_width="wrap_content"
                    android:layout_height="48dp"
                    android:text="@string/payment_pay_text"
                    android:textAllCaps="true"
                    android:textColor="@color/junkart_color"
                    android:textSize="14sp"
                    android:clickable="false"/>
            </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

Thank you!

Answer №1

To fix your issue, make sure to set both clickable="true" and

foreground="?android:attr/selectableItemBackground"
values in the LinearLayout within the CardView.

Here are the modifications I applied to your code:

<android.support.v7.widget.CardView
    android:id="@+id/payment_card_view"
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:layout_weight="1"
    android:layout_gravity="center_horizontal"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="2dp"
    card_view:cardBackgroundColor="#fff">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="4dp">

            <Button
                android:id="@+id/monthlySubscriptionPayButton"
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="wrap_content"
                android:layout_height="48dp"
                android:text="@string/payment_pay_text"
                android:textAllCaps="true"
                android:textColor="@color/junkart_color"
                android:textSize="14sp"
                android:clickable="false"/>
        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

I trust this solution resolves your problem. Feel free to reach out if you have any further questions or concerns.

Answer №2

One approach could be to disable the button by setting it to setEnabled(false), making it unclickable. However, this may not work if the visual style for disabled buttons is distinct.

Answer №3

To prevent the CardView from being clickable, set the clickable attribute to false. Even if the parent view is clickable, any drawable state change event will still be dispatched to the child view, regardless of whether the child view itself is clickable or not.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Once I made the switch from @material-ui to @mui, the theme was not properly implemented

Initially, my project utilized the @material-ui package and I successfully applied a theme to my app However, upon transitioning to the @mui package, the theme is no longer being applied The theme definition is as follows: import { createTheme } from &ap ...

Encountering an issue with MUI Props: "Must provide 4 to 5 type arguments."

I'm attempting to use a custom component and pass in AutocompleteProps as a prop, all while utilizing typescript. Here's my current setup: type Props = { autoCompleteProps?: AutocompleteProps<T> label: string loading?: boolean } cons ...

Learn the process of adjusting opacity for a specific color in CSS

At the moment, this is the code I'm using to apply a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) I am interested in finding out if there is a way to add opacity based o ...

Issues with utilizing React Router and Hooks

Recent Update: I have made some changes to my code by converting it to a functional component. However, it seems like nothing is being returned from the API or there may be an issue with how I am mounting the component. The error message "TypeError: Cannot ...

Null value is returned during the parsing of a JSONArray

Trying to extract information from the following JSON String: { lhs: "1 British pound", rhs: "1.6152 U.S. dollars", error: "", icc: true } However, when attempting to use JSONArray to parse it, I receive a null value. ...

React components featuring Material UI icons

I'm in need of assistance. I am looking for the Material UI icons, but I can't seem to find any information on how to obtain them. https://i.stack.imgur.com/FAUc7.jpg ...

Make the Material UI React TableCell adjust its width to fit the content dynamically

The code provided here is similar to the basic table layout from Material UI. The only modification made is in the content of the first row and second column. A Grid element has been incorporated within it, and additional columns have been added to create ...

How can I turn a Material UI icon into a clickable anchor tag?

How can I make this Material UI icon clickable and open a new window to www.linkedin.com? Should I use href="Linkedin.com" or add an onClick event? I want it to open in a new tab/window as well. ...

Efficiently Managing Image Uploads with React and Redux

Currently, I am working on uploading multiple images by passing them one by one to the API. The goal is for each image to be displayed as soon as it is uploaded, without having to wait for all the other images to finish uploading. However, I encountered a ...

Build broken due to issues with Material UI Drawer

After incorporating Material UI with React, I encountered an issue when attempting to deploy my site. The problem seems to be related to the classes not being assigned on build for some unknown reason. Despite dropping the usage of the clsx package, the sa ...

Preventing the re-render of the Material UI TextField React Component when applying a conditional style

React Component : class Information extends Component { constructor() { this.state = { updateAccount: false } this.switchToTrue = this.switchToTrue.bind(this); this.switchToFalse = this.switchToFalse.bind(this); ...

Determine if a mobile application has been installed using Vue.js

I am currently developing a web application and have implemented a check to determine whether the user is accessing it from a mobile device or laptop. Let's consider the link as: my-site.com In addition to the web version, my site also offers a mobi ...

Creating a button component in React that spans the entire width

I have integrated a logging component in React and need all buttons to be the same width across the available space. You can view my implementation here. Below is the code snippet: export default function Login (props: any) { return( <Box ...

Is there a way to automatically update or refresh the material UI table with the latest data from the database after performing any actions in React?

Querying useVideos() fetches all videos from the database. However, when a new video is added, it does not immediately appear in the Material UI table. Instead, only after refreshing the page does the new entry show up. I now need assistance in displayin ...

Unravel intricate JSON data and display it in a Material-UI table

How to convert the complex JSON data provided below into a material-ui table similar to the example shown. Each row may contain either a single value or multiple rows in a single box. I have attempted to display the data in 2 columns only, but need help wi ...

Numerous conversations happening simultaneously on one screen

I'm currently in the process of creating two Dialog modals using @material-ui/core. Here is my current file structure: |-components/ |-|-index.js |-|-common/ |-|-|-header.jsx |-|-|-searchModal.jsx |-|-|-signModal.jsx My goal is to import these two d ...

The new mui v5 Dialog is having trouble accepting custom styled widths

I am facing an issue with my MUI v5 dialog where I cannot seem to set its width using the style() component. import { Dialog, DialogContent, DialogTitle, Paper, Typography, } from "@mui/material"; import { Close } from "@mui/icons- ...

List item with React Material UI tooltip

click here for image preview Exploring the idea of incorporating a customized tooltip component using React Material UI. The goal is to leverage the tooltip, list item, and list components provided by React Material UI. I have experimented with utilizing ...

Tips for dealing with event bubbling in React

Looking for a way to add an onBlur event to the left panel so that it closes when the user clicks on the right panel. I attempted using onMouseLeave but the closing animation isn't as smooth as desired. Additionally, I'd like for users to close t ...

Experiencing a force close error when trying to parse JSON within an asynchronous task

I am currently struggling to display a progress dialog while the JSON data is being parsed in the background using an AsyncTask. However, every time I attempt to do so, the application crashes. The JSON parsing works fine without using an AsyncTask. Below ...