I have problem with CardView background opacity. I want to make my background semi transparent, but I have a weir bug that happens all the time. The best explanation will be a screenshot from my program.
Scr from displayed layout
I want this Layout to be all in the same semi transparent color. Instead what appears is this semi transparent color with more transparent rectangle inside. I don't know how to remove this rectangle from my layout. Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:cardBackgroundColor="#66000000">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="15dp">
<ImageView
android:id="#+id/flagImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:fontFamily="#font/changa_light"
android:scaleType="fitXY"
app:srcCompat="#mipmap/ic_launcher" />
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/flagTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST"
android:textColor="#ffffff"
android:gravity="center"
android:fontFamily="#font/changa_light"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</RelativeLayout>
SOLVED! I had to add app:cardElevation="0dp to the first CardView
Is this what you want?
<?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"
android:layout_width="match_parent"
android:layout_height="312dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="4dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#color/sisman2"
app:cardCornerRadius="20dp"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="HELLO"
android:textSize="24sp" />
</RelativeLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="248dp"
android:elevation="0dp"
app:cardCornerRadius="20dp"
app:cardElevation="0dp">
</androidx.cardview.widget.CardView>
</RelativeLayout>
</androidx.cardview.widget.CardView>
enclose the first cardView object in a frame layout, then give it elevation and keep it at the top (remember! elevation> = API 21)
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/transparentColor"
android:elevation="3dp"
android:stateListAnimator="#null">
<!-- into-->
</FrameLayout>
Related
Hello, I tried to copy the Code of a tutorial, but it doesn't work out for me... The Layout_below won't move the text to underneath the picture, can somebody help?
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="20dp"
android:id="#+id/parent"
app:cardCornerRadius="7dp"
app:cardElevation="7dp"
android:layout_margin="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="130dp"
android:layout_height="150dp"
android:id="#+id/imgFood"
android:src="#mipmap/ic_launcher"
android:contentDescription="#string/todo" />
<TextView
android:id="#+id/txtMealName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgFood"
android:layout_centerHorizontal="true"
android:layout_marginTop="7dp"
android:text="#string/meal_name"
android:textSize="16sp"
android:textStyle="bold" />
</com.google.android.material.card.MaterialCardView>
your text view and image view are not inside RelativeLayout
replace below code with your code
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="20dp"
android:id="#+id/parent"
app:cardCornerRadius="7dp"
app:cardElevation="7dp"
android:layout_margin="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="130dp"
android:layout_height="150dp"
android:id="#+id/imgFood"
android:src="#mipmap/ic_launcher"
android:contentDescription="some text" />
<TextView
android:id="#+id/txtMealName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgFood"
android:layout_centerHorizontal="true"
android:layout_marginTop="7dp"
android:text="cheese pizza "
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>
close Relative layout using </RelativeLayout> after Textview
I want to create a layout based on the following image,
as it is evidence I have a CardView that I show it with red lines and the card view is in a LinearLayout and I have an image in the card view in which I want to show a little bit of it in a linear layout.
I use the following code to create the layout,
<?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:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grayBack"
android:orientation="vertical"
tools:context=".activities_v2.customer_steps.CustomerStepOne">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_white_1000"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginEnd="#dimen/_10sdp"
android:layout_marginRight="#dimen/_10sdp"
android:textColor="#color/editText"
android:textSize="#dimen/_14ssp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginLeft="#dimen/_20sdp"
android:layout_marginTop="#dimen/_100sdp"
android:layout_marginEnd="#dimen/_20sdp"
android:layout_marginRight="#dimen/_20sdp"
android:layout_marginBottom="#dimen/_10sdp"
android:minHeight="#dimen/_50sdp"
card_view:cardCornerRadius="#dimen/_10sdp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="236dp"
android:layout_height="#dimen/_150sdp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:src="#drawable/ic_illustration_02" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/_10sdp"
android:textColor="#color/editText"
android:textSize="#dimen/_14ssp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button_background_blue"
android:minWidth="#dimen/_150sdp"
android:textSize="#dimen/_14ssp" />
</LinearLayout>
I'm trying to show some png images on RecyclerView, the images has transparent background but it show white background when run on device !!.
I tried to add
android:background="#android:color/transparent"
to ImageView, but still white
I use Picasso to load the image on ImageView, like that
Picasso.get()
.load(newpath)
.into(itemView.imgMCat)
this the fragment which contain the RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent"
android:background="#drawable/meskback"
tools:context=".HomeFragment">
<!-- TODO: Update blank fragment layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<Toolbar
android:id="#+id/toolbar"
android:background="#color/meskBlue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:targetApi="lollipop">
<Button
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="right"
android:layout_margin="7dp"
android:id="#+id/mapiconbtn"
android:background="#drawable/mapicon"
/>
</Toolbar>
<LinearLayout
android:layout_weight="6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="10"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/mainActivityRelayout1"
android:paddingTop="10dp"
android:layout_weight="5">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
tools:srcCompat="#drawable/logo"
android:id="#+id/logoimg"
android:contentDescription="#string/logoimgdes"
android:src="#drawable/logo"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="5"
android:weightSum="2">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:textSize="22sp"
android:layout_weight="1"
android:textStyle="bold"
android:gravity="center"
android:textColor="#color/meskBlue"
android:text="#string/welcome"
android:textAlignment="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="20sp"
android:textStyle="bold"
android:gravity="center"
android:layout_marginTop="20dp"
android:text="#string/how_can_we_help_you"
android:textAlignment="center"/>
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="4"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/McatRecylceView"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
and this is the item_view.xml which contain the ImageView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="wrap_content"
android:orientation="vertical"
android:layout_margin="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="140dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgMCat"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#android:color/transparent"
android:layout_centerInParent="true"
android:layout_marginTop="3dp" android:layout_marginStart="3dp"
android:layout_marginEnd="3dp" android:layout_marginBottom="3dp"/>
<TextView
android:text="TextView"
android:id="#+id/mcategoryTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/imgMCat"
android:textAlignment="center"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
this photo for device
I found the answer here the problem was from CardView
https://stackoverflow.com/a/45769769/2209611
I add these attribute and fix the problem
app:cardBackgroundColor="#android:color/transparent"
app:cardElevation="0dp"
try this
<android.support.v7.widget.CardView
android:scaleType="centerInside"
android:layout_width="34dp"
android:layout_height="34dp"
android:clipChildren="false"
android:clipToPadding="false"
android:elevation="12dp"
android:shape="ring"
app:cardCornerRadius="17dp">
<ImageView
android:id="#+id/avatar"
android:layout_width="49dp"
android:layout_height="49dp"
android:layout_marginLeft="-8dp"
android:layout_marginTop="-5dp"
android:src="#drawable/blank" />
</android.support.v7.widget.CardView>
the image loads without a problem, what you need to do is set the height and width to wrap content instead of having a fixed width and a match parent height, here's what you should do in the xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp">
<ImageView
android:id="#+id/imgMCat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_centerInParent="true"
android:layout_marginTop="3dp" android:layout_marginStart="3dp"
android:layout_marginEnd="3dp" android:layout_marginBottom="3dp"/>
<TextView
android:text="TextView"
android:id="#+id/mcategoryTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/imgMCat"
android:textAlignment="center"/>
</RelativeLayout>
by setting the main layout to the sizes u want and then setting the imageview to wrap the content of the png you will have solved your problem
however, i would suggest that u never use fixed sizes for any UI components ever due to the amount of different devices with different screen sizes, if you use a fixed dimension UI elements then it's bound to be ruined on 1 screen or the other
I am using Recycler view + card view to show my content but there is unnecessary space between cards how to remove it.
I have tried with negative padding but didnt work. Any other solution to this? or there is any bug in my code.
my RecyclerView
<android.support.v7.widget.RecyclerView
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:id="#+id/reyclerview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:scrollbars="vertical" />
cardview
<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
app:cardCornerRadius="4dp"
card_view:cardElevation="0dp"
card_view:cardUseCompatPadding="true"
card_view:cardPreventCornerOverlap="false"
android:background="#color/background">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp">
//Some Items
</RelativeLayout>
here is the preview of space
xml :
card_view:cardPreventCornerOverlap="false"
or JAVA
cardView.setPreventCornerOverlap(false)
ref : Android CardView remove padding
I have solved it by putting cardview in LinearLayout
<?xml version="1.0" encoding="utf-8"?><LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp">
<ImageView
android:id="#+id/i1"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="#+id/t1"
android:layout_width="316dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="60dp"
android:text="Text1"
android:textSize="15sp" />
<TextView
android:id="#+id/t2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/t1"
android:maxLines="2"
android:layout_alignStart="#+id/t1"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="Text2"
android:textSize="12sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
My problem is that when i try to change the radius of the cardView i get this in the Image below:
any help would be appreciated.
These words just to skip the error your post is mostly code:
skipping stupid error.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<android.support.v7.widget.CardView
android:id="#+id/cv"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp">
<!--android:padding="16dp"-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/team_photo"
android:layout_width="70dp"
android:layout_height="70dp"
android:padding="10dp"
android:layout_margin="8dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/team1Linear"
android:orientation="horizontal">
<TextView
android:id="#+id/team1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ssss"
android:textColor="#color/black"
android:textSize="15sp" />
<TextView
android:id="#+id/team1_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:text="ssss"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:textColor="#color/black"
android:textSize="15sp" />
</LinearLayout>
<View
android:id="#+id/separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/background_material_light" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/team2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ssss"
android:textColor="#color/black"
android:textSize="15sp" />
<TextView
android:id="#+id/team2_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:text="ssss"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:textColor="#color/black"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
you need to use
app:cardUseCompatPadding="true"
this will do that job for you
Those are shadows of CardViews. It's normal, there is no problem.
So CardViews have their elevations that they drop shadows on the background.
You set radius for the CardViews. Then you can look the background through rounded corners. You see the shadows of CardViews dropping on the background.
app:cardCornerRadius="10dp"
If you don't want the rounded corners of the CardViews, I think you should just set the radius to 0.
app:cardCornerRadius="0"
add this, your problem with the shadow
app:cardElevation="#dimen/dp_0"