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>
Related
I had nested LinearLayouts and after reading some doc I tried to switch to ConstraintLayout. But I did not find how to insert a view to just display a background.
So far I just set the background on the layout containing the items.
This is what the old nested structure looks like (with more nested items in other sub-layouts):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/black"
android:gravity="center" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
... some margins and padding
android:background="#drawable/global_background" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:background="#drawable/text_area_background" >
<TextView
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center" />
<TextView
android:id="#+id/Text2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center" />
...
This way I was able to easily set a shape of my own as a background for the different groups of items I displayed.
How can I achieve the equivalent using ConstraintLayout?
I understand how I can constrain my items to get organized the same way, and how I could set the backgrounds to align with everything too. But how do I insert a simple background item?
I used ImageView to display my background and (hardly) found a way to assemble my items inside it.
One problem is that I get a warning Image without contentDescription.
<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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black">
<ImageView
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="2:5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/global_background" />
...
<Button
android:id="#+id/buttonValidate"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="8dp"
android:background="#drawable/green_button"
android:text="#string/validate"
app:layout_constraintBottom_toBottomOf="#+id/background"
app:layout_constraintDimensionRatio="15:6"
app:layout_constraintEnd_toEndOf="#+id/background"
app:layout_constraintStart_toStartOf="#+id/background"
app:layout_constraintTop_toBottomOf="#+id/upperButton" />
But I struggled to put another background inside (itself containing several TextView). My constraints were always messing one or the other... I ended up with a nested ConstraintLayout which is working fine, probably not the optimal solution but all my other attempts failed.
When using rounded corner in CardView, shows a white border in rounded area which is mostly visible in dark environment. For easier understanding, check the attached image blow.
here is xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorTransparent"
android:orientation="vertical"
android:padding="4sp">
<androidx.cardview.widget.CardView
android:id="#+id/image_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="20dp"
android:background="#color/colorTransparent"
app:cardCornerRadius="20dp"
app:cardElevation="4dp">
<ImageView
android:id="#+id/iv_themes"
android:layout_width="match_parent"
android:layout_height="110dp"
android:background="#color/colorTransparent"
android:gravity="center"
android:scaleType="centerCrop"
android:src="#mipmap/tm_2_mip_background" />
</androidx.cardview.widget.CardView>
</LinearLayout>
I had the same problem recently.
Adding app:cardBackgroundColor="#color/transparent" to the CardView did the trick.
I want to remove extra space inside the CardView so the buttons does not have a white border as shown in the picture . This image was captured from my tablet but the Layout looks well in 5 Inch Mobile devices
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
app:cardCornerRadius="20dp"
app:cardElevation="10dp">
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleWhite"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/twitter_button"
android:drawableStart="#drawable/ic_twitter"
android:drawableTint="#android:color/white"
android:paddingStart="10dp"
android:text="Twitter"
android:textColor="#android:color/white"
android:textStyle="bold" />
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="25dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
app:cardCornerRadius="20dp"
app:cardElevation="10dp">
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleWhite"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/facebook_button"
android:drawableStart="#drawable/ic_facebook"
android:drawableTint="#android:color/white"
android:paddingStart="10dp"
android:text="Facebook"
android:textColor="#android:color/white"
android:textStyle="bold" />
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is the code for the CardViews and the buttons. I didn't paste the whole layout code because I don't think it has effect on my problem and by the way I tried changing margins of the buttons but it didn't solve my problem
From library documentation it is nowhere mentioned that you need to use can completely remove the cardview as it seems unnecessary. You can remove your cardview and enclose your button directly in MaterialRippleLayout to achieve your ripple effect. Check library description here https://github.com/balysv/material-ripple.
i am trying to make CardView with elevation but the issue is when i use no-alpha color like "#ffffff" it works fine but when i set some alpha color like #b0ffffffit shows another inner view with elevation
like this
but when i set non-alpha color like"#ffffff" it works fine
and this is my layout
<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:layout_width="100dp"
android:layout_height="100dp"
android:background="#b0ffffff"
android:layout_centerInParent="true"
card_view:cardBackgroundColor="#b0ffffff"
card_view:cardElevation="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="#drawable/people" />
</android.support.v7.widget.CardView>
btw i am trying to make a view like this
just remove the line:
card_view:cardBackgroundColor="#b0ffffff"
and it should work
Try this
<android.support.v7.widget.CardView
android:layout_width="100dp"
android:layout_height="100dp"
app:cardBackgroundColor="#B0FFFFFF"
app:cardCornerRadius="50dp"
app:cardElevation="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="#drawable/people" />
</android.support.v7.widget.CardView>
If you are seeing annoying border around your CardView, you can try the code below, as mentioned in 배준모's answer. This also should work with androidx.cardview.widget.CardView.
<android.support.v7.widget.CardView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="#dimen/margin"
android:background="#android:color/transparent"
android:elevation="0dp"
app:cardBackgroundColor="#color/form_card_bg_color"
app:cardElevation="0dp"
app:contentPadding="#dimen/margin_large"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true" >
I'm making a weather app with material cards and its shadows.
I've found a way to center them using a Linear Layout, but it cuts off the shadows.
How can I prevent this? Is there a way to align them without using a linear layout or a frame layout?
Here's my layout code:
I used a FrameLayout as root, there's my LinearLayout containing both material cards, I just wanted them to be centred as a group, if you know another way to do this please tell me!
<FrameLayout 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"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:fontFamily="cursive"
android:layout_gravity="center_horizontal"
android:layout_marginTop="25dp"
android:textSize="50sp"
android:textColor="#FFF"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your location's weather in a touch!"
android:layout_gravity="center_horizontal"
android:layout_marginTop="90dp"
android:textSize="17.3sp"
android:textColor="#color/colorPrimaryText"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="270dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="5dp">
<TextView
android:id="#+id/tv_temperature"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="16dp"
android:text="30°C"
android:textColor="#color/colorPrimaryText"
android:textSize="50sp" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv_data"
android:layout_width="270dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="5dp">
<TextView
android:id="#+id/tv_conditions"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="16dp"
android:text="Scatted Clouds"
android:textColor="#color/colorPrimaryText"
android:textSize="30sp" />
</android.support.v7.widget.CardView>
</LinearLayout>
<ProgressBar
android:id="#+id/pb_loading"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_gravity="center"
android:elevation="20dp"/>
<TextView
android:id="#+id/tv_city_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:padding="20dp"
android:fontFamily="sans-serif"
android:textColor="#FFF"
android:textSize="20sp"/>
It looks like your layout would be better as a ConstraintLayout instead of a FrameLayout, but we can still make what you have work.
The problem is that (on newer Android versions), the shadows for a CardView are actually drawn outside the view's bounds. Normally this is fine, but if the CardView is inside a parent, that parent can clip the shadows if the parent doesn't have enough room to show the shadows.
In your case, the "easy fix" is actually extremely easy. Change your LinearLayout's width to match_parent; this will give the cards room to draw their shadows.
Edit
What I said above will solve the shadows on the sides of each card, but won't solve the shadows above the top card or below the bottom card. Again, in the spirit of a quick fix, I'd suggest adding these attributes to your LinearLayout:
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:clipToPadding="false"
You need to change height and add change layout_gravity to gravity, like the code bellow:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical">
It probably will solve your problems =]
If you want to improve your code, I suggest you not to set fixed width and height, it cand bring you problems in some devices. You can also load xmlns:card_view only once, at your LinearLayout, that it's your very first tag