Thursday, June 16, 2011

9 patch blues

Ok; here what I need to do. First, I want to set the the selection on the input fields. This saves the hassle of backspacing and hitting delete.

quizStartNum.setSelectAllOnFocus(true);

Let's test it. Well, almost. It works if you leave the field and come back into it; i.e. you set the focus yourself. But because I'm already putting it there, it's not done automatically. Plus the color is ugly orange.

This looks like it will cover it:

http://stackoverflow.com/questions/4584882/how-to-change-focus-color-of-edittext-in-android

Hmm...kind of a lot of work...

You'll have to create/modify your own NinePatch image to replace the default one, and use that as the background of your EditText. If you look in your SDK folder, under your platform, then res/drawable, you should find the NinePatch image for the EditText focus state. If that's all you want to change, you can just pull it into Photoshop, or whatever image editing software you have, and change the orange color to a color of your choosing. Then save that into your drawable folder, and build a new StateListDrawable, for example something like the below:

edittext_modified_states.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="@android:drawable/edittext_pressed"
/> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="@drawable/edittext_focused_blue"
/> <!-- focused -->
<item
android:drawable="@android:drawable/edittext_normal"
/> <!-- default -->
</selector>


Hmmm...looks like a lot of work. Maybe I'll do it in phase II. Argghh!

Well, actually, I should double-check that level isn't being pulled from disk anywhere.

Let's change the setting to level 1.

Arghh! It's not working. It's got to be pulling it from storage. Where? It doesn't even get into settings from the start display.

Back to this:

/**
* @param appState
*/
private void setupJlptLevelDisplay() {
/* display the current level */
AppState appState = (AppState) this.getApplication();
mJlptLevel = (TextView) this.findViewById(R.id.level);
mJlptLevel.setText(new Integer(appState.jlptLevel).toString());
}



So, obviously, appState is getting loaded with it. It wasn't in initialize, I thought.

Ah - it was there.

Comment it out...

//appState.jlptLevel = sharedPreferences.getInt(InitUtils.JLPT_LEVEL, 5);

What was bugging me before were there were a couple of ladies near my jabbering the whole time. I should've put on earphones.

O.k. Now it's working. Let me kill and restart.

That works - how about uninstall and restart?

Ok, it seems ok.

Now; fix the ugly orange on the edit???

To review:

http://stackoverflow.com/questions/4584882/how-to-change-focus-color-of-edittext-in-android
edittext_modified_states.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="@android:drawable/edittext_pressed"
/> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="@drawable/edittext_focused_blue"
/> <!-- focused -->
<item
android:drawable="@android:drawable/edittext_normal"
/> <!-- default -->
</selector>



Ok. let's do part 1 - copy the above file into layouts.

Step 2 - find that image. I think I keep my sdk in "software"...

Nothing like res in the sdk.

How about 9-patch? Hmm; what if it's the wrong size?

Hmm...I wonder if I can just set it to a color?

Try this just as an experiment:

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="@color/state_pressed_end"
/> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="@color/state_pressed_end"
/> <!-- focused -->
<item
android:drawable="@color/state_pressed_end"
/> <!-- default -->
</selector>


Not too successful. It gets rid of the border, but the highlight is still ugly orange.

O.k. this post sheds more light:

http://www.androidworks.com/changing-the-android-edittext-ui-widget


Here we find the true location:

Look in the \platforms\android-x.x\data\res\drawable directory. In this directory, you will notice this file, edit_text.xml:

Hmm...still not there, though it's in at least Android-3.

Well, let's just toss this file:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp" android:background="#F87431">
<gradient android:startColor="#272828" android:endColor="#272828"
android:angle="0" />
<solid android:color="#FFFFFF" />
<stroke android:width="1dp" android:color="#3F5067" />
<corners android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp" android:topLeftRadius="15dp"
android:topRightRadius="15dp" android:color="#F87431" />
</shape>


I found in to the same thing,,,see what it does...

Cool...it changes it to an oval; I like that. But, the background is *still* orange.

Is there a highlight color?

Well, looky here - if I paste this in:

<highlight android:color="#FFFFFF" />


No syntax error.

Let's try this:

espresso #E7C6A5

No!

Try this:

<selected android:color="#E7C6A5" />

Neither.

I'm probably going to have to break down how to change the colors in .png.

Which one was the selected?

Hmmm...Eclipse doesn't like my file, after I saved it with Gimp.

Hmm...now it's it's not finding any of my drawables.

Clean - cant' find R - what else is new?

Delete gen? I hate when this happens.

Wow. That 9 patch was really messing things up. As soon as I deleted it, all the errors disappeared.

I'm going to bag it for now. This is taking too long.

I just want to try one more thing.

Now try to change color using the Android tool.

I think the file before had bad patches. But, how do I use this one?

Ok, well, all I really have to do is save the file as a legit 9.png with no bad patches and I should be ok. I'll pick it up in the next post.

2 comments:

  1. I have made available a couple packs of 9 patch PNGS free of charge: http://android9patch.blogspot.com/

    Use them in any products, including commercial projects.

    Richard

    ReplyDelete
  2. Hey Richard - thanks for the comment. I checked out your site and you have some made some helpful and handy 9 patches. I wish I'd known about them when I was writing this post!

    - Mark

    ReplyDelete