Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to set up an Android project and create a label change application

In this article we will see how to code a few applications and we will learn something new each time. We will learn about different components of an app, Activities, layouts etc.

Your first Application

Ok, firstly I will show you how to get your first application running, then how we can edit it to create a label change application. From my previous article ‘Developing your first Android App’ see (http://mrbool.com/developing-your-first-android-app/24309), you should have Eclipse set up and know the basics of what’s involved in creating an android application. I’m sure you’ve had a look on the Android Developer’s site (http://developer.android.com/index.html ) and have also searched the Internet for what you needed to know to get started. Also check out http://developer.android.com/guide/components/fundamentals.html for Application Fundamentals if you think you need a quick recap or an overview of what’s involved.

Researching the Basics

Figure 1: Researching the Basics.

For this article and for future articles I will show you how to code a few applications and we will learn something new each time. We will learn about different components of an app, Activities, layouts etc.

Getting Started

OK I’ll describe how to set up the project. If you’re used to setting up projects you should have no difficulty doing this. I’ll just go through everything though just to give beginners an idea and example to work from. First things first we will create a new project in Eclipse.

How to start a new Project

Figure 2: How to start a new Project

Select Android Project.

Select Android Project.

Figure 3: Select Android Project.

Name your project Application1

Naming your project.

Figure 4: Naming your project.

Select your build target i.e. what version of android you would like your application to be runnable on.

Selecting you’re build target.

Figure 5: Selecting you’re build target.

Edit the package name. See http://developer.android.com/training/basics/firstapp/creating-project.html# for a brief explanation on how to name your package. In my example I named my package: sc.applications.app1 which is basically my two initials (sc) followed by .applications followed by .app1 to describe our first app. Also note here the Application name and the Activity name. The Activity name is the name of your main activity.

Naming your application, package and activity

Figure 6: Naming your application, package and activity.

Ok once you click finish you will notice the Application1 folder to the left hand side. Expand it by hitting the black arrow to its left. Then expand the src folder and you will see your package name, expand this and then you can see the name of your activity.

Double click on the name of your Activity to open up the code. Now expand the res folder and under the res folder expand the layout folder to see your main.xml file. Double click on this to open it. Notice when the main.xml file is open there are two tabs on the bottom of the screen, Graphical Layout and main.xml. Click on the Graphical Layout tab. You can take a moment to familiarise yourself with all the graphical components etc. available to you but we’ll cover that in more detail at a later stage. Don’t worry too much about them.

Project in Eclipse

Figure 7: Project in Eclipse.

To run the project as is without any editing thus far click on Run at the top of Eclipse or click the run arrow . Alternatively you can run it by hitting Ctrl + F11 or right click on your project/application (i.e. Application1) to the left hand side and select Run As and then select Android Application. See figure 8.

Running your project

Figure 8: Running your project.

The Emulator will load up, may take a minute or two. Unlock the screen and your application will run, easy as that.

Running Application on Emulator

Figure 9: Running Application on Emulator.

Right now we have gone through the setting up of your project. Was pretty easy eh? Now I will help you add all the fun stuff to the project like images buttons, text etc. Ok let’s waste no more time and get to it :-).

The Code

Now the project is set up and running I’ll give you some code to copy and paste into the files then go through the code in more detail with you. Essentially we will cover labels, TextViews, underlining, putting text in bold, adding an image, the EditText component, clearing text, changing a label and exiting the application on the click of a button. So we will learn a bit of everything to start you off the bat. Don’t be too alarmed, it’s not as daunting as it seems.

Step 1:

In Application1Activity (or whatever your main activity is called) Paste and copy this code. Remember don’t delete or copy over your package name at the top.

Listnig 1: Application1Activity

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;

public class Application1Activity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        final EditText editText1 = (EditText) findViewById(R.id.editText1);
                
        final Button clear = (Button) findViewById(R.id.clear);
    	clear.setBackgroundColor(Color.CYAN);
        
        clear.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // Perform action on click
            	
            	editText1.setText("");   

            }
        });
        
        final Button exit = (Button) findViewById(R.id.exit);
        
        exit.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // Perform action on click
            	
            	finish();
            }
        });
        
        final Button setLabel = (Button) findViewById(R.id.setLabel);
        
        setLabel.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // Perform action on click
            	
            	final TextView label = (TextView) findViewById(R.id.label);         	
            	label.setText(editText1.getText());
            }
        });
        
    }
}
Step 2:

