Glide: how to load image in appwidget listview use glide

[zaxcler]

Glide Version 3.6.1
okhttp3.0

public RemoteViews getViewAt(int position) {
 remoteViews=new RemoteViews(mContext.getPackageName(), R.layout.news_item_default);
 handler.post(new Runnable() {
                @Override
                public void run() {
                    AppWidgetManager mAppWidgetManager=                    AppWidgetManager.getInstance(getApplicationContext());
                    ComponentName provider = new ComponentName(getApplicationContext(), DesktopWidget.class);
                    int[] appIds=mAppWidgetManager.getAppWidgetIds(provider);
                    AppWidgetTarget appWidgetTarget=new AppWidgetTarget( getApplicationContext(), remoteViews, R.id.newsimage,appIds );
                    Glide.with(mContext).load(CommonUtils.getURL(news.getSmalltitlepic())).asBitmap().into(appWidgetTarget);
                }
            });
}

Log:

11-10 23:04:33.104 19799-19799/com.news.shangyounews E/RemoteViews: ANR Warning,RemoteViews can only be used once ,if not ,it may cause ANR in hosts such as Laucher,SystemUI. keys for search <ANR Exception MSG   History>
11-10 23:04:33.107 19799-19799/com.news.shangyounews E/RemoteViews: ANR Warning,RemoteViews can only be used once ,if not ,it may cause ANR in hosts such as Laucher,SystemUI. keys for search <ANR Exception MSG   History>
11-10 23:04:33.114 19799-19799/com.news.shangyounews E/RemoteViews: ANR Warning,RemoteViews can only be used once ,if not ,it may cause ANR in hosts such as Laucher,SystemUI. keys for search <ANR Exception MSG   History>

olny on item shown and the click action not work too

[TWiStErRob]

I think you may need Map<Integer, RemoteViews> instead of remoteViews field, but not sure. I think you may not do async loading into those remote views.
@TomasValenta did you use Glide to populate list widgets?

[TomasValenta]

Hello Róbert,

sorry, but no. I am still using only one remote view right now. But in the future I will also implement it ;-)

[TWiStErRob]

@zaxcler AppWidgetTarget was designed for a single image load into a widget.

getViewAt states:

Note: expensive tasks can be safely performed synchronously within this method, and a loading view will be displayed in the interim.

So the example in #1405 may work in most cases, read the comments for potential workarounds for that specific issue.

@eygraber @ywwynm can you help out with a working solution?

[eygraber]

I'm not so familiar with Glide, but if there's a way to make a synchronous request that will result in a Bitmap I'd use that, and call RemoteViews.setImageViewBitmap.

[zaxcler]

Do you have any example,I'm not so sure,when i do this, the item always show the default item ‘longing...’
@eygraber

[eygraber]

I wrote this before glide was released (I think), which is why I'm not using it. If there's a way to make a Glide request synchronously I'd use that instead of my getThumbnail method

  @Override
  public RemoteViews getViewAt(int i) {
    if (context == null) {
      return null;
    }

    RemoteViews rv = new RemoteViews(context.getPackageName(), R.layout.widget_contact_grid_item_layout);
    if (i >= contacts.size()) {
      rv.setTextViewText(R.id.contact_grid_item_name, context.getString(R.string.widget_add));
      rv.setImageViewResource(R.id.contact_grid_item_background, R.drawable.ic_action_content_new);

      Intent fillInIntent = new Intent();
      fillInIntent.putExtra(FavoriteContactsGridWidget.CONTACT_LOOKUP_KEY_EXTRA, (String) null);
      rv.setOnClickFillInIntent(R.id.contact_grid_item_container, fillInIntent);
    } else {
      FavoriteContactEntry contact = contacts.get(i);

      rv.setTextViewText(R.id.contact_grid_item_name, contact.getDisplayName());

      if (contact.getImage() == null) {
        rv.setImageViewResource(R.id.contact_grid_item_background, R.drawable.default_contact_icon);
      } else {
        Bitmap bitmap = null;
        try {
          if (maxAllowedBitmapSizePerContact == -1) {
            bitmap = MediaStore.Images.Media.getBitmap(context.getContentResolver(), Uri.parse(contacts.get(i).getImage()));
          }
          else {
            bitmap = getThumbnail(context, contact.getImage());
          }

          if(bitmap == null) {
            rv.setImageViewResource(R.id.contact_grid_item_background, R.drawable.default_contact_icon);
          }
          else {
            rv.setImageViewBitmap(R.id.contact_grid_item_background, bitmap);
          }
        } catch (FileNotFoundException fnfe) {
          Logger.e("Couldn't resolve the contact's image uri");
          rv.setImageViewResource(R.id.contact_grid_item_background, R.drawable.default_contact_icon);
        } catch (Throwable e) {
          if (bitmap != null) {
            bitmap.recycle();
          }
          Logger.e("There was an error getting the thumbnail bitmap", e);
          rv.setImageViewResource(R.id.contact_grid_item_background, R.drawable.default_contact_icon);
        }
      }

      Bundle extras = new Bundle();
      extras.putString(FavoriteContactsGridWidget.CONTACT_LOOKUP_KEY_EXTRA, contact.getLookupKey());
      Intent fillInIntent = new Intent();
      fillInIntent.putExtras(extras);
      rv.setOnClickFillInIntent(R.id.contact_grid_item_container, fillInIntent);
    }

    return rv;
  }

  private Bitmap getThumbnail(Context context, String uriStr) throws Throwable {
    Bitmap b = imageLoader.getScaledBitmap(context, uriStr, R.drawable.default_contact_icon, maxAllowedBitmapSizePerContact);
    return b;
  }

[ywwynm]

We can use Glide to load images into ListView in appwidget:

private static void loadImageForListItem(
            Context context, String pathName, RemoteViews remoteViews) {
    int width  = getImageWidth();
    int height = getImageHeight();
    BitmapRequestBuilder builder =
            Glide.with(context)
                    .load(pathName)
                    .asBitmap()
                    .centerCrop();
    FutureTarget futureTarget = builder.into(width, height);
    try {
        remoteViews.setImageViewBitmap(R.id.iv_banner, (Bitmap) futureTarget.get());
    } catch (InterruptedException | ExecutionException e) {
        e.printStackTrace();
    }
}

Well, according to my experience, you should specify image's width and height before loading it. But that's not a hard problem, you don't need to fill the RemoteView very accurately, a little larger will not make too bad difference.

There is another thing you must pay attention to: if you're going to use this method, you should call Glide.with(context) once at another place instead of calling it in this method for the first time in your app lifecycle. For more details, you can visit https://github.com/bumptech/glide/issues/1405

[stale[bot]]

This issue has been automatically marked as stale because it has not had activity in the last seven days. It will be closed if no further activity occurs within the next seven days. Thank you for your contributions.