Sunday, June 12, 2011

The UI - churning through it

I have a bunch of little, bitty things to do for the UI that I'm trying to fight my way through.

I'm going to make a game out of it.

On thing I want to do is make sure the timebar wrong color is the same as the regular bar timeout. The time is 7:42 pm
Ready - set - go!

Here it is on the incorrect:

android:startColor="#CCFF8C69"
android:endColor="#99EEB4B4"
android:angle="90"/>


For the timer bar, we'll just use CCFF8C69. It's 7:44. Let's check it.

Yup, it looks fine. In fact, I think I'll just get rid of the gradient on the wrong bar.


android:shape="rectangle">
android:startColor="#CCFF8C69"
android:endColor="#CCEEB4B4"
android:angle="90"/>



7:47. Let's check it.

Ok, well, it's good enough.


Now, I need to choose a couple of new colors for the progress bar, and make it thinner, as I'm not happy with it.

Maybe a simple yellow; and for the back color, how about the same color as the picture? But, where is that specified? I know I have the highlight shapes, but, where is the standard one?

It looks like it might be this, in my_progress_horizontal.xml:


layer-list xmlns:android="http://schemas.android.com/apk/res/android">




android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>







android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>








android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>







Let's try changing the radius so, say, 1dip. Virtually no change. Let's try the question layout.

Here's what it says:


android:layout_height="wrap_content" style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_marginRight="0dp" />


So, the height is wrap content - but there is no content. Well, we'll leave that for later. We have bigger fish to fry.

I want to change the color. I tried setting the alpa channel to 00, but it said value not allowed. i'm not sure why.

Why dont' I leave it as it is for now, and just pick out some kind of highlight yellow.

How about

cadmiumlemon #FFE303

From http://www.december.com/html/spec/color1.html

So now we have this:




android:startColor="#ffFFE303"
android:centerColor="#ffFFE303"
android:centerY="0.75"
android:endColor="#ffFFE303"
android:angle="270"
/>




Hmmm; the background is actually the part left over after the countdown, and the progress bar the one that moves. I'm not happy with the yellow - it's kind of bright.

How about: rawsienna #C76114

It's to harsh; I need something more brownish. Wait; if I give it an alpha value of 77, it looks decent. I'll stick with that.

8:26.

Wow, 45 minutes for that. Well, hopefully, it's done.

Now we need to CHANGE THE COLOR OF THE EFFING BUTTON FROM GRAY!!!! And get rid of the gradient.

What might be a good color?

How about wheat:

wheat3 #CDBA96

What, no change?

Ah, ok, it's the bottom section:


xmlns:android="http://schemas.android.com/apk/res/android">



android:startColor="@color/state_pressed_end"
android:endColor="@color/state_pressed_start"
android:angle="90" />
android:width="3dp"
android:color="@color/grey05" />
android:radius="3dp" />
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />





android:endColor="@color/state_focused_end"
android:startColor="@color/state_focused_start"
android:angle="90" />
android:width="3dp"
android:color="@color/grey05" />
android:radius="3dp" />
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />





android:endColor="@color/state_normal_end"
android:startColor="@color/state_normal_start"
android:angle="90" />
android:radius="3dp" />
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />




Let's try this:

How about: rawsienna #77C76114

No, it's hard to read and ugly.

How about bread #FCD59C

Well; better. How about that cool pinkish red of the cherry? Where is that? hilight correct something...highlight list item correct.

Let's try it: #CCFF8C69. No, too orangy.

How about the other one: #CCEEB4B4

Let's go back to bread #FCD59C

Good enough, with an alpha of 77. I dunno. It's 9:06.


Also, before I forget, I need to get rid of the gradient on the incorrect; now i's this:

android:shape="rectangle">
android:startColor="#CCFF8C69"
android:endColor="#CCEEB4B4"
android:angle="90"/>



Let's try both as CCEEB4B4;

No, it's like a a purple. And the other one?

CCFF8C69?

