Why I can't put this runtime created Bitmap as content o an ImageView declared into a Fragment?

Question

I am absolutly new in Android development and I am developing my first education app related to a beginner course on Udacity.

The application idea is pretty simple: it is a cousine recipes application in which the use swap from a recepy to another swapping slides right or left in the main activity.

So this is my GitHub repository related to this application: https://github.com/AndreaNobili/PastaFromRome

To swap from a recepy to another I used the fragment, so basically I have an activity_man.xml file that only contains the header and a viewpager for the fragment:

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Then I have the fragment_screen_slide_page.xml that represent a slide related to a single recipe, something like this:

<!-- Dummy content. -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="0dp">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:scaleType="fitXY"
        android:layout_height="250dp" />
        <!--
        android:src="@drawable/carbonara"/>
        android:background="@drawable/carbonara" />
        -->

    <TextView android:id="@android:id/text1"
        style="@style/pastaTitleTextStyle" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0px"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                style="@style/HeaderTextStyle"
                android:text="Difficoltà:" />


            <ImageView
                android:id="@+id/difficultyContainer"
                android:layout_width="fill_parent"
                android:scaleType="fitXY"
                android:layout_height="55dp" />

        </LinearLayout>


    </LinearLayout>

</LinearLayout>

This view is a fragmetn that, when is showed, contain the current recipe.

It contains a first ImageView having id imageView1 that show an image related to the current recipe, it works fine.

Then it contains a second ImageView having id difficultyContainer that is an difficulty ranking image created at runtime from the application. Here is where I am going crazy !!!

This is the ScreenSlidePageFragment class (that extends Fragment) that handle the logic of the fragment:

/**
 * A fragment representing a single step in a wizard. The fragment shows a dummy title indicating
 * the page number, along with some dummy text.
 *
 */
public class ScreenSlidePageFragment extends Fragment {

    private static final String TAG = "ScreenSlidePageFragment";
    /**
     * The argument key for the page number this fragment represents.
     */
    public static final String ARG_PAGE = "page";

    /**
     * The fragment's page number, which is set to the argument value for {@link #ARG_PAGE}.
     */
    private int mPageNumber;

    private static Context context;

    /**
     * Factory method for this fragment class. Constructs a new fragment for the given page number.
     */
    public static ScreenSlidePageFragment create(int pageNumber, Context baseContext) {
        ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, pageNumber);
        fragment.setArguments(args);

        context = baseContext;
        return fragment;
    }

    public ScreenSlidePageFragment() {
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPageNumber = getArguments().getInt(ARG_PAGE);
    }

    /**
     * Method that will be called when the "pasta slider" is slided right or left
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

       System.out.println("PAGE NUMBER: "+ mPageNumber);

        // Obtain the colosseum_icon.png from the rsources as a Drawable:
        //Drawable drawable = getResources().getDrawable(R.drawable.colosseum_icon);

        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_screen_slide_page, container, false);
        ImageView imgSlideView = (ImageView) rootView.findViewById(R.id.imageView1);

        /* Retrieve the ImageView having id="difficultyContainer" (where to put the diifficulty
           image created):
         */
        //ImageView difficultyContainerImageView = (ImageView) rootView.findViewById(R.id.difficultyContainer);

        // Load the 2 images for the creation of the "difficulty graphic":
        Bitmap chefHatWhite = BitmapFactory.decodeResource(getResources(), R.drawable.chef_hat_white);
        Bitmap chefHatOk = BitmapFactory.decodeResource(getResources(), R.drawable.chef_hat_ok);

        // Where the previus image will be drawn:
        //Canvas canvas = new Canvas();
        Canvas difficultyCanvas = creaImgDifficulty();


        //switch (mPageNumber + 1) {
        switch (mPageNumber) {

            case 0:
                imgSlideView.setImageResource(R.drawable.carbonara);
                ((TextView) rootView.findViewById(android.R.id.text1)).setText(getString(R.string.carbonara));

                ImageView difficultyContainerImageView1 = (ImageView) rootView.findViewById(R.id.difficultyContainer);

                difficultyContainerImageView1.setImageDrawable(new BitmapDrawable(getResources(), ImgUtility.createRankingImg(context, 3)));

                break;

            case 1:
                imgSlideView.setImageResource(R.drawable.amatriciana);
                ((TextView) rootView.findViewById(android.R.id.text1)).setText(getString(R.string.amatriciana));



                break;

            case 2:
                imgSlideView.setImageResource(R.drawable.gricia_m);
                ((TextView) rootView.findViewById(android.R.id.text1)).setText(getString(R.string.gricia));


                break;

            case 3:
                imgSlideView.setImageResource(R.drawable.cacio_e_pepe);
                ((TextView) rootView.findViewById(android.R.id.text1)).setText(getString(R.string.cacio_e_pepe));


                break;

            case 4:
                imgSlideView.setImageResource(R.drawable.ajo_ojo_e_peperoncino);
                ((TextView) rootView.findViewById(android.R.id.text1)).setText(getString(R.string.ajo_ojo_peperoncino));


                break;
        }


        return rootView;
    }


    private void createImg(ImageView imgview) {
        Canvas canvas;

        Bitmap star = BitmapFactory.decodeResource(getResources(), R.drawable.star);
        Bitmap output = Bitmap.createBitmap(32, 32, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(output);

        canvas.drawBitmap(star, star.getWidth() + 2, 0, null);

        imgview.setImageDrawable(new BitmapDrawable(getResources(), output));
    }

    private Canvas creaImgDifficulty() {
        Canvas canvas;
        Bitmap chefHatOk = BitmapFactory.decodeResource(getResources(), R.drawable.chef_hat_ok);
        Bitmap output = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(output);

        int space = 10; // the space between images

        for(int i = 0; i < 3; i++) {
            canvas.drawBitmap(chefHatOk, i * (chefHatOk.getWidth() + space), 0, null);
        }

        return canvas;
    }

    /**
     * Returns the page number represented by this fragment object.
     */
    public int getPageNumber() {
        return mPageNumber;
    }
}

