Trying to show horizontal ScrollView with lots of images and app crashes with OutOfMemoryError

Question

enter image description hereWhen i click on ImageView in Index Class then error pop ups in the logcat i am posting my error in index class with xml .

03-02 21:15:52.029 4826-4826/com.example.fahad.qaida E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.fahad.qaida, PID: 4826
    java.lang.OutOfMemoryError
    at android.graphics.BitmapFactory.nativeDecodeAsset(Native Method)
    at android.graphics.BitmapFactory.decodeStream(BitmapFactory.java:677)
    at android.graphics.BitmapFactory.decodeResourceStream(BitmapFactory.java:507)
    at android.graphics.drawable.Drawable.createFromResourceStream(Drawable.java:872)
    at android.content.res.Resources.loadDrawable(Resources.java:3022)
    at android.content.res.TypedArray.getDrawable(TypedArray.java:602)
    at android.widget.ImageView.<init>(ImageView.java:133)
    at android.support.v7.widget.AppCompatImageView.<init>(AppCompatImageView.java:72)
    at android.support.v7.widget.AppCompatImageView.<init>(AppCompatImageView.java:68)
    at android.support.v7.app.AppCompatViewInflater.createView(AppCompatViewInflater.java:106)
    at android.support.v7.app.AppCompatDelegateImplV9.createView(AppCompatDelegateImplV9.java:1024)
    at android.support.v7.app.AppCompatDelegateImplV9.onCreateView(AppCompatDelegateImplV9.java:1081)
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:690)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:761)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:769)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:769)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:498)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:398)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:354)
    at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:287)
    at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:139)
    at com.example.fahad.qaida.Index.onCreate(Index.java:23)
    at android.app.Activity.performCreate(Activity.java:5394)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1105)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2246)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2340)
    at android.app.ActivityThread.access$800(ActivityThread.java:157)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1247)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:157)
    at android.app.ActivityThread.main(ActivityThread.java:5293)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:515)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1265)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1081)
    at dalvik.system.NativeStart.main(Native Method)

index class

 @Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_index);

I am getting an error here setContentView(R.layout.activity_index); when i click on any image view

xml of index

<RelativeLayout 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"
android:background="@drawable/border"
tools:context="com.example.fahad.qaida.Index">

<RelativeLayout
    android:id="@+id/r1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="40dp"
    >

    <ImageView
        android:id="@+id/btn_table"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:src="@drawable/button_content"
        />
</RelativeLayout>



