I am trying to set a gradient xml file as background to a button.But when i add the drawable xml file as background, the size of the button changes.The button is to the right of edittext and the size of the button becomes bigger than the edittext.
The code:
The button:
<Button
android:id="#+id/btndob"
android:layout_width="127dp"
android:textColor="#FFFFFF"
android:background="#drawable/button_clicked_selector"
android:layout_height="fill_parent"
android:text="SELECT DATE" />
button_clicked_selector.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:drawable="#drawable/button_gradient" />
<item android:state_pressed="true" android:drawable="#drawable/button_clicked_gradient" />
</selector>
button_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#00aff0"
android:endColor="#0081b0"
android:angle="270" />
</shape>
button_clicked_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#00aff0"
android:endColor="#00aff0"
android:angle="270" />
</shape>
Related
I have created custom drawable for AppCompatButton and it is working perfectly fine for API level 23 and above.
Here is custom drawable.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked" android:state_checked="false" />
</selector>
background_radio_checked -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-8dp"
android:right="-8dp"
android:top="-8dp">
<shape>
<solid android:color="#FFF1EEFF" />
<stroke
android:width="1dp"
android:color="#color/color_ask_question" />
</shape>
</item>
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_add_filled_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
background_radio_unchecked -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/color_employer_divider" />
<solid android:color="#F2F2F2" />
<corners android:topLeftRadius="#dimen/screen_margin_half_half_half" />
</shape>
</item>
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_add_empty_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
The drawables used are SVGs and have height width of 24dp.
How it looks on API 23+
But the same thing looks horrible on API level 21.
The image used in drawable stretches out to full width.
Tried removing animation but still the same results.
Not sure what wrong I'm doing or missing out.
Seems I'm using some property which is not available only from API 23 and above but not sure which one.
I'll answer by self, hopefully It'll help someone.
I was setting this drawable as background to my radiobutton and passing "#null" in button property.
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_radio_button_backgorund"
android:button="#null"
android:checked="true" />
This wasn't working, so I created two separate custom drawables for button and background.
For custom drawable for background I just used shape with border, background color, radius etc but NO ICON. And for custom drawable for Button, I used icon.
Assigning these two custom drawables in background and button makes things work in both, lollipop devices and above.
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_radio_background"
android:button="#drawable/custom_radio_button"
android:checked="true" />
-----------Custom drawable for background-----------
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked_background" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked_background" android:state_checked="false" />
</selector>
background_radio_checked_background -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-8dp"
android:right="-8dp"
android:top="-8dp">
<shape>
<solid android:color="#EBFFF7" />
<stroke
android:width="1dp"
android:color="#118F5D" />
</shape>
</item>
</layer-list>
background_radio_unchecked_background -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/color_employer_divider" />
<solid android:color="#F2F2F2" />
<corners android:topRightRadius="#dimen/screen_margin_half_half_half" />
</shape>
</item>
</layer-list>
-----------Custom drawable for button-----------
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked_button" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked_button" android:state_checked="false" />
</selector>
background_radio_checked_button -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_poll_filled_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
background_radio_unchecked_button -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_poll_empty_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
I'm still not sure why creating a single drawable which has both icon and border/background color, does not work with lollipop devices.
Suggestions, corrections on this solution are welcome.
I would like to change the background color of my ImageButton on pressed event.
Here is what i am done :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#color/rose_normal" />
<solid
android:state_pressed="true"
android:color="#color/rose_fonce" />
<stroke
android:width="1sp"
android:color="#color/rose_fonce" />
</shape>
My button is well in "rose_normal" color, but never in "rose_fonce" color on press.
Where is the problem ?
EDIT : PROBLEM SOLVED :
Create one xml file called background_rounded_button.xml :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rounded_button_rose_fonce" android:state_selected="true"></item>
<item android:drawable="#drawable/rounded_button_rose_fonce" android:state_pressed="true"></item>
<item android:drawable="#drawable/rounded_button_rose_normal"></item>
</selector>
rounded_button_rose_fonce.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#color/rose_fonce" />
<stroke
android:width="1sp"
android:color="#color/rose_fonce" />
</shape>
rounded_button_rose_normal.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#color/rose_normal" />
<stroke
android:width="1sp"
android:color="#color/rose_fonce" />
</shape>
And finally, apply background for the button :
<ImageButton
android:id="#+id/all_annonce_button_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/background_rounded_button.xml"
android:padding="16dp"
android:src="#drawable/ic_action_search" />
The problem is that you are not using a selector, but a shape.
Try this code (button_selector.xml, put it in your drawable folder):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/rose_fonce" android:state_selected="true"></item>
<item android:drawable="#color/rose_fonce" android:state_pressed="true"></item>
<item android:drawable="#color/rose_normal"></item>
</selector>
When setting this selector as the background of a Button, it will have the "rose_normal" color in normal state, and the "rose_fonce" color when pressed or selected.
Example:
<Button
android:background="#drawable/button_selector" />
i am trying to show rounded shadow in center when status is pressed.
but it is giving full view (rectunglar) shadow in current case.
here is what i am trying...
1. left_button.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="#ffffff"></solid>
</shape>
</item>
<item android:state_focused="true"><shape>
<solid android:color="#40454a"></solid>
</shape></item>
<item><shape>
<solid android:color="#40454a"></solid>
</shape></item>
</selector>
here is the xml layout where i am applying ...
<RelativeLayout
android:id="#+id/relative_activity_camera_bottom"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:background="#layout/footer_color" >
<LinearLayout
android:id="#+id/bottom_layout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#android:color/transparent"
android:gravity="center_vertical"
android:weightSum="1.0" >
<ImageView
android:id="#+id/captureImage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#layout/left_button"
android:src="#layout/camera_image"
/>
<ImageView
android:id="#+id/recordButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:src="#layout/videocamera_image"
android:background="#layout/left_button"
android:onClick="startRecording"
/>
</LinearLayout>
</RelativeLayout>
original condition-
current case- (but i want to show white only in center)
For example, use a selector :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/gradient_round_press_effect" android:state_selected="true" android:state_window_focused="false"/>
<item android:drawable="#drawable/gradient_round_press_effect" android:state_selected="true"/>
<item android:drawable="#drawable/gradient_round_press_effect" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="#drawable/gradient_round_press_effect_inverse" android:state_selected="false"/>
</selector>
With two drawable shapes, the first when clicked (gradient_round_press_effect):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:endColor="#color/clr_the_color_behind"
android:gradientRadius="130"
android:startColor="#66000000"
android:type="radial" />
</shape>
Adapt the size of the radius with the size of the button
For start color use #66FFFFFF if you want white (66 is for the transparency)
For end color maybe you can use transparent ? i didn't try this
and when not clicked define your own colors (gradient_round_press_effect_inverse) not really "inverse" but this is an example of another gradient. You can just use a color instead
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:centerColor="#color/clr_gradient2"
android:endColor="#color/clr_gradient1"
android:startColor="#color/clr_gradient3"
android:type="linear" />
</shape>
Im trying to customize a check box
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/checkbox_selector"
android:checked="true"
android:text="Produsele si factura trebuie sa ajunga la aceeasi adresa"
android:textColor="#color/white" />
The selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/checkbox" android:state_checked="true" ></item>
<item android:drawable="#drawable/checkbox_white"></item>
</selector>
#drawable/checkbox is a photo while checkbox_white is a shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/white" />
<size
android:height="15dp"
android:width="15dp" />
</shape>
As you can see when the button is unchecked the image is a white 15X15 shape but when I click it I want it to change to the image in drawable and also set it to 15x15dp. I tried to add the drawable in a shape but the app crashes.
I have buttons and i want to set background xml for them, and when a user press any button i want to change its background , i work like this
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#FFFFFF"
android:gravity="center"
android:background="#drawable/button_selector"
android:text="#string/b_cancel" />
button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_bg" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="#drawable/button_bg_hover" android:state_pressed="true"/>
<item android:drawable="#drawable/button_bg_hover" android:state_pressed="false" android:state_selected="true"/>
</selector>
button_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding android:top="10dip"
android:bottom="10dip"/>
<!-- Gradient Bg for listrow -->
<gradient
android:useLevel="false"
android:angle="270"
android:centerColor="#000000"
android:endColor="#FFFFFF"
android:startColor="#808080" />
</shape>
button_bg_hover.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<padding
android:bottom="10dip"
android:top="10dip" />
<!-- Gradient Bg for Button -->
<gradient
android:angle="270"
android:centerColor="#000000"
android:endColor="#FF0000"
android:startColor="#808080" />
</animation-list>
it works good as a background but when i press the button it becomes all white, inspire of my button_bg_hover , why pelase? what is the correct ?
it could be the misplaced -tag, change the line
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
.....
</animation-list>
to
<shape xmlns:android="http://schemas.android.com/apk/res/android">
.....
</shape>