Cyan bar appears above ImageView after downloading image from website in DialogFragment

Question

I tried downloading an image file from the following address: http://i0.kym-cdn.com/photos/images/newsfeed/000/002/110/longcat.jpg

I was using the following setup:

MainActivity.java:

public class MainActivity
    extends ActionBarActivity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if(savedInstanceState == null)
        {
            getSupportFragmentManager().beginTransaction().add(R.id.container, new PlaceholderFragment()).commit();
        }
    }
}

PlaceholderFragment.java:

public class PlaceholderFragment
    extends Fragment
{
    private Button button;

    public PlaceholderFragment()
    {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);
        button = (Button)rootView.findViewById(R.id.fragment_main_button);
        button.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                new ImageDownloadAsyncTask().execute("http://i0.kym-cdn.com/photos/images/newsfeed/000/002/110/longcat.jpg");
            }
        });
        return rootView;
    }


    public class ImageDownloadAsyncTask extends AsyncTask<String, Void, byte[]>
    {
        @Override
        protected byte[] doInBackground(String... params)
        {
            if(params.length <= 0)
            {
                return null;
            }

            byte[] imageData = null;
            String url = params[0];
            HttpURLConnection httpURLConnection = null;
            try
            {
                URL address = new URL(url);
                httpURLConnection = (HttpURLConnection)address.openConnection();
                httpURLConnection.setRequestMethod("GET");
                httpURLConnection.setDoInput(true);
                httpURLConnection.connect();
                if(httpURLConnection.getResponseCode() == 200)
                {
                    ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
                    IOUtils.copy(httpURLConnection.getInputStream(), byteArrayOutputStream);
                    imageData = byteArrayOutputStream.toByteArray();
                }
                else
                {
                    return null;
                }
            }
            catch(MalformedURLException e)
            {
                e.printStackTrace();
            }
            catch(IOException e)
            {
                e.printStackTrace();
            }
            finally
            {
                if(httpURLConnection != null)
                {
                    httpURLConnection.disconnect();
                }
            }
            return imageData;
        }

        @Override
        protected void onPostExecute(byte[] bytes)
        {
            super.onPostExecute(bytes);
            if(bytes != null) {
                ImageDisplayDialogFragment imageDisplayDialogFragment = new ImageDisplayDialogFragment();
                imageDisplayDialogFragment.setTargetFragment(PlaceholderFragment.this, 0);
                Bundle bundle = new Bundle();
                bundle.putByteArray("imageData", bytes);
                imageDisplayDialogFragment.setArguments(bundle);
                imageDisplayDialogFragment.show(getActivity().getSupportFragmentManager(), ImageDisplayDialogFragment.TAG);
            } else {
                Toast.makeText(getActivity(), R.string.downloading_file_failed, Toast.LENGTH_LONG).show();
            }
        }
    }

}

And ImageDisplayDialogFragment.java:

public class ImageDisplayDialogFragment extends DialogFragment
{
    private ImageView imageView;

    public static final String TAG = ImageDisplayDialogFragment.class.getName();

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.dialogfragment_imagedisplay, container, false);
        imageView = (ImageView)view.findViewById(R.id.dialog_imagedisplay_imageview);
        byte[] imageData = getArguments().getByteArray("imageData");
        Bitmap bmp = BitmapFactory.decodeByteArray(imageData, 0, imageData.length);
        imageView.setMinimumWidth(bmp.getWidth());
        imageView.setMinimumHeight(bmp.getHeight());
        imageView.setImageBitmap(bmp);
        return view;
    }
}

So technically I am just using an AsyncTask to download the content of the URL into a byte array using commons-io, then I'm sending the byte array to the dialog fragment to display it in an ImageView.

The XML layout for the dialog fragment is this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/dialog_imagedisplay_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/longcat"
        android:layout_centerInParent="true"/>
</RelativeLayout>

However, it displays a strange cyan line artifact above the image, and the ImageView is also larger than the actual image itself.

Image:

Where could I be going wrong?

Answer 1

From your screenshot provided, and the fact that it's a DialogFragment, I can safely presume that the blue line/space is the Title Bar of the dialog (similar, but slightly different to the ActionBar). In order to disable this, there is a built-in method:

getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE);

This will disable the Title Bar of your DialogFragment.

For more information, please refer to the docs.