Practice English Speaking&Listening with: Android Programming Tutorial: 05 - GUI Dynamically Created

0:00:00.000,0:00:05.033

This video examines dynamic Graphical User

Interface creation in Android

0:00:05.033,0:00:12.000

The objectives are listed here with a time line for

when they appear in the video

0:00:14.033,0:00:22.033

For this demo you should already have an ​

‎understanding of how to do a basic XML-based

graphical user interface in Android.

0:00:22.033,0:00:28.000

All I've done to prepare for this is create an Eclipse

project called GUIDynamicDemo

0:00:28.000,0:00:35.066

...based on the free HelloWorld project

(out-of-the-box, unmodified).

That's the only thing I've done.

0:00:35.066,0:00:42.066

I've given that the package name

of "com.professorandroid.guidynamicdemo."

0:00:42.033,0:00:48.000

I forgot to rename this

("GUIDynamicDemoActivity")

to "MainActivity" which I always like to do.

0:00:48.000,0:00:51.066

I didn't do that in the wizard.

How can I do that now?

0:00:51.066,0:00:55.000

Well, if I want to call that "Main Activity,"

which is my default naming convention,

0:00:55.000,0:01:05.033

I can go down here to "Refactor - Rename"

and rename this "MainActivity,"

0:01:05.033,0:01:09.066

...and leave "Update references" checked.

0:01:09.066,0:01:16.066

That will update everything.

Now note: even in the AndroidManifest file

that we know has to reference that Activity,

0:01:16.000,0:01:23.000

...Eclipse found that, and also renamed it

*MainActivity."

0:01:23.000,0:01:29.000

So that's a very good renaming utility;

it actually went out and also renamed it

in the manifest file.

0:01:29.000,0:01:35.066

[Joking:] So let's just say I purposely named that

incorrectly to show you that feature.

0:01:35.066,0:01:45.000

Now look at how to dynamically create a graphical

user interface.

This is not going to be our usual mode,

0:01:45.000,0:01:52.066

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

0:01:52.066,0:02:02.033

It will be helpful to at least have us know that this is

possible,

while it will not be the focus of this class.

0:02:02.033,0:02:10.000

So, how do we do this?

What I want to do is start by coming in

to our resource folder and layouts folder,

0:02:10.000,0:02:14.066

... looking at our graphical user interface that we

get for free.

0:02:14.066,0:02:21.033

Let me add some magnification to the window.

so we can see the code better.

0:02:21.000,0:02:28.000

Let's start out by making a very simple application

in the XML file,

0:02:28.033,0:02:31.033

...by coming in here and changing a few things

around.

0:02:31.033,0:02:39.033

I'm going to go into XML code view and say,

(without externalizing strings),

0:02:39.033,0:02:43.066

..."Enter your name,"

0:02:43.066,0:02:46.033

...for our EditText

0:02:46.033,0:02:53.033

...or I should say our TextView.

Now we've done that

we'll come into the graphical mode

0:02:53.033,0:02:59.033

...and drop a text box in there.

0:02:59.033,0:03:10.066

...and we'll come back and name this control

"edit text, name" ("etName"),

and let's modify it to say "first" name

0:03:10.066,0:03:14.000

...(that is,) call this EditText control "etFirstName."

0:03:14.000,0:03:20.066

The next thing we're going to do is throw a Button

on there.

(From "Form Widgets," drag in a button.)

0:03:20.066,0:03:27.066

We will make that button span the whole

width of our activity by saying "match_parent."

0:03:27.066,0:03:31.033

Then, in XML mode, name the Button control

"button click me" ("btnClickme").

0:03:31.033,0:03:35.033

[A display artifact appears.]

I'm getting that little XML display artifact there

