I am having problems with nine patch images ( **.9.png ). I have a widget layout and would like to use nine patch images for the widget's backgroud. Here is my background.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/appwidget_bg" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/appwidget_bg" />
<item android:state_focused="true" android:drawable="#drawable/appwidget_bg" />
<item android:state_focused="false" android:drawable="#drawable/appwidget_bg" />
</selector>
The drawbales name is "appwidget_bg.9.png". This stuff works fine. But I would like to use different images for the focused and pressed states.
So I make it look like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/appwidget_bg_pressed" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/appwidget_bg_pressed" />
<item android:state_focused="true" android:drawable="#drawable/appwidget_bg_pressed" />
<item android:state_focused="false" android:drawable="#drawable/appwidget_bg" />
</selector>
The problem: As soon as I add the additional drawable "appwidget_bg_pressed.9.png" I get the following error message:
.../res/drawable/widget_bg.xml:21: ERROR Error: No resource found that matches the given name (at 'drawable' with value '#drawable/appwidget_bg').
.../AndroidManifest.xml:6: ERROR Error: No resource found that matches the given name (at 'icon' with value '#drawable/icon').
It seems like I can only add one nine patch drawable to the drawables folder. Why is that?
Are you certain they've been imported into your drawables folder? That error is saying it's not found the files. You can certainly have multiple 9-patch images. Seems like it's found appwidget_bg_pressed.9.png, but isn't seeing just appwidget_bg.9.png or icon.png
This is an old question, but I was facing same problem and I figured it out and solved my problem.
The problem was with 9-patch drawables; they had patches on one side instead of two. because I didn't want my drawable to stretch vertically but it seems that I can't do it with one side patching.
I hope it'll help others.
Related
I've got a group of radio buttons, and I want to set the button's background to a solid color when checked. I created a drawable resource, using a selector and item def's like:
<item android:state_checked="true" android:state_pressed="false"
android:drawable="#color/app_tint"/>
with several variations while trying to get it to work. In the layout containing the buttons, I've tried setting both button and background properties (not at the same time, just one or the other in testing) like:
android1:background="#drawable/radio_state"
OR
android1:button="#drawable/radio_state"
I've read several posts, and I feel I'm close, just missing something to get it done. Thanks.
Here's one we did for an app:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_bcnav_ebilling_focus"
android:state_checked="true" />
<item android:drawable="#drawable/ic_bcnav_ebilling_focus"
android:state_selected="true" />
<item android:drawable="#drawable/ic_bcnav_ebilling_focus"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_bcnav_ebilling_focus"
android:state_focused="true" />
<item android:drawable="#drawable/ic_bcnav_ebilling" />
</selector>
Each state has a different drawable, although in this example, we don't really care about all states being very different - just focus=true get a highlighted drawable (it has "..._focus")
I'm trying to create complex drawable with one picture inside changing with main view state change. My current resource looks like that
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<layer-list>
<item>
<selector>
<item android:state_activated="true" android:drawable="#drawable/img_activated_icon" />
<item android:drawable="#drawable/img_default_icon" />
</selector>
...
Next I use it as src for my ImageView.
The whole drawable renders fine but the selector ignores setActive() call on the ImageView and always displays "default" icon.
What am I doing wrong?
UPD
So, here goes the desired drawable hierarchy:
layer-list
transition
background1
background2
image
I was unable to activate transition animation in this case so I moved the transition to the upper level:
transition
layer-list
background1
image
layer-list
background2
image (the same image!)
So, how can I implement the first layout and be able both to control the transition and to change source for the image?
So basically you want to be able to control the drawables manually, and have them react to state changes. To my knowledge, it is bad practice to try to set a fake state (pressed/focused/etc) on a View, so I would recommend you don't try to do that. I haven't done this before, but I can't see why it couldn't be done. My idea would be to create a single LevelList of StateLists for this button/image.
The LevelList would provide you to have control over what "theme" the button/image has depending on the level you set it to using setLevel(). Each level would point to a "themed" StateList that would have different "themed" drawables for all the various states (pressed/focused/etc).
http://developer.android.com/guide/topics/resources/drawable-resource.html#LevelList
http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:maxLevel="0" android:drawable="#drawable/state_list_icon_default" />
<item android:maxLevel="1" android:drawable="#drawable/state_list_icon_another_style_1" />
<item android:maxLevel="2" android:drawable="#drawable/state_list_icon_another_style_2" />
</level-list>
Your state_list_icon_default would have your default drawables, like this (it's up to you what states you want to have drawables for):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/img_default_icon_pressed" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#drawable/img_default_icon_focused" />
<item android:state_enabled="false" android:state_focused="true" android:drawable="#drawable/img_default_icon_disabled_focused" />
<item android:state_enabled="false" android:drawable="#drawable/img_default_icon_disabled" />
<item android:drawable="#drawable/img_default_icon"/>
</selector>
Here's some tutorials to see more in depth implementations.
http://iserveandroid.blogspot.com/2010/10/progress-bar-implementation-using-level.html
http://sermojohn.wordpress.com/2012/02/04/using-a-state-list-drawable-as-a-button-background-image/
I'm starting a new app where I use ActionBarSherlock & HoloEverywhereLib. My min & target SDK are the same (10/2.3.3). This is just so I can also quickly port it to Amazon Kindle & BB10 using the android runtime they have (already used this setup for another app and it worked without issue). All the while the app should have as close to ICS/JB look as possible.
For my EditTexts though, I'm giving them a Girgerbread/iOS (round corners, but no shadows) look to them
Someone mentioned to me a few weeks ago to grab the drawables for Gingerbread and use them to my EditTexts. but i starting using another answer I found here at S/O, very simple:
<EditText
background:"#drawable/edittext_round_white"
..../>
& my edittext_round_white.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners android:radius="8dp"/>
<stroke android:width="1dp"
android:color="#444"/>
<solid android:color="#FFFFFF" />
</shape>
Now, when I run the app, two things are not right
a) there is no 'focus' at all (I'm aware I need to implement this, it's the point of the question)
b) the cursor does not appear at all in my edittext (the gray vertical line hinting at to where in the edittext the input is directed)
For a)
I assume I've to use some sort of selector or list, right? how? I'm new to styling in android and any help would be appreciated. The only thing I'm going to change is the stroke color.
For b) how can I make cursor show up?
Any hints / links / etc here are very much welcomed!
I suggest to use NinePatch images to customize your EditText. Here goes an example based on my code:
The Selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_pressed="true" android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#drawable/twitter_im_edittext_focused" />
<item android:state_enabled="true" android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_focused="true" android:drawable="#drawable/twitter_im_edittext_focused" />
<item android:drawable="#drawable/twitter_im_edittext_normal" />
</selector>
Use selector the same way you used in your code, set it to background of your EditText.
Images:
twitter_im_edittext_focused.9.png
twitter_im_edittext_normal.9.png
More about NinePatch images you can found here.
Hope it helps.
A short version of the accepted answer
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_focused="true"
android:drawable="#drawable/edit_text_background_focused" />
<item android:drawable="#drawable/edit_text_background_normal" />
</selector>
I think the problem is that your cursor is above the left 'border / wall' of the editText box and is not visible due to the overlap.
What I did was to add some padding for the text and this moved the cursor and text more 'inward' and it then became visible.
Try adding this to your editText:
android:paddingLeft="8dp"
I made a layout that is just simply a textview that says "What do you want?", followed by a series of buttons underneath it.
All of the buttons can be clicked/touched, but when I scroll with the trackball, none of them become highlighted. I noticed, however, then when I disable the background colors on the buttons, I can see the orange box that shows that button's focus.
Is there any way I can visibly see the focus while still being able to have a background color on the buttons?
EDIT: Found the solution! This helped A LOT. Standard Android Button with a different color
Create a "selector" resource in your res/drawable. It can look something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#color/white" />
<item
android:state_pressed="true"
android:drawable="#color/orange" />
<item
android:state_selected="true"
android:state_pressed="false"
android:drawable="#color/blue" />
</selector>
Then set the background of your button to be:
android:background="#drawable/your_selector"
Rather than applying a simple background color to buttons, try applying a ColorStateList instead.
To do so, define a new XML file at
/res/color/buttonstate.xml
and use code such as the following:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="# FOCUSED COLOR HERE"
android:state_focused="true" />
<item android:drawable="# DEFAULT COLOR HERE" />
</selector>
Notes:
You can definitely add more colors for more states, such as pressed, enabled, and certain other factors.
In the layout or code just reference R.color.buttonstate or #color/buttonstate (the XML's filename).
Make sure the default color is last. This is because it goes down the list and finds the first item that has all of the states the same as it. If you don't provide android:state_focused="false" for the default item and put it first, it will always display.
You can do a similar thing with drawables and
nine-patch drawables to make your own custom button styles.
Rather than just change the background color, consider using a 9-patch style. This is more work to begin, but you'll have much more control over your app's appearance.
Modify your Button layout to look something like this (the style line is the kicker):
<Button
style="#style/PushButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Your styles.xml resource file then should contain a style similar to this:
<style name="PushButton">
<item name="android:background">#drawable/btn</item>
</style>
Then the btn.xml (put in in res/drawable) contents should look something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_focused"
android:state_pressed="false"
android:state_focused="true" />
<item android:drawable="#drawable/btn_default"
android:state_focused="false"
android:state_pressed="false" />
You would then use some image editor to create files named btn_pressed.9.png, btn_focused.9.png, and btn_default.9.png. Drop these files in your res/drawable.
A good starting point is the Google IO app (I lifted the code examples from it). Just grab the png files and modify them to match your desired style.
Keep in mind you can put all sorts of stuff in the style now, like text size, height and width.
I'm setting a selector.xml to the ListView Selector :
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="true" android:drawable="#drawable/timeline_selected_rect"/>
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false" android:drawable="#drawable/timeline_selected_rect"/>
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="true" android:drawable="#drawable/timeline_selected_rect"/>
but setting this is causing the TextView flickr over selection. this thing is not happening when the Default selector is used... whats wrong with this selector.
I have even added android:cacheColorHint="#00000000" as provided info by some other blogs.
I recently ran into this problem as well and found the solution by analyzing the Android source code.
You need to remove the android:state_selected="true" attributes since checking that state is unneeded. Once a list item loses it's focus, it also makes 'selected = false'. Since focus=false & selected=true will never occur, your first 2 <items> in the selector will never be shown.
Think of the tap like a mouse click with an onPressDown and onPressUp event.
So your new selector.xml should looks something like this to avoid the flickering:
<!-- {comment copied directly from Android source code}
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_pressed="true" android:state_focused="true"
android:drawable="#drawable/timeline_selected_rect"/>
<item android:state_pressed="true" android:state_focused="false"
android:drawable="#drawable/timeline_selected_rect" />
<item android:state_focused="true"
android:drawable="#drawable/timeline_selected_rect" />
<item android:state_window_focused="false"
android:drawable="#android:color/transparent" />
As an aside, you should seriously consider creating a separate drawable for the pressed state so that you give a bit of visual feedback. It is always nicer to see "something happen" when interacting with the UI; whether that is drawing a button in a "down" state while it is being pressed or changing the color slightly while tapping on a list item, the visual feedback is good practice.