How to cut borders of the child layout? - android

I have LinearLayout with shape background and WebView inside. How to cut WebView along the border of the shape?
I want WebView fit in the shape and so WebView will not have any acute angles.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg_border"
android:orientation="vertical" >
<WebView android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</LinearLayout>
bg_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:height="1dp"
android:color="#color/border" />
<corners
android:radius="5dp"
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />


I would bet you can only simulate that. Create another shape with a (smaller) radius, and make it white. Put that around your web view. This obviously won't work if the page you're looking at is not white.
Also, you don't need to define topLeft/bottomRight/etc if you already define "radius" and all the values are the same.
UPDATE
Ideas. Both of them involve a source image LIKE this: http://www.noiseindustries.com/downloads/misc/FxFactoryHelp/pluginguide/generators/roundedrectangle/files/ni-rounded-rectangle.jpg
Just make sure the border is MUCH smaller. 3-5 pixels. The white center should be transparent, not white.
1) Create a RelativeLayout, and create images for the sides and corners. With the layout and images, basically lay out the images so you "draw" a border. Don't put anything in the center. Create a FrameLayout, put the webview in, then put the RelativeLayout on top. Hopefully, the touch events in the center will fall through to the webview, but still give you a soft border around the edges.
2) Create a 9-patch image that basically looks the same as the border described in 1. Do the same FrameLayout described in 1, and add the Webview. On top of that, add a CUSTOM view. Set the background to the 9-patch, and make sure the custom view passes on all of its touch events.
I suspect #1 would be easier to implement, but who knows?

Related

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>

Using a custom drawable to have a dotted line as a background in Android Lollipop (on Nexus 5)

So far, I used an ImageView (or a View, the result is the same) to draw a dotted line in my Custom ListView between each item. The xml layout is like this:
<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">
<!-- Random stuff -->
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:src="#drawable/dotted_line" />
</LinearLayout>
My drawable looks like:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:dashGap="1dp"
android:dashWidth="1dp" />
</shape>
I tried to wrap my shape into a selector, or add android:layerType="software" in my ImageView, but nothing worked. I have also seen people suggesting to make the ImageView height bigger, or to play with the width of the dotted line. The best render I could achieve is drawing a solid line, but not the dotted line I am looking for.
Can someone help me to draw this doted line ? Should I use another method than the drawable ? Thanks!

Android: Applying rounded shape to a linear layout

I am gonna to create the a alert dialog box in android with rounded shape.
I follow many threads in this site. Create a shape.xml and place it drawables
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="5dp" android:color="#FF0000" />
<corners android:bottomRightRadius="20dp" android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp" android:topRightRadius="20dp"/> <solid android:color="#FFFF00"/>
And apply the above shape to the linearlayout.
layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#android:color/transparent" >
<LinearLayout android:layout_width="200dip"
android:layout_height="60dip"
android:orientation="vertical"
android:background="#drawable/shape">
</LinearLayout>
However, there is still have a rectangle border and back color outside the dialog box. That is not what I want.
I have search for a long time I dont know how to fix it.
I aimed to make it transparent outside the corner of the dialog box layout. Thank you so much!
Screen Shot: http://postimg.org/image/3xbnmquyt/

For the shape you want I found the default one on Android Studio, this:
android:background="#drawable/abc_menu_dropdown_panel_holo_light"
Apply it to your LinearLayout, It is exatcly what you're talikng about and you don't need to create other xml files in the drawables. To see how It looks like see my answer here:
Android View shadow
Hope I helped you.

Remove the stroke tag because it is used for creating the border. Also you shouldn't use gradient and solid together because they exclude one another.
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

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"

Drawing tiled bitmap with bottom alignment

I want to draw an image with gradient background. I've created a drawable bitmap resource like below
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/bg"
android:tileMode="repeat"
android:gravity="bottom"
/>
As you know, gravity is ignored when tileMode is defined. I tried creating my own class which is inherited from BitmapDrawable, but I couldn't achieve success with that.
Please help me to apply both properties: tileMode and gravity.

I did not understand the question clearly. What is the goal here?
Is it using a gradient image (like .png .jpg) with tileMode?
Or is it using a transparent icon and making it's background gradient?
Also why would you need gravity when you are using tileMode? tileMode means tile the whole area of bitmap with the same image. Since it will do it to the whole image no point giving gravity on that image since all of it will be filled.
If the goal is to use this drawable bitmap in the some part of the screen add this to your layout:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/mydrawablebitmap"
android:id="#+id/imageview1" />
You can put it to your layout.xml and set your own width and height and align whichever you like.
If the goal is using an image and making its background here is how you go with it:
Create a gradient.xml in your drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#E0E0E0"
android:endColor="#FFFFFF"
android:angle="-90"/>
</shape>
Then add this imageview to your layout:
<ImageView
android:id="#+id/myimagewithgradientbackground"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#drawable/gradient"
android:src="#drawable/foregroundimage" />
If you give me some more details about the question I'll go ahead and edit my answer accordingly.

Categories

Resources