Develop Reference

Android material CardView ripple effect changes content color

I recently moved from using custom card components to material design 3 cards. To my surprise, the ripple color, when pressing on the card, changes the content color. I tried this on the catalog project of the material-design-components repository and the card behaves the same way. My current code for changing the ripple color and the card background:
<style name="Widget.App.Card.Filled" parent="Widget.Material3.CardView.Filled">
<item name="rippleColor">#4D4D4D</item>
<item name="cardBackgroundColor">#android:color/transparent</item>
</style>
I also got a demo showing this behavior: https://i.imgur.com/t4WW4CY.mp4. The font color changes to a light gray based on the ripple effect. I am also using material buttons but there the ripple effect is not affecting the content. I am using the version 1.5.0-rc01.
Does anyone have an idea if that is intended and how I can only change the background color on press using the attributes given by the material design components.
Update:
My card view XML (its the one from the material-components github + custom style):
<com.google.android.material.card.MaterialCardView
style="#style/Widget.App.Card.Filled"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:layout_margin="16dp"
android:clickable="true"
android:focusable="true"
app:contentPadding="#dimen/cat_card_content_padding">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/cat_card_states_card_content"
android:textAppearance="?attr/textAppearanceBody1"/>
</com.google.android.material.card.MaterialCardView>

I think this is happening because of the ripple color applying to the foreground instead of background. So yeah this is intended and i don't think you can change that.
Have a look at the source code : MaterialCardViewHelper.java
Note : This does not happen in buttons bcoz buttons applies ripple to the background instead of foreground.
Source code for button : MaterialButtonHelper.java

TextInputLayout Material Component Issue : The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant)

I am having a problem implementing a Material design with TextInputLayout, I know the solution is to make your activity theme inherits one of Material Component Theme but that will bring such change on most of my app theme and will take more time to refactor it. What I want is Material design just for this specific TextInputLayout on the app.
This is what I tried
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/firstName"
style="#style/CustomInputStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:layout_weight="1"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/fname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/first_name"
android:inputType="text|textCapWords"
android:nextFocusDown="#id/lname"
android:textSize="12sp" />
</com.google.android.material.textfield.TextInputLayout>
<style name="CustomInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeWidth">2dp</item>
<item name="hintTextColor">#color/colorAccent</item>
<item name="boxStrokeColor">#android:color/white</item>
<item name="android:colorAccent">#color/colorAccent</item>
<item name="android:textColorHint">#color/colorAccent</item>
</style>
Error : Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).
Can't we just do this instead of overriding the overall app/activity theme? All I want is to use it at specific Fragment.

I just notice that it is possible just put the Material Components theme in the root view of a XML layout then you can now apply the style without any error.
In the parent/root view add this
android:theme="#style/Theme.MaterialComponents.Bridge"
Then apply the style to child view TextInputLayout
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/firstName"
style="#style/CustomInputStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:layout_weight="1"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/fname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/first_name"
android:inputType="text|textCapWords"
android:nextFocusDown="#id/lname"
style="#style/CustomEditText"
android:textSize="12sp" />
</com.google.android.material.textfield.TextInputLayout>

Problem :This occurs some times if you want to apply a wrong style to your "TextInputLayout".
ex: in my case I try to use the "TextInputLayout" as Drop down list
so inside the "TextInputLayout" i put "AutoCompleteTextView" and inside the last i determine the style style="#style/Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu" so it give me the above error.
Solving: change the style to the correct one.
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
and it works now and the app is run correctly.
Before:
style="#style/Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
After:
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"

I have the same problem but when I change the exposed dropdown style from material3 to material components the crash still persists but now with other material3 components like the new MaterialButton with
<com.google.android.material.button.MaterialButton
Furthermore it requires me to inherit material2 (Material components) and not material3 for my base theme ...
Update 12/05/22
I have tried your version with bridge but now it crashes with another error. From the documentaries an exposed dropdown menu (m3) requires an anchor but with your bridge it crashes because it cannot use the anchor attribute.
I solved all my problems by checking and changing all components to material 3 or legacy/appcompat components. And I styled the textinputlayout directly inside the XML layout, now I can build and start my app without crashes. I can give code examples if needed ;)

Widget.MaterialComponents.MaterialCardView not found

https://material.io/develop/android/theming/shape/
The site describes how to customize a MaterialCardView, but when I choose Widget.MaterialComponents.MaterialCardView as my parent in my style file it can't be found.
I tried to do it with Widget.MaterialComponents.CardView, but it got me a grey background for my card. I could fix the grey background with app:cardForegroundColor which works fine for most cases, but when I use the MaterialCardView in some special cases like as a BottomSheet, the build-in animations for the automatic corner transition makes the grey background again visible.
I'm anyway not happy with app:cardForegroundColor because I think it shouldn't be used when possible.
In the end I could fix all of the problems by choosing the parent as Theme.MaterialComponents,
but I would still like to know what I did wrong or how it should actually be done.
I used androidx and com.google.android.material:material:1.1.0

