Online Tutorials & Training Materials | STechies.com
Register Login

Images & Switch Image App in Android Activity

|| || 0

Images & Switch Image App in Android Activity
Stechies

Android ImageView Example

First of all, we are going to add some images to our app. So go to your project and search for the folder called ‘app’ and inside this folder, you will be able to see this folder called ‘res’ or resources folder and inside this resources folder, there will be a folder called ‘drawable’ so all your images, you want to, you know, keep inside this drawable folder. So this is the folder for keeping all your image resources.

So go to this drawable folder, right click on this folder and go to ‘new’ and click the option called ‘image asset’

In image asset, you can add four type of image or whatever image you choose, it will be converted into four types.

  1.  hdpi, which is high dpi.
  2.  dpi or mdpi.
  3.  xdpi or xhdpi, which is extra high dpi and
  4. xxhdpi, this is also high quality dpi .

Just choose one of them. It doesn’t matter which one you choose because whatever image you choose, it will be converted into all these formats.

So just click OK and in here, you will see there is a png, default png file already provided by our project and in here now we want to add our new files.

In this tutorial, we are going to add two android icons here from our folder andimage.png and andimage2.png

Now give the Resource Name for your image, for example, And_image1 and asset type is launcher icon, in the image file, just give the path of your image.

So first we choose the 1st image (and_image1) from our folder and then this file will be converted into these four formats then click next and all these options are OK and click finish and once you click finish, you will be able to see there are four type of images generated which is hdpi, mdpi, xhdpi and xxhpdi, four types of images inside your drawable folder. These four types of images are generated because, you know, your app will be able to resize these images on the basis of the phone size. Add one more resource in the same way. click next and finish. So now we have added two images inside our drawable folder

Now in order to add these images to your android activity, there is a widget called ‘image view’, so you can drag and drop this image here and in here, you can resize this widget also but first of all what we are going to do is we are going to add some resource to this widget. So just double click this widget and then in the source, you just need to choose your source, so just click this small button at the side of this source and there, you will be able to see at the bottom your two images and_image1 and and_image2.

Now choose the first image and click OK and you will be able to see your image android activity.

Now add a button here OK and change this button name as switch image. So that we can use this for switching image.

Now you can notice that the size of this image do not fit the android activity, therefore, you can drag the side of your image and resize it like this OK and it will be resized but by resizing this image view. But the image stays the same which is small size. Now in order to stretch your image according to the size of this image view, what you can do is there is a property here in your properties and select your image view here and search for the property called ‘scale type’ and in the properties, there will be a property called ‘scale type’ change it to fit center. You can choose other properties of scale type to fit your requirement.

Now we are going to add a click event to this button and choose the second image using this button. So we are going to make an app, whenever users click this button, he is going to change these images again and again.

Switch Images in Android

So first go to mainactivity.java file declare all variables for two image view and button variables.

public class MainActivity extends ActionBarActivity {
   private static ImageView imgView;
   private static Button buttonSBM;

After declaring our variable we will now create a method which we will call in our OnCreate method and inside this newly created method we are going to cast these two variables – one is for image and we will assign the ID of the widgets to them.

public void buttonclick() {
    imgView = (ImageView) findViewById(R.id.imageView);
    buttonSBM = (Button) findViewById (R.id.button);

 

Now take buttonSbm variable and set our OnClick method to it

public void buttonClick () {
  imgView = (ImageView)findViewByid(R.id.imagebutton);
  imgSbm = (Button)findViewByid(R.id.button);
  buttonSbm.setOnClickListener(
        new View.OnClickListener() {
        @Overrride
        public void onClick(View v) {

Now inside this OnClick method, declare two more variables at the top and these variables will be one for current image index

private int current_image_index;
int[] images = {R.drawable.and_image2,R.drawable.ic_

Now in our OnClick method we are going to increase the index of this current image and assign it to the current image modulus the length of your, length of your image array.

public void  onClick(View v) {
     current_image_index++;
     current_image_index=current_image_index % images.length;
     imgView.setImageResource(images[current_image_index]);

Now we need to call this buttonclick event inside our OnCreate method.

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    buttonClick();

Now we are ready so we are going to run our app. So every time you click the switch button, this index changes in the image array and we can see new array.


Related Articles