Who Am I And Why Am I Here I’m professor Stephen Fickas in CIS – you can call me Steve. I have a research group that works with mobile devices (since 1995!) I taught CIS 212 last year and introduced Android projects. Blame me Eric asked me to take this class and give a first look at how to build a GUI for an Android phone. I love the Android platform so said “Yes!”

Intro To Building a GUI For Android I assume you have followed directions to install and run HelloAndroid in Eclipse. I won’t go over those steps. My talk is one of several you will need to get a working GUI going. I’ll make these slides available so don’t have to copy down code in your notes. Ask me questions later:

HelloAndroid Example What I want to discuss: 1.What is on this screen in terms of “GUI components”? 2.How is it that they are laid out as they are.

What Components Do You See? The Hello, Android in the gray bar is the application name that is defined elsewhere. Does not count as component. So have 2 left: 1.The text HelloAndroid! 2.The button labeled Close.

What Is Their Layout? Vertical. Stacked on top of each other. This is your choice: you can layout them out in different ways if you wish.

Big New Idea: Declarative Programming We will describe or specify the screen layout and content using a declarative language called XML. Kind of like the architectural plans of the screen. Blueprint that says what goes where. We will see two types of items: 1.Layout specs (how to position things) 2.Content specs (what to show)

How Do I Find The Specs? Here is the HelloAndroid project in my list of projects in Eclipse. The res folder stands for resources – it is built for you. The layout folder is where you will find files that give screen specs – it is built for you. The file main.xml is where we will find the specs for our screen – its skeleton form is built for you. We will have to add the text and button specs to it by editing.

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> I’m Going To Give You The Specs Let’s try to take in the big picture. Where are specs of 2 components? Where is spec for layout? main.xml

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> Let’s Look At Some XML Details An XML tag has several forms. Look at Button for one form. Look at LinearLayout for another: … Difference? Button has no nested tags. LinearLayout does.

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> More XML Details A tag can have zero or more attributes of form att_name=“some value” How many attributes does Button tag have? 4 Example: android:text=" Close “ What is the attribute name? android:text

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> More XML Details How many attributes does LinearLayout tag have? 4 Note that newlines are optional. Tabs are also optional.

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> XML Nested Tags How many nested tags does LinearLayout tag have? 2: TextView and Button LinearLayout groups these two tags into a layout. It specifies how they should appear on the screen, i.e., in linear fashion, stacked on top of each other.

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> XML Nested Tags What would happen if we switched the order of TextView and Button? Button would show at top with text below it. Order of nested tags matters in a LinearLayout!

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> A Look At LinearLayout Orientation attribute seems obvious – specifies “vertical”. What about width and height? They have a value of “fill_parent”. Who is the parent? The entire screen is the parent. So what does fill_parent mean? It means take all the width and all the height of the parent, i.e., the entire screen. Greedy!

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> A Look At TextView While on topic, let’s look at width and height attributes of TextView. Width is again fill_parent. LinearLayout is the parent, and it is the entire screen. So what does fill_parent mean in TextView? It means the text will take all of the horizontal space of the screen. Why does it show up on left side? If you gave it lots of text, it would stretch all the way across.

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> A Look At TextView, Take 2 Height is not fill_parent. Why? LinearLayout is the parent, and it is the entire screen. If I used fill_parent for height, TextView would take all of the vertical space! What would happen to the Button? Out of luck. No space left for it to show. TextView has gobbled it all! It’s still there, but hiding behind TextView. Does this produce an error? Not explicitly – nice if it did. Symptom is that you will not see the Button on the screen.

<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ /> A Look At TextView, Take 3 Height is wrap_content. How does this help? It says take as much space as needed for the text, but no more. In this case, one line. What if I had lots of text? Then it would take as much vertical space as needed to show it. Remember that I gave it the entire horizontal screen as well.

Are These 4 The Only Attributes Possible? Uh, no! There are many many more for TextView, Button and LinearLayout. Where can I find them? Google “Android TextView”. The Android developers documentation will be your bible as you program in Android. <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" />

