who am i and why am i here i’m professor stephen fickas in cis – you can call me steve. i have a...

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: [email protected]

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.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">

<TextView android:id="@+id/textview"

android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“HelloAndroid!"/>

<Buttonandroid:id="@+id/closebutton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" Close “

/>

</LinearLayout>

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>

Let’s Look At Some XML Details

An XML tag has several forms. Look at Button for one form.

<Button … />

Look at LinearLayout for another:

<LinearLayout … >…</LinearLayout>

Difference?

Button has no nested tags. LinearLayout does.






/>

</LinearLayout>

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>

More XML Details

How many attributes does LinearLayout tag have?

4

Note that newlines are optional.

Tabs are also optional.






/>

</LinearLayout>

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>

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>

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>

A Look At TextViewWhile 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>

A Look At TextView, Take 2Height 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>

A Look At TextView, Take 3Height 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.



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.



How To Add New Attributes


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 example.

@Override 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. */ @Override 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.



/** Called when the activity is first created. */ @Override 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



/** Called when the activity is first created. */ //@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);


Button closeButton = (Button) findViewById(R.id.closebutton); closeButton.setOnClickListener( new OnClickListener() {

//@Override public void onClick(View v) {finish();}

});

} //onCreate

} //HelloAndroid

One Other NoteYou 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?



/** Called when the activity is first created. */ //@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);


Button closeButton = (Button) findViewById(R.id.closebutton); closeButton.setOnClickListener( new OnClickListener() {

//@Override public void onClick(View v) {finish();}

});

} //onCreate

} //HelloAndroid

<Button android:id="@+id/closebutton" 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

http://developer.android.com/resources/tutorials/views/hello-linearlayout.html

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




…<LinearLayout android:orientation="horizontal“ …>

<TextView android:text = “red” … /><TextView android:text = “green” … />…

</LinearLayout>

<LinearLayout android:orientation=“vertical“ …><TextView android:text = “row one” … /><TextView android:text = “row two” … />…

</LinearLayout>

Rough Sketch




<LinearLayout android:orientation=“vertical“ …>

<LinearLayout android:orientation="horizontal“ …>…

</LinearLayout>

<LinearLayout android:orientation=“vertical“ …>…

</LinearLayout>

</LinearLayout>

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

<LinearLayout android:orientation="horizontal“ …><TextView android:text = “red” android:background="#aa0000" android:layout_height="fill_parent" … />

How To Get Colors To Bleed Down?

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <TextView android:text="red" android:gravity="center_horizontal" android:background="#aa0000" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> <TextView android:text="green" android:gravity="center_horizontal" android:background="#00aa00" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> ... </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> <TextView android:text="row one" android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:text="row two" android:textSize="15pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> ... </LinearLayout></LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Type here:"/> <EditText android:id="@+id/entry" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/label"/> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="OK" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="Cancel" /></RelativeLayout>

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.

who am i and why am i here i’m professor stephen fickas in cis – you can call me steve. i have a...

Documents

layout specs

button specs

screen specs

screen layout

xml nested tags

linearlayout tag

content specs

xml tag