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

android:background="@color/"

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-ldpi
drawable- mdpi
drawable-xhdpi

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,
'help.png'
'htmlbackground.png'
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,

android:background="@drawable/"

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!

~Mayuri


2 comments:

Salim said...

Thanks Mayuri your blog helped me alot in starting android Development but can u throw some light on database connectivity

Unknown said...

hi..mayuri..
I have a question regarding PhoneGap.
I have connect my app to connect with mssql server 2005, i did but i used native UI, that not too much attractive.

Then i googled a lot but can't find good result. Then , i have heard about phone-gap. I have made a sample app also. But still can understand what to do.

please suggest something...I have to show a listView in the intial that contain the data coming from server....

Please suggest something helpfull.......

Animated Container in Flutter

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