So basically into the onCreateView() method (that I think is performed when the current fragment is loaded) I have the mPageNumber variable that specify the loaded fragment related to a specific recipe and there is a switch case used to load the specific information of this recipe into this fragment, for example:

case 0: it is the first recipe named carbonara so it put the carbonara.png image (R.drawable.carbonara) into the previous ImageView havving id=imageView1 defined into the fragment_screen_slide_page.xml file.

It works fine.

The problem occur when in the previous code I do:

ImageView difficultyContainerImageView1 = (ImageView) rootView.findViewById(R.id.difficultyContainer);

difficultyContainerImageView1.setImageDrawable(new BitmapDrawable(getResources(), ImgUtility.createRankingImg(context, 3))); 

As you can see in the code, the difficultyContainerImageView1 identify the ImageView having id=difficultyContainer in my fragment. Here I set an Image created by the ImgUtility.createRankingImg() method.

public class ImgUtility {


    /**
     * Method that create the images related to the difficulty of a recepy
     * @param context
     * @param difficulty that represent the number of chef_hat_ok into the final image
     * @return a Bitmap representing the difficult of a recepy
     */
    public static Bitmap createRankingImg(Context context, int difficulty) {

        // Create a Bitmap image starting from the star.png into the "/res/drawable/" directory:
        Bitmap myBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.chef_hat_ok);


        // Create a new image bitmap having width to hold 5 star.png image:
        Bitmap tempBitmap = Bitmap.createBitmap(myBitmap.getWidth() * 5, myBitmap.getHeight(), Bitmap.Config.RGB_565);

        Canvas tempCanvas = new Canvas(tempBitmap);

        // Draw the image bitmap into the cavas:
        tempCanvas.drawBitmap(myBitmap, 0, 0, null);
        tempCanvas.drawBitmap(myBitmap, myBitmap.getWidth(), 0, null);
        tempCanvas.drawBitmap(myBitmap, myBitmap.getWidth() * 2, 0, null);
        tempCanvas.drawBitmap(myBitmap, myBitmap.getWidth() * 3, 0, null);
        tempCanvas.drawBitmap(myBitmap, myBitmap.getWidth() * 4, 0, null);


        return tempBitmap;

    }


}

This method should be ok because it seems to me that return a Bitmap but this image is not shown into the fragment ImageView having id=difficultyContainer

Into the logcat I can see the following error log but I don't know if are related to my problem or not:

08-21 19:38:12.315 4239-4925/com.example.android.pastafromrome W/OpenGLRenderer: Bitmap too large to be uploaded into a texture (8730x1836, max=4096x4096)
08-21 19:38:12.335 4239-4925/com.example.android.pastafromrome W/OpenGLRenderer: Bitmap too large to be uploaded into a texture (8730x1836, max=4096x4096)
08-21 19:38:12.335 4239-4925/com.example.android.pastafromrome W/OpenGLRenderer: Bitmap too large to be uploaded into a texture (8730x1836, max=4096x4096)

Why? What I missing? How can I fix this issue? I will very glad to you if you see my GitHub repository and help me to fix it.

Answer 1

The problem is that Android will automaticly resize chef_hat_ok to 1746px width (I guess it depends on device). It seems alright, but you do 5 of them and 5 x 1746px is 8370 and texture can't hold that.

Solution: disable scaling or put resources that depends on density (didn't checked that option).

Disabling scaling.

ImgUtility.java

BitmapFactory.Options options = new BitmapFactory.Options();
options.inScaled = false;
Bitmap myBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.chef_hat_ok, options);

Edit: you will need to set density to canvas tempCanvas.setDensity(myBitmap.getDensity());

Edit2: I would also suggest to make some changes to difficulty container

<ImageView
      android:id="@+id/difficultyContainer"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:scaleType="centerInside"
      android:adjustViewBounds="true" />