Explore
For Enterprise
Join for Free
Log In

artes y humanidades
Negocios
Ciencias de la Computación
Ciencia de Datos
Tecnología de información
salud
Matemáticas y Lógica
Desarrollo Personal
Ciencias Físicas e Ingeniería
Ciencias sociales
Aprendizaje de un idioma
Grados
Certificados

Explorar todo lo que Coursera tiene para ofrecer

Explorar
Buscar
For Enterprise
Inicia Sesión
Únete de forma gratuita

User Interface Classes - Part 2

Loading...

Programming Mobile Applications for Android Handheld Systems: Part 1

Universidad de Maryland en College Park

4.6 (577 calificaciones) | 59K estudiantes inscritos

This course introduces you to the design and implementation of Android applications for mobile devices. You will develop an app from scratch, assuming a basic knowledge of Java, and learn how to set up Android Studio, work with various Activities and create simple user interfaces to make your apps run smoothly.

Destrezas que aprenderás

Android Studio, Android (Operating System) Software, Android Software Development, User Interface

Revisiones

4.6 (577 calificaciones)

5 stars
432 ratings
4 stars
103 ratings
3 stars
23 ratings
2 stars
9 ratings
1 star
10 ratings

EG

Jun 02, 2016

Very good courser, not for beginners certainly. Funny videos and easy to understand and gives you asignments that let you think about it and research so you understand better the assignments

MW

Jul 26, 2017

Excellent introduction to the basics of Android programming with educational, supplementary programming projects. After completing this course, I have proceeded to take Part 2.

De la lección

User Interface Classes

User Interface Classes - Part 116:55

User Interface Classes - Part 215:43

User Interface Classes - Part 318:51

User Interface Classes - Part 414:08

Part 1 Closing1:56

Impartido por:

Dr. Adam Porter
Professor

Transcripción

[MUSIC]

So, so far we've been talking mostly about individual views.

But in reality, we often want to have some kind of compound view that puts together

multiple individual views, in order to provide some complex functionality.

A simple example that we'll talk about in a minute is a radio group.

A radio group is essentially a set of related check boxes.

For example, you might have an application that asks how old you are,

and allows you to select from a set of age ranges, say under 20,

20 to 34, 35 to 49, and over 50.

And to do this, you would have a bunch of text views, for

all the different age ranges and then next to each text view, you'd put a check box.

Now you'd also want to make sure that only one of those check boxes is ever selected,

because the age ranges obviously are mutually exclusive.

To support complex views like this, Android has a class called ViewGroup.

ViewGroups are invisible groups that contain other views.

And so you can use them to group, and organize multiple views and ViewGroups.

ViewGroup is a base class for view containers and layouts.

Which we'll discuss, you know, in more detail later on in this lesson.

Just like with simple views, Android provides a number of

predefined viewGroups, including some we'll talk about now.

Such as RadioGroup, TimePicker, DatePicker, WebView,

MapView, Gallery, and Spinner.

Let's take a look at each of these one at a time.

Let's start with the RadioGroup.

As I just explained a RadioGroup is a ViewGroup containing a set of

mutually exclusive check boxes or radio buttons.

So only one of the radio buttons can be selected at any one time.

Let's take a look at an example application.

The application displays a text view and a radio group.

The text view is displaying the text No Choice Made.

Because right now none of the radio buttons are selected.

So now I'll select Choice 1.

And as you can see, the text changes to reflect the choice that I made.

Now, I'll select Choice 2.

And again, you can see that Choice 1 was automatically unselected,

and Choice 2 is now selected.

And the same kind of thing happens when I select Choice 3.

The next ViewGroup is TimePicker, and

this ViewGroup allows the user to select a particular time.

I'll now start up the UITimePicker application.

And the application displays a text view showing the current time, and

a button labeled, Change the time.

So I'll click on the button and up pops the time picker ViewGroup.

As you can see, the time picker is composed of many different views, but

together, allow the user to independently set the hour,

the minutes and whether or not the time is a.m, or p.m.

There's also a button at the bottom to indicate that you're done.

And once you click that button,

the text view changes to show the time that you've just selected.

Similar to the TimePicker, there's also a DatePicker ViewGroup.

This ViewGroup allows the user to select a particular date.

So now I'll start the UIDatePicker application.

The application displays a text view showing the current date,

and a button labeled, Change the date.

So I'll click on the button and up pops the date picker ViewGroup.

Again, a date picker is composed of many different views that

together allow the user to independently set the month, the day, and the year.

And there's also a button at the bottom to indicate when you're done.

When you click on that button,

the text view changes to show the date that you selected with the date picker.

The next ViewGroup is a WebView.

A WebView is a ViewGroup that displays webpages.

Here's the UIWebView application.

I'll start it up and it will download and

display the familiar webpage at www.google.com.

The next ViewGroup is a MapView and as the name suggests, a MapView

is a ViewGroup that displays maps and allows the user to interact with them.

Let's take a look at an example application that actually uses

the MapFragment class, but

uses it to display the underlying, an underlying MapView.

So now I'll start up the UIGoogleMaps application.

Once it's started up,

this application displays a map, centered on some part of the Americas.

The map also displays two red pins, one around Washington DC,

United States and another in Mexico.

Let me click on the upper most red pin.

When I do that, pop-up appears, saying, I'm at the Washington Monument.

If I then click on the other red pin, I see another pop-up.

This time saying, [FOREIGN].

I'm in Mexico.

Now the ViewGroups I just showed you each have a fairly clear purpose, and for

