How to change AppCompatButton corner radius? - android

<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/logout" />
Above is my button xml it have a small corner radius by default now i need to change the radius a little bit how i can change only corner radius?

Use custom style: create the following file into your drawable folder.
button_style.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#9CD0E3" />
<stroke
android:width="7dp"
android:color="#55BDE4" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#55BDE4"
android:endColor="#55BDE4"
android:angle="270" />
<stroke
android:width="7dp"
android:color="#9DD0E2" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
example 2 (button_style.xml): only corner radius.
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<corners
android:radius="15dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<corners
android:radius="15dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
And then use this
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/searchBox"
android:background="#drawable/button_style"
android:text="#string/logout" />
Look at the android:radius="3dp" in button_style.xml.... increase the dp as much as you want..

Related

Android selector showing error

In my android xml file I have one edittext .I was trying to customize that edittext the xml is looks like :--
<EditText
android:id="#+id/edi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:hint="Username"
android:background="#layout/textbox001"
android:drawableLeft="#drawable/usernameicon"
/ >
and in layout the textbox001 is:--
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#e4e4e2"
android:endColor="#d5d5d5"
android:angle="270" />
<stroke
android:width="0dp"
android:color="#282a2f" />
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#e4e4e2"
android:startColor="#d5d5d5"
android:angle="270"
/>
<stroke
android:width="0dp"
android:color="#282a2f" />
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
but its showing errors in selector..i.e:--
element selector does not have required attribute android:layout_width
element selector does not have required attribute android:layout_height
Where is the problem???how can I correct it??
In xml graphic it is also showing that:--
The graphics preview in the layout editor may not be accurate:
Different corner sizes are not supported in Path.addRoundRect. (Ignore for this session)
I think you should place your selector file in drawable folder, not in layout folder !
Its working fine only :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#e4e4e2"
android:endColor="#d5d5d5"
android:angle="270" />
<stroke
android:width="0dp"
android:color="#282a2f" />
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#e4e4e2"
android:startColor="#d5d5d5"
android:angle="270"
/>
<stroke
android:width="0dp"
android:color="#282a2f" />
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>

Making glass like button in Android

I am making glass like button by specifying style in gradient.xml file but i am not getting any output and i am using this style to all the buttons of my applications...i am a newbie please help.. Here is my code
gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false">
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:startColor="#2F000000"
android:endColor="#2fDEDEDE"
android:angle="270" />
<!-- <stroke
android:width="1dp"
android:color="#bb00ff00" /> -->
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#2F000000"
android:endColor="#2fDEDEDE"
android:angle="270" />
<!-- <stroke
android:width="1dp"
android:color="#bb00ff00" /> -->
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp" android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#2F000000"
android:endColor="#2fDEDEDE"
android:angle="180" />
<!-- <gradient
android:startColor="#color/cream_dark"
android:endColor="#color/cream"
android:angle="270"/> -->
<!-- <stroke
android:width="1dp"
android:color="#ffffffff" /> -->
<corners
android:bottomRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:topLeftRadius="3dp"
android:topRightRadius="3dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
If you're expecting something like this
Then find the code below...
glass.xml in drawable folder.
<item android:state_focused="false"><shape>
<gradient android:angle="270" android:endColor="#2fDEDEDE" android:startColor="#2F000000" />
<corners android:radius="3dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape></item>
<item android:state_pressed="true"><shape>
<gradient android:angle="270" android:endColor="#2fDEDEDE" android:startColor="#2F000000" />
<corners android:radius="3dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape></item>
<item><shape>
<gradient android:angle="180" android:endColor="#2fDEDEDE" android:startColor="#2F000000" />
<corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="3dp" android:topRightRadius="3dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape></item>
layout file
<Button
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="200dp"
android:background="#drawable/glass"
android:gravity="center"
android:text="Trail"
android:textColor="#android:color/holo_blue_light"
android:textSize="15dp" />
Hope that it helps you....
Make a Separate .xml ( For eg. xyz.xml) file in drawable and paste your gradient code in it.
And then give the background to your button as android:background ="#drawable/xyz"
Example :
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mirror Button"
android:textColor="#000000"
android:textSize="20dp"
android:background="#drawable/xyz"
android:gravity="center" />

Simple customized button in android

I've used the tutorial in this link which demonstrates a great way of using different colors for buttons.
He has demonstrated all the colors for the buttons as below
Ex:: for red He mentions as
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
But he has not mentioned the color for Orange in the
Can someone give a demonstration with Orange color
Specifications must be same as the ones mentioned for other colors
but color must be orange
Check all color codes here
just replace your desired color in
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
These two lines
android:startColor="#ef4444"
android:endColor="#992f2f"
padding is the inside spacing and stroke is the width of boundary of button. just replace the colors in gradient tag and make your desired button.
I just wanted to post the code for answer ( thanks to Brontok & Tanis .7x)
I found the solution::
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#ff8800" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ff8800"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>

combine both background image, background drawable style on a button

Im wondering if its possible to combine both having an image on a button and using a drawable source and having text above that?
I'm currently using this as my button style in drawable/red_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
And then my button
<Button
android:id="#+id/testButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Income"
android:textSize="15dip"
android:background="#drawable/red_btn"
android:textColor="#fff"
android:textStyle="bold" />
Which looks like this
Now I would like to add another .png image (arrow.png) above this button to the right like this
Is this possible, and if, how can I do it?
Thanks in advance.
__________________________________________________________________________________________________________________________________________
Edit
After following Luksprog's advice below I now have "red_btn_normal.xml" in drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
and red_btn_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape>
<solid android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right"
android:src="#drawable/arrow" />
</item>
</layer-list>
And then i create my button like this "red_btn.xml"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/red_btn_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/red_btn_normal"></item>
</selector>
And finally my button
<Button
android:id="#+id/testButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Income"
android:textSize="15dip"
android:background="#drawable/red_btn"
android:textColor="#fff"
android:textStyle="bold" />
Problem is that it only shows the white arrows when I click the button and it dosn't show it when its not pressed. What is wrong with the code? =)
Im wondering if its possible to combine both having an image on a
button and using a drawable source and having text above that?
Yes, it's possible. Your selector will become:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/red_btn_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/red_btn_normal"></item>
</selector>
where the two drawables are two layer-list drawables with the first item being the items from your initial selector and the second being the .png image wrapped as a bitmap drawbale. For example for red_btn_pressed.xml you'll have:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right"
android:src="#drawable/arrow" />
</item>
</layer-list>
and the red_btn_normal.xml will be:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<gradient
android:angle="270"
android:endColor="#992f2f"
android:startColor="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/allowed" android:gravity="right"/>
</item>
</layer-list>
Keep in mind that the arrow image will be on the right of the text only if the size of the Button allows it(as its part of the Button's background). If you're trying to impose some sort of positioning relation between the text of the Button and that arrow image then you'll need to extend the Button class and do it yourself.
I went with the simple
<Button
android:id="#+id/testButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Income"
android:textSize="15dip"
android:background="#drawable/red_btn"
android:drawableRight="#drawable/arrow"
android:textColor="#fff"
android:textStyle="bold" />

How can I change the font padding of an Android button?

I want to remove the font padding from an Android button?
I've tried set includeFontPadding to false, but it has no effect.
How can i change the font padding of the button?
You need to define a seperate drawable resource for the button something like this.
For example this is button_layout.xml
<?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="#F5B800"
android:endColor="#F5B800"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#ffcc00" />
<corners
android:radius="1dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" >
<shape>
<gradient
android:endColor="#F5B800"
android:startColor="#F5B800"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#ffcc00" />
<corners
android:radius="1dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#ff9900"
android:startColor="#ffcc00"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#ffcc00" />
<corners
android:radius="1dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Here you can arrange the padding as you want for the button.
And when you are declaring the button use this as the background.
Something like.
<Button android:id="#+id/sample_button" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textColor="#FFFFFF"
android:background="#layout/button_layout"
android:text="Sample Button" />
You can try using android:includeFontPadding. set it to false. also set the padding to 0.

Categories

Resources