Develop Reference

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>

How to make a circular Button?

I'm a new to Android Development. While working on Android Studio 2.2, I tried to create a circular Button. As read from here, I tried to create a new Drawable Resource File. But I was unable to change Root Element to Shape. There was no such options. Could anyone help?

There are two solutions.
Floating Action Button: https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html
else:
You create a oval shape in xml.
and put that shape as background on button and make sure button have equal layout_height and layout_width.
Example:
oval_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="oval">
<solid android:color="#color/colorAccent"/>
</shape>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<Button
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/oval_shape"/>
</FrameLayout>

No option is needed here. Just use <shape>.
Check this example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorPrimary" />
<corners android:radius="#dimen/btn_radius" />
</shape>

Use xml drawable like this:
Save the following contents as round_button.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#fa09ad"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#c20586"/>
</shape>
</item>
And set it as background of Button in xml like this:
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

You are probably looking for the FloatingActionButton
It is available in the support-library.
The documation of the class.

How to design a video view with curved edges in 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>

Multi color Stroke image with XML

Does it possible to create multi-color stroke with the help of XML? I want to create exact view attached here.
Thanks

You could use a trick by creating a drawable shape with gradient and make it a parent's background... something like this:
gradient_stroke.xml (in res/drawable):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:startColor="#fff96200"
android:centerColor="#fffff60f"
android:endColor="#fff96200"
android:centerX="50%"
>
</gradient>
<corners android:radius="5dp"></corners>
</shape>
</item>
your_view.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:padding="2dp"
android:background="#drawable/gradient_stroke"
android:layout_height="wrap_content">
<Button android:text="Submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/green"
android:id="#+id/button"/>
</LinearLayout>
Just an idea - play around with it to get desired values...

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>