Android Adventures - Getting Started With Android Studio 1.0
Written by Mike James   
Tuesday, 03 February 2015
Article Index
Android Adventures - Getting Started With Android Studio 1.0
Project Structure
The Designer And The Code
Running the App

 

Hello Designer

First let us look at the XML layout file.

Double click on activity_main.xml file in the Project tab and the file will open (if it isn't already open). 

If it is already open you can also select its tab displayed just above the editor area. You can select any file that is open for editing by selecting the its tab. 

You can work with the XML directly to define where all the buttons and text goes and later you will learn at least how to edit it when things go wrong or to fine tune it but - Android Studio provides you with a very nice interactive editor and this is worth using.

As you become more experienced the idea of switching between a design view and an XML view will become second nature. Think of the interactive editor as a very easy way of generating the XML that otherwise would take you ages to get right.  

If you look at the bottom left you will see two tabs - Design and Text:

designertabs

You can switch between editing the XML as text and editing it in the drag-and-drop designer simply by clicking on the tab. 

If you now click on the tab the window will display the designer but be patient the first time you do this it might take a few moments. 

The designer looks a little too much to take in when you first see it but you will quickly get used to it. 

 

designer2

 

On the left is a Palette of all of the components - buttons, text, checkboxes and so on - that you can place on the design surface. 

In the middle is the design surface and this defaults to the screen size and appearance of the Nexus 4. You can select other devices to work with.

On the right you have the Component Tree which shows you the structure of your layout, that is how different UI components are contained inside others - its the same as the nesting structure of the XML file. You can use the Component Tree to select individual UI components by clicking on their names. You can also select components on the design surface but some times it is easier to use the component tree. 

Below the Component Tree you have the Properties window that can be used to set the properties, such as width, height, color... of any component in the layout. 

If you have used any drag-and-drop designer then this one will be familiar to you. If you have struggled with the detailed layout using a markup language be it HTML, XAML or XML then you will like how easy the designer makes building and testing a UI. 

In the case of our sample program the only component uses is a single TextView already containing the text "Hello World". A TextView is the standard component we use when all we want to do is to display some static text. 

 

hello

 

You can modify the greeting text if you want to. Select the TextView component either on the Nexus 4 image or in the Component Tree and use the Properties window to find its Text property. Change this to read "Hello Android World".

Alternatively you can simply double click on the TextView and enter "Hello Android World" directly in the dialog that appears - you can often change the main properties of an object by double clicking. If you do change it in this way you will also have to provide an id for the component otherwise an error is generated. This is a bug/feature and will probably be fixed in later versions of Android Studio. 

Don't worry about the form of the original entry in the TextView starting with an @ and looking complicated just type the string in as given. The default entry makes a reference to a predefined string resource - something we can ignore for the moment along with the warning that Android Studio flags up to tell use that we are being naughty and not using  a resource string.   It is correct, it is always better to define the strings you use as a resource rather than directly embedding them in your app.

You can use the designer to create any UI you care to and you really don't have to get involved in the XML that corresponds to the layout.

The designer will automatically generate the XML needed to create the layout for you and modify it as you change the layout. If you really want to see the XML then all you have to do is select the Text tab at the bottom of the designer window.

<RelativeLayout xmlns:android=
              "http://schemas.android.com
                              /apk/res/android"
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent"
 android:layout_height="match_parent"  android:paddingLeft=
          "@dimen/activity_horizontal_margin"
 android:paddingRight=
          "@dimen/activity_horizontal_margin"
 android:paddingTop=
          "@dimen/activity_vertical_margin"
 android:paddingBottom=
          "@dimen/activity_vertical_margin"  tools:context=".MainActivity">

 <TextView android:text="Hello Android World"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
 />
</RelativeLayout>

 

You should find it fairly easy to understand - read the <TextView> tag for example - but leave it to the designer to create and modify it. The quantities starting with @ are all references to things defined elsewhere in resource files. 

We will return to the designer and the XML it generates later. 

The Java

If you double click on the MainActivity.java file, or just select the MainActivity.java tab, you will see the code it contains.

Some of the code might hidden but you can inspect it if you want to by clicking the + buttons to expand it.

The important part of the code is:

public class MainActivity
                 extends ActionBarActivity{
 @Override
 protected void onCreate(
               Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 }

 

There are two other functions below the onCreate function but ignore these for the moment - they implement features you didn't really ask for - useful but not when you are just getting started.  

The onCreate function is the only thing that matters at the moment.

The onCreate function is called when your app is run and it is expected to create the view and do the whatever the Activity is concerned with.

As our Activity doesn't really do anything much the only thing onCreate has to do is first call the inherited OnCreate method i.e super.onCreate to do all the standard things and then use the setContentView function to select the XML file that determines the layout of the Activities screen.

The line:

  setContentView(R.layout.activity_main);

is the most important of all and really the only one that actually does anything. It gets the resource object that represents the layout as defined by the XML file created by the designer and makes it the current ContentView i.e. it is what is displayed on the screen. 

That is it makes the connection between the layout you have defined using the designer and stored in the XML file and the user interface that appears on the devices screen.

We have more to learn about the resource object R but you can see that its main role is to form a link between your Java code and the resources that have been created as XML files by the designer among others. 

As this is all our Activity does this is all the code we need.

While I agree it is hardly an "activity" it is enough to see the basic outline of an Android app and to see how to get it running - which is our next job.



Last Updated ( Tuesday, 03 February 2015 )
 
 

   
Copyright © 2015 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.