Collapsing Toolbar mit Bild von URL?

Question

Ich habe eine kollabierende Symbolleiste mit Bild für meine Android-App. Es funktioniert perfekt mit dem Bild von Drawable. Mein Problem ist, wenn ich Bild von einer URL abrufe und es derselben Bildansicht zuordne. Die reduzierende Symbolleiste funktioniert nicht. Titel weg, kann nicht scrollen, und kein Bild.

Hier sind meine Screenshots.

Bild 1 Bild von ziehbar und Bild 2 Bild abgerufen von URL

Aktivität:

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(); 

       } 
      } 
     } 

    } 

kein Fehler in Logcat auch geworfen wird ... Bitte hilf mir dabei.

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

Verwenden Picasso Bibliothek und das Bitmap zu erhalten verwenden von AsyncTask

Bitmap image = Picasso.with(getAppilicationContext()).load(YourString).get(); 

dann in onPostExecute Set Bild collapsingToolbar

Oder verwenden Sie diesen AsyncTask

private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> { 
    ImageView bmImage; 

    public DownloadImageTask(ImageView bmImage) { 
     this.bmImage = bmImage; 
    } 

    protected Bitmap doInBackground(String... urls) { 
     String urldisplay = urls[0]; 
     Bitmap mIcon = null; 
     try { 
      InputStream in = new java.net.URL(urldisplay).openStream(); 
      mIcon = BitmapFactory.decodeStream(in); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
     return mIcon; 
    } 

    protected void onPostExecute(Bitmap result) { 
     bmImage.setImageBitmap(result); 
} 

Und starten Aufgabe mit:

new DownloadImageTask(YourImageView) 
    .execute(YourURLString); 

Answer 2

Mit Android Studio 1.5 und höher können Sie eine Scroll-Vorlage erstellen. dann die Imageview, um das Layout hinzufügen

<?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> 

Dann picasso es in Bild zu laden verwenden

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); 
    } 
} 

die picasso Bibliothek zu Ihren gradle Abhängigkeiten hinzufügen sowie

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

Answer 3

Ich denke, das Problem mit Ihrem ist, dass, während Sie keine Zeichnung auf Ihre Bildansicht geben, dann die Ansicht mit der anfänglichen Höhe von 0dp geladen wird, weil Sie wrap_content in Höhe angegeben haben t param. Jetzt, auch nachdem das Bild in der Bildansicht geladen wurde, hat es, da die Ansicht nicht ungültig gemacht wurde, immer noch 0dp Höhe. Du siehst also das Bild nicht.

Lösungen u versuchen:

1) Geben Sie Ihr Bild sagen eine anfängliches height von sehen 200dp und es wird wie ein Zauber funktionieren.

2) Wenn Sie height als wrap_content verwenden möchten, können Sie auch die Ansicht ungültig machen (dh sie erneut auf dem Bildschirm mit neuen Parametern zeichnen), versuchen Sie dies: imageView.invalidate();. Geben Sie dies hier in diesem 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(); 

      } 
     }