Style: must have as parent a MaterialComponents theme if you are using AndroidX
<style name="CardActivityTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorAccentX</item>
</style>
To create a beatiful outlined material card in Google style, create it in your activity XML layout:
<com.google.android.material.card.MaterialCardView
android:id="#+id/card0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#FFF"
app:strokeWidth="1dp"
app:strokeColor="DADCE0"
app:cardElevation="0dp"
app:cardCornerRadius="8dp">
</com.google.android.material.card.MaterialCardView>
I have made some attributes hardcoded to give you directly the colors.
Result:
If you prefer the normal elevated card, and not the outlined use this:
<com.google.android.material.card.MaterialCardView
android:id="#+id/card0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#FFF"
app:cardElevation="1dp"
app:cardCornerRadius="8dp">
</com.google.android.material.card.MaterialCardView>
Notice that i have deleted from the previous one the attributes app:strokeWidth and app:strokeColor.
Finally, if you want to create an animation like in the GIF you have posted, I strongly recommend to use Motion Layout.

BottomNavigationView inside a BottomAppBar with transparent background

I have been combining the new(ish) Material BottomAppBar with a standard BottomNavigationView. My xml is like this:
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:fabAlignmentMode="center">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="#android:color/transparent"
app:itemTextAppearanceActive="#style/AppTheme.Text.BottomNavText.Active"
app:itemTextAppearanceInactive="#style/AppTheme.Text.BottomNavText"
app:labelVisibilityMode="labeled"
app:menu="#menu/bottom_nav_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
On the previous version - 1.0.0 - this was working fine, and I could still see the FAB inset as expected. The only minor drawback is this version of the material components library hadn't sorted the elevation effect of the bottom app bar, and so the distinction between the bar and the content above wasn't clear.
When I upgrade to the latest library, which at the time of writing I believe is implementation 'com.google.android.material:material:1.1.0-alpha09', I get the BottomAppBar elevation effects, but when I apply the transparent background to the BottomNavigationView, I get a very strange visual effect that for the life of me I cannot understand.
If I remove the transparent background color, then the effect goes but I lose the FAB inset, as below:
If I remove the bottom navigation view child altogether, and just have the BottomAppBar, I see the visual effect as normal, but without my navigation:
I would love either:
- A good solution to incorporate bottom navigation view inside a BottomAppBar while retaining version 1.1.0 libraries nice elevation effect, and also have the BottomNavigationView effectively inside it so I retain all the benefits of that navigation component
- Or an explanation for what on earth is causing that peculiar first elevation effect, and ideally a way to fix it

Ok, this is nothing to do with BottomAppBar... the background problem happens on BottomNavigationView regardless of where it is, in material library 1.1.0- ....
This is (I think) a bug with the recent version of BottomNavigationView in which it sets a tintable MaterialShapeDrawableBackground as its background if background is either null or a ColorDrawable... and when you set a color in xml, it will be a ColorDrawable (including transparent). Here is the issue in the BottomNavigationView code:
if (getBackground() == null || getBackground() instanceof ColorDrawable) {
// Add a MaterialShapeDrawable as background that supports tinting in every API level.
ViewCompat.setBackground(this, createMaterialShapeDrawableBackground(context));
}
Which gets what must be the random shadow shape you see above.
Solution
The workaround is to set a background in the xml which is neither null or a ColorDrawable. I created my own drawable, which is just a transparent rectangle, and set that as the BottomNavigationView background, and it works.
background_transparent.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#00000000" />
</shape>
And now the updated BottomNavigationView xml:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
style="#style/BottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="#drawable/background_transparent"
app:itemTextAppearanceActive="#style/AppTheme.Text.BottomNavText.Active"
app:itemTextAppearanceInactive="#style/AppTheme.Text.BottomNavText"
app:labelVisibilityMode="labeled"
app:menu="#menu/bottom_nav_menu" />
And the result:

Android Studio's layout editor failing to apply android:windowActionBarOverlay property

I am developing a simple app in Android Studio, and I am testing it on a real device (Asus zenfone 5 & Android 4.4.2). In the main activity I have applied this layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="madapps.mysecondapp.MainActivity"
android:id="#+id/activity_main" android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize"
android:orientation="horizontal"
android:background="#drawable/background_deathstar">
<EditText
android:id="#+id/edit_message"
android:text="#string/message" android:layout_weight="1"
android:layout_width="0dp" android:layout_height="wrap_content"
android:hint="#string/edit_message" android:textColor="#FFF" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:onClick="sendMessage" />
</LinearLayout>
with this style.xml applied to the activity
<resources>
<style name="AppTheme" parent="android:Theme.Holo">
<item name="android:windowActionBarOverlay">true</item>
</style>
</resources>
What I want to do is testing a background image on different screen sizes and densities (dpi).
Now, the problem is that while in my physical device the property
android:windowActionBarOverlay
is applied properly, laying out my action bar on top of my background image, this is not working equally within Android Studio's layout editor, meaning that my image begins at the end of the action bar.
ps. I have also noticed that apart from ignoring the windowActionBarOverlay property, my action bar fails to load my custom action buttons. I think these two problems are somewhat related.
Any suggestions?
Thank you very much

Apparently I should have not expected Android Studio's layout editor to reflect what I'm seeing on devices, because it's only using a subset of the real Android layout system.
Actually my action bar is hidden and shown programmatically, and the layout editor is only supposed to serve as a way to drag-and-drop widgets and preview a layout while editing the XML.