the most part work with a fixed kind of input data.

The next set of ViewGroups that I want to discuss are designed for

situations where different developers may want to display different kinds of data.

Consider, for instance, a list view,

which can be used to show a list of phone numbers to dial, a list of songs to play,

a list of images to select as your phone's wallpaper, and so forth.

In order for ViewGroups like list view to work with all these different datatypes,

Android provides a ViewGroup subclass called AdapterView.

AdapterViews are ViewGroups whose child views and underlying data,

are managed not by the ViewGroup itself, but by another class called an Adapter.

And this Adapter class is responsible for managing the data and for

creating and providing the views of that data

to the AdapterView when the AdapterView asks for them.

The AdapterView then is only responsible for displaying the data Views.

So let's take a deeper look at the ListView class that I just talked about.

ListView is an AdapterView that displays a scrollable list of selectable items.

Those items are managed by an Adapter called the ListAdapter.

The ListView can also optionally filter that list of items based on text input,

just like what we saw with the autocomplete TextView.

So let me start up the UIListView application.

And as you can see the data underlying this ListView is a long list of colors.

Red, orange, yellow, et cetera.

And this ListView also brings up a virtual or soft keyboard.

And I'll use it to type in the letter O and as I do this

the ListView will filter out all of the colors that don't start with the letter O.

In this case that leaves just orange and olive.

I now type in the letter l, which leaves just the color olive.

And if I click on that word olive, you'll see that the listener I've attached to

the ListView will display my selection on the screen.

Let's take a look at the source code for this application.

Now here I've opened the application in the IDE.

Now I'll open up the file, ListViewActivity.

And let's go to the onCreate method.

Here, we're calling setListAdapter to set the ListAdapter for this ListView.

The actual adapter is an ArrayAdapter which implements the Adapter interface.

The constructor for the ArrayAdapter takes a few parameters.

The two that we'll focus on are the resource id which tells

the ArrayAdapter how to create the view containing each piece of data.

And the array of data objects itself is the second parameter.

Let's look at those data objects.

They're defined as a string array resource in the res/values/strings.xml file.

And here you can see the string array.

It's named colors.

And it contains a bunch of colors, just like we saw.

Red, orange, yellow, and so forth.

Now let's go back to the ListView activity and get the name of

the layout file that will be used to create views for each of these colors.

That layout resource is in res/layout/list_item.xml.

Let's open that file.

Now as you can see, each piece of data is going to be put in a TextView with

a certain amount of padding around it, and each drawn with a certain font size.

Now back to the ListView activity.

The next bit of source code gets the ListView associated with a list activity.

And then calls setTextFilterEnabled(true).

And this causes the keyboard to pop up,

and the filtering to occur when the user types.

And then finally we set an onItemClickListener which has

an OnItemClick method.

And that method will display the color

that the user selects when they click on the, or by clicking on the ListView.

The next adapter view is the Spinner class.

A Spinner is an AdapterView that provides a scrollable list of

items within a drop-down view.

The user can click on this AdapterView which causes a drop-down list to appear,

and then allows the user to select an item from that drop-down list.

And the data for a spinner is managed by a SpinnerAdapter.

Let's take a look at this class, in an example application.

Now, here I'll start up the UISpinner application.

And this brings up a text view that says, Pick a Color, Any Color.

Currently, red is being used as the default selection.

Now, suppose I want to select a different color.

To do that, I'll click on the spinner where it now says red.

And that causes the drop-down list with the list of colors to appear.

So now I'll select yellow.

The drop-down list disappears.

The color yellow now appears as the selected color.

And you can see the separate window showing the text, the color is yellow.

And I can do it again.

This time I'll pick the color violet.

And using the same behavior, occurring again.

Now I'm back in the IDE, looking at the UISpinner application.

I'll now open the Spinner Activity file, and go to the onCreate method.

First, there's a call to setContentView using the main.XML layout file.

Let's open that file.

Here we see that the user interface has several parts.

In particular, it has a spinner element called Spinner.

And going back to the Spinner activity, we now set up an Adapter for the spinner.

We create this Adapter, the call to ArrayAdapter.createFromResource method.

The parameters to this method include the list of colors and

a layout for each view that will appear in the drop-down list.

Let's take those resource files now.

First I'll open up the strings.xml file, which holds the colors array.

Next I'll open up the drop-down_item.xml file.

That has the layout for the drop-down views, and here you see that each color

will appear as a TextView with a certain padding and font size.

Returning back to the SpinnerActivity, the next few lines set the Adapter and

then set an OnItemSelectedListener.

And that's called when the user selects a color.

The next ViewGroup is the Gallery class.

This ViewGroup displays a set of data with a horizontally scrolling list.

Like a spinner, the data for a Gallery object is managed by a SpinnerAdapter.

Here I'll start up the UIGallery application.

As you can see, the data for this application is a set of images.

And I can swipe on the display to move forward and

backward through the list of images.

You'll also notice that when I select a particular image,

a listener is invoked to display the index of the selected image.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2019 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play

Coursera
Acerca de
Liderazgo
Empleo
Catálogo
Certificados
Certificados MasterTrack™
Grados
For Enterprise
For Government

Comunidad
Learners
Partners
Developers
Beta Testers
Translators

Conectar
Blog
Facebook
LinkedIn
Twitter
Instagram
Youtube
Blog de Tecnología

Más
Términos
Privacidad
Ayuda
Accesibilidad
Prensa
Contacto
Directorio
Afiliados