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.
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 have a radio button in my app with a custom shape set as its background.Now I see 2 circles,,default and the custom.I tried to use android:button=#null.It removes entire background.Is there any other way to remove the deafault radiobutton circle.Below is my Xml file.
Radiobutton.xml:
RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleX="0.3"
android:scaleY="0.3"
android:button="#android:color/transparent"
android:background="#drawable/radio_selector"
android:id="#+id/radio1"/>
radio_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/radio_check"
android:state_checked="true" />
<item
android:state_checked="false"
android:drawable="#drawable/radio_uncheck"
>
</item>
</selector>
radio_uncheck.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#ffffff"></solid>
<stroke
android:color="#bb2b67"
android:width="2dp"></stroke>
</shape>
radio_check.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#bb2b67">
</solid>
</shape>
I used the below solution when I got stuck with this type of issue :-
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleX="0.3"
android:scaleY="0.3"
android:button="#drawable/radio_uncheck"
android:id="#+id/radio1"/>
I have an android button, where I want to give it a background color and both ripple effect
my ripple xml is as below.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#BDA0CB"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#BDA0CB" />
</shape>
</item>
</ripple>
and my button is
<Button android:id="#+id/Button_activity_login_ViewProfile" style="?android:textAppearanceSmall"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginTop="16dp" android:text="Save"
android:textStyle="bold"
android:layout_marginLeft="#dimen/margin_left"
android:layout_marginRight="#dimen/margin_right"
android:textColor="#ffffffff"
android:fontFamily="sans-serif"
android:background="#ff7e51c2" />
To give the ripple effect I have to remove background color...Is there a way I can keep both.
This can be achieve by adding the android:drawable in your ripple.xml.
First add this to your color.xml. Assuming that #ff7e51c2 is the background color you want for your button.
...
<color name="btn_bg_color">#ff7e51c2</color>
....
Then create a drawable for the button background(/drawable/btn_bg.xml):
<?xml version="1.0" encoding="utf-8"?><shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="2dp" />
<solid
android:color="#color/btn_bg_color" />
</shape>
Then use the drawable in your ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#drawable/btn_bg"/>
</ripple>
You can do something like this in the xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple"/>
Change your ripple.xml in the the drawable/ folder as follows:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
create ripple_effect.xml in your drawable folder
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#1182bc"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#1182bc" />
</shape>
</item>
</ripple>
use this xml as your view's background like below
android:background="#drawable/ripple_effect"
hope this will help ..
Create two different versions of xml file so that it will work on Pre Lollipop devices.
drawable/button_effect.xml :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3ab5d6"/>
<corners android:radius="3dp"/>
</shape>
drawable-v21/button_effect.xml:-
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:tools="http://schemas.android.com/tools"
android:color="#635a5a"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="lollipop">
<item android:drawable="#drawable/round_button" />
</ripple>
Create shaped drawable in drawable folder
drawable/round_button.xml :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3ab5d6"/>
<corners android:radius="3dp"/>
</shape>
You can do something like this in the layout.xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_effect"/>
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=""
How can I create a pointy button like iPhone back button in Android XML ?
I want to create using like this
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#f8bb49"
android:endColor="#f7941d"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#8c8382" />
<corners.....
Path and PathShape can build whatever you want. By layering a couple together and using a gradient fill you can create the 3D effect (recessed) effect.
However, you will need a class that you can use to create a drawable reference if you want to be able to use an XML definition. Sorry I have not worked out the exact code, but it's something I'm planning to do (which is how I found your question).
Looks like you have an image you can work with. Read the docs on 9-patches to set margins and resizable areas.
http://developer.android.com/guide/developing/tools/draw9patch.html
Create image like that and use ImageButton instead of Button
and , use this property for ImageButton
android:background="#drawable/createdimage"
I did this for the following back button
https://drive.google.com/file/d/0B1cySRpqElgyTkptOFpQa3NsdDQ
using the XML files:
left_arrow.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<rotate
android:fromDegrees="-45"
android:toDegrees="-45"
android:pivotX="89%"
android:pivotY="-22%" >
<shape
android:shape="rectangle" >
<stroke android:color="#color/calendarOrange" android:width="3dp"/>
<solid
android:color="#color/drakBlue" />
</shape>
</rotate>
</item>
</layer-list>
button_body.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:left="-4dp">
<shape android:shape="rectangle" >
<stroke android:color="#color/calendarOrange" android:width="3dp"/>
<solid
android:color="#color/drakBlue" />
</shape>
</item>
</layer-list>
Getting them together:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1.0"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/left_arrow"
android:layout_weight="0.7"
>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/button_body"
android:layout_weight="0.3"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#color/white"
android:text="Back"
android:gravity="center"
android:textStyle="bold"
android:textSize="22dp"
/>
</RelativeLayout>
</LinearLayout>
PS: You might need to change the android:pivotX and android:pivotY parameters depending on your conteiner layout