Why I can't set a background image into an ImageView declared into a fragment xml configuration from the related fragment class?

Question

I am absolutely new in Android development and I have some problem developing my first app.

So I have the following situation:

1. I have this fragment_screen_slide_page.xml file that contains the element of a fragment that is shown into a view and have to show an image when it is loaded into an activity:

    <!-- Dummy content. --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="0dp"> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:scaleType="fitCenter" android:layout_height="250dp" android:background="@drawable/carbonara" /> <TextView android:id="@android:id/text1" style="?android:textAppearanceLarge" android:textStyle="bold" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="16dp" /> </LinearLayout>

As you can see it contains the ImageView element having id=imageView1 (where the image have to be loaded when the fragment is putted into the activity).

Then I have this ScreenSlidePageFragment that works on the previous fragment, I have something like this:

public class ScreenSlidePageFragment extends Fragment {

    ................................................................
    ................................................................
    ................................................................

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

       System.out.println("PAGE NUMBER: "+ mPageNumber + 1);
        // Inflate the layout containing a title and body text.
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_screen_slide_page, container, false);

        // Set the title view to show the page number.
        ((TextView) rootView.findViewById(android.R.id.text1)).setText(getString(R.string.title_template_step, mPageNumber + 1));
        System.out.println("TESTO: "+ getString(R.string.title_template_step, mPageNumber + 1));

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

        // Retrieve the reference of the ImageView element of the layout having id=imgSlide:
        View view = inflater.inflate(R.layout.fragment_screen_slide_page,container,false);
        ImageView imgSlideView = (ImageView) view.findViewById(R.id.imageView1);

        final int sdk = android.os.Build.VERSION.SDK_INT;
        if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
            imgSlideView.setBackgroundDrawable(drawable);
        } else {
                                  //imgSlideView.setBackground(getResources().getDrawable(R.drawable.colosseum_icon));
        }

        return rootView;
    }
        ................................................................
        ................................................................
        ................................................................
    }

    ................................................................
    ................................................................
    ................................................................
}

So as you can see, into the onCreateView() method I basically do the following operation:

1. I retrieve the ImageView element reference having id=imageView1 declared inside the previous fragment_screen_slide_page.xml file.

2. I set a retrieved drawable as background of this ImageView doing:

    imgSlideView.setBackgroundDrawable(drawable)

I expect that this image have to be shown on my screen but it don't happen. The image related to the retrieved drawable variable is not shown. Instead of the image appear an empty space having 250dp as height (as specified into the XML). Under the empty image appear the expected content of the TextView

What am I missing? How can I fix this issue?

Answer 1

Firstly you would want to use android:src="@drawable/carbonara" instead of android:background="@drawable/carbonara" on your ImageView and you set .setImageDrawable instead of .setBackgroundDrawable

Next - View view = inflater.inflate(R.layout.fragment_screen_slide_page,container,false); is not needed and should be removed. Instead of ImageView imgSlideView = (ImageView) view.findViewById(R.id.imageView1); it should be ImageView imgSlideView = (ImageView) rootView.findViewById(R.id.imageView1);

Also this of course

final int sdk = android.os.Build.VERSION.SDK_INT;
    if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
        imgSlideView.setBackgroundDrawable(drawable);
}

is only activated is sdk is lower than Jelly Bean (I'm not sure if that applies to your test environment).

Answer 2

The function inflate will generate a new view every time. you called twice, so you have two seperate view: view and rootView , and return rootView, so The fragment will show rootView, no view. no image. changes like this:

    // Retrieve the reference of the ImageView element of the layout having id=imgSlide:
ImageView imgSlideView = (ImageView) rootView.findViewById(R.id.imageView1)

Year, And more, ImageView should use android:src and setImageDrawable

Everything will be ok.

added, this code block has problem:

final int sdk = android.os.Build.VERSION.SDK_INT;
if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
       // if your phone version below 4.1
    imgSlideView.setBackgroundDrawable(drawable);
} else {
                          //imgSlideView.setBackground(getResources().getDrawable(R.drawable.colosseum_icon));
}

if your phone, android version is bigger than 4.1 (I think so -_-|), you don't change your image. so uncomments the else code.

Answer 3

Use setImageResource() instead of setBackgroundDrawable()

So it should be

imageView.setImageResource(R.drawable.your_image);