Android development – Your first steps

Android development – Your first steps

5 69460
Android development - Your first steps

Android development – Your first steps

Everyone of us thought about to start writing own applications for mobile devices. This is because mobile devices are becoming more and more popular and available, and now rare to meet a person who does not have a mobile phone. The market of mobile applications is growing all the time. We can say, that it is divided into two main areas – android apps and iphone application. But, where to start? This question is of concern to many of us. In fact, all is not as difficult as it seems. Today I’ll show you the basics of developing applications for Android and where to start.

Before we start, let’s assemble the steps that you need to execute to prepare your dev environment. Here is what need to do:

  1. Install JDK (Java Development Kit). Just select the latest version, and, on the second screen – select a suitable version for your operation system.
  2. Download and unpack Android SDK (Eclipse + ADT plugin). Just download this huge package (it is a bit more than 400MB), and unpack it into a some suitable place on your computer (as example, c:\dev\ folder). Try to avoid using a very long folder name (which could be ‘adt-bundle-windows-x86_64-20130219’). I can recommend you to rename this folder to a shorter version: ‘adt-bundle-windows’.
  3. Now we can run our C:\dev\adt-bundle-windows\eclipse\eclipse.exe

Eclipse IDE is our main program to work. If you have ever worked with MS Visual Studio (as example – C# or ASP.Net), you’ll notice that the interface is very similar. On the left side we can see a project explorer, on the right – some kind of active objects explorer (UI elements, resources etc), in the center – main area (where we can compose various UI elements over layouts or write codes). Also, there is a console in the bottom.

Eclipse

Step 1. Create a new project

Please click ‘File -> New -> Android Application Project’. Now, we have to fill in several fields: Application Name, Project Name and Package Name. You can type ‘my_first_app’ for all three fields. Just because this is our first dummy application (for test purposes). We don’t need to select anything custom on this first screen, clicn Next.

On the next Wizard screen just make sure that everything is OK, and click Next.

On the next step we can customize an icon of our application, but if you don’t care – just click Next.

On the next step we will be asked to create Activity (we should choose the one of variants, choose the first one – Blank Activity) – and click Finish.

We have just prepared our own blank application !

Step 2. Look around

Now, please look around. We have to understand several basic things about Eclipse.

1. In the most left, we can see ‘Package Explorer’ block. It represents a folder structure of your project. You can find here next folders:

  • ‘src’ – for source files of your projects (java files)
  • ‘bin’ – binary files (usually, you don’t need touch them)
  • ‘res/drawable-xxx’ – there are several similar folders. All of them contain image objects
  • ‘res/layout’ – for layout interface files (xml files)
  • ‘res/menu’ – for context menu files (xml files)
  • ‘res/values’ – for various collection resources (xml files). By default, there are only three base files: dimens.xml, strings.xml and styles.xml

2. Now, please open the main page layout (res/layout/activity_main.xml). Double click on it. It will be opened in Layout mode.

Eclipse

Please pay your attention to ‘Palette’ panel. This is very useful panel, it contains a lot of various UI elements (like labels, text inputs, buttons, checkboxes, radios, images etc). All these elements are sorted by categories. If you want to place any element to your application layout, you can easily drag and drop a desired element. Just play with it – this is really easy.

3. Object properties. On the right, you can see ‘Properties’ panel. Select any element on the layout (e.g. a button or text edit element) – and you will be able to adjust it’s styles using ‘Properties’ panel.

4. Well, if you are ready to run your application – let’s do it. The best way – is to use a real device. Just because in this case you will be sure how it will work in reality, and how it will handle with touch-events. Here is what need to do:

  1. In the configuration with your phone should go USB cable. Please connect your phone to your computer with your USB cable. As usual, all necessary drivers will be installed automatically.
  2. Then, you have to enable ‘usb debugging’ mode on your phone. On my Android v 2.3.4 it is in Settings -> Applications -> Development (in case of newer version, like 4.0 and higher, it is in Settings -> Developer options). You can also enable ‘Still awake’ option (in this case your phone won’t sleep while connecting to your computer).
  3. Now we can back to our Eclipse, click ‘Run’ button (on toolbar), or, Run -> Run in menu (Ctrl+F11).

Run on real device

Make sure that your device is visible on this screen and it’s status is ‘Online’. After – just click ‘OK’. Your application will be installed on your phone and will be executed.

Step 3. Basic events

I think that now you want to add some interactivity to our project. Now, to complete our first lesson, I’ll show you how you can add a simple event – OnClick. To demonstrate it – let’s add two simple controls on our layout (activity_main.xml): simple edit text field (Text Fields – the first one) and button (Form Widgets – button). Let’s add ‘onclick’ event handler for our button. First, select the button, and look to Properties of this element. Scroll down the properties almost to the end. You can see here ‘On Click’ property. Click to the value field (once), and type a desired function name, as example – ‘myButton_Click’. Now, we have to implement this function.

Open ‘MainActivity.java’ file (it is inside of ‘src’ folder). This java file will be opened as usual code where we can type. By default, we can see here the most basic constructors:

package com.example.my_first_app;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

Even if you don’t understand java, you can easily (I hope) notice that this is a class, with two functions: onCreate and onCreateOptionsMenu. The first one will be executed in the beginning of execution, the second function is related with menu (context menu). Pay attention to the ‘onCreate’ method. Here we can see that the base method is called, and also we can see ‘setContentView’ function. As you have guessed, this function is to set the current layout (content view) for our application. Do you remember that the main layout file which we edited – activity_main.xml? The same layout is used here. Well, now, we can add our own first function, you can put it right after the ‘onCreateOptionsMenu’ function:

package com.example.my_first_app;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    public void myButton_Click(View v){
        EditText edtext = (EditText) findViewById(R.id.editText1);
        if(edtext!=null) {
            edtext.setText("my onclick event");
        }
    }
}

The main idea of our function is to select our EditText element which we added on our layout, and set a custom text to this element.

Before you run it on your phone, you can notice that Eclipse underlined several words in our code (and marked them as errors). All because few names (View and EditText) are not visible (resolved) in this place. You can hover your mouse button over an error, and Eclipse will give you all possible solutions. And you will see that the first solution is to import missing classes. You can click to this solution to import classes, or, there is one interesting method – click Ctrl+Shift+O and all missing libraries will be imported at once.


Conclusion

We have just produced our first lesson about android development for the beginners. I hope that you like it and it is useful for you. Good luck and welcome back to our further lessons

SIMILAR ARTICLES


5 COMMENTS

  1. I apriciate your work and Android tut put smile on my face.
    I am trying to make custom Android apk that would use rss feed to display posts on tabs width links for full article inside apk. Some kind of sisters apk for blogs. Maybe you could point me somehow or show how to do that.

    • Yes, our first lesson can put a smile on your face, but I’m pretty sure that this information is vital for the most beginners. This is why I did it. I think, that you can just follow our tutorials, and one day, you will find how to display rss feeds in android applications.

Leave a Reply