I have a customized button with rounded corners, I put some shadow for when it's pressed but I want to do an outer shadow just to the bottom part of the button, I am making the drawable via xml, so if the glow could be that way would be great.
These are the relevant parts of the code:
button_pressed_shadows.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<gradient
android:startColor="#color/black_overlay"
android:endColor="#color/btn_login"
android:angle="270"/>
<corners android:radius="4dip" />
</shape>
</item>
<item
android:top="2px">
<shape android:shape="rectangle">
<solid android:color="#color/btn_login"/>
<corners android:radius="4dip" />
</shape>
</item>
</layer-list>
style_login.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed_shadows" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_login" /> <!-- default -->
</selector>
Since I have the button design on photoshop, I made a 9 patch image with it, and put it on the style selector, everything went fine, think is the better (easiest) way.
Also while using layer-list you can use appropriate color combinations and padding to make it like glow or shadow.
edit_text_background
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<stroke
android:width="1dp"
android:color="#dadad7" />
<solid android:color="#fff" />
</shape>
</item>
Related
hello all i need to remove the edittext default style i want to remove the selected portion from both the side on focus of edittext or on normal edittext i just want the simple black line on normal edittext and blue line on focus
I have created 1 xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape android:shape="line">
<!-- Draw a 2dp width border around shape -->
<stroke android:width="1dp" android:color="#color/blue" />
</shape>
<!-- Overlap the left, top and right border using background color -->
<item
android:bottom="1dp"
>
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
</shape>
</item> <!-- pressed -->
</item>
<item android:state_focused="true"><shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke android:width="1dp" android:color="#color/blue" />
</shape></item>
<!-- focused -->
<item><shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke android:width="1dp" android:color="#color/orange" />
</shape></item>
<!-- default -->
</selector>
but it giving me RECTANGLE i just want LINE #bottom
Create the new xml file inside drawable folder.
lets say
a.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" /> <!--background color of box-->
</shape>
</item>
<item
android:top="-2dp"
android:right="-2dp"
android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="<Focus color>" /> <!-- color of stroke -->
</shape>
</item>
</layer-list>
Create another new xml file in drawable, lets say
b.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" /> <!--background color of box-->
</shape>
</item>
<item
android:top="-2dp"
android:right="-2dp"
android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#8AC42F" /> <!-- color of stroke -->
</shape>
</item>
</layer-list>
Create another new xml file in drawable.
lets say
c.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true"
android:drawable="#drawable/a"></item>
<item android:drawable="#drawable/b">
</item>
</selector>
Try this code.
this is a selector file. it has to be made background to the edittext.
selector automatically switches between two drawable file acording to its (edittext's) state.
Using This EditText
<EditText
android:id="#+id/id_Login_emal_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/c"
android:ems="10"
android:padding="10dip"
android:hint="Email"
android:inputType="textEmailAddress"
>
Use properties that define color for edit text that is colorControlActivated, colorControlHighlight and colorControlNormal in your app theme for style.xml.
<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#color/blackColor</item>
<item name="colorControlActivated">#color/blueColor</item>
<item name="colorControlHighlight">#color/blueColor</item>
</style>
Use Selector for different edittext states:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_pressed="true" android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#drawable/twitter_im_edittext_focused" />
<item android:state_enabled="true" android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_focused="true" android:drawable="#drawable/twitter_im_edittext_focused" />
<item android:drawable="#drawable/twitter_im_edittext_normal" />
</selector>
and your drawable would be as Jayanth sample:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" /> <!--background color of box-->
</shape>
</item>
<item
android:top="-2dp"
android:right="-2dp"
android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#8AC42F" /> <!-- color of stroke -->
</shape>
</item>
</layer-list>
Try this code:
edit_text.xml
<EditText
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/edit_text"
android:background="#drawable/custom_edit_text_black_line"
/>
Put the Xml file in Drawable Folder (custom_edit_text_black_line.xml)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
Put the Xml file in Drawable Folder (custom_edit_text_blue_line.xml)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
And in Activity write the below code :
edit_text.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if(hasFocus){
edit_text.setBackground(MainActivity.this.getResources().getDrawable(R.drawable.custom_edit_text_blue_line));
} else{
edit_text.setBackground(MainActivity.this.getResources().getDrawable(R.drawable.custom_edit_text_black_line));
}
}
});
I've set up a button in my activity. Current code:
<Button
android:id="#+id/buttonSkills"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toEndOf="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2"
android:onClick="buttonSkillsOnClick"
android:text="#string/skills"
android:textColor="#32c87d"
android:textSize="22sp" />
It currently has a white background to it. I would like the background to be transparent so that the user can only see the text.
When the user clicks the button, I just want a green border to appear around the button with no background.
I was wondering if this can be done with xml only?
You will need to make a drawable for when the item is selected, then apply that as the background. So in short, yes it is possible to do it with only xml, but you will need to make an additional file.
Something similar to this
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_selected" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focus" /> <!-- focused -->
<item android:drawable="#drawable/button_nothing" /> <!-- default -->
</selector>
button_selected.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ractangle">
<solid android:color="#00FF00"/>
</shape>
Yes you can. All you need to do is assign a State List drawable as a background to the button. The state list drawable inturn contains references to Shape Drawable.
Read all about it here (Shape Drawable and State List topic): http://developer.android.com/guide/topics/resources/drawable-resource.html
Make an xml file in drawable folder and paste this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="10dip" />
<stroke android:width="1dip" android:color="#fff" />
<gradient android:angle="-90" android:startColor="#color/primary" android:endColor="#color/primary_dark" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="10dip" />
<stroke android:width="1dip" android:color="#fff" />
<solid android:color="#FF7300"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="10dip" />
<stroke android:width="1dip" android:color="#fff" />
<gradient android:angle="-90" android:startColor="#color/primary" android:endColor="#color/primary" />
</shape>
</item>
</selector>
now set the background of a button like
android:background="#drawable/yourxml"
In my android app there is a rounded rectangle button with green colored background.
i did this using .xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#B5D397" />
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
and
android:background="#drawable/rounded_btn"
in layout file
but when i press button is wasn't showing any effect(no change is color) so i used
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Button view = (Button) v;
view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP);
and color of button changes to dark green after pressing it. Till here everything is working fine, but problem is after releasing button color remains dark green. i want it to be like as it was before pressing.I referred few examples which says to use selector in .xml file i.e
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="#c0c0c0"
android:state_selected="true"/>
<item
android:color="#ffffff"
android:state_pressed="true"/>
<item
android:color="#9A9A9A"
android:state_focused="false"
android:state_pressed="false"
android:state_selected="false"/>
</selector>
Which also needs android:background="#drawable/btn_state"
but i have already used android:background=#drawable/rounded_btn
So how to give both effect together
i also tried using OnTouchListener
button.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// show interest in events resulting from ACTION_DOWN
if(event.getAction()==MotionEvent.ACTION_DOWN) return true;
// don't handle event unless its ACTION_UP so "doSomething()" only runs once.
if(event.getAction()!=MotionEvent.ACTION_UP) return false;
doSomething();
button.setPressed(true);
return true;
}
});
but this disables my OnclickListener() method and i dont want to use OnTouchListener()
i know this is silly but i am new to android
thanks a lot
You have to Create 3 xml files for that...
2 for Drawable Shapesand 1 for Drawable Selector
See Below Code..
button_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:left="2dp" android:top="2dp">
<shape>
<corners android:radius="10dp" />
<solid android:color="#22151515" />
</shape>
</item>
<item android:bottom="3dp" android:right="3dp">
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
<corners android:radius="10dp" />
<padding android:left="10dp"
android:right="10dp"/>
<stroke android:width="3px"
android:color="#color/border_pink" />
</shape>
</item>
</layer-list>
button_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:left="2dp" android:top="2dp">
<shape>
<corners android:radius="10dp" />
<solid android:color="#22151515" />
</shape>
</item>
<item android:bottom="3dp" android:right="3dp">
<shape android:shape="rectangle">
<solid android:color="#55fff000"/>
<corners android:radius="10dp" />
<padding android:left="10dp"
android:right="10dp"/>
<stroke android:width="3px"
android:color="#color/border_pink" />
</shape>
</item>
</layer-list>
button_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_focused="true"
android:drawable="#drawable/button_selected"/>
<item
android:state_pressed="true"
android:drawable="#drawable/button_selected"/>
<item android:drawable="#drawable/button_normal"/>
</selector>
and finally....
android:background="#drawable/button_bg"
change code for drawable shapes as your need..
this may help you
Make two different shape xml. one with green color and other using another color..
And use them in selector.xml
<item android:drawable="#drawable/rounded_btn_green" android:state_selected="true"/>
<item android:drawable="#drawable/rounded_btn_green" android:state_pressed="true"/>
<item android:drawable="#drawable/rounded_btn_green" android:state_focused="true"/>
<item android:drawable="#drawable/rounded_btn"/>
Follow the below steps-
Define Button view in your main xml like this-
<Button
android:id="#+id/search_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_selector_green"
android:text="Search"
android:textColor="#drawable/button_text_color_green"
/>
Create button_selector_green xml file in your drawable folder like this-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rounded_corner_transparent" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="#drawable/rounded_corner_green"/>
<!-- default -->
</selector>
Create button_text_color_green xml file in your drawable folder like this-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#48b28a" /> <!-- pressed -->
<item android:state_focused="true"
android:color="#FFFFFF" /> <!-- focused -->
<item android:color="#FFFFFF" /> <!-- default -->
</selector>
Create rounded_corner_transparent xml file in your drawable folder like this-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#android:color/transparent" >
</solid>
<!-- view border color and width -->
<stroke
android:width="1dp"
android:color="#2b8c68" ></stroke>
<!-- If you want to add some padding -->
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp" >
</padding>
<!-- Here is the corner radius -->
<corners android:radius="10dp" >
</corners>
</shape>
Create rounded_corner_green xml file in your drawable folder like this-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#48b28a" >
</solid>
<!-- view border color and width -->
<stroke
android:width="1dp"
android:color="#2b8c68" >
</stroke>
<!-- If you want to add some padding -->
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp" >
</padding>
<!-- Here is the corner radius -->
<corners
android:radius="10dp" >
</corners>
</shape>
Hope this will work for you. Happy Coding :)
Adding a click-effect on a custom button with padded corners
Please refer my answer in the above link.
We can acheive it by adding only one file in the drawable folder and refer that as background for the button.
Hope this will help somebody. One can use my solution and reduce the objects count when there is a concern for performance issue.
On screenshot you can see src image is at same position on both states.
I want move image down in pressed state.
layout
<ImageButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/my_button"
android:src="#drawable/image" />
my_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Top 1dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#248349" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- Light bottom color -->
<item android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="#2AB564" />
<corners android:radius="7dp" />
<stroke android:width="1px" android:color="#248349"/>
<padding
android:top="28dp"
android:bottom="36dp" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 3dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#22A863" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- Light top color -->
<item android:bottom="3dp">
<shape android:shape="rectangle">
<solid android:color="#2DCC70" />
<corners android:radius="7dp" />
<stroke android:width="1px" android:color="#22A863"/>
<padding
android:top="36dp"
android:bottom="28dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
As you can see, I tried set padding android:top="36dp" android:bottom="28dp" and for pressed state android:top="28dp" android:bottom="36dp", but its same as without padding :/
What you need to do is to change the image drawable instead of the background. You can create a selector for it, and assign it a custom gravity based on it's pressed state:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<bitmap
android:src="#drawable/image"
android:gravity="bottom|center_vertical" />
</item>
<item>
<bitmap
android:src="#drawable/image"
android:gravity="center" />
</item>
</selector>
Set the scaletype of the ImageButton to fitXY, assign it a minimum width and height, and remove or modify the padding from the background, and it should work.
Shadow property in Button view gives shadow to text. How can I give shadow to right and bottom border of a Button?As shown below:
You can try it. I use it in my project. I give shadow to right and bottom border of a Button.
Button xml
<Button
android:id="#+id/buttonSignIn"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#drawable/button_dropshadow"
android:textColor="000000"
android:text="Sign In" />
In drawable file add button_dropshadow.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:left="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#000000" />
</shape>
</item>
<item android:bottom="2dp" android:right="2dp">
<shape>
<gradient android:angle="270"
android:endColor="#ffffff" android:startColor="#ffffff" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp"
android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Thank you.
Try making your own button 9-patch image with selector:
btn_normal.9.png:
btn_pressed.9.png:
btn_focused.9.png:
btn_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/btn_focused" />
<item android:state_focused="true" android:drawable="#drawable/btn_focused" />
<item android:state_pressed="true" android:drawable="#drawable/btn_pressed" />
<item android:drawable="#drawable/btn_normal" />
</selector>
and add android:background="#drawable/btn_selector" in button's attributes.
Here is a blob post that I found and could help. It will only work in a RelativeLayout. Create a View component with the same size as your button and place it immediately below:
<Button
android:id="+#id\my_button"
android:layout_below="#id/some_layout_item"
android:layout_width="100dp"
android:layout_height="5dp"
>
</Button>
<View
android:layout_below="#id/my_button"
android:layout_width="100dp"
android:layout_height="5dp"
android:background="#drawable/drop_shadow"
>
</View>
Create the shadow as a drawable (drop_shadow.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<gradient
android:startColor="#color/cream_dark"
android:endColor="#color/cream"
android:angle="270"
>
</gradient>
</shape>
My button's background is set like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:startColor="#android:color/holo_green_dark"
android:endColor="#android:color/holo_green_light"
android:angle="90">
</gradient>
<stroke
android:width="1px"
android:color="#android:color/darker_gray" />
</shape>
The effect of the shadow can be done by adding a second shape under the original button shape, changing its color to a darker one either black or grey. But the shadow should be of the same shape as that of the button.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/darker_gray"/>
</shape>
To overlap different items we have to use a “layer-list” resource and include the previous shapes. The shadow should appear in first place and then the original button with some displacement. In this example, we are creating the shadow at the bottom of the button and an offset of 4px.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/shadow"/>
<item
android:drawable="#drawable/button"
android:bottom="4px"
android:right="4px"
/>
</layer-list>
Now set the background of the button as the layerlist drawable. This should do it partially.