Collapsing Toolbar with image from url?

Question

I did a collapsing toolbar with image for my android app. It works perfectly with the image from drawable. My problem is when I retrieve image from a URL and assign it to the same image view. The collapsing toolbar is not working. Titles gone, Can't scroll, and no image.

Here is my screenshots.

Picture 1 is image from drawable and Picture 2 is image retrieved from URL

Activity:

    import android.app.ProgressDialog;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.drawable.BitmapDrawable;
    import android.os.AsyncTask;
    import android.os.Build;
    import android.os.Bundle;
    import android.support.design.widget.CollapsingToolbarLayout;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.graphics.Palette;
    import android.support.v7.widget.Toolbar;
    import android.widget.ImageView;

    import android.widget.Toast;

    import java.io.InputStream;
    import java.net.URL;


    public class RecipeDisplay extends AppCompatActivity {
        CollapsingToolbarLayout collapsingToolbarLayout;
        ImageView image;
        ImageView img;
        Bitmap bitmap;
        ProgressDialog pDialog;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_recipe_display);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);

            //default header image for toolbar
            image = (ImageView) findViewById(R.id.image);
            image.setImageResource(R.drawable.header);

            //Loading image using async task
            new LoadImage().execute("http://www.twinaccommodation.com/media/313799/pub_food_281x281.jpg");

            collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbarLayout.setTitle("Collapsing");
    collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(android.R.color.transparent));

       }

       //async task
       private class LoadImage extends AsyncTask<String, String, Bitmap> {
            @Override
            protected void onPreExecute() {
               super.onPreExecute();
               pDialog = new ProgressDialog(RecipeDisplay.this);
               pDialog.setMessage("Loading....");
               pDialog.show();

            }

            protected Bitmap doInBackground(String... args) {
                try {
                    bitmap = BitmapFactory.decodeStream((InputStream) new URL(args[0]).getContent());

                } catch (Exception e) {
                    e.printStackTrace();
                }
                return bitmap;
            }

            protected void onPostExecute(Bitmap img) {

                if (img != null) {
                    image.setImageBitmap(img);
                    pDialog.dismiss();

                } else {

                    pDialog.dismiss();
                    Toast.makeText(RecipeDisplay.this, "Error retrieving image", Toast.LENGTH_SHORT).show();

                }
            }
        }

    }

No error is thrown in LOGCAT too... Please Help me on this.

EDIT : XML Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">

        <ImageView
            android:id="@+id/image"
            android:src="@drawable/pic"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        app:cardElevation="6dp"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="30dp"
                android:text="Lorem Ipsum..."
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    app:layout_anchor="@id/app_bar_layout"
    style="@style/fab"
    app:theme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_anchorGravity="bottom|right|end" />

Answer 1

With android studio 1.5 and above, you can create a scrolling template. Then add the imageview to the layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context="com.codephillip.app.MyActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:fitsSystemWindows="true"
        android:layout_height="@dimen/app_bar_height"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <ImageView
                android:id="@+id/image_id"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/placeholder_image"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_stretch_detail"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:src="@drawable/ic_share_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>

Then use picasso to load it into image

public class MyActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ImageView toolbarImage = (ImageView) findViewById(R.id.image_id);

        String url = "" //place your url here
        picassoLoader(this, toolbarImage, url);
     }

        public void picassoLoader(Context context, ImageView imageView, String url){
        Log.d("PICASSO", "loading image");
        Picasso.with(context)
                .load(url)
                        //.resize(30,30)
                .placeholder(R.drawable.placeholder_image)
                .error(R.drawable.placeholder_image)
                .into(imageView);
    }
}

add the picasso library to your gradle dependencies as well

compile 'com.squareup.picasso:picasso:2.5.2'

Answer 2

I think the problem with yours is that, while you give no drawable to your image view then the view loads up with initial height of 0dp, because you have given wrap_content in height param. Now even after the image gets loaded in image view, since the view hasn't been invalidated so it still has 0dp height. So you don't see the image.

solutions u can try:

1) Give your image view an initial height of say 200dp and it will work like a charm.

2) If you want to use height as wrap_content then you might as well invalidate the view ( meaning draw it again on the screen with new params), try this: imageView.invalidate();. Type this here in this block:

 protected void onPostExecute(Bitmap img) {

            if (img != null) {
                image.setImageBitmap(img);
                pDialog.dismiss();
                image.invalidate();

            } else {

                pDialog.dismiss();
                Toast.makeText(RecipeDisplay.this, "Error retrieving image", Toast.LENGTH_SHORT).show();

            }
        }