Friday, June 17, 2011

9 patch continued

It's 3:17 in the afternoon. I'm about to tackle the 9-patch problem again.

Where we left it off was I was supposed to modify a 9-patch to give me a nicer background. However, I ran into issues when I did that with gimp - something about bat patches.

The developer site says this about their 9-patch tool:


"Show bad patches: Adds a red border around patch areas that may produce artifacts in the graphic when stretched. Visual coherence of your stretched image will be maintained if you eliminate all bad patches."

The red border is around the whole graphic after I save to png with gimp.

Ok, I just found a link that says you can't use anything but the 9 patch tool if you're using eclipse.

The 9 patch tool isn't for changing colors - it's just for defining the expandable parts of the image, by highlighting the 1 pixel (square, border) around the edge.

My problem is that if I start with a 9 patch, bring it into gimp, and save it as a .9.png, it's screwed up. I can' remember if I tried to save it as a png? '

Ok; that's the ticket. Now, all I have to do is open it up and save it as a 9.png.


Here's an image that shows how the black lines you draw affect the scalable zones:


Now save the .png as a 9-patch...

Save it as this in drawable...

textfield_pressed.9.png


Now copy to eclipse...

Edit: I'm not sure why that worked. When I went back, saving it from gmp as a .png, then opening it and saving it as a .9.png with the nine-patch tool didn't work inititially. The only way I got it to work (lose the Eclipse message) was to surround the red "bad patch" area with the expandable black single-pixel wide line. But the size of the border was way to large - so I still didn't really get it.



Hmm...all it did was make the field totally transparent. And the highlight is STILL orange.

Ok. Should I blow this off?

I want to be able to inherit the drawable. I think I saw that somewhere? Where was it?

It might be the parent thing...

Something like this:






But I need this to apply to something like this:





In this one, I he's replacing them all:

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

Ok - I'm going to try this - copy all the drawables for text_pressed etc. from android 3 /data/res/drawable into the directory,

then use this:


android:drawable="@drawable/textfield_default" />
android:drawable="@drawable/textfield_disabled" />

android:drawable="@drawable/textfield_selected" />

android:drawable="@drawable/textfield_disabled_selected" />



Although, there aren't enough drawables to cover them all, all just see what happens.

Ok, it slightly changes the look. But it's not the text_field_pressed - that covers the whole background when it's pressed.

Before I bag this, I have do this:


xmlns:android="http://schemas.android.com/apk/res/android"
>
android:state_pressed="true"
android:drawable="@android:drawable/edittext_pressed"
/>
android:state_focused="true"
android:drawable="@drawable/edittext_focused_blue"
/>
android:drawable="@android:drawable/edittext_normal"
/>



Oh how does this sound:

http://developer.android.com/reference/android/widget/TextView.html

android:textColorHighlight setHighlightColor(int) Color of the text selection highlight.

I found it by looking though this list of icons:

http://androiddrawableexplorer.appspot.com/


Android R Drawables
Taken from Android 2.2 (android.jar: /drawable /drawable-mdpi).

Ok, that's where the textfield_disabled.9.png et. al. were hiding.

Then I googled android override textcolor highlight

Which took me back to this:

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

And before, completing looking at that, I googled

Then I google for android:text_highlight, which took me to the textview, and the above named:

android:textColorHighlight setHighlightColor(int) Color of the text selection highlight.


But, in my little retrospective here, I went back through the search, and at this:

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

Read a bit further and saw this:






Which, in my rush, I hadn't paid attention to. But you can see this entry:

@color/transparent_red


And what he's done is created an overall theme, by putting this into manifest.xml:

android:theme="@style/mytheme"


And then, in mytheme.xml:






And finally in styles.xml:







So, this applies to all his text. If I had read and understood this at first, it might have saved me a good chunk of time.

Now, I'm curious about what the difference is between my CodeFont.xml and that?

It looks as if you name int in the theme, then you don't have to specify for specifically for your controls.

Also, there is the parent: parent="@android:style/Widget.EditText">

That's the widget I was working with. So, you can use styles to overrite attibutes of widgets you're working with. But; how do you get this style name from EditText?

He says:

"I realized it was just a skin of NinePatch drawables set in the background of the underlying View class"

Of course another way to find it would have been so go through the EditText documentation. But I thought I did that. What was I looking at? It just had a view methods. Ok. From now on, I just take the time to look through the list of methods and attributes OF THE WIDGET I'm WORKING ON. It's so worth it in terms of saved time. Plus, you learn me. It seems boring, but, it helps you learn the model.

Anyway - we still have to see if it works! It hint we want to modify what - I'm not going to do the whole thing, add a style.

Let's try peachpuff2 #EECBAD






And it works. Phew. Now, I just need to get a better highlight color - and change the color selected. Let's take a look at EditView again...

Hmm, this also looks pretty good

Am I doing this yet? I think I'm doing it in code, but it's not work in the first focus. Let's try it.


Nope. Well, I'll leave that for now.

But, since I've gone through all the hassle of learning how to get a background on this thing, I might as well figure out how to get rid of the orange background. But first - I need to reboot. This computer isn't loading my app to the device.

1 comment:

  1. Hey :)
    Interesting to see how you are struggling with all this. I felt the same for a while too.

    I build my 9 patch straight from photoshop now.

    I created a blog to share all those 9 patch PNGs so feel free to drop by and grab what you need for your projects: http://android9patch.blogspot.com/

    Richard.

    ReplyDelete