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>
Related
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>
I want to create buttons in my android application, just like shown in the image below
you can se all the four buttons below.
I want to give them a custom color background and then an icon on the top. There is no way I'm able to adjust the icon at the centre of button.
How can I achieve the desired effect?
You can do this with FrameLayout and for circle background you need to create a shape drawable file. Refer my answer here.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_shape"
android:clickable="true"
android:focusable="true"
android:visibility="visible"
android:foreground="?android:attr/selectableItemBackground"
android:padding="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_star_border_black_24dp"/>
</FrameLayout>
round_shape.xml add this file in drawable folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="270"
android:startColor="#color/profile_grey"
android:endColor="#color/profile_grey"/>
</shape>
Create Drawable and use that drawable as Button Background.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:color="#e1e1e1"
android:width="0.5dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
</selector>
This Code create a circle with white background.
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>
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...
I am trying to create a circular layout that always stay's on the screen.
To do so, I have created a System overlay and added a button.
But, now I want to make it round.
Either I can use 4 different ImageView and and textView and add both to FrameLayout.
I read somewhere that simple things like this can be made by XML.
How do I do it?
I want to achieve something like this :
EDIT
After following your guide I was able to achieve this :
But I am not satisfied by the way I used.
What I did was created 2 shaped (background, forground) and added them to a layerlist.
BACKGROUND
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#50000000" />
</shape>
FORGROUND
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#99009900" />
</shape>
LIST
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/circleback">
</item>
<item
android:bottom="5dp"
android:drawable="#drawable/circlefront"
android:left="5dp"
android:right="5dp"
android:top="5dp">
</item>
</layer-list>
Then, I used a framelayout and added 2 textview.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/circle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="33dp"
android:text="#string/data_left"
android:layout_marginTop="8dp"
android:textColor="#fff"
android:textSize="30sp"
android:typeface="sans"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:text="#string/band"
android:layout_marginTop="40dp"
android:textColor="#fff"
android:textSize="20sp"/>
</FrameLayout>
And then inflated them by service. But I am not happy with the textposition and the fact that I have to random hit and trial to find center of circle.
I'll later add pinch to zoom to view so, I really want to find a way that text align itself to centre of circle.
You need to create a shape drawable (in the res/drawable folder) like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"
<solid android:color="#ff00ff00 />
</shape>
See docs: https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape