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" />
Related
<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..
Here i want to ask a simple question that make me so confuse,
i have developing an android app that i want to use material design theme.
But when i try to code the Shadow under the RaisedButton, it's doesn't work.
I mean it just make a stroke around the button and not the shadow.
Please master, help me is there any simple way to make this shadow??
Thanks
NB. This is my custon_button.xml
<item android:state_pressed="true" >
<shape>
<solid
android:color="#color/solidpress"
/>
<stroke
android:width="1dp"
android:color="#color/strokepress" />
<corners
android:radius="2dp" />
<padding
android:left="5dp"
android:top="10dp"
android:right="1dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" > //focused fuck shit man
<shape>
<solid
android:color="#color/solidfocus"
/>
<stroke
android:width="3dp"
android:color="#color/strokefocus" />
<corners
android:radius="2dp" />
<padding
android:left="5dp"
android:top="10dp"
android:right="5dp"
android:bottom="10dp" />
</shape>
</item>
<item> // normal
<shape>
<solid
android:color="#color/solidnormal" />
<stroke
android:width="1dp"
android:color="#color/strokenormal" />
<corners
android:radius="2dp" />
<padding
android:left="5dp"
android:top="10dp"
android:right="1dp"
android:bottom="10dp" />
</shape>
</item>
and i apply that code to my activity with
android:background="#drawable/custom_button
Please look this
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"><layer-list>
<item><shape>
<gradient android:angle="270" android:centerColor="#00c0f0" android:endColor="#036b86" android:startColor="#01bff3"></gradient>
<corners android:radius="5dp" />
</shape></item>
<item android:bottom="3dp"><shape>
<gradient android:angle="270" android:centerColor="#00c0f0" android:endColor="#01bff3" android:startColor="#01bff3"></gradient>
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
<corners android:radius="5dp" />
</shape></item>
</layer-list></item>
<item android:state_pressed="true"><layer-list>
<item ><shape>
<gradient android:angle="270" android:centerColor="#00c0f0" android:endColor="#01bff3" android:startColor="#036b86"></gradient>
<corners android:radius="5dp" />
</shape></item>
<item android:top="3dp"><shape>
<gradient android:angle="270" android:centerColor="#00c0f0" android:endColor="#01bff3" android:startColor="#01bff3"></gradient>
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
<corners android:radius="5dp" />
</shape></item>
</layer-list></item>
</selector>
If rajan ks' answer does't work, you can try wrapping the button in a CardView (android.support.v7.widget.CardView), and give the CardView some elevation using its app:cardElevation attribute.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false">
<Button />
</android.support.v7.widget.CardView>
shadow.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#D6D6D6" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270"
android:endColor="#E2E2E2" android:startColor="#BABABA" />
<stroke android:width="1dp" android:color="#BABABA" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp"
android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
and Add this code to your Button
android:background="#drawable/shadow"
Have a look at this for Material Kind of Shadow: Shadow Background Android
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>
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>
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.