A Closer Look At What We Find in Docs First note that all tags in the XML correspond to Android classes. If you want more info about a tag, look-up the class. Under XML Attributes, there are two columns: Attribute Name and Related Method. The related method is an alternative to using XML. You call it in your Java code. We will ignore it in beginning. <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!" />

How To Add New Attributes <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!“ android:textSize=“12sp“ android:textStyle=“bold“ /> Don’t forget to put quotes around values! No explicit error if you forget. Just won’t take effect.

Good Stopping Point For First Look You should be able to take HelloAndroid and make at least some cosmetic changes to the GUI by changing or adding attributes. Play around with adding new text or buttons. Know that all the editing will take place in the main.xml file.

What Haven’t I Told You? Can do some debugging directly on main.xml (without trying to run the app). There are two tabs at bottom: main.xml shows you xml code; Layout shows you roughly what the screen will look like with your code. Is this perfect? No. But is useful in preliminary debugging.

What If Want To Test It For Real? To test your screen GUI for real means running your application. And if you remember, your application is built using an Activity class. Here is an is a key debugging tool! Use it whenever you are extending a class and over-riding a method. This is “boilerplate”. Must always have as first line of onCreate. //package and imports go here class HelloAndroid extends Activity { /** Called when the activity is first created by OS. public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } //onCreate } //HelloAndroid What will happen if you run this? Screen will be blank 

Why A Blank Screen? You have not told your activity about your GUI specs. It needs to know the name of the file where the specs are found. Add this line. Note that you have to give correct path. Always start with “R”. Then “layout”, i.e., the name of the folder. For now, always use “main”, the name of the file. Don’t need the “.xml” extension. //package and imports go here class HelloAndroid extends Activity { /** Called when the activity is first created. public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } //onCreate } //HelloAndroid What will happen if you run this? Screen will be as we want

Are We Done? I’m afraid not. What’s missing? If you push the button, nothing happens. We have not said what to do when the button is pressed. There is some boilerplate that makes this relatively straightforward. It looks hairy at first, but you will get used to it. I am going to leave it to Eric to explain button handlers to you //package and imports go here class HelloAndroid extends Activity { /** Called when the activity is first created. */ public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button closeButton = (Button) findViewById(R.id.closebutton); closeButton.setOnClickListener( new OnClickListener() { public void onClick(View v) {finish();} }); } //onCreate } //HelloAndroid

One Other Note You can get a glimpse of how the android:id attribute is used. It gives a unique name to a tag. Back in the activity class, we can use that id to reference the tag. Why needed? What if there were more than one button? //package and imports go here class HelloAndroid extends Activity { /** Called when the activity is first created. */ public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button closeButton = (Button) findViewById(R.id.closebutton); closeButton.setOnClickListener( new OnClickListener() { public void onClick(View v) {finish();} }); } //onCreate } //HelloAndroid <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Close “ />

Our use of LinearLayout is pretty simple. I do think it will be fine for much of your early app programming. But what if I wanted a more complex screen layout? Something like on right? We can actually do this with only the TextView tag in terms of content! 4+4=8 TextView components. The tricky part is the layout, and getting the fill_parent values in the right width and height attributes. Thoughts on this? Final Thing I Am Glossing Over

We note that the screen really has 2 styles. Top style has TextViews laid out horizontally. Bottom style has TextViews laid out vertically. Idea: use separate LinearLayout tags for the top and the bottom! And then figure out how to combine the two into a whole. A Big Idea from CS: Divide and Conquer

… … … Rough Sketch

… … What Encloses It All? They are stacked so use vertical.

<TextView android:text = “red” android:background="#aa0000" android:layout_height="fill_parent" … /> How To Get Colors To Bleed Down?

Most of the code if you ever want to come back and reuse.

Note use of RelativeLayout for this code. And new tag, EditText. This allows you to define input fields. EditText Is Another Useful Component

Ok, I’m Stopping For Real Here There is not a lot you can do at this point in terms of cool GUI stuff. Once you learn to do interactive GUIs, then the fun begins. To do that, you will have to learn about button handlers. And this introduces yet another critical CS idea: asynchronous programming. Eric is an expert in graphics programming so just the person to give you the scoop.