Android 4 Programming Tutorial User Interface using Drag and Drop

Uploaded by edu4java on 09.11.2010

Hello, Iím Edu from edu4java this is Android Tutorial number 4
We are going to see User Interface using drag and drop
Ok, we are going to start creating a new project
NewÖ projectÖ Android project
We are going to put Project nameÖ Android Tutorial 4
Application name; Android TutorialÖ that is a human readable name
Package nameÖ
We are going to call the activity; Form
Because we are going to make an activity with a form for a book
Where we are going to put the title of the book, the author and the ISBN
And for min SDK we are going to use 7, because I later want to try this
Application in my phone, I have an HTC Desire and I have the version Android 2.1
Letís see main XML
The main XML, we already saw this file, which is autogenerated
But, what we didnít see was this
Here we can see our components in a visual way
Hello World form can be modified from here, we can selected it
This TextView and go to the View Properties
and modify the Properties of this TextView
You can see here this viewÖ if you donít have this view
Just go to Windows show view and other and you find in General
You can find the properties window, itís a standard window from the Eclipse
Maybe the windows appears in another place
you just drag and drop and put it where you want
Ok, we select the Text View and we can go through all the properties
Of this component
Ok, now we can see this is the screen
We can change the screen. I am going to try to put the screen I have in my phone
Yes, I think it is HVGA; this one will be ok
And I am going to put it in Portrait, thatís the normal way I work with my phone
Ok, now if you remember Hello World is the text which is in my text view,
In my componentÖ
Letís try to change it, we go to properties and we look up for the text field
Here it is, as you can see it says; string/hello
This means it is a resource which we take from string xml
Yes, here we can see; Hello
We are going to put a new string, we can click here and this window appears
New string, I am going to use add new book as a key
For the string which is going to appear in the component
I am going to put the string in Spanish: ìAgregar un Nuevo libroî
This is the same as add a new string
Ok, as you can see here ìAgregar un Nuevo libroî, this is the key
Add new book and ìAgregar un Nuevo libroî
Ok, we can change other properties, yes,
We are going to change size because this is a bit tiny
Letís look for text size; 25 sp I think is going to be ok, letís check
Sp is like pixel, but itís not absolute like pixel,
it is relative to the size of the screen
Ok, now I am going to put text style in bold
Yes, I like it
Now I am going to try to put it in the center
A title is better in the center
I am looking for gravityÖ
GravityÖ gravity center, ok
Now I have what I was looking for
Now to build the form I need labels and boxes
Boxes where we can put text
For the label there is a component Text View
And to put text this would be ok; AutoCompleteTextView
This is like a textbox but the phone helps me to complete it
If you have a phone with Android you know what we are talking about
We need no text in the textbox because we are going to put the text
Here, we have a problem; we need the label and the box in the same line
And what happened here? Yes, ctrl+shift+f gives me this
Then I can see that the LinearLayout has a vertical orientation
Then, all the text will be organized this way
I can solve this putting a new Layout but this time horizontal
A Layout inside the vertical Layout
I am going to put a horizontal Layout inside the vertical Layout
And in this LinearLayout I am going to put this two components inside
It is not really inside, nothing changed
Letís see the xml to see what happened
Here you can see, again ctrl+shif+f, you can see that LinearLayout
Is at the same level as TextView
Here, you can see it again
The first LinearLayout and the second LinearLayout
If we select one of this and we click here,
we put this component inside the LinearLayout
Now, we ctrl+shif+f again and we see these two are inside,
Now we get the effect we were looking for
Ok, letís change the label, the property of the label
PropertiesÖ we donít need the id for the label because we donít expect to use it
Text; in the text we are going to put the new string,
This is going to be the title and for the title
we are going to put ìTituloî in Spanish
ÖstyleÖ boldÖand size; we can put 20, yesÖitís okÖ
Letís seeÖ padding; itís going to give me a distance between components
What happened here? 5ÖI have to put spÖ I always forget sp
Ok, then I have some distance between title and the boxÖ itís better
And the box Iím going to give widthÖ letís try with 500, itís seems ok
Then we have one line which is ok, we are going to copy this and
Paste it here and here for the author and for the ISBN, ok
Text, we are going to put a new string; Author, with ìAutorî in Spanish
And ISBN, a new string ISBN, I donít know if it needs translation, anywayÖ
Here the boxes are not in a line, we can put a fix width
For author, title and ISBN, then we are going to put 70 sp
And for author the same,70sp and ISBN, okÖ
Now we have it in a line
Ok, buttonÖ I want to put two buttons in the same line
Then, a LinearLayout with a horizontal orientation
I put the Layout, now one button, another buttonÖ
Ok, again the buttons are not inside the layout,
Then with this arrow I put them insideÖ ok,
I donít need the id because I am going to use the onClick property
In text I am going to put cancelÖ in Spanish ìCancelarî
And for the other I am going to put add and the string ìAgregarî, ok
Maybe the width could be better, Iím going to change the layout width
And put 100sp
Ok, then we get the form, oh! Here I forgot the sp again!
Ok, this tutorial is finish, see you in the next one!