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!”
34
Embed
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!)
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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.
<Buttonandroid:id="@+id/closebutton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" Close “
/>
</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.
• 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.
//package and imports go here
class HelloAndroid extends Activity {
/** 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
//package and imports go here
class HelloAndroid extends Activity {
/** Called when the activity is first created. */ //@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.main);
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?
//package and imports go here
class HelloAndroid extends Activity {
/** Called when the activity is first created. */ //@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.main);
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.