First off i want to say im attempting (and mostly succeeding) to use purely XML for styling purposes.
I ahve a list view, displaying the standard textview. Everyhting is working, including my custom xml defined drawables.
Except that my clear "buttons" turn green where transparent, as is the android 2.2 default. Is there any way to override this?
Attached below is the drawable code for the button. The Top colors for gradients are solid, bottoms are 100% transparent.
<?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/butttop"
android:endColor="#color/buttbot"
android:angle="270"
android:dither="true"
/>
<!-- <stroke
android:width="1dp"
android:color="#color/stroke2" />-->
<corners
android:radius="20dp" />
<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/focustop"
android:startColor="#color/focusbot"
android:angle="270" />
<!--<stroke
android:width="1dp"
android:color="#color/stroke1" />-->
<corners
android:radius="20dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#color/butttop"
android:startColor="#color/buttbot"
android:angle="90" />
<!--<stroke
android:width="1dp"
android:color="#color/stroke1" />-->
<corners
android:radius="20dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
next is the style pertaining to them, incase its needed. *Note: menubutt is the name of the above file.
<style name="DrawerItems1">
<item name="android:textSize">16px</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">3</item>
<item name="android:typeface">sans</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#drawable/menubutt</item>
</style>
Answer found at https://stackoverflow.com/a/6201407/924939. Works for me.
You have to set android:listSelector="#drawable/listcolor" in ListView.
Then you define a drawable named listcolor.xml with a transparent solid color (or whatever you need), so that list item background will appear and default green or orange color will disappear:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00000000"/>
</shape>
This may also have to be mixed with the following code in your ListView:
android:cacheColorHint="#color/transparent"
android:background="#color/transparent"
Related
Based on the requirement, I am trying to implement a custom spinner in my app. Please refer the below image:
What I have tried is :
<Spinner
android:layout_width="#dimen/quoteEntryDialogItemSpinnerWidth"
android:layout_height="match_parent"
style="#style/spinner_style"
/>
In 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>
In drawable/gradient_spinner.xml:
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#535353" android:centerColor="#484848" android:startColor="#323232" android:type="linear" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:bottomRightRadius="4dp" android:topRightRadius="4dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape></item>
<item ><bitmap android:gravity="end" android:src="#drawable/spinner_arrow" />
</item>
</layer-list></item>
All I am getting is a spinner with the same background similar to the dropdown icon.
The background of both the spinner and the icon has to be different. I am unable to achieve thi particular design. Most of the other designs have same background for both the spinner and the dropdown anchor. Please help. Thanks in advance.
Try adding left to the second item wrapping the bitmap
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item
><shape android:layout_width="wrap_content">
<gradient android:angle="90" android:endColor="#535353" android:centerColor="#484848" android:startColor="#323232" android:type="linear" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:bottomRightRadius="4dp" android:topRightRadius="4dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape></item>
<item
android:left="130dp"
>
<bitmap android:gravity="end" android:src="#drawable/spinner_arrow" />
</item>
</layer-list></item>
</selector>
That is if you still want to try to do this your way.
Another good option is to do like GAGAN suggested, which is to make a 9patch image where the arrow is of fixed size, and the left part is resizable.
In spinner tag of your xml file,
set
android:background="#drawable/ic_dropdown"
and ic_dropdown can be your png file.
I created an xml-file (drawable) for my TableRow layout, which looks like this:
<?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="#03114e" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<solid
android:color="#829fbc" />
<stroke
android:width="1dp"
android:color="#17456b" />
<corners
android:radius="3dp" />
<padding
android:left="6dp"
android:top="6dp"
android:right="6dp"
android:bottom="6dp" />
</shape>
</item>
</selector>
It's actually supposed to change the background of the TableRow when the user touches it. Unfortunately, nothing happens.
The default background (defined between the second item-tag) works perfectly well. However, the state_pressed argument has no use.
I even tried state_focused, but still without use.
Ideas?
You can't put <shape> inside <item>. You have to make the shapes separate drawables and define your selector drawable like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/table_row_pressed" />
<item android:drawable="#drawable/table_row_default" />
</selector>
I know there are similar post to this but I couldn't find my answer in any of them. So, I have this drawable XML:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<bitmap
android:src="#drawable/bm_btn_background"
android:tileMode="repeat"
android:gravity="center" />
</item>
<item android:state_enabled="true">
<shape android:shape="rectangle">
<gradient
android:startColor="#a0e0b071"
android:endColor="#a0a67637"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#5c3708" />
<corners
android:radius="5dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#a0a67637"
android:endColor="#a0e0b071"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#5c3708" />
<corners
android:radius="5dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
I am trying to create a button with a repeated image as background and a gradient applied to it. With this code I only see the background image, not the gradient nor the border and the rounded corners. Also, when I click the button, it doesn't change (the gradient is supposed to change). I don't know what is wrong with this code? If instead of a selector I use a layer-list, I get the desired result but it doesn't change either when I press the button. Thanks for your help!
Your code for the selector is wrong because:
You have two elements for the same state and as the selector encounters the first state(state_enabled) for the Bitmap element it will stop there and your gradient will never appear(for this you should use a layer-list that has as items the Bitmap and the gradient on top)
The selector will match states in order. As you press the Button the state_pressed will never be activated because the selector will match first the state_enabled that is on the first element(for this you should move the code for the state_pressed above the state_enabled elements).
In fact you should just remove the state_enabled and let the Bitmap + gradient be the default value for the Button. Bellow is your selector(I assumed you only want to change gradient on the image(but the image should appear even in the pressed state, if this isn't the wanted behavior leave only the gradient for the state_pressed)):
<?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/bm_btn_background" android:tileMode="repeat" />
</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/bm_btn_background" android:tileMode="repeat" />
</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>
Take a look on your state attrubute
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:drawable="#drawable/nicebuttonround" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="#drawable/nicebuttonround" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
<!-- Focused states -->
<item android:drawable="#drawable/nicebuttonroundi" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="#drawable/nicebuttonroundi" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
<!-- Pressed -->
<item android:drawable="#drawable/nicebuttonroundi" android:state_pressed="true" android:state_selected="true"/>
<item android:drawable="#drawable/nice22i" android:state_pressed="true"/>
</selector>
For repeating background as image you just have to create 9 pitch images.
in my case i am using this. try it
<item android:state_pressed="true">
<shape>
<solid android:color="#color/mediumGray" />
<stroke
android:width="1px"
android:color="#color/darkGray" />
<padding
android:bottom="2dp"
android:left="1dp"
android:right="1dp"
android:top="2dp" />
<corners
android:bottomLeftRadius="7sp"
android:bottomRightRadius="7sp"
android:topLeftRadius="7sp"
android:topRightRadius="7sp" />
</shape>
</item>
<item android:state_focused="true">
<shape>
<solid android:color="#color/mediumGray" />
<stroke
android:width="1px"
android:color="#color/darkGray" />
<padding
android:bottom="2dp"
android:left="1dp"
android:right="1dp"
android:top="2dp" />
<corners
android:bottomLeftRadius="7sp"
android:bottomRightRadius="7sp"
android:topLeftRadius="7sp"
android:topRightRadius="7sp" />
</shape>
</item>
<item>
<shape>
<solid android:color="#color/lightGray" />
<stroke
android:width="1px"
android:color="#color/blackTransparent" />
<padding
android:bottom="2dp"
android:left="1dp"
android:right="1dp"
android:top="2dp" />
<corners
android:bottomLeftRadius="7sp"
android:bottomRightRadius="7sp"
android:topLeftRadius="7sp"
android:topRightRadius="7sp" />
</shape>
</item>
I have added extra transperent space to the right side of image using photoshop canvas size option and it works fine for me. download below image to see demo.
I use this layout for button color (blue):
<?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="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#449def"
android:endColor="#2f6699"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
When i try to change the color ,it doesn't change!It remains blue whatever changes i do.
I use in strings.xml:
<style name="mybuttons">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#ffffff</item>
</style>
Here is a part from main.xml:
<Button
android:id="#+id/select_c"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/choose_c"
android:layout_marginTop="120dip"
android:background="#drawable/blue_button"
style="#style/mybuttons"
/>
You should specify items in selector with android:state_pressed and android:state_focused
You've not provided enough information to know what the problem is - where's the XML layout?
To use a selector drawable you need to create it (as you have done) but then apply it to your Button. I would expect to see an attribute like background="#drawable/my_selector_drawable" in there, to apply the button background to the button in your layout.
I have googled it already but can't find a good hint on how to create buttons in android that look like glossy shiny buttons with a slight 3d effect. See pic:
How can I programmatically do this?
Create a selector like this and apply it to your button drawable. Customize it to your requirements:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:endColor="#0905FB"
android:startColor="#9796FD"
android:angle="270" />
<stroke
android:width="3dp"
android:color="#65655B" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" >
...
...
...
</item>
<item android:state_pressed="true" >
...
...
...
</item>
</selector>