Collapsing Toolbar con la imagen de url?
Hice una barra de herramientas que se derrumbaba con la imagen para mi androide app. Funciona perfectamente con la imagen de dibujable. Mi problema es cuando recupero la imagen de una URL y la asigno a la misma vista de la imagen. La barra de herramientas de colapso no funciona. Títulos desaparecidos, No se puede desplazar y no hay imagen.
Aquí están mis capturas de pantalla.
- CollapsingToolbarLayout y posición de botón de acción flotante dentro de CollapsingToolbarLayout
- Problema con CoordinatorLayout y ImageView que ajusta el ancho mientras se desplaza
- Error al inflar la clase CollapsingToolbarLayout
- Cómo eliminar programaticamente un comportamiento de diseño de mi NestedScrollView?
- CollapsingToolbarLayout | Problemas de desplazamiento y diseño 2
La imagen 1 es la imagen de dibujable y la imagen 2 es la imagen recuperada de la URL
Actividad:
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(); } } } }
Ningún error es lanzado en LOGCAT también … Por favor, ayúdame en esto.
EDIT: Diseño XML
<?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" />
- Cómo ocultar la barra de herramientas después de colapsar mientras que recyclerView desplazamiento hacia abajo
- PreferenceFragment no scroll en CollapsingToolbarLayout
- CollapsingToolbarLayout | Aspectos de desplazamiento y diseño
- CollapsingToolbarLayout ImageView no se puede desplazar
- Vista de desplazamiento superpuesta con AppBarLayout
- Colapsar el diseño de la barra de herramientas con pestañas, contraer la barra de herramientas sólo cuando las pestañas alcancen la barra de herramientas en android
- Detener desplazamiento en CollapsingToolbarLayout para que no se derrumbe completamente
- ¿Cómo cambiar la propiedad y el tamaño de CollapsingToolbarLayout?
Con android studio 1.5 y superior, puede crear una plantilla de desplazamiento. A continuación, agregue la vista de imagen al diseño
<?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>
Luego usa picasso para cargarlo en la imagen
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); } }
Agregue la biblioteca picasso a sus dependencias gradle así
compile 'com.squareup.picasso:picasso:2.5.2'
Creo que el problema con el suyo es que, mientras que usted no da ningún dibujable a su opinión de la imagen entonces la visión carga para arriba con la altura inicial de 0dp, porque usted ha dado wrap_content
en wrap_content
de la altura. Ahora incluso después de que la imagen se cargue en la vista de imagen, ya que la vista no ha sido invalidada por lo que todavía tiene 0dp de altura. Así que no ves la imagen.
Soluciones u puede intentar:
1) Dé a su opinión de la imagen una height
inicial de diga 200dp
y trabajará como un encanto.
2) Si quieres usar height como wrap_content entonces podrías invalidar la vista (es decir, dibujarla de nuevo en la pantalla con nuevos parámetros), intenta esto: imageView.invalidate();
. Escriba esto aquí en este bloque:
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(); } }
Utilice la biblioteca de Picasso y utilice esto para obtener el mapa de bits de AsyncTask
Bitmap image = Picasso.with(getAppilicationContext()).load(YourString).get();
A continuación, en onPostExecute
establecer la imagen a onPostExecute
O utilice este 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); }
Y comenzar la tarea con:
new DownloadImageTask(YourImageView) .execute(YourURLString);
- Hacer que los botones se muevan automáticamente alrededor de la pantalla
- ¿Cómo obtener el número correcto de bytes enviados y recibidos en TrafficStats?