Saturday, August 25, 2012

Working Colors And Images In Android Application


For the Following Article, I will be using the simple Application developed here .
Basically as every one knows Colors and Images are used in Android Application to set background color / Image or Images can also be used to set an Image for 'ImageView' Element or Button with Image etc.
Following article will help you to define colors, images in your Android Application and use them.

First we will see how to add / define and work with Colors in your Android Application.

To use colors in your Android Application you need to define them in Resource file, To do the same, right click on the res (resources)>values folder, New > Android XML File

Following dialog will open, 

Specify the name of the file as 'colors' say finish and in background, 'colors.xml' file will be created in your res>values folder.
In this file define colors names and color codes as follows:

These color codes you can easily find by Googling over internet.

Once these colors are defined you can use them any where in your Android application.

For Example you want to set the background for a layout, In your xml activity file, as soon as you write the following line


and press 'cntrl + space' you will see the list of your defined colors populates as shown in the following screen short. 
Now suppose I have selected 'Pink' As the background color, then following is the output of the Application in the Emulator i.e. 'Pink' Color set as background color.

Now we will move over on using Images In Android Application,

To use Images, you need to add Images in your 'res>drawable' folder, there will already 4 versions of drawable folder present in your 'res' folder namely,
drawable- hdpi
drawable- mdpi

create an Additional 'drawable' folder in 'res' folder and then copy paste images in this (res>drawable) folder you want to use in your Application.

For my application here, I have created a 'drawable' folder and added three Images,
and 'mug.png'

Directory structure will be as follows,

Notice the highlited drawable folder with the images in the same.

Once these Images are defined you can start using the same in your application, For Example If you want to set the background of a layout as particular Image, then start typing following lines in your activity xml file,


You will get the dropdown list of all the images added as follows,

Now suppose I have selected 'htmlbackground.png' as background image of layout, then following will be the output in Emulator, i.e. Background of the layout as defined image.

Similarly, For ImageView, While Creating an Image View in Android Application, In your activity xml file, Graphical layout, if you drag the 'Image View' control from the tool box to your screen, following dialog appears, where you can select the images that you have added in your 'drawable' folder.

If I have selected 'help.png' for the Image view, then following will be the output in your Emulator,

 Similarly it works for Image on button as well.

I hope this article was useful to get working with Colors and Images in your Android Applications.

Thats all for now!

Happy Coding!


Tuesday, August 21, 2012

Creating New Application in Android ICS..


Creating a new Application in Android through Eclipse IDE is very Simple... Just some points to be remembered of are listed below.

For Development, I'm using following,
Eclipse Juno,
Android 4.0.3 (API Level 15)
Ubuntu OS

After all the configurations done to setup Android In your system, To Start Creating a New Application,

Start Eclipse, Select File > New > 'Android Application Project',

If In New Selection, If 'Android Application Project' do no appear then,

Select Other > Android > Android Application Project.

Now Following Dialog / Wizard opens to Create New Project,

Fill in the Entries for Application Name, Project Name and Package Name.
Application Name will be shown in Playstore when you host your application, as well as in the Manage Applications Menu in Settings option in your Phone when application is Installed.

Project Name is used by Eclipse, it should be unique in the workspace meaning that no other application in the Eclipse workspace should have the same name.
Typically Application Name and Project Name will be the Same, Here I have kept as 'HelloApplication'

Now comes the package name, i.e. Base package name in which the first class / Java File corresponding to Main Launcher Activity will be created. It should be a valid java package name.

Also check that 'Create custom Launcher Icon' option is by default checked, If this option is checked, in the next wizard it will ask for the custom, icon, text etc for Launching your Android Application, If you dont want a custom Icon and want to go with the default ones you can unckeck this option. I will keep this option as checked.

After above entries is filled in, Go for 'Next' Option, you will get the following wizard, To Customize your Launcher Icon,

In the foreground Option, Select Image, Browse the Icon which you wish to keep it as launcher Icon for your application, I have selected the Image of Computer here, Also for the Shape option, select 'None'. ( by default, Shape selection will be circle which will have a white spaced circle around your Icon)

Select Next, and wizard will have two options to create Activity, as shown, 

As you are creating first project select BlankActivity And Press Next,

Next, Wizard will as to fill in your first Launcher Activity Parameters as follows,

Fill In the ActivityName, LayoutName and the Title t the Application,

ActivityName will be the name of the JavaFile/Class File for the Main Launcher Activity.

LayoutName will be the name of the Android XML layout file for the Main Launcher Activity where your UI elements will be defined.

Next is the Title of the Application which will be seen in Launcher as well as the Title of the Activity.

Fill in the Required values as press Finish which will create the default Hello World Application with your filled parameters values as follows,

Now create a new Android Emulator to test this new Application created as follows,

When you run the Application by right clicking on the Application name in Eclipse, Select Run As > Android Application, Emulator will be launched with your Application running as shown

In the Above Image notice the Title 'Hello' and the Custom Icon i.e. The Computer Image we used as parameters in create new application wizard.

Also If you go in to browse the applications in your Emulator, In the Applications Listing you will see your Application with your custom Title and Custom Icon as follows

Notice the Application Named 'Hello' with the computer Image in the Application list.

So here you are...!! Done with creating a fresh new Application in Android with your own Custom Icon and App Name.!!

I hope this article helped the beginers to create new Application.

Happy coding!


Animated Container in Flutter

Please check this flutter video tutorial for detailed example and implementation of Animated Container in Flutter.