<ScrollView

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginBottom="50dp"
    android:layout_marginTop="10dp"
    android:layout_below="@+id/r1"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/r1"
        android:gravity="center"

        >

        <ImageView
            android:id="@+id/index1"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_sample"

            />

        <ImageView
            android:id="@+id/index2"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index1"
            android:src="@drawable/index_1"


            />

        <ImageView
            android:id="@+id/index3"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index2"
            android:src="@drawable/index_2"

            />

        <ImageView
            android:id="@+id/index4"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index1"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_3" />

        <ImageView
            android:id="@+id/index5"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index2"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index4"
            android:src="@drawable/index_4" />

        <ImageView
            android:id="@+id/index6"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index3"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index5"
            android:src="@drawable/index_5" />

        <ImageView
            android:id="@+id/index7"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index4"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_6" />

        <ImageView
            android:id="@+id/index8"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index5"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index7"
            android:src="@drawable/index_7" />

        <ImageView
            android:id="@+id/index9"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index6"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index8"
            android:src="@drawable/index_8" />

        <ImageView
            android:id="@+id/index10"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index7"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_9" />

        <ImageView
            android:id="@+id/index11"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index8"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index10"
            android:src="@drawable/index_10"

            />

        <ImageView
            android:id="@+id/index12"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index9"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index11"
            android:src="@drawable/index_11" />

        <ImageView
            android:id="@+id/index13"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index10"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_12" />

        <ImageView
            android:id="@+id/index14"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index11"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index13"
            android:src="@drawable/index_13" />

        <ImageView
            android:id="@+id/index15"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index12"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index14"
            android:src="@drawable/index_14" />

        <ImageView
            android:id="@+id/index16"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index15"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_15" />

        <ImageView
            android:id="@+id/index17"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index14"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index16"
            android:src="@drawable/index_16" />

        <ImageView
            android:id="@+id/index18"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index15"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index17"
            android:src="@drawable/index_17" />

        <ImageView
            android:id="@+id/index19"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index16"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_18" />

        <ImageView
            android:id="@+id/index20"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index17"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index19"
            android:src="@drawable/index_19" />

        <ImageView
            android:id="@+id/index21"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index18"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index20"
            android:src="@drawable/index_20" />

        <ImageView
            android:id="@+id/index22"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index19"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_21" />

        <ImageView
            android:id="@+id/index23"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index20"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index22"
            android:src="@drawable/index_22" />

        <ImageView
            android:id="@+id/index24"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index21"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index23"
            android:src="@drawable/index_23" />

        <ImageView
            android:id="@+id/index25"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index24"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_24" />

        <ImageView
            android:id="@+id/index26"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index23"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index25"
            android:src="@drawable/index_25" />

        <ImageView
            android:id="@+id/index27"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index24"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index26"
            android:src="@drawable/index_26" />

        <ImageView
            android:id="@+id/index28"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index25"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_27" />

        <ImageView
            android:id="@+id/index29"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index26"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_toLeftOf="@id/index28"
            android:src="@drawable/index_28" />

        <ImageView
            android:id="@+id/index30"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index27"
            android:layout_toLeftOf="@id/index29"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_29" />

        <ImageView
            android:id="@+id/index31"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_alignParentRight="true"
            android:layout_below="@id/index28"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_30" />

        <ImageView
            android:id="@+id/index32"
            android:layout_width="85dp"
            android:layout_height="130dp"
            android:layout_below="@id/index29"
            android:layout_toLeftOf="@+id/index31"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/index_31" />


    </RelativeLayout>
</ScrollView>

This is xml of index class where all image view are in relative layout

@Pavneet_Singh All images are of 400 kb one more thing its working on some phones and on some it is giving me this error — Ali Khan, Mar 02 '18 at 16:25

score 0 · Answer 1 · answered Mar 02 '18 at 16:26

0

It is due to the fact that your image is of very large size or the bitmap of the image is becoming very large,and it cannot be loaded into the memory of the Android machine, try with extremely low density images or copy them to the (ldpi) (low density) images, and the run the code again.

answered Mar 02 '18 at 16:26

Arya Bhivpathaki

71
1
2

My all images are of 400 kb just – Ali Khan Mar 02 '18 at 16:28
Sometimes even 40kB are also large for android memory. Do one thing, try the system images provided by android studio by default, ic_laucher_round or ic_launcher and see if it works by toasting some thing on the onclick() method. – Arya Bhivpathaki Mar 02 '18 at 16:31
it worked with launcher but what is the solution of previous one ? i have to show index page where i have 31 images and on every image click it contain its fragment – Ali Khan Mar 02 '18 at 16:41

TpoM6oH · Accepted Answer · 2018-03-02T16:45:03.500

0

You have too many images loaded in memory and it causes OutOfMemoryError.

And you don't need to show all the images since not all of them are visible at the same time.

As far as I can see you are trying to show scrolling grid of images. Android has a build in solution for this - RecyclerView.

Check this answer for detailed guideness.

And this one to understand how it is working.

And here is the official guide.

edited Mar 02 '18 at 16:45

answered Mar 02 '18 at 16:38

TpoM6oH

8,385
3
40
72

i have verticle scroll where each row contain 3 images and i have 11 rows – Ali Khan Mar 02 '18 at 16:42
i added a picture of xml see and tell me how to achieve this without encountering this error – Ali Khan Mar 02 '18 at 16:43
Ok, you can use RecyclerView for any setup, see this answer https://stackoverflow.com/questions/40587168/simple-android-grid-example-using-recyclerview-with-gridlayoutmanager-like-the – TpoM6oH Mar 02 '18 at 16:43
look at the image i have attached after editing this post – Ali Khan Mar 02 '18 at 16:44

Trying to show horizontal ScrollView with lots of images and app crashes with OutOfMemoryError

2 Answers2