Using drawables, yay ! (Part 1)

So, let's say you need to make an image gallery or you need to use a large number of images in your app, but you don't want to import all of those images by hand. What do you do ?

All your drawable data should be located in your_project/res/drawable folder. In most cases this folder is not auto-generated in eclipse, so you would need to create it by hand. Image resources outside of this folder will not be accessible. Keep in mind names of the resources in drawable should be lowercase, also contain only letters a-z, numbers and an underscore. Not doing this will cause an error in your XML files and that could probably omit the R.java file from being generated !

So we have our drawable folder all set. Now, how do make an image appear magically in our app ?

Each element in our app has to be in a view. Each view has a parent view and can also have children views.
A system of this views is called View Hierarchy. You can open activity_main.xml to have a glimpse at your xml defined UI. There is more than one way of defining are views in view hierarchy which we will use later.

LinearLayout children mostly behave like bricks. You can stack them vertically or horizontally.
Here is an example:

           <LinearLayout
         android:id="@+id/LinearLayout2"
         android:layout_width="match_parent"
         android:layout_height="140dp"
         android:orientation="horizontal" 
         android:gravity = "center"
         > 
     </LinearLayout>

We gave our view a unique name with "@+id/LinearLayout2" which we will reference later. It has a match_parent attribute which basically says: "I can be as big as my parent". However we've set our height to be statical. Orientation must be supplied when LinearLayout is used. 
android:gravity tells the child view to place itself in the center of both x and y-axis.

Let's first show how to set up a single image and later we'll load them up dynamically.
Remember the "@+id/LinearLayout2" ? Now we will use it to get our view.

MainActivity.java (inside the onCreate() )

  
 LinearLayout2 = (LinearLayout) findViewById(R.id.LinearLayout2); // findViewById returns an int !
 image = new ImageView(MainActivity.this); // creates a new ImageView
 setImage(); // this is a method

Here we declare a new LinearLayout to which we will append the image. We need to cast the value returned by findViewById, because it returns an int, but we need it to return a LinearLayout.

Here is the method i was talking about. We need to make it public and void, because we don't need to return a value. Also, don't forget to make the variables LinearLayout2 and image public.

        public void setImage(){
  LinearLayout2.removeView(image); 
  image.setImageResource(R.id.new_image); 
  LinearLayout2.addView(image); 
 }

First we need to make sure that there were no views prior added to LinearLayout, so we use removeView(). Then we setImageResource() for the ImageView using R.id.new_image, where new_image is an image resource in the drawable dir. Finally we add it to the LinearLayout2.

In the second part i will show how to set images dynamically using Fields.