Monkey Learns More About Layouts

After a weekend of Wedding Anniversary celebrations and late night gaming sessions, I was happy to get back to coding!

I had a little bit of trouble getting back into mybringback’s lessons. What should have been the next lesson was talking about things that we hadn’t done yet. Where did that radio button come from? How did he make those two text views appear side by side like that? After I clicked through the lesson pages a few times, I determined that lesson 12 was in fact missing. I tracked it down on his YouTube playlist. What’s really funny is that after I completed the tutorial I clicked back through the webpages and found it there. Weird.

Lesson 12 was all about setting up a more advanced XML layout. Not too much was new, which is nice. The main new thing we learned was setting a layout for our activity and setting a component’s weight. We took out new activity (TutorialOne.java and it’s XML file: tutorial1.xml) and added an Edit Text field, a button, a Radio Button and three View Text fields. I guess the Radio Button was new too, but we didn’t really do anything with it except for dragging it into the design section from the palette. When we added them they were all a jumble, so we worked on tweaking the layout so it made sense.

A somewhat jumbled layout

Now that doesn’t look terrible, but it isn’t pretty either. And is not what Travis wanted it to look like. So we did some tweaking. I should note that he had us add a vertical orientation tag to our linear layout. Android Studio seemed to have already added this to mine. We reviewed gravity by centering a few things. Then we set a few of the components to fill the parent or wrap content depending on what effect we desired. This was review as well. Travis wanted the two text view directly following the edit text to appear on the same line as each other instead of occupying two lines as you see above. To do this we set up a new linear layout within our existing one, by simply copying the opening tag and pasting it between our edit text and the first text view components. Then we added a closing tag after the second one. Since we want this views to be side by side on the same horizontal line we changed our new orientation from vertical to horizontal. When we had a look at what this changes did we noticed we now only one text view and big empty space beneath it. We had to add weight to make it work.

Code from our Weighted Linear Layout

Weight was new to our lessons. If you look at our code above you can see that it was fairly simple to set up. All we did was tell the linear layout how much weight it had by using android:weightSum=”100″ as seen on line 19, and then we told each of the text views that they could use half of that weight. android:layout_weight=”50″ can be seen within both TextView’s on lines 27 and 36. This told both TextView’s that they could use 50 of the available 100 weight, or 50% or One Half. So they should each appear using half of the line. Travis also explained that we could get the exact same result if we set the weightSum to 2 and the layout_weight’s to 1. In my mind I took this further and decided if we want to split the line into 3 it might be best to use a number that is a multiple of 3. 100 does not divide into 3 parts using whole numbers… I wonder if weight can use decimals. If it can there really isn’t a problem. Or if the remaining weight is split and used a margin on either side it would work well. It also occurs to me that we could use weight in a vertically orientated layout to spread things out down the screen. Anyway, you can also see that we centered the gravity of both TextView’s. Let’s see how that looks.

Our Layout after Lesson Twelve

We continued to set up our new layout in Lesson 13. New things learned here included RadioGroup. RadioGroup makes Radio Buttons work as they are meant to. When you select any one button within a RadioGroup it will automatically deselect all others. Neat!

We started the lesson by adding 5 new RadioButtons by simply copying and pasting the existing ones. Next, we set up a new LinearLayout around all six RadioButtons with a weight of 2 because we wanted two columns. Then we used our new RadioGroup  and made one with a vertical orientation, fill_parent width, wrap_content height and a layout_weight of 1. We set this up around three of the buttons, and then did the same for the remaining three. This gave us 2 columns of 3 buttons each and within each column only one button can be selected at any one time. We finished the lesson by setting up the buttons and text fields with the proper words as well as changing the ids to be what we want them to be. Travis gave good suggestions for ids. He uses an abbreviation of the type of component and a quick label describing it. A TextView that says Style would have the id of tvStyle and a Radio Button that is labelled Bold would be rbBold. This seems to work well and I think I will adopt it. How do you handle ids? Any suggestions that work better for you?

 

A look at Our App after Lesson 13

It’s looking pretty good if I do say so myself. One thing I’ve noticed is that Travis’ app now fills the whole screen of his AVD, while mine doesn’t. I need to figure out how to make the radio buttons bigger. Any quick advice?

My First App

Welcome to a new segment of this blog. I’ll talk about an app I’m starting to work on here and discuss the progress I am making. So far I’m just deciding what to make. I know it is going to be a sound board, and I so wish I could base it off something popular like my beloved Star Wars, but I want to keep it legal and legit and whatnot. Then I thought that having it be a bunch of Monkey Sounds would be cool for the Wannabe Code Monkey, but it turns out free to use monkey sounds are hard to find. If I had a zoo nearby I would go try to record some, but I don’t. Currently I’m thinking I might just try to use a variety of  generic sounds. After all I’m sure the only people that will check out the app will be readers of this blog and family and friends.

Thanks for reading!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s