In my app I have set for a button the background to a certain color. I don't like how it looks like.The button is like a rectangle, with straight edges. I want that the button to have rounded corners. How is it possible?
Here is my button in xml :
<Button android:id="#+id/button" android:text="Participer au concours de photos"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="410dip" android:layout_centerHorizontal="true"
android:background="#drawable/orange1"/>
Thanks...
Use selector
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#24a1dd"
android:centerColor="#158ee4"
android:endColor="#37b8ee"
android:angle="270"
android:centerY="0.88" />
<stroke
android:width="3dp"
android:color="#00ffffff"
/>
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" >
<shape>
<gradient
android:endColor="#59bfe6"
android:centerColor="#36aced"
android:startColor="#91def7"
android:angle="270"
android:centerY="0.88" />
<stroke
android:width="3dp"
android:color="#00ffffff"
/>
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#e1e1e1"
android:centerColor="#bdbebd"
android:startColor="#f6f2f6"
android:angle="270"
android:centerY="0.88" />
<stroke
android:width="3dp"
android:color="#00ffffff"
/>
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Something like this should do the work. Just fix the color values. Which is the same as the the answer of this question Standard Android Button with a different color
There are two ways :
Use 9 patch drawables (png image)
here is complete tutorial 9 patch drawables: background of a customized Button
Set xml drawable as background of your buttons.
Take a look here Gradient buttons for android.
And to know more about xml drawables :-
ANDROID XML DRAWABLES
Related
I'm trying to get my buttons to show 3 states, normal, pressed and selected. Normal and pressed show ok, but the selected state does not. I've tried using state_focused state_activated and state_active and combinations of states set to true and false but without success.
Can buttons show the selected state? and if so what am I doing wrong?
minSdkVersion = 11
targetSdkVersion = 19
Here's the xml for the selector, red_button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<solid android:color="#000000" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners android:radius="6dp" />
<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="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
and here's the xml for the button, which is contained within a LinearLayout and loaded as a fragment into mainActivity
<Button
android:background="#drawable/red_button"
android:id="#+id/scene_1_btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:maxWidth="150dp"
android:minWidth="100dp"
android:text="#string/scene_1_btn_text"
android:onClick="sendMessage"
style="#style/button_text" />
Thank you.
Buttons actually behave like keyboard buttons, i.e. they have only two states viz normal and pressed.
If you want to remember/show the seleted state, i got an idea..., try using 'radio group' (if you want only one to belected from a group) or use toggle button/switch (each of them remember their state as ON or OFF) and create their custom UI so that they look like buttons as you want them to.
I am Trying to get a clickable effect for a white button that shows clickable effect on clicking it
My button
What i have tried is
I have achieved clickable effect for the button using a selector as below
black_button_for_account.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="#343434" />
<stroke
android:width="1dp"
android:color="#171717" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:angle="270"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<corners android:radius="4dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</selector>
How to give a border of like 3dp size for the button retaining the above effect color for the border like be black?
just change the following
<stroke
android:width="3dp"
android:color="#000" />
I have a custom button, but for the focused,pressed,selected state I wanna have the default Android orange selected state rather than make new custom images for those states.
How am I able to achieve that? What should I write on the selector for those states?
Check this code it'll give you a lead about how to change the colors for each state.
<?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>
I am sure you want to implement that default orange color image inside your custom selector file, if this is the case then you can know the name of all the in-built drawable files used by system, from here you can know: Android Drawables
Some of button default images names are:
btn_default_pressed.9
btn_default_selected.9
btn_default_small_pressed.9
btn_default_small_selected.9
so now copy the 9-patch images inside the res/drawable folder and use it wherever you want.
Have you tried not mentioning those states? i haven't tried but off the top of my head, i would say that if you donot mention a state, android should use the default values.
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.
Currently I am using this xml for the background of my spinner:
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#008000"
android:endColor="#7FFF00"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#A8A8A8" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#ffc536"
android:startColor="#ffe9b3"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#e4962d" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
And I like the color and the gradient however there is no indicator that there it is a drop down menu. Is there anyway to add a image or a shape to the right side to indicate a drop down menu? I found this easier then make 9-patch files.
You need to create a custom component and write an XML file and a UI element for it to implement this.
Simply treat the UI element as a drop-in version of what you're trying to implement.
Hope this helps!
i know that this question is old but i resolve in this way :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#color/green" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right|center"
android:src="#drawable/ic_arrow_drop_down" />
</item>