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.xml, ShowImageActivity.java, activity_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>