How To Add Images In Android Studio Drawable Folder

When developing an android application, you always need to add images to it. This article will show you how to add images to your android application, there is also an example that will show you how to load and use the added images in the android application.

Images in the android application are commonly saved in the android project drawable folder (app/res/drawable). After that, the android studio will generate a drawable id for each added image in the R class. Then you can use R.drawable.imageId to refer to that image in your java code.

1. How To Add Images To Drawable Folder In Android Studio?

  1. Launch android studio, go to project view in the left panel. If you can not find the project view then you can click ” View —> Tool Windows —> Project ” to show the project view in the left panel.
  2. In the project view, select the Android subview in the subview drop-down list.
  3. Then you can see the drawable folder under app —> res folder in the panel below the subview.
  4. Copy images from any directory you saved and right-click the drawable folder, click the Paste menu item in the popup menu list then accept all popup dialog. After that, you can see the images added in the drawable folder.
  5. Please note the image name can only include lowercase a-z, 0-9, or underscore otherwise, there will have an error when you rebuild the android project. The error message like ” Error: ‘-‘ is not a valid file-based resource name character: File-based resource names must contain only lowercase a-z, 0-9, or underscore
  6. You can right-click the image, click “Refactor —> Rename” to update the image name to a legal name.

2. How To Use Images In Android Application?

  1. After adding images to the drawable folder, you can use them in your android application java code. Below is an example.
  2. There are 6 images in this example, when the application start, it will show image1.png.
  3. When you click the image, it will show another image in order. You can see the demo video for this example on youtube https://youtu.be/gfOslh96Pdg.
  4. You can read Android Hello World Example Project File Structure to learn android project structure and core files introduction if you do not know before.
  5. This example’s core files are AndroidManifest.xmlShowImageActivity.javaactivity_show_image.xml.
  6. Below is the above source file content.
  7. app/manifests/AndroidManifest.xml
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.dev2qa.example.image">
    
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
            <activity android:name="com.dev2qa.example.image.ShowImageActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    
    </manifest>
  8. app/java/com.dev2qa.example.image/ShowImageActivity.java
    package com.dev2qa.example.image;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    
    public class ShowImageActivity extends AppCompatActivity {
    
        // This int array is used to store image resource that will be used.
        int imagesIdArr[] = new int[]{R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4, R.drawable.img5, R.drawable.img6};
    
        // Current displayed image index in above images array, initial value is 0..
        int currImage = 0;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_show_image);
    
            // Get layout object to add ImageView object,
            // idShowImageLayout is a LinearLayout object defined in res / layout / activity_show_image.xml
            LinearLayout showImageLayoutView = (LinearLayout)this.findViewById(R.id.idShowImageLayout);
    
            // Create an ImageView object.
            final ImageView imgView = new ImageView(this);
    
            // Add ImageView into LinearLayout object.
            showImageLayoutView.addView(imgView);
    
            // Show the first image in imagesIdArr array.
            imgView.setImageResource(this.imagesIdArr[currImage]);
    
            // Register an OnClickListener for image view object.
            imgView.setOnClickListener(
                    new View.OnClickListener() {
                        // When click image, this method will be triggered.
                        @Override
                        public void onClick(View view) {
                            // If currrImage
                            if(currImage==5)
                            {
                                currImage = -1;
                            }
                            currImage++;
                            imgView.setImageResource(imagesIdArr[currImage]);
                        }
                    }
            );
        }
    }
  9. app/res/layout/activity_show_image.xml
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.dev2qa.example.image.ShowImageActivity">
    
        <LinearLayout
            android:id="@+id/idShowImageLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="8dp">
    
        </LinearLayout>
    </android.support.constraint.ConstraintLayout>

3 thoughts on “How To Add Images In Android Studio Drawable Folder”

  1. I want to add images to my android studio project’s res/drawable directory. But when I right-click the project/app/res folder and click the New —> Image Asset menu item in the popup menu list, it popup a dialog window that let me to select Asset Type, I do not know what to do next, can anyone give me some help, thanks.

    1. You can choose the Action Bar and Tab Icons in the Asset Type dialog window, then browse the image path that contains the images which you want to add to the android project, input a resource name for the image, click the Next button until finish.

    2. The easiest way is to copy all the image files to the android project/res/drawable directory, then you can use xml or java source code to add the image assets.

      If you use xml to add the image asset, you can according to the below xml.

      <ImageView android:src=”@drawable/image_1″ /> 

      If you use java source code to add the image asset, you can refer to the below source code.

      // Get the ImageView component.
      ImageView imgView = (ImageView)findViewById(imgViewId);

      // Set the image resoruce to the above ImageView object.
      imgView.setImageResource(R.drawable.image_1);

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.