I'm trying to create a custom "Warning" dialog, which I want to have rounded corners in it. So I've put my whole layout into a CardView and I'm setting my dialog's layout as this layout.
However, on dark backgrounds, such as the default Android dialog background, I seem to be getting white pixels at the corners of my dialog.
I've already tried what is proposed here, setting app:cardBackgroundColor="#color/transparent", but it didn't make a difference.
The layout of my dialog is the following (its a different one form the screenshots but the buttons, bakcground and the CardView are the same):
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/error_cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/error_dialog_margin"
android:layout_marginEnd="#dimen/error_dialog_margin"
app:cardCornerRadius="#dimen/error_dialog_corner_radius"
app:cardElevation="#dimen/error_dialog_elevation"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/error_icon"
style="#style/ErrorViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_outer_margin"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/error_icon"
android:tint="#color/redColor" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/error_title"
style="#style/ErrorViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_outer_margin"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_outer_margin"
android:ellipsize="end"
android:gravity="center_horizontal"
android:maxLines="2"
android:text="#string/something_went_wrong" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/error_message"
style="#style/ErrorViewMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_outer_margin"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_outer_margin"
android:gravity="center"
android:minHeight="55dp"
tools:text="#string/try_again_later" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:background="#color/blueColor">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/error_ok_button"
style="#style/PrimaryButton"
android:layout_width="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:text="#string/ok_button" />
</FrameLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Please check the screenshots of the issue:
Any idea why this happens and how to fix it? It seems to be related to the cardview's background, since setting all backgrounds to transparent fixes the issue, But I need the dialog background to be white.
For me setting
app:cardBackgroundColor="#color/transparent"
in the CardView fixed it
Instead of using a CardView for rounding the dialog corners declare a new style in your styles.xml.
This style should have ThemeOverlay.MaterialComponents.Dialog.Alert as a parent.
The property you need to set is shapeAppearanceMediumComponent:
<style name="style_dialog" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
<item name="shapeAppearanceMediumComponent">#style/style_dialog_background</item>
</style>
<style name="style_dialog_background" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">#dimen/error_dialog_corner_radius</item>
</style>
Edit your dialog layout and remove the CardView parent:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/error_icon"
style="#style/ErrorViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_outer_margin"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/error_icon"
android:tint="#color/redColor" />
...
</LinearLayout>
Finally, create your dialog like this:
MaterialAlertDialogBuilder(activity, R.style.style_dialog)
.setView(<your-dialog-layout>)
...
.create().apply {
show()
}
Try using material card layout
com.google.android.material:material:1.2.1
<com.google.android.material.card.MaterialCardView
android:layout_width="180dp"
android:layout_margin="4dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:foreground="?attr/selectableItemBackground"
android:padding="8dp"
app:cardCornerRadius="6dp"
app:cardElevation="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/border"
>
Related
I want to show drawable vector asset (.xml format) inside RecyclerView and give it a tint. But it doesnt show up nicely and kind of pale/faded out. I try to hardcode the tint color value and got the same result.
Here is the code
<!-- This doesnt work: using RecyclerView -->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_services"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="0dp"
android:layout_marginTop="16dp"
android:alpha="1"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/gopay"
app:spanCount="4"
tools:itemCount="8"
tools:listitem="#layout/item_main_service" />
<!-- This works: accessing item layout directly -->
<include
layout="#layout/item_main_service"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/rv_services" />
Here is the item layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_columnWeight="1"
android:orientation="vertical"
tools:ignore="UseCompoundDrawables">
<ImageView
android:id="#+id/iv_service"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_round_sports_motorsports_24"
app:tint="#color/green_500" />
<TextView
android:id="#+id/tv_service"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/TextAppearance.MaterialComponents.Caption"
android:textColor="#color/black"
tools:text="GoRide" />
</LinearLayout>
And here is the screenshot
If i use jpg/png it works though
The drawable used is Material Icons that comes with Android Studio. How can this happens and how to solve it?
Solved, i was using Coil to load the drawable. Replacing with Glide or even manual setImageResource works.
I'm trying to change the color of the ripple effect to white (rather than the default dark grey).
Each ImageView has style="#style/Widget.AppCompat.ActionButton" to achieve a ripple effect.
I've tried applying tint / backgroundtint / creating a custom style in styles.xml - none have an effect on the color of the ripple.
Example of current effect:
Layout file:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/item_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#333333"
>
<ImageView
android:id="#+id/info_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_info_outline_white_24dp"
style="#style/Widget.AppCompat.ActionButton"
android:clickable="true"
android:focusable="true"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintRight_toLeftOf="#+id/share_btn"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<ImageView
android:id="#+id/share_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_share_white_24dp"
style="#style/Widget.AppCompat.ActionButton"
android:clickable="true"
android:focusable="true"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<ImageView
android:id="#+id/delete_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete_white_24dp"
style="#style/Widget.AppCompat.ActionButton"
android:clickable="true"
android:focusable="true"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintLeft_toRightOf="#id/share_btn"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
You can create a theme like this:
<style name="RippleColorTheme" parent="Widget.AppCompat.ActionButton">
<item name="colorControlHighlight">#color/yourRippleColor</item>
</style>
And apply this theme to your image view like this:
<ImageView
...
android:theme="#style/RippleColorTheme" />
This should change the color of your ripple effect on that particular view.
I use a Seekbar in the middle of two layers with different background colors.
In normal state it's OK. here's the picture:
When holding down the Seekbar, it has a wrong background in the top half:
Here is the code in layout file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout ...
android:background="#23232C"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/player"
android:layout_width="0dp"
android:layout_height="56dp"
android:background="#2F2F38"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageViewAlbumArt">
<!-- ... some views ...-->
</android.support.constraint.ConstraintLayout>
<SeekBar
android:paddingStart="0dp"
android:paddingEnd="0dp"
android:id="#+id/seekbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/player"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/player" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/player"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
I found that the problem is that when Seekbar is above any view the background not shown. Here's the simple layout that show the case:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#3b3930" />
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
</FrameLayout>
I follow the instruction in this stackoverflow link and this is the result:
Is there anyway to remove the default background color behavior?
I gave background color to the bottom view and seekbar background color behavior gone.
The only solution for know.
I want to create a cardview where the cards have simple one photo and an upper right bottom to remove them. So in order to the bottom be completelly visible i need to make the card bigger than the photo, but i dont want to show it. So i try to set the background to transparent and at design time everything seams fine
This is a screenshot of android studio at design time:
A) shows how the card looks like
B) is the same card when i click on it, showing that the card is a bit bigger than the photo itself (the blue borders are the normal android studio border when you select an element)
but during the runtime the cards are getting some weird elevation:
Here goes the code:
influencer_card.xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardView"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center"
android:layout_marginBottom="#dimen/smallMargin"
android:elevation="0dp"
card_view:cardBackgroundColor="#android:color/transparent"
card_view:cardCornerRadius="0dp">
<ImageView
android:layout_width="#dimen/influencerCardSize"
android:layout_height="#dimen/influencerCardSize"
android:layout_gravity="bottom"
android:scaleType="centerCrop"
/>
<TextView
android:layout_width="#dimen/influencerCardSize"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:alpha="0.7"
android:background="#color/colorPrimaryDark"
android:gravity="center"
/>
<ImageButton
android:layout_width="#dimen/removeButtonSize"
android:layout_height="#dimen/removeButtonSize"
android:layout_gravity="right|top"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/ic_remove" />
</android.support.v7.widget.CardView>
new_influencers.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="#dimen/influencersViewHeight"
android:layout_gravity="center"
android:layout_margin="#dimen/smallMargin"
android:background="#android:color/transparent"
android:elevation="0dp"
android:scrollbars="vertical"
android:visibility="visible" />
</LinearLayout>
I don't change any style related thing on the java code...
how can i remove this annoying elevation
If you don't want the elevation, you should consider not using CardView since CardView brings the elevation by default.
Instead, replace the CardView with a container like ConstraintLayout or RelativeLayout. These options don't carry any elevation by default, are transparent, and you can still add foreground ripple effects to them if you wish to do so.
want to card make invisible ,make "alpha" attribute 1
If you want to remove elevation in CardView,
Use app:cardElevation = "0dp" instead of android:cardElevation="0dp".
Use card_view:cardElevation="0dp" instead of android:elevation="0dp". Hope this helps you
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardView"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_below="#+id/linearLayout"
android:layout_centerHorizontal="true"
card_view:cardElevation="0dp"
card_view:cardBackgroundColor="#android:color/transparent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:src="#drawable/img"
android:scaleType="centerCrop"
android:layout_marginRight="10dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:alpha="0.7"
android:text="text"
android:layout_marginEnd="10dp"
android:background="#color/colorPrimaryDark"
android:gravity="center"
android:layout_marginRight="10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="right|top"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/img" />
</android.support.v7.widget.CardView>
My CardView was being shown as expected till android O like this,
But in android P it looks like this, (Transparent white rectangle inside)
This is the style used in all CardView of the app.
<style name="translucentCard" parent="CardView">
<item name="cardCornerRadius">20dp</item>
<item name="cardBackgroundColor">#26ffffff</item>
</style>
If I use non-transparent cardBackgroundColor then the inner rectangle disappears but it's not the solution. I need to use semi-transparent color as used before. Can anyone help me to overcome this please ? Please note, It's only happening in Android Pie.
backward compatible elevation on the latest release
app:cardElevation="0dp"
OR
<item name="cardElevation">0dp</item>
Use This hope this will work :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="...">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="..." />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
style="#style/translucentCard"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_height="wrap_content">
<LinearLayout
style="#style/paddedContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/login_email">
<EditText
android:id="#+id/.."
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:padding="8dp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/login_password">
<EditText
android:id="#+id/editTextPasswordForLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:padding="8dp" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewForgotPassword"
style="#style/WarrentyLifeTheme.TextAppearance.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/login_forgot_password" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/buttonLogin"
android:layout_width="wrap_content"
android:layout_height="#dimen/buttonHeight"
android:paddingLeft="36dp"
android:paddingRight="36dp"
android:text="#string/dashboard_button_login" />
</LinearLayout>
Try setting
android:background="#null"
to LinearLayout inside the CardView or to TextViews inside this LinearLayout.
This way you will remove the background altogether so there won't be any overdraw.
Add this
android:outlineSpotShadowColor="#color/colorGray"
android:outlineAmbientShadowColor="#color/colorGray"
This solved my problem. Use gray color with a low transparency