is it possible to create a skewed shape button?
(i.e like a stripe shape from bottom left of screen to top right of screen instead of the regular square or rectangle shape button)?
Something like this image http://www.codeproject.com/KB/silverlight/SilverLightFAQPart2/9.JPG
And I need to make sure the clickable area is also just the colored one.
Thanks,
Tee
You'd need to write your own class for that. Just subclass View and listen for the onClick events.
Try using a selector as background.
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
android:background="#drawable/my_button"
/>
And then make a my_button.xml in your drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="#drawable/focused" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/focusedpressed" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/pressed" />
<item android:drawable="#drawable/defaultbutton" />
</selector>
Source: http://www.anddev.org/tinytutcustom_button_backgrounds-better_imagebutton-t4298.html
Related
I am creating a simple button as follows :
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/edSearch"
android:id="#+id/btnSearch"
android:layout_marginTop="30dp"
android:drawableTop="#drawable/ic_action_search"
android:textSize="16sp"
android:text="Search"
android:background="#color/md_green_500"
android:textColor="#fff"
/>
Now, when i try add any image in background like :android:background="#drawable/img123" then button raise effect does not work. is there any way i can achieve raise effect with background image ?
You can create a selector drawable for this. You need to provide 3 different images for this so that the button can toggle those images as per the state.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/image_normal" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/image_pressed" />
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/image_focused" />
</selector>
Also inspite of that you can use ImageButton which will keep your image in center of button and the effects will be default as per operating system.
I am trying to customize a Button UI in Android.
I tried the following things:
btn.setBackgroundColor
btn.setBackgroundResource
btn.setBackgroundColor
But all of these are increasing the size of the Button, and because of that the Buttons near by can not be segregated (??).
Please suggest something.
If you want to apply a Hover effect then you have to do this in your XML where button layout is like
Button
android:id="#+id/xyz"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="15dp"
android:background="#drawable/general_btn_hover_effect"
android:onClick="somefunction"
android:text="#string/search_number"
android:textColor="#ffffff"
android:textSize="20sp"
/>
Notice android:background="#drawable/general_btn_hover_effect" there and then in #drawable folder make a general_btn_hover_effect.xml and write this into it
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/blank_normal_bg" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="#drawable/blank_hover_bg" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/blank_hover_bg" android:state_focused="false" android:state_pressed="true"/>
<item android:drawable="#drawable/blank_normal_bg"/>
</selector>
Changing background color can not change size of button. Maybe you changed size in xml layout. Check again
I want to create a button animation like nexus back button in below image.
When it's clicked, it's highlighted with oval shape and then bending the transparency of background color smoothly.
Approximately similar effect you can achive by selector like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="false" android:state_focused="true" android:drawable="#color/red" />
<item android:state_pressed="true" android:drawable="#color/dark_red" />
<item android:drawable="#color/red" />
</selector>
add this selector as bg_selector.xml in your res/draweble folder.
And then set it is as background of TextView(or other View):
android:background="#drawable/bg_selector"
P.S: All magic in android:exitFadeDuration
I have a few buttons which I want to highlight only at the borders.
That is, I want the borders of the buttons to glow with a specific color on some action taken. How do I change the border programatically?
Is it possible with drawables? How?
You can have two drawables one for selected state and one for normal state, please go
through following link:
StateListDrawable
See here: http://developer.android.com/reference/android/widget/ImageButton.html
And also here: http://groups.google.com/group/android-developers/tree/browse_frm/thread/1906f24707594f67/17322a04f7af1a5b for Romain Guy's answer:
In res/drawable, create a file called for instance mybutton_background.xml
and put something like this inside:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false"
android:drawable="#drawable/button_background_focus" />
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:drawable="#drawable/button_background_normal" />
</selector>
Then set this drawable as the background of your button with
android:background="#drawable/mybutton_background"
I have a customer preference widget (xml) which basically contains a TextView and next to that a right aligned ImageButton.
What I am trying to do is set the image for my image button to whatever is used as default by the preferences system. For example see the attached image where I've highlighted the type of image I want to use.
I've tried looking online and saving the ic_btn_round image into my drawables and using that, but it just doesn't look right.
Any advice welcome, thank you
This circle button comes from DialogPreference. If we look into how this preference is implemented, we'll find, that it uses widget described in this xml file:
<!-- Layout used by DialogPreference widgets. This is inflated inside
android.R.layout.preference. -->
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="4dip"
android:layout_gravity="center_vertical"
android:background="#drawable/btn_circle"
android:src="#drawable/ic_btn_round_more" />
So you need to look into 2 more files: drawable/btn_circle and drawable/ic_btn_round_more.
btn_cicle.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/btn_circle_normal" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/btn_circle_disable" />
<item android:state_pressed="true" android:state_enabled="false"
android:drawable="#drawable/btn_circle_disable" />
<item android:state_pressed="true"
android:drawable="#drawable/btn_circle_pressed" />
<item android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/btn_circle_selected" />
<item android:state_enabled="true"
android:drawable="#drawable/btn_circle_normal" />
<item android:state_focused="true"
android:drawable="#drawable/btn_circle_disable_focused" />
<item
android:drawable="#drawable/btn_circle_disable" />
</selector>
ic_btn_round_more.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#drawable/ic_btn_round_more_disabled" />
<item
android:drawable="#drawable/ic_btn_round_more_normal" />
</selector>
All drawables referenced from these two xml files are actual *.png files.
So basically you need to use two images to achieve desired effect. But all these resources are internal to Android, and you can't use them directly. The easiest way is to just copy them to your project (as you did with ic_btn_round ).