How to design a video view with curved edges in android? - android

In my application, I want to display videoview as a rounded corners. I have tried placing videoview inside linearlayout with rounded corner set to linearlayout. but it does not work perfectly. I can not set rounded corner to videoview. so how to design videoview with curved edges?

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 requirement and in the background attribute of your videoview, give
android:background="#drawable/shape_video"

You specifiy the drawable with:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dip"/>
<stroke
android:width="5dip"
android:color="#color/blue" />
</shape>
Then you have to specify the drawable as being in the foreground:
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="#drawable/border"
android:padding="5dp">
<VideoView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/VideoView1"
android:layout_height="fill_parent"
android:layout_width="fill_parent" />
</LinearLayout>

Related

I want to add strokes to a view

I'm trying to add strokes to a view using drawable.
But I want add it only in side parts(left and right), not in whole parts.
Is there any good way to add stroke in side parts?
Below is my drawable xml code. (leanear_border_gray.xml)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp"
android:color="#778899"/>
</shape>
and below is my target view xml code.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/linear_border_gray"
android:layout_weight="1">
....
</LinearLayout>
You need to wrap your shape into layer-list drawable with rectangular shape, add stroke and using top and bottom margins with negative values "hide" top and bottom lines, like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-4dp" android:bottom="-4dp">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#778899"/>
</shape>
</item>
</layer-list>
You can do it by using layer-list drawable suggested by #iDemigod
Your Layout should be like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:background="#drawable/border_left_right"
android:layout_gravity="center"
android:layout_weight="1">
</LinearLayout>
Note: If you are giving android:layout_height="match_parent" and android:layout_weight="1" then you must have to set android:layout_width="0dp" and vice versa for android:layout_width="match_parent".
File: border_left_right.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-4dp" android:bottom="-4dp">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#07060b"/>
</shape>
</item>

Making circular FrameLayout

I'm working on making Framelayout circular. When I google I got some suggestion of making xml file of it. I did it and in background to FrameLayout as my xml file. But it has no effect. My xml file for ring shape is
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="15dp"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#ababf2" />
</shape>
I tried all ring and oval shape. None worked. Please help me on this.
New drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#6a000000" />
<size android:height="25dp"
android:width="25dp"/>
</shape>
In your frame layout:
<FrameLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/your_new_drawable" />
Have you actually set the background attribute in your layout, just making the shape is not enough, you have to apply it to the FrameLayout as well using,
android:background=""

Oval Button in android with gradient background

How to get this view of button with gradient background?
I googled a lot but hadn't find something
and I think overlapping of one on other is because of relative layout..
Create a xml file in drawable folder:
oval_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:startColor="#6586F0"
android:centerColor="#D6D6D6"
android:endColor="#4B6CD6"
android:angle="90"/>
</shape>
Use this file as button background:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/oval_background"
android:id="#+id/ButtonTest"
android:text="button">
</Button>

shape as drawable is invisible

Given a shape that is defined in drawable/red_ring.xml as
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="0dp"
android:thickness="25dp"
android:useLevel="false">
<solid
android:color="#ff0000"/>
<stroke
android:width="1dp"
android:color="#000000"/>
</shape>
and a simple layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/MyButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Hello"
android:drawableLeft="#drawable/red_ring" />
</LinearLayout>
The problem with above: the shape will not show up on the button.
red_ring as android:background works,
any framework drawable bitmap as android:drawableLeft also works.
But custom shape as android:drawableLeft appears to be ignored
API level is 15
I feel that I am missing something really obvious, but what?
red_ring has no bounds set, thats why its invisible

Gradient Background that doesn't scale

I need to create a gradient that is 230dp high (i.e., not the whole screen), with the rest of the screen a solid color. I can't figure out how to do this -- everything I try ends up with the gradient expanding to fill the whole screen. My current XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="230dp">
<shape android:shape="rectangle" >
<color android:color="#333333" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#333333"
android:startColor="#D9D9D9"
android:type="linear" />
<size android:height="230dp" />
</shape>
</item>
</layer-list>
I then apply that drawable as the background to my LinearLayout in XML:
<?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:background="#333333" >
<LinearLayout
android:id="#+id/container"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#drawable/grey_gradient_bg" >
<!-- a bunch of content, buttons, etc. -->
</LinearLayout>
</LinearLayout>
But the gradient expands to fill the whole screen.
I have tried using a PNG for the background, but I get the banding problems described here, and the fixes haven't helped me yet.
Use a RelativeLayout instead of a LinearLayout
Instead of using your gradient as a background of the main container of the layout, add a child View, set the height explicitly to the size you want (230dp), and set the background of that view to your gradient.
If your project doesn't require API < 21 you may set the size of your gradient directly in your drawable, like that:
<item android:height="230dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#333333"
android:startColor="#D9D9D9"
android:type="linear" />
</shape>
</item>
Anyway, to support API < 21 without this behavior, you may add this drawable and then, another drawable with the same name in the drawable-v21, but it without android:height="230dp".
Setting height in gradient tag or size really doesn't work.
Something like this might help you :)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="320dip"
android:orientation="vertical"
android:background="#drawable/grey_gradient_bg">
</LinearLayout>
The problem you encountered was because your layout had fill_parent on height.
Hope this will help you.
Good luck,
Arkde
Here's my solution using the other answers:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#333333" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="230dp"
android:background="#drawable/grey_gradient_bg"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_alignParentTop="true" >
<!-- all the content -->
</RelativeLayout>
</RelativeLayout>
grey_gradient_bg is now simple:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#333333"
android:startColor="#D9D9D9"
android:type="linear" />
</shape>

Categories

Resources