Better. Try it as an AA.


No - best with CC or AA. CC.

Ok, not bad. That was only until 9:13. Ten minutes.

Ok; we need to change the font. It's to boring.

How to change the fon on android? Google.

Well, according to this:


http://www.droidfonts.com/

There are only 3 fonts; Droid regular, mono, and serif.

The serif looks the best, I'll try that:

http://www.droidfonts.com/info/droid-serif-fonts/

Ah, here it is:

android:typeface="serif"

How to I do this for the hole thing? I think android allow styles.

Yeah, here it is from Google:

Styles in Android share a similar philosophy to cascading stylesheets in web design—they allow you to separate the design from the content.

For example, by using a style, you can take this layout XML:

android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#00FF00"
android:typeface="monospace"
android:text="@string/hello" />
And turn it into this:

style="@style/CodeFont"
android:text="@string/hello" />


I definitely need to do this if I'm going to be messing around with text color and whatnot.

So, how to I define the style? Read on.


"To create a set of styles, save an XML file in the res/values/ directory of your project. The name of the XML file is arbitrary, but it must use the .xml extension and be saved in the res/values/ folder.

The root node of the XML file must be .

For each style you want to create, add a



Ok, here's my file so far:







Lets try it on the english:

style="@style/CodeFont"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="center"
android:background="#77EBD5A8"
android:textSize="25sp" android:textColor="@color/text_color" />

Well, I dunno. Let's see white is does for the Japanese...

Yeah, no difference. Well, let's put it in the rest of the texts.

Ok. That's done. Wow - 9:49. That was like 45 minutes or something. But, I like the text change.


Ok, now for the text color.

Warm brown. How about...

cinnamon(Hex3) #AA6600

Not bad - but a little to cinnamon. Something a tad darker, perhaps.

rawumber #734A12

Yup, raw number is a good color for text. Completely opaque.

10:04. About 15 for that.

O.k. What's next? Let's get a background color.

Right now it's yellow. What can we change it to? I'm still not happy with the foreground color.

It needs to be darker; it looks too? I dunno. What if we gave it the same color as the text, raw umber?

No; too dark you can't read the text.

navajowhite3 #CDB38B

Not bad. Better. Let's make the text darker on the buttons

It's ok. But, it needs to be bigger, to make it more readable.

Hm.... ok, it pushes a third button off the page, but I want to move that anyway. The other thing is, I should be specifying the text stuff specifically for buttons, because there's less of them then text.

Well, let's just create another code style for buttons, wot?

Ok, I moved the download audio button to the settings page. I'm not sure it's best there.

I'm not sure I like all the brown. I dunno, the whole thing just become kind of brown and muddy.

Anyway, it's 11:15. So I've been over an hour on moving the button, and working the button text.

But, one thing I want to do is not just disable the next button, but make it invisible.

Let's see how fast I can do that. Done. It's 11:21. I started, at 11 20.

Ok. Now, I want to do the same thing for the English translation text. I ran into a problem with that yesterday. Let's try it again.

It's 11:22.

Ok, here's where I put it:

private void advanceQuestion() {
/* display the current question */
mDisplayEnglish = (TextView) QuestionActivity.this
.findViewById(R.id.display_english);
mDisplayEnglish.setText("");
mDisplayEnglish.setVisibility(View.INVISIBLE);
checkIncrementQuestion();
}


And here:

*/
private void displayCorrectAnswer(ListView listView) {

cancelCountdownTimer();

Button nextButton = (Button) findViewById(R.id.next_button1);
nextButton.setEnabled(false);
nextButton.setVisibility(View.VISIBLE);

mDisplayEnglish = (TextView) QuestionActivity.this
.findViewById(R.id.display_english);
mDisplayEnglish.setVisibility(View.VISIBLE);

C'mon babe, who's your daddy...

And done. 11:27. It's just knowing where to put it.

Ok. That's a rap for today. Back tomorrow, bright and early.

No comments:

Post a Comment