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"
Related
Here is my action_btn_state drawable
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#color/colorAccent"
android:color="#color/white">
<shape>
<stroke
android:width="1dp"
android:color="#color/action_btn_border" />
<corners
android:radius="3dp" />
</shape>
</item>
<item android:state_focused="true"
android:drawable="#color/colorAccent"
android:color="#color/white">
<shape>
<stroke
android:width="1dp"
android:color="#color/action_btn_border" />
<corners
android:radius="3dp" />
</shape>
</item>
<item
android:drawable="#null"
android:color="#color/colorAccent" >
<shape>
<stroke
android:width="1dp"
android:color="#color/action_btn_border" />
<corners
android:radius="3dp" />
</shape>
</item>
This is my layout
<Button
android:layout_width="70sp"
android:layout_height="30sp"
android:layout_marginRight="8sp"
android:padding="0sp"
android:layout_gravity="center"
android:textColor="#color/msg_item_action_btn"
android:background="#drawable/action_btn_state"
android:text="Like"/>
And here is my output, I have taken the screenshot when first button is clicked.As you can see it has no round corners, color is not changed to white and and the default shadow is coming which I dont want. Can anyone help how can I achieve this.
You should use a selector for different states of your button like pressed, focused,... states in separate xml file and set it for your background button
Here is a sample code for selector of a button:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_btn_state" />
<item android:state_pressed="true"android:drawable="#drawable/action_selected"/>
</selector>
You can define another xml file for pressed state with your round and color and set in this selector.
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>
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.
I am trying to style a button with different colors for different states. The coloring (and border radius) works for normal state, but not for state_pressed="true". What can be wrong with my code?
This is the button element:
<Button
android:text="#string/login_button_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="220dp"
android:textColor="#FFF"
android:background="#drawable/loginbtn"
android:clickable="true"/>
And this one is loginbtn.xml in drawable folder:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#27ae60"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#2ecc71"/>
</shape>
</item>
</selector>
Thank you.
You need to swap the order of your definition as Android picks up the first one that matches, in this case the one without a state defined. Move it to be last:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#2ecc71"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#27ae60"/>
</shape>
</item>
</selector>
I am using the below xml file to change the color of editbox. But i would like to know how to change the text color in the editbox according to the focus. If the editbox is focussed i like to change the text color to black and when it is not focussed i like to change the color to white.
How do i implement this in the xml file? Any help would be really useful for me in learning the android drawable resources.
<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape>
<gradient
android:endColor="#FFFFFF"
android:startColor="#FFFFFF"
android:angle="90" />
<stroke
android:width="3dp"
android:color="#0f0f0f" />
<corners
android:radius="10dp" />
</shape>
</item>
<item android:state_focused="false">
<shape>
<gradient
android:endColor="#000000"
android:startColor="#000000"
android:angle="90" />
<stroke
android:width="3dp"
android:color="#151515" />
<corners
android:radius="10dp" />
</shape>
</item>
you should use ColorStateList instead of State List.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#ffff0000" /> <!-- pressed -->
<item android:state_focused="true" android:color="#ff0000ff" /> <!-- focused -->
<item android:color="#ff000000" /> <!-- default -->
then just assign this state list to textColor property.
I think you're looking for a State List.