(it's showing two lines at once).

0:03:35.033,0:03:42.066

If I save that, exit out of it and double click on it

again that generally fixes the display.

0:03:42.066,0:03:50.033

Now, name the control "btnClickMe."

0:03:50.033,0:03:57.066

...and have its text say "Click Me."

0:03:57.066,0:04:05.066

The next thing we need to do is "wire up"

that onClick event by saying, "android:"

0:04:05.066,0:04:08.033

..."onClick"

0:04:08.033,0:04:10.033

...equals ("=")

0:04:10.033,0:04:14.000

..."btnClickMe" (my coding convention)

0:04:14.000,0:04:19.000

..."_onClick"

0:04:19.000,0:04:24.033

Then the last thing we might actually want

is to make this do something.

So I'll come in here to the graphical view,

0:04:24.033,0:04:37.066

...and also drag and drop a label on there

with some room for some text,

0:04:37.066,0:04:42.033

...and name that control "TextView results"

("tvResults").

0:04:42.033,0:04:50.066

We're just making a modified version

of a simple "HelloWorld" program.

0:04:50.066,0:04:54.033

Of course the last thing we need to do

is actually wire that up.

My mode of operation is:

0:04:54.033,0:04:58.066

...come in here, find the name of my onClick

method, highlight, copy,

0:04:58.066,0:05:08.033

Then go to my Activity,

put in my onClick method by saying, "public" -

0:05:08.033,0:05:12.066

..."void" - [pastes "btnClickMe_onClick]

0:05:12.066,0:05:18.066

...and we know it needs to pass in a "View v" -

0:05:18.066,0:05:27.000

...then to get these imports done,

I like to use "Control-Shift-O."

That automatically imports the Java "imports."

0:05:27.000,0:05:35.000

So that's done.

We know we need to get a handle on our label and

a handle on our TextView.

0:05:35.066,0:05:39.000

We made Snippets for that previously.

0:05:39.000,0:05:46.000

So if I come in here and say,

"Window" - "Show View" - "Other"

0:05:46.000,0:05:52.066

...to get my Snippets window up,

I'm going to drag and drop that up here

to dock it on the left.

0:05:52.066,0:05:58.066

We know if we have an EditText and a TextView,

from our previously defined Snippets,

0:05:58.000,0:06:03.033

...we can go ahead and use those to save

ourselves some typing.

0:06:03.033,0:06:06.066

So if I go back to my XML file,

0:06:06.066,0:06:11.000

The first thing I want to do is grab

my EditText for first name ("etFirstName "),

to copy and paste that,

0:06:11.000,0:06:18.000

...go back to my Activity,

double click on the Snippet for EditText,

pop in the name of the variable,

0:06:18.000,0:06:26.033

...and say, "Insert,"

and it automatically did the import (automatically

wrote that line of code I should say)

0:06:26.033,0:06:29.066

"Control-Shift-O" organizes my imports.

0:06:29.066,0:06:34.033

Back in the XML file, what's other thing

we need to grab for our XML-based layout?

0:06:34.033,0:06:37.000

That was the id "tvResults."

0:06:37.000,0:06:39.033

So we copy "tvResults",

0:06:39.033,0:06:48.033

...go back to our Activity,

double-click on TextView,

paste that into our previously defined Snippet,

0:06:48.066,0:06:52.000

..and say, Insert."

With Snippets we got some help writing that line of

code.

0:06:52.000,0:06:59.066

Again: do a "Control-Shift-O" to organize the

imports,

and all those imports are done automatically.

0:06:59.000,0:07:03.066

Now we've got the two things we need

in order to make this work.

0:07:03.066,0:07:12.033

The last thing we're going to do is to say,

"tvResults" -

0:07:12.066,0:07:26.033

...and enter the code

".setText(.etFirstName.setText())

+ "how are you?" );"

0:07:27.066,0:07:35.000

[Jokes:] (We will pretend we care today.)

OK, now we have a functioning little demo

program.

0:07:35.033,0:07:40.033

To make sure this works,

I will fire up my emulator program.

(I haven't done that yet.)

0:07:40.000,0:07:48.033

Click "Start,"

and scale mine to 7 inches,

as I'm running on a smaller screen size.

0:07:48.033,0:07:58.066

My emulator is now building.

OK, let's run that up to our now-built emulator.

0:07:58.066,0:08:00.033

Type in "Sally,"

0:08:00.033,0:08:03.066

...click the button, and see,

"Sally, how are you?"

0:08:03.066,0:08:07.033

A fine application.

Ready to move up to the App Store.

0:08:07.033,0:08:10.066

Ah, if it was only that easy!

0:08:10.066,0:08:13.066

Another test: enter "Dave;" the program responds,

"Dave, how are you?"

Ok, so we have that built.

0:08:13.066,0:08:19.066

The main purpose of this demo, though,

is to say,

"How could I create this graphical user interface

0:08:19.066,0:08:25.066

...completely dynamically, completely bypassing the

XML file that we worked with.

0:08:25.066,0:08:28.000

...more like Java, AWT and Swing,

0:08:28.000,0:08:34.066

...before you ever knew about Android.

How is that done?

So what we do is,

0:08:34.066,0:08:37.066

...come in to the MainActivity.java,

0:08:37.066,0:08:42.033

...and we go,

"Let's get rid of the setContentView(),"

0:08:42.033,0:08:48.066

...(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,

0:08:48.066,0:08:52.000

...bringing it into memory and creating that

graphical user interface).

0:08:52.000,0:08:58.033

So, if we used to "inflate" that XML file right there,

we now have to replace it with Java code,

0:08:58.033,0:09:02.000

...and all this "setContentView()" is really doing is

looking at the XML file

0:09:03.000,0:09:11.000

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

0:09:11.000,0:09:16.033

...or we need to do something dynamic

because we don't know what the interface will look

like at runtime,

0:09:16.033,0:09:21.066

...then we would need to get in here and do some

dynamic GUI work.

0:09:21.066,0:09:24.033

So, our purpose now is to say,

0:09:24.033,0:09:28.066

..."Let's create this graphical user interface

0:09:28.066,0:09:32.033

...without using that XML file at all."

How will that happen?

0:09:32.033,0:09:36.000

We have "setContentView()"

commented out already,

0:09:36.000,0:09:41.066

...so let's look

at the XML file:

start there and will we see that we have

0:09:41.066,0:09:42.066

...a LinearLayout

0:09:42.066,0:09:45.033

...as the root node in

0:09:45.033,0:09:51.066

...this graphical user interface,

so if we're not going to get it

by defining it in the XML file,

0:09:51.066,0:09:57.000

...we're to have to create this LinearLayout

ourselves.

I like to call that the root LinearLayout.

0:09:57.000,0:10:02.066

So let's come into MainActivity.java and say,

"I've got to create that myself!"

0:10:02.033,0:10:11.000

So I need a "LinearLayout."

I'm going to call it "llRoot" (it's my root node)

and add "= new LinearLayout"