This video examines dynamic Graphical User
Interface creation in Android
The objectives are listed here with a time line for
when they appear in the video
For this demo you should already have an
understanding of how to do a basic XML-based
graphical user interface in Android.
All I've done to prepare for this is create an Eclipse
project called GUIDynamicDemo
...based on the free HelloWorld project
That's the only thing I've done.
I've given that the package name
I forgot to rename this
to "MainActivity" which I always like to do.
I didn't do that in the wizard.
How can I do that now?
Well, if I want to call that "Main Activity,"
which is my default naming convention,
I can go down here to "Refactor - Rename"
and rename this "MainActivity,"
...and leave "Update references" checked.
That will update everything.
Now note: even in the AndroidManifest file
that we know has to reference that Activity,
...Eclipse found that, and also renamed it
So that's a very good renaming utility;
it actually went out and also renamed it
in the manifest file.
[Joking:] So let's just say I purposely named that
incorrectly to show you that feature.
Now look at how to dynamically create a graphical
This is not going to be our usual mode,
...but those of you that came from a Swing and
AWT background in Java know this (dynamic way)
was your default way of doing business.
It will be helpful to at least have us know that this is
while it will not be the focus of this class.
So, how do we do this?
What I want to do is start by coming in
to our resource folder and layouts folder,
... looking at our graphical user interface that we
get for free.
Let me add some magnification to the window.
so we can see the code better.
Let's start out by making a very simple application
in the XML file,
...by coming in here and changing a few things
I'm going to go into XML code view and say,
(without externalizing strings),
..."Enter your name,"
...for our EditText
...or I should say our TextView.
Now we've done that
we'll come into the graphical mode
...and drop a text box in there.
...and we'll come back and name this control
"edit text, name" ("etName"),
and let's modify it to say "first" name
...(that is,) call this EditText control "etFirstName."
The next thing we're going to do is throw a Button
(From "Form Widgets," drag in a button.)
We will make that button span the whole
width of our activity by saying "match_parent."
Then, in XML mode, name the Button control
"button click me" ("btnClickme").
[A display artifact appears.]
I'm getting that little XML display artifact there
(it's showing two lines at once).
If I save that, exit out of it and double click on it
again that generally fixes the display.
Now, name the control "btnClickMe."
...and have its text say "Click Me."
The next thing we need to do is "wire up"
that onClick event by saying, "android:"
..."btnClickMe" (my coding convention)
Then the last thing we might actually want
is to make this do something.
So I'll come in here to the graphical view,
...and also drag and drop a label on there
with some room for some text,
...and name that control "TextView results"
We're just making a modified version
of a simple "HelloWorld" program.
Of course the last thing we need to do
is actually wire that up.
My mode of operation is:
...come in here, find the name of my onClick
method, highlight, copy,
Then go to my Activity,
put in my onClick method by saying, "public" -
..."void" - [pastes "btnClickMe_onClick]
...and we know it needs to pass in a "View v" -
...then to get these imports done,
I like to use "Control-Shift-O."
That automatically imports the Java "imports."
So that's done.
We know we need to get a handle on our label and
a handle on our TextView.
We made Snippets for that previously.
So if I come in here and say,
"Window" - "Show View" - "Other"
...to get my Snippets window up,
I'm going to drag and drop that up here
to dock it on the left.
We know if we have an EditText and a TextView,
from our previously defined Snippets,
...we can go ahead and use those to save
ourselves some typing.
So if I go back to my XML file,
The first thing I want to do is grab
my EditText for first name ("etFirstName "),
to copy and paste that,
...go back to my Activity,
double click on the Snippet for EditText,
pop in the name of the variable,
...and say, "Insert,"
and it automatically did the import (automatically
wrote that line of code I should say)
"Control-Shift-O" organizes my imports.
Back in the XML file, what's other thing
we need to grab for our XML-based layout?
That was the id "tvResults."
So we copy "tvResults",
...go back to our Activity,
double-click on TextView,
paste that into our previously defined Snippet,
..and say, Insert."
With Snippets we got some help writing that line of
Again: do a "Control-Shift-O" to organize the
and all those imports are done automatically.
Now we've got the two things we need
in order to make this work.
The last thing we're going to do is to say,
...and enter the code
+ "how are you?" );"
[Jokes:] (We will pretend we care today.)
OK, now we have a functioning little demo
To make sure this works,
I will fire up my emulator program.
(I haven't done that yet.)
and scale mine to 7 inches,
as I'm running on a smaller screen size.
My emulator is now building.
OK, let's run that up to our now-built emulator.
Type in "Sally,"
...click the button, and see,
"Sally, how are you?"
A fine application.
Ready to move up to the App Store.
Ah, if it was only that easy!
Another test: enter "Dave;" the program responds,
"Dave, how are you?"
Ok, so we have that built.
The main purpose of this demo, though,
is to say,
"How could I create this graphical user interface
...completely dynamically, completely bypassing the
XML file that we worked with.
...more like Java, AWT and Swing,
...before you ever knew about Android.
How is that done?
So what we do is,
...come in to the MainActivity.java,
...and we go,
"Let's get rid of the setContentView(),"
...(because that's a line of code
that actually looks at the main.xml file and
does a process that we call "inflating" the XML,
...bringing it into memory and creating that
graphical user interface).
So, if we used to "inflate" that XML file right there,
we now have to replace it with Java code,
...and all this "setContentView()" is really doing is
looking at the XML file
...and dynamically generating the Java code that is
creating the graphical user interface for us.
So if we're going to bypass using the XML file,
...or we need to do something dynamic
because we don't know what the interface will look
like at runtime,
...then we would need to get in here and do some
dynamic GUI work.
So, our purpose now is to say,
..."Let's create this graphical user interface
...without using that XML file at all."
How will that happen?
We have "setContentView()"
commented out already,
...so let's look
at the XML file:
start there and will we see that we have
...as the root node in
...this graphical user interface,
so if we're not going to get it
by defining it in the XML file,
...we're to have to create this LinearLayout
I like to call that the root LinearLayout.
So let's come into MainActivity.java and say,
"I've got to create that myself!"
So I need a "LinearLayout."
I'm going to call it "llRoot" (it's my root node)
and add "= new LinearLayout"