In your main.xml file copy and paste this code:

Listing 2: main.xml file code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#FFFFFF" >

    <TextView
        android:id="@+id/space1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#F02323"
        android:text="@string/welcome"
        android:textSize="24sp" />
    
    <TextView
        android:id="@+id/space2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:textSize="16sp"/>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_gravity="center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/label"
        android:singleLine="true"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Label"
        android:textSize="24sp" 
        android:textColor="#000000"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />

    <EditText
        android:id="@+id/editText1"
        android:singleLine="true"
        android:layout_gravity="center"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:ems="10" >
        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />

    <Button
        android:id="@+id/clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Clear Text"
        android:layout_gravity="left"
        android:textColor="#2D5CA4"/>

    <Button
        android:id="@+id/setLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Set Label Text"
        android:layout_gravity="center" />

    <Button
        android:id="@+id/exit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Exit" 
        android:textColor="#30A42D"
        android:layout_gravity="right"/>

</LinearLayout>
Step 3:

Expand the res folder, then expand the values folder and open the string.xml file. As you guessed, here you can enter what your strings will be and underline them and set them to bold etc. Just copy and paste this code:

Listing 3: string.xml file code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <string name="welcome"><u>Hello, Welcome to <b>Change</b> Label Application.</u></string>
    <string name="app_name">Application1</string>

</resources>

Note: When copying the xml code, make sure there isn’t a space at the top before the code is entered or you may get errors or it may not compile/build properly

Now that you have all the code entered and there are no errors, we are ready to roll. Run the application and you should get something like this:

Application1 running

Figure 10: Application1 running.

Enter something into the space provided and hit the Set Label Text Button. The Label will change to what you have just entered!!!!!

Code Breakdown

Ok now it is running etc. I will just explain how it actually works.

Taking it apart

Figure 11: Taking it apart.

Let’s start off with the main.xml file:

  • First we need this line:
  • <?xml version="1.0" encoding="utf-8"?>
    
    version="1.0"

    It specifies what version of what mark-up language you have used.

    encoding="utf-8"?
    

    This refers to the character encoding of the file. UTF-8 supports a wide variety of characters and is fairly standard. For foreign characters such as Chinese for example you might look for a different character set.

  • Secondly we state what type of layout to use. We will use LinearLayout. Notice how I used HTML colours to denote the background colour, ("#FFFFFF" being white). Everything we want to add we just put it in between the LinearLayout tags.
  • <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:background="#FFFFFF" >
    
    //Enter components her
    </LinearLayout>
  • Adding TextViews, EditText Views, an ImageView and Buttons.
  • Things to note:

    Component ids. We can set the width and height of components.

    Here I use a TextView as a space. Notice android:text="".

       <TextView
            android:id="@+id/space1"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text="" />

    Here we use android:gravity="center" to center the text. We set the text color to red (HTML color code "#F02323"). Also we reference the string xml file.

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#F02323"
            android:text="@string/welcome"
            android:textSize="24sp" />

    The String xml file contains:

    <string name="welcome"><u>Hello, Welcome to <b>Change</b> Label Application.</u></string>

    The u tags are underling strings as they would in HTML and the b tags make the text bold just like in HTML.

    Take note: Only when you run your project the text specified will be underlined or put in bold. It does not show in real time on the Graphical Layout tab in the main.xml file in Eclipse.

    Notice here we specify a text size:

        <TextView
            android:id="@+id/space2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textSize="16sp"/>

    Next we add and image and center it. Also we give it dimensions. Notice dp is used. Here are some more you may see used:

    • Pixels(px) - corresponds to actual pixels on the screen.
    • Inches(in) - based on the physical size of the screen.
    • Millimeters(mm) - based on the physical size of the screen.
    • Points(pt) - 1/72 of an inch based on the physical size of the screen.
    • Density-independent Pixels(dp) - an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct roportion. Note: The compiler accepts both "dip" and "dp", though "dp" is more consistent with "sp".
    • Scale-independent Pixels(sp) - this is like the dp unit, but it is also scaled by the user's font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and user's preference.

    "@drawable/ic_launcher refers to the drawable folder where the image is stored. The drawable folders are found in the res folder. There are several to cope with different screen sizes.

    <ImageView
            android:id="@+id/imageView1"
            android:layout_gravity="center"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/ic_launcher" />

    Now we add the label. Notice we use sp for text size and set the color to ="#000000" which is black. Also notice the use of android:singleLine="true" to keep it in a single line.

        <TextView
            android:id="@+id/label"
            android:singleLine="true"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Label"
            android:textSize="24sp" 
            android:textColor="#000000"
            />

    We add another space:

      <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="" />

    We add the EditText View where we will actually add text. Notice ems, this is a typography term, it controls text size, etc. See: http://en.wikipedia.org/wiki/Em

    <EditText
            android:id="@+id/editText1"
            android:singleLine="true"
            android:layout_gravity="center"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:ems="10" >
            <requestFocus />
        </EditText>

    Another space added:

      <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="" />

    Now we add the Buttons. Points to note: Their id, widths and heights ("wrap_content" just wraps it to neatest size), layout gravity, text and text color. We will code what the Buttons do in our main activity i.e. Application1Activity.

       <Button
            android:id="@+id/clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Clear Text"
            android:layout_gravity="left"
            android:textColor="#2D5CA4"/>
    
        <Button
            android:id="@+id/setLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Set Label Text"
            android:layout_gravity="center" />
    
        <Button
            android:id="@+id/exit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Exit" 
            android:textColor="#30A42D"
            android:layout_gravity="right"/>

    Now let’s look at our main activity: Android/Eclipse uses many imports for numerous things.

    Listing 4: main activity code

    import android.app.Activity;
    import android.graphics.Color;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    public class Application1Activity extends Activity {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);

    The line below sets our view as our main.xml file. In other words this activity in a way relates to our main.xml file.

    setContentView(R.layout.main);

    We declare our EditText:

      final EditText editText1 = (EditText) findViewById(R.id.editText1);

    We declare our Button:

    final Button clear = (Button) findViewById(R.id.clear);
    

    We set the color of the Button:

    clear.setBackgroundColor(Color.CYAN);

    We use an OnClickListener and onClick method to perform an action on click. In this instance we set the text in editText1 to "" which is nothing. Therefore we clear it.

      clear.setOnClickListener(new View.OnClickListener() {
                public void onClick(View v) {
                    // Perform action on click
                	
                	editText1.setText("");   
    
                }
            });
            
            final Button exit = (Button) findViewById(R.id.exit);
            
            exit.setOnClickListener(new View.OnClickListener() {
                public void onClick(View v) {
                    // Perform action on click

    We use finish(); to exit our application.

    	finish();
                }
            });
            
            final Button setLabel = (Button) findViewById(R.id.setLabel);
            
            setLabel.setOnClickListener(new View.OnClickListener() {
                public void onClick(View v) {
                    // Perform action on click
                	
                	final TextView label = (TextView) findViewById(R.id.label);       

    Here we set our Label’s text to what we have entered into the editText1 field i.e. it gets the text from editText (using editText1.getText()) and changes the label to the text gotten from editText1.

    label.setText(editText1.getText());
                }
            });
            
        }
    }
    Educated

    Figure 12: Educated!

    Conclusion

    Now your educated up a little you can mess around with some of the attributes etc. see how it works etc. No need to rush, familiarise yourself with everything. That’s how you learn. If you want to learn more I will be writing some more articles where we shall create more android applications. You’ll be a master in no time :-)

    I hope you have learned something from this article and that it has helped you out in some way. If you enjoyed this article just give it a like. Thanks very much, hope to see you all again soon, Steve.



Has designed and developed several android applications from scratch which are available on Google Play.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login