How can we set shadow effect for View in Android? - android

In my Android application I have one view it may be ImageView or TextView how can I set shadow effect for View in android? I have set the shadow by using the following code, but it won't work:
view.setElevation(130)
Please help me to solve this

You can create your own "shadow view"
<View
android:id="#+id/shadow_view"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_gravity="bottom"
android:background="#drawable/shadow_gradient" />
and add the shadow drawable to it:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#8f000000" />
</shape>
The height is up to you, to experiment and see what works best for you as is the angle and start colour of the drawable. You just need to align this view layout to any view layout you want to have a shadow and you are good.

Related

View.setPadding affects background ShapeDrawable padding

I have a custom view with a background drawable.
The drawable has an inside shape with padding. No padding is applied on the view itself.
Whenever I set a padding on the view programmatically using View.setPadding(left,top,right,bottom), the shape padding gets changed too and I honestly cannot figure out why.
The xmls are defined as follows:
Background drawable
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item>
<shape android:shape="rectangle">
<corners android:radius="#dimen/radius_large" />
<solid android:color="#color/yellow" />
<padding
android:left="#dimen/spacing_large"
android:right="#dimen/spacing_large"
android:top="#dimen/spacing_medium_to_large"
android:bottom="#dimen/spacing_medium_to_large" />
</shape>
</item>
</ripple>
Custom view extending ConstraintLayout (edited)
The tools: attrs on the <merge> tag are simply used to render what the outcome will be in the layout preview.
As you know, <merge> is not a viewgroup, so it doesn't allow attrs such as background etc
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout"
tools:background="#drawable/background_start_lesson"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
... />
<ImageView
... />
<TextView
... />
</merge>
In the constructor of my custom view, I simply set the R.drawable.background_start_lesson
And this of course just renders nicely as expected, with large paddings:
.....but if I just set the padding of the view itself to 0dp programmatically or via xml (and it should be already at 0dp, given that I specified none on the view!), this is what happens:
In conclusion, why does setPadding() change the <shape> drawable padding and not the padding of the view?

Show a view with a hole

I'm trying to create a view as tutorial for my activity. I need to show only some text with a translucent background an leave a "hole" transparent to see the background button of the original activity. I can use a framelayout with two different sub-layout (the original one and the tutorial one) and I can set visible/invisible the tutorial layout. The problem is: I don't know how I can create a "hole" in the tutorial sub-layout. How can I do?
background colors should transparent, opaque
I hope, it will work for you.
circle_background.xml file
<shape
android:shape="ring"
android:useLevel="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue_pressed" />
</shape>
view_background.xml
<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:background="#drawable/circle_background"
>
//add more views if u wanto
</LinearLayout>
For create a "hole" or circular view you need create a drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#android:color/transparent" />
</shape>
And create a imageview in the position and size that you want and set this drawable like background.
Also you can use #00000000 intead #android:color/transparent
Or use TutorialView library on github

Custom RelativeLayout to have circular boundary

I have a requirement to show a View which need to have a circular boundary.
I know it can be done by Extending the RelativeLayout. But exactly dont know what all methods to override except constructors and what code changes I have to make for it to show circular boundary.
Updated question with Image.
So basically this is an animation.
and minutely the view goes out from screen from the circumference of the circle (And not as rectangular view).
So I have to create a circular view (Relative Layout) that is having child of these images.
Use android.support.v7.cardview and put a RelativeLayout as its child.
https://developer.android.com/reference/android/support/v7/widget/CardView.html
Note from the above link:
Due to expensive nature of rounded corner clipping, on platforms
before L, CardView does not clip its children that intersect with
rounded corners. Instead, it adds padding to avoid such intersection
(See setPreventCornerOverlap(boolean) to change this behavior).
i think you need to make any layout with rounded border. using below code for make layout rounded.
round.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><shape>
<solid android:color="#color/list_row_bg" />
<corners android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp" />
<stroke android:width="1dp" android:color="#color/header_bg" />
</shape></item>
</selector>
put this round.xml file drawable folder. and use as backgournd in your layout.
my_layout.xml
<?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="match_parent"
android:orientation="vertical"
android:padding="25dp" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/round" />
</LinearLayout>

how to create rounded corner videoview in android?

In my application, I want to display videoview as a rounded corners. I have tried placing videoview/surfaceview inside linearlayout with rounded corner set to linearlayout. but it does not work perfectly. I can not set rounded corner to videoview/surfaceview. I want to set view as below image:
Anyone have idea how to do this?
Not sure why there are so many bad answers when the solution is really simple (as long as you're min sdk > 21). Creating a shape and putting it overtop of the video won't work because you obviously want the background to be transparent to see the views behind it.
I found the answer here Android View Clipping. You just put the video view in a frame layout, add a rounded background to the frame layout, add an outline provider and clip the frame layout to the outline.
The background rounded_video_background:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#000000"/>
<corners android:radius="16dp" />
</shape>
The frame layout and video view inside of it:
<FrameLayout
android:id="#+id/video_view_container"
android:layout_width="90dp"
android:layout_height="120dp"
android:background="#drawable/rounded_video_background"
android:outlineProvider="background">
<VideoView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
/>
</FrameLayout>
And the final step is clipping to the outline (didn't see a way to do it in xml so I did it programatically):
video_view_container.clipToOutline = true
Its worked for me,
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:layout_width="match_parent"
card_view:cardCornerRadius="25dp"
android:layout_height="wrap_content">
<VideoView
android:id="#+id/video"
android:layout_width="match_parent"
android:layout_height="215dp" />
</android.support.v7.widget.CardView>
You can make it using a FramLayout & an XML drawable
FramLayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<VideoView
android:layout_width="match_parent"
android:layout_height="#dimen/dp_240"
android:layout_margin="#dimen/dp_24"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded_corner_video_bg" />
</FrameLayout>
XML Drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="#dimen/dp_24"
android:color="#color/md_white_1000" />
<corners android:radius="#dimen/dp_24" />
</shape>
You could try layering different views on top of each other to create the rounded corners you are looking for. Try placing four ImageViews over the VideoView in each corner, to achieve the desired rounded corners. I have had success using a RelativeLayout to accomplish this, but you could also try using a FrameLayout to hold the Views together.
It is directly not possible, but you can do this by draw a imageview on top of videoview and set an image having transparent from between and solid color in rounded shape on the corners.
check this: Click here
Its simple,
1. Create a drawable with rounded corners as mentioned by #sunil kumar
2. Set that drawable to your layout as a background
3. When using that layout set layout(your layout item name).clipToOutline = true
This is XML code of rounded VideoView.
<androidx.cardview.widget.CardView
android:id="#+id/videoCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="20dp"
card_view:cardBackgroundColor="#color/white">
<VideoView
android:id="#+id/relativeVideo"
android:layout_width="match_parent"
android:layout_height="225dp"
android:paddingTop="-10dp"
android:paddingBottom="-10dp" />
</androidx.cardview.widget.CardView>
Negative padding is important otherwise height of VideoView is smaller than cardview by half of cornerRadius in both top and bottom side. You can set height whatever you want but negative padding should be half of cardCornerRadius all the time. Purple in the image is a video preview, not related to xml.
Have a nice day!
put rounded.xml in your drawable folder and set on framelayout of video like android:background="#drawable/rounded.xml"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFFFF" />
<corners android:radius="7dp" />
</shape>
Create an xml file in drawable folder called shape_video.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="6dp" />
</shape>
Change the radius according to your rqmnt and in the background attribute of your videoview, give
android:background="#drawable/shape_video"

Transparent View?

How can I do transparent view. Can anybody help me?
I want to do just like this:
create one layout and make theme as dialog in your manifest
and in your layout set background as android:background="#885A2720"
EDIT:
check this layout in your view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:minWidth="250dp"
android:minHeight="380dp"
android:layout_gravity="center_vertical|center_horizontal"
android:background="#885A2720" style="#android:style/Theme.Holo.Dialog">
</LinearLayout>
You should just be able to change the opacity/alpha of the overlay.
If you would use relativeLayout then use imageView with height and width match_parent.
And set alpha of an image to 150dp.
Use drawables to draw the rectangles
For complete transparency, use the following drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#00000000" />
<stroke android:width="0.3dip" android:color="#2f4f4f"
android:dashWidth="7dip"
android:dashGap="7dip"/>
</shape>
If you want to set % transparency, u can set the "Alpha"property of the widget used. Note that a text box with nothing in it can help you achieve that.

Categories

Resources