I was trying to change the button background colors (default, pressed and focus), but I couldn't find a good way. I have read many posts about styling a buuton, but unfortunately these were post to create a compete new style. I want to keep everything the same except for the background colors.
I prefer using xml because I'm using a single layout for multiple activities. I was also looking for a solution that works for android 4.0 and up and below 4.0.
Can someone please help me?
If you want to change the default button color without losing the shadow, Then I recommend changing the style of the required button.
You can simply do this by adding this line to the button tag
style="#style/Widget.AppCompat.Button.Colored"
Sample code will look like this
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.AppCompat.Button.Colored"
android:text="Rate now"/>
now change the colorAccent to the desired color in the color.xml located under res->values->colors.xml file.
<color name="colorAccent">your color here</color>
you can visit the official developer page to get more information Styling buttons
Create a button_style.xml with the settings you want for your button like the example below, and place this file inside the drawable folder under the res folder.
<?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="#color/MyButtonDarkGray"
android:endColor="#color/MyButtonDarkGray"
android:angle="270" />
<stroke
android:width="0dp"
android:color="#color/Gray" />
<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="#color/Green"
android:startColor="#color/Green"
android:angle="270" />
<stroke
android:width="0dp"
android:color="#color/Gray" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#color/green_leaf_top"
android:startColor="#color/green_leaf_bottom"
android:angle="270" />
<stroke
android:width="0dp"
android:color="#color/Gray" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Now, in your styles.xml under the res\values folder, add
<style name="button" parent="#android:style/Widget.Button">
<item name="android:background">#drawable/button_style</item>
</style>
This style will work for all your buttons only.
NOTE: The colors are defined separately in res\values\colors.xml, you can use your own colors.
Here is an xml for changing colors based on the states of button:
Create a drawable resource as below
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#android:color/black" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#android:color/holo_orange_dark" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#android:color/holo_green_dark" />
<item
android:state_enabled="true"
android:drawable="#android:color/holo_blue_bright" />
</selector>
In java code set the drawable resource as below:
Button btn = (Button) findViewById(R.id.btn1);
btn.setBackground(this.getResources().getDrawable(R.drawable.mydrawable));
In xml set the drawable as background of the button in the xml:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mydrawable" />
NOTE: you can either set in java code or in xml.
Related
I need a toggle button to have an image and a background color. Currently, my toggle button only has an image and no background color. Here is the code for it
<ToggleButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:onClick="onToggleClicked"
android:textSize="0sp"
android:checked="false"
android:background="#drawable/soundfocuslone1"/>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<bitmap android:src="#drawable/soundonlone1"
android:gravity="center"/>
</item>
<item android:state_pressed="true">
<bitmap android:src="#drawable/soundfocuslone1"
android:gravity="center" />
</item>
<item android:state_checked="false">
<bitmap android:src="#drawable/soundofflone1"/>
</item>
</selector>
Is it possible to have two backgrounds on the toggle button? I want a background color as well as an image on it. If not, is there a simple way to have an image button behave like a toggle button? Having an image button acting as a toggle button would probably be easier as the image is not scaled on the toggle button. Thanks, and I would appreciate all replies.
if you dont want the image to be placed in the center, use this for giving background.
1. put this in your toggle button - android:background="#drawable/bw_toggle_on_selector"
2. create an XML in drawable folder with the name "bw_toggle_on_selector" and paste the below code in it-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#7995A8"
android:startColor="#E8E8E8"
android:endColor="#000000"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
3 .use android:drawableLeft for setting background image.
and if you want to place the image in center, then use this code (it covers everything incl. background image).
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true">
<layer-list>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/ic_stop"
/>
</item>
<item>
<shape>
<gradient
android:angle="270"
android:endColor="#a0e0b071"
android:startColor="#a0a67637" />
<stroke
android:width="1dp"
android:color="#5c3708" />
<corners
android:radius="5dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
<item
android:state_enabled="true">
<layer-list>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/ic_back"
/>
</item>
<item>
<shape
android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#a0a67637"
android:startColor="#a0e0b071" />
<stroke
android:width="1dp"
android:color="#5c3708" />
<corners
android:radius="5dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
** Some Tips **
*Changing Button text onClick
1. create a XML file in Drawable folder with the name "text_color.xml"
paste the below code in it-
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#000000" />
<item
android:state_pressed="false"
android:color="#01DFD7" />
</selector>
2. put this in your button to define the XML
android:textColor="#drawable/text_color"
*Faster way of Resizing my images?
use this tool or Android asset studio (google it)
*How do i make a Custom Background for my Buttons?
try this online tool :)
Actually ToggleButton has "android:button" attribute. So u can use "android:button" attribute for selector, and "android:background" for giving the background color to the ToggleButton.But using toggle button we can get the gravity issue so you can use check box instead of toggle button.
<CheckBox
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:onClick="onToggleClicked"
android:textSize="0sp"
android:checked="false"
android:padding="5dp"
android:button="#drawable/soundfocuslone1"
android:background="ur_background_color_code or drawable"/>
First of all you write inside your xml file:
<ToggleButton
android:id="#+id/tgTextReader"
android:layout_width="60dp"
android:layout_height="36dp"
android:background="#drawable/bw_toggle_on_selector"
android:focusable="false"
android:focusableInTouchMode="false"
android:textOff=""
android:textOn="" />
then create folder inside res/
drawable folder
write xml file name is bw_toggle_on_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/a"
android:state_checked="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/b"
android:state_checked="false"/>
</selector>
this file keep in drawable foloder.
and also create a new folder inside res /
drawable-nodpi
where two image keep there. such as image a, image b.
hops work successfully. Thanks
This question already has answers here:
Make an Android button change background on click through XML
(5 answers)
android button selector
(6 answers)
Closed 8 years ago.
I have a button that is round shape. What I want to do is to change the button color when pressed. Can someone tell me how to add the codes to the background xml? Thank you.
<shape
android:shape="rectangle" android:padding="10dp">
<solid android:color="#c0dfba"/>
<corners
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
Create XML into res/drawable/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="#343434" />
<stroke
android:width="1dp"
android:color="#171717" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#343434"
android:endColor="#171717"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#171717" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
And set to your Button as Background like
<Button
android:id="#+id/btnValidate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/button"
android:text="SOS Trasition"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold" />
And if you want Change Button Text Color then create XML file at res/color/button_text.xml:
<?xml version="1.0" encoding="utf-8"?>
<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 -->
</selector>
And set this layout XML will apply the color list to a View:
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button_text"
android:textColor="#color/button_text" />
If you just want to change color of your button then you can also do like this. But this content is only used at runtime.
I know you are asking through XML file but this is very simple and this is just a simple suggestion though.
imageview.setColorFilter(Color.RED);
or also you can pass any color code like
imageView.setColorFilter(0xFFFF3D60, PorterDuff.Mode.MULTIPLY);
crate an xml file in drawable and copy the following lines.. be sure to change the colors as you desire..
and set the xml file as background of your button
android:background="your xml"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="**your desired color when pressed**" />
<item android:color=" **default color when not pressed**" />
</selector>
Namely, how do I apply this button style? I'm refering to the blue button in the lower right corner.
create a drawable folder in res folder then create XML file and call it button_background
within the XML file you will define the shape of the button, like what is the color, and corner, stroke and padding everything you can do here. The following code is similar to the button:
<?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="#56b7cc" />
<stroke
android:width="1dp"
android:color="#70daf1" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#68c8dd"
android:endColor="#70daf1"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#70daf1" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
then in your layout give the button the following:
<Button
android:id="#+id/Button1"
android:layout_width="50dip"
android:layout_height="40dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="107dp"
android:background="#drawable/button_background"
android:textColor="#ffffff"
android:text="ok" />
I made fixed width and height so it look as the picture, the most important attribute is
android:background="#drawable/button_background"
you can modify it as much as you want by changing the colors, padding read more about it here. hope this is what you are looking for
Its android ShowcaseView functionality. You can refer it here
If you want only button style, you need create own button style and based on, for example:
on nine-patch image (using nine-patch image as Background of Button android, Button with 9-patch image background doesn't stretch correctly),
or based on shape (How to create custom button in Android using XML Styles)
style.xml
<style name="Button.Blue" parent="android:Widget.Holo.Light.Button">
<item name="android:background">#drawable/xbg_blue_button</item>
<item name="android:textAppearance">?android:attr/textAppearanceSmall</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textStyle">bold</item>
</style>
xbg_blue_button.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
<item android:state_focused="true" android:state_enabled="false" android:state_pressed="true" android:drawable="#drawable/btn_default_disabled_holo_light" />
<item android:state_focused="true" android:state_enabled="false" android:drawable="#drawable/btn_default_disabled_focused_holo_light" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/btn_default_pressed_holo_light" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/btn_default_normal_holo_light" />
<item android:state_focused="true" android:drawable="#drawable/btn_default_focused_holo_light" />
<item android:drawable="#drawable/btn_default_normal_holo_light" />
drawables:
https://dl.dropboxusercontent.com/u/54394631/buttons.rar
I want to develop custom spinner like line around spinner with triangle at right bottom corner.
like following image
For above fig I wrote my custom spinner like a
spinner.xml
<Spinner android:background="#drawable/spinner_background"/>
spinner_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<item android:state_pressed="true"
android:drawable="#drawable/spinner_ab_pressed_new_theme_bs">
<shape>
<solid
android:color="#color/White" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/skyblue" />
</shape>
</item>
<!-- spinner_ab_default_new_theme_bs -> this image for corner triangle -->
<item
android:drawable="#drawable/spinner_ab_default_new_theme_bs" >
<shape>
<solid
android:color="#color/White">
</solid>
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/gray"/>
</shape>
</item>
And I got output like following image
I tried lot but not achieve my goal please anybody have solution to develop spinner.
like above first one image.
Spinner
<Spinner
android:id="#+id/To_Units"
style="#style/spinner_style" />
style.xml
<style name="spinner_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/gradient_spinner</item>
<item name="android:layout_margin">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:popupBackground">#DFFFFFFF</item>
</style>
gradient_spinner.xml (in drawable folder)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#B3BBCC" android:startColor="#E8EBEF" android:type="linear" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:radius="4dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/spinner_arrow" />
</item>
</layer-list></item>
</selector>
#drawable/spinner_arrow is your bottom right corner image
This is a simple one.
your_layout.xml
<android.support.v7.widget.AppCompatSpinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner_background"
/>
In the drawable folder, spinner_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item>
<shape>
<solid
android:color="#color/colorWhite">
</solid>
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/colorDarkGrey"/>
</shape>
</item>
<item >
<bitmap android:gravity="bottom|right"
android:src="#drawable/ic_arrow_drop_down_black_24dp" />
</item>
</layer-list></item>
</selector>
Preview:
You can achieve the following by using a single line in your spinner declaration in XML:
Just add this: style="#android:style/Widget.Holo.Light.Spinner"
This is a default generated style in android. It doesn't contain borders around it though. For that you'd better search something on google.
Hope this helps.
UPDATE:
AFter a lot of digging I got something which works well for introducing border around spinner.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:top="8dp">
<shape>
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
<stroke
android:width="2dp"
android:color="#9E9E9E" />
<padding
android:bottom="16dp"
android:left="8dp"
android:right="16dp"
android:top="16dp" />
</shape>
</item>
</layer-list>
Place this in the drawable folder and use it as a background for spinner. Like this:
<RelativeLayout
android:id="#+id/speaker_relative_layout"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/spinner_style"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/select_speaker_spinner"
style="#style/Widget.AppCompat.DropDownItem.Spinner"
android:layout_width="match_parent"
android:layout_height="70dp"
android:entries="#array/select_speaker_spinner_array"
android:spinnerMode="dialog" />
</RelativeLayout>
If you don't prefer to create multiple XML files, try:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:strokeWidth="1dp"
app:strokeColor="#color/black"
app:cardCornerRadius="4dp">
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"/>
</com.google.android.material.card.MaterialCardView>
To change the border color:
app:strokeColor="YOUR_COLOR_HERE"
To change the border's width:
app:strokeWidth="YOUR_DP_WIDTH_HERE"
There are two ways to achieve this.
1- As already proposed u can set the background of your spinner as custom 9 patch Image with all the adjustments made into it .
android:background="#drawable/btn_dropdown"
android:clickable="true"
android:dropDownVerticalOffset="-10dip"
android:dropDownHorizontalOffset="0dip"
android:gravity="center"
If you want your Spinner to show With various different background colors i would recommend making the drop down image transparent, & loading that spinner in a relative layout with your color set in.
btn _dropdown is as:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/spinner_default" />
<item
android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/spinner_default" />
<item
android:state_pressed="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/spinner_default" />
<item
android:state_focused="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:drawable="#drawable/spinner_default" />
</selector>
where the various states of pngwould define your various States of spinner seleti
To change only "background" (add corners, change color, ....) you can put it into FrameLayout with wanted background drawable, else you need to make nine patch background for to not lose spinner arrow. Spinner background is transparent.
You could design a simple nine-patch png image and use it as the background of spinner. Using GIMP you can put both border and right triangle in image.
It's super easy you can just add this to your Adapter -> getDropDownView
getDropDownView:
convertView.setBackground(getContext().getResources().getDrawable(R.drawable.bg_spinner_dropdown));
bg_spinner_dropdown:
<?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" />
<corners
android:bottomLeftRadius=enter code here"25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
</shape>
I'm making an app on Android and when I add a button with Eclipse's plugin the button is transparent.For example: http://kakko76.free.fr/buttontransparent.png
But I don't want a transparent button!
I tried with background attribute on button but I losed the other effect on click or others.
How can I just disable button's transparency?
Thanks.
Found the perfect and simplest solution:
Just set the background of your button to
android:background="#android:drawable/btn_default"
But make sure to do it directly in the XML, not in the "Graphic Layout" interface because it probably won't work
Hope it saves someone's day ;)
By default the button shouldn't be transparent. However you could just create a Selector for your Button, so you can set it as its background but still have a click-effect whenever you click it.
<?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="insert color"
android:endColor="insert color"
/>
<stroke
android:width="3dp"
android:color="insert color" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_pressed="false" >
<shape>
<gradient
android:endColor="insert color"
android:startColor="insert color"
/>
<stroke
android:width="3dp"
android:color="insert color" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
These are the default images for the Button in API Level <10 :
The selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/btn_erase_pressed" />
<item android:state_focused="true" android:state_pressed="false"
android:drawable="#drawable/btn_erase_selected" />
<item android:drawable="#drawable/btn_erase_default" />
</selector>
And the images you'll find in your
\android-sdk\platforms\android-10\data\res\ folder
e.g:
As i found the Ice-Cream resources, the button background image is transparent, so you need to change the background to your own image, using selectors.