How to Make GridLayout Background Transparent? - android

I am implementing GridLayout in a recycler view with Images loading from the drawable folder.
Image Link here
So as you can see , the background is white and I want to make it Transparent,
My XML code for this layout is
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:id="#+id/card"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="2dp"
card_view:cardUseCompatPadding="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Abcd"
android:textSize="18dp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#ffffff"
android:layout_marginTop="140dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
I have tried a lot of things that such as :-
Making Recycler View's alpha as 0
Card View's Alpha as 0
Setting Card Background Color to Transparent and setting Max Elevation to 0 so as to reduce the shadow
Still, I am not able to get the transparent Background. Can anyone suggest a new way?
Also , the Images used are Vector Images with transparent background.
UPDATE
It works now ,Thanks to #Adley
I just had to remove the card layout that i was using and cast into a normal relative layout

Edited:
Try adding card_view:cardBackgroundColor="#android:color/transparent"
to your root view (CardView).

Related

Rounded corners in a card view won't work at the bottom of image with a text view

I am trying to get a card view so that I get a rounded corners image with a text under it but the thing is, when I add the text, since they are both inside of the rounded corners card view, the image is not rounded at the bottom (which is what I need). How would I accomplish that?
This is the layout:
<?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="300dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_news"
android:layout_width="300dp"
android:layout_height="200dp"
android:src="#drawable/background_shape"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/news_title"
android:textColor="#color/black"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textAlignment="center"
android:layout_marginTop="5dp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
The image (I need the bottom corners of the image also rounded):
Try to put this code in your "#drawable/background_shape". Just tried it and it all working fine.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp"/>
</shape>
The problem is the TextView is overlaying the card radius. To fix that add padding to the text view or to the card and that should solve it.
The answer marked as correct, is not clean: Adds an unnecessary drawable, the card view already has a corner radius property, making the child implement round corners as well defeat the purpose of such attribute.
Also, try to use material card view: <com.google.android.material.card.MaterialCardView/>. You might not needed it now but it has more customizations.
If you only need a circular image in that case you need to add only ImageView inside CardView, and which looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.cardview.widget.CardView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="16dp">
<ImageView
android:id="#+id/iv_news"
android:layout_width="300dp"
android:layout_height="200dp"
android:src="#drawable/background_shape"
android:scaleType="centerCrop" />
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/news_title"
android:textColor="#color/black"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textAlignment="center"
android:layout_marginTop="5dp"/>
</LinearLayout>

CardView doesn't cast shadow inside RecyclerView

I've tried all the stuff.
my manifest is
<application
android:hardwareAccelerated="true"
my layout is :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="240dp"
android:layout_height="200dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:layout_above="#+id/tvName"
сard_view:elevation="4dp"
xmlns:сard_view="http://schemas.android.com/apk/res-auto"
сard_view:cardUseCompatPadding="true"
сard_view:cardCornerRadius="5dp">
<ImageView
android:id="#+id/ivPoster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"/>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:layout_alignParentBottom="true"
android:minLines="1"
android:singleLine="true"
android:ellipsize="marquee"
android:textSize="16sp"
android:layout_marginBottom="16dp"/>
</RelativeLayout>
So, inside RecyclerView with grid layout doesn't show any shadow, although it shows it in Android Studio shows shadow in preview
I think it's because ImageView overlaps shadows of the cardview, when you set images on your ImageView in the adapter. Give the image view some margin and shadow will show (but it will be ugly xD).
For testing I display 2 of the Cardviewbut but gave first one src. here is the result:
as you can see first one has no shadows.

Shadow in custom info window

I am working on dark mode for my app which contains a map with a lot of markers. Therefore, I have to darken the custom info windows of the google maps. Because these windows have a margin by default which is white, I had to create one from the ground up.
This is the custom window:
<?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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#ffffff">
......
</LinearLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/custom_info_window_triangle"
android:rotation="180"/>
<View
android:layout_width="1dp"
android:layout_height="5dp"/>
</LinearLayout>
For the triangle I have found this approach to be the best: https://stackoverflow.com/a/31704460/6612631.
Until here, everything works as expected. The problem is with shadow. I tried to use a cardview, but setting cardElevation doesn't show any shadow.
Later Edit: this is the cardview in which I've tried to put the second linear layout:
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#ffffff"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="4dp">
</androidx.cardview.widget.CardView>
I had the same issue of showing shadow on custom info window on maps,
And I solved by using drawable as a background to the parent 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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/dialog_holo_light_frame"
android:orientation="vertical"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#ffffff">
......
</LinearLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/custom_info_window_triangle"
android:rotation="180"/>
<View
android:layout_width="1dp"
android:layout_height="5dp"/>
</LinearLayout>
I have used the android default drawable, which is nine patch image:
android:background="#android:drawable/dialog_holo_light_frame"
You can use this according to your requirement or can create one such image
with shadow in it and add as your linear layout background instead of cardview.
Hope this helps!

How can i create vertical line with radius in cardview?

I have a card view with app:cardCornerRadius="20dp"
<?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:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
app:cardCornerRadius="20dp">
</android.support.v7.widget.CardView>
</LinearLayout>
Now I want add two vertical solid line to right of this.
like this:
enter image description here
Also vertical line must be have radius.
EDIT:
I write this:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
app:cardCornerRadius="50dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="5dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#color/colorBlack" />
</RelativeLayout>
</android.support.v7.widget.CardView>
And get this result:
enter image description here
I need radius for line
You can add as many as you want by adding view, like this :
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_margin="#dimen/medium_margin"
android:background="#color/darkGray" />
You could use a View within your cardview xml, this will give you the vertical lines you require as xml.
see this post for ref: vertical line
You just need a 9-patch with two lines. That's it. Something like this:
If you target API 21+, then you don't even need to care about rounded corners. Background will be cut to CardView's outline anyway. If you target older Android versions, then you need to add these rounded corners to background drawable, but that doesn't change much.

Custom Drawable As CardView Background

I am trying to make the following screen. I am using CardView and I am facing difficulty in creating custom CardView. Following is the image:
Thank you Screen
I have used the following code. This is what I have tried so far.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:layout_gravity="center"
android:paddingTop="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/card6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"
app:cardCornerRadius="10dp"
app:cardElevation="4dp"
app:cardMaxElevation="8dp"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/micro_xml"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/card6Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"
android:text="Daily Check In"
android:textColor="#080808"
android:textSize="15sp" />
<TextView
android:id="#+id/card6Description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="5dp"
android:text="Just Check in Daily and Earn Credits"
android:textColor="#000000"
android:textSize="10sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="12dp"
>
<ImageView
android:id="#+id/card6Image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:src="#mipmap/ic_launcher_round" />
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout>
If the above-given code isn't good enough for this to be achieved, I think I should:
Use an image as a background to CardView which already has this thumb and shape.
How can I do that?
You can achieve this using custom AlertDialog.
Sorry, I can't provide you code snippet right now just the way you need (cause I don't have access to IDE atm). But the idea is to use a Relative layout to design the way you want your dialog to be. Use imageview with shape drawable to make it round shape and place that relative to the Textviews.
Set the layout as the view for your alertdialog.
Before you call .show() on your alertdialog, use
"alertdialog".getWindow().setBackgroundDrawableResource(android.R.color.transparent);
//replace the "alertdialog" with your alerdialog name.//
This would make the background of the dialog transparent and only the parts you want to show can be seen.
AFIK, you could not create this kind of layout using CardView. You could try to use the custom layout and set the android:elevation parameter.

Categories

Resources