App widget listview design gets change when loading dynamic image using url android

Question

Hi I'm using widget listview. I want to load image on each widget listview item so I have used below code to load image using url

 public class ListProvider implements RemoteViewsService.RemoteViewsFactory {

private String TAG = ListProvider.class.getSimpleName();
private Context context = null;
private UserPreference userPreference;
private int appWidgetId;
private String feedsData, mLaneName, mLaneId;
private Tooteet.Collection collection;
private ArrayList<Item> mItems;

public ListProvider(Context context, Intent intent) {
    this.context = context;
    userPreference = new UserPreference(context);
    appWidgetId = intent.getIntExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, AppWidgetManager.INVALID_APPWIDGET_ID);
    feedsData = intent.getStringExtra(LargeWidgetProvider.LARGE_WIDGET_LIST_DATA);
    mLaneId = intent.getStringExtra(LargeWidgetProvider.WIDGET_LANE_ID);
    mLaneName = intent.getStringExtra(LargeWidgetProvider.WIDGET_LANE_NAME);

    if(mLaneId != null && mLaneName != null) {
        collection = new Tooteet.Collection(feedsData, mLaneId, mLaneName);
    }
    mItems = getItems(collection);
}

public ArrayList<Item> getItems(Tooteet.Collection collection) {
    ArrayList<Item> items = new ArrayList<>();
    if (collection == null) {
        return items;
    }

    int sectionFirstPosition = 0;
    int i = 0;

    for (Tooteet tooteet : collection.getItems()) {
        int type = tooteet.getTweetType();
        int viewType = VIEW_TYPE_TEXT;
        switch (type) {
            case TooteetType.TEXT:
            case TooteetType.NOTE:
                viewType = VIEW_TYPE_TEXT;
                // add text;
                break;
            case TooteetType.PICTURE:
            case TooteetType.DRAWING:
            case TooteetType.VIDEO:
                viewType = VIEW_TYPE_MEDIA;
                // add media
                break;
            case TooteetType.AUDIO:
            case TooteetType.DOCUMENT:
                //case TooteetType.EXPENSE:
                viewType = VIEW_TYPE_FILE;
                // add file
                break;
            case TooteetType.MEASURE:
                viewType = VIEW_TYPE_MEASURE;
                break;
            case TooteetType.EXPENSE:
                viewType = VIEW_TYPE_EXPENSE;
                break;
        }

        Log.d(TAG, "getItems   -- tooteet: "+tooteet);
        items.add(new Item("", false, tooteet, viewType, sectionFirstPosition, i));
        i++;
    }
    return items;
}

@Override
public int getCount() {
    Log.d(TAG, " getCount() -- mItems.size(): "+mItems.size());
    return mItems.size();
}

@Override
public long getItemId(int position) {
    return position;
}

/*
 *Similar to getView of Adapter where instead of View
 *we return RemoteViews
 *
 */
@Override
public RemoteViews getViewAt(final int position) {
    Log.d(TAG,"=============getViewAt   position=========="+position);
    RemoteViews remoteView = null;
    final Item item = mItems.get(position);

    if (item.mTooteet.getTweetType() == TooteetType.TEXT || item.mTooteet.getTweetType() == TooteetType.NOTE) {
        remoteView = new RemoteViews(context.getPackageName(), R.layout.widget_feed_list_text);
        remoteView.setImageViewResource(R.id.feed_type,R.drawable.feed_list_note);
    } else if (item.mTooteet.getTweetType() == TooteetType.PICTURE || item.mTooteet.getTweetType() == TooteetType.DRAWING  || item.mTooteet.getTweetType() == TooteetType.VIDEO) {
        remoteView = new RemoteViews(context.getPackageName(), R.layout.widget_feed_list_image);
        int drawable = R.drawable.feed_list_attachment;
        if (item.mTooteet.getTweetType() == TooteetType.PICTURE) {
            drawable = R.drawable.feed_list_picture;
        } else if (item.mTooteet.getTweetType() == TooteetType.VIDEO) {
            drawable = R.drawable.feed_list_video;
        }else if(item.mTooteet.getTweetType() == TooteetType.DRAWING){
            drawable = R.drawable.feed_list_drawing;
        }
        remoteView.setImageViewResource(R.id.feed_type,drawable);
        try {

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

        Handler uiHandler = new Handler(Looper.getMainLooper());
        final RemoteViews finalRemoteView1 = remoteView;
        uiHandler.post(new Runnable(){
            @Override
            public void run() {
                Picasso.with(context).load(item.mTooteet.getThumbUrl1()).into(
                        finalRemoteView1, R.id.feed_image,
                        new int[]{appWidgetId});
            }
        });
    }  else if (item.mTooteet.getTweetType() == TooteetType.AUDIO || item.mTooteet.getTweetType() == TooteetType.DOCUMENT) {
        remoteView = new RemoteViews(context.getPackageName(), R.layout.widget_feed_list_audio);
        int drawable;
        if (item.mTooteet.getTweetType() == TooteetType.AUDIO) {
            drawable = R.drawable.feed_list_audio;
        } else {
            drawable = FeedDocResourceHandler.getIconResForListDoc(item.mTooteet.getUniqueFileName());
        }
        remoteView.setImageViewResource(R.id.feed_type,drawable);
    } else if (item.mTooteet.getTweetType() == TooteetType.MEASURE) {
        remoteView = new RemoteViews(context.getPackageName(), R.layout.widget_feed_list_measure);
    }else if (item.mTooteet.getTweetType() == TooteetType.EXPENSE) {
        remoteView = new RemoteViews(context.getPackageName(), R.layout.widget_feed_list_expense);
    }

    remoteView.setTextViewText(R.id.feed_keywords, item.mTooteet.getKeywords());

    if(!TextUtils.isEmpty(item.mTooteet.getTooteetText())){
        remoteView.setViewVisibility(R.id.feed_text, View.VISIBLE);
        remoteView.setTextViewText(R.id.feed_text, item.mTooteet.getTooteetText());
    }else{
        remoteView.setViewVisibility(R.id.feed_text, View.GONE);
    }

    if (!item.mTooteet.isLocationEmpty()) {
        if (!TextUtils.isEmpty(item.mTooteet.getLocationString())) {
            remoteView.setViewVisibility(R.id.feed_location, View.VISIBLE);
            remoteView.setTextViewText(R.id.feed_location, item.mTooteet.getLocationString());
        } else {
            final RemoteViews finalRemoteView = remoteView;
            ReverseGeocoder.with(Constants.getLanesApp()).load(item.mTooteet, new com.kwypesoft.lanes.location.GeocodeApi.OnLocationListener() {
                @Override
                public void onReceive(String location) {
                    if (!TextUtils.isEmpty(location)) {
                        finalRemoteView.setViewVisibility(R.id.feed_location, View.VISIBLE);
                        finalRemoteView.setTextViewText(R.id.feed_location, item.mTooteet.getLocationString());
                        item.mTooteet.setLocationString(location);
                    }else{
                        finalRemoteView.setViewVisibility(R.id.feed_location, View.GONE);
                    }
                }
            });
        }
    }else{
        remoteView.setViewVisibility(R.id.feed_location, View.GONE);
    }

    final Intent fillInIntent = new Intent();
    fillInIntent.setAction(LargeWidgetProvider.ACTION_TOAST);
    final Bundle bundle = new Bundle();
    bundle.putString(LargeWidgetProvider.WIDGET_LANE_ID, mLaneId);
    bundle.putSerializable(DetailBase.FEED_DETAILS, item.mTooteet);
    fillInIntent.putExtras(bundle);
    remoteView.setOnClickFillInIntent(R.id.root, fillInIntent);
    return remoteView;
}


@Override
public RemoteViews getLoadingView() {
    return null;
}

@Override
public int getViewTypeCount() {
    return 5;
}

@Override
public boolean hasStableIds() {
    return true;
}


@Override
public void onCreate() {
}

@Override
public void onDataSetChanged() {
}

@Override
public void onDestroy() {
}

private static class Item{
    boolean isHeader;
    String header;
    public Tooteet mTooteet;
    int viewType;
    int firstPosition;
    int itemPosition;

    public Item(String header, boolean isHeader, Tooteet tooteet, int type, int firstPosition, int itemPosition) {
        this.header = header;
        this.isHeader = isHeader;
        mTooteet = tooteet;
        this.viewType = type;
        this.firstPosition = firstPosition;
        this.itemPosition = itemPosition;
    }
}

}

But this will change my widget UI design and it shows only one listview item at a time.

where i have only one appWidgetId in listview provider class which extends RemoteViewsService.RemoteViewsFactory. I do not know. What's went wrong. Could you please suggest me a idea to fix it?

Answer 1

I have fix my issue using Universal image loader like below,

public class YourViewsFactory implements RemoteViewsService.RemoteViewsFactory
{
 Map<Integer, Boolean> flags = Collections.synchronizedMap(new HashMap<Integer, Boolean>());
 Bitmap mBitmap;
 Handler handler = new Handler(Looper.getMainLooper());


  @Override
  public RemoteViews getViewAt(final int position)
{
  final RemoteViews row = new RemoteViews(ctxt.getPackageName(), R.layout.row);
  flags.put(position, false);
  handler.post(new Runnable()
  {
    @Override
    public void run()
    {
        m_imgLoader.loadImage(YOUR_IMAGE_URL, new SimpleImageLoadingListener()
        {
            @Override
            public void onLoadingStarted(String imageUri, View view)
            {
            }

            @Override
            public void onLoadingFailed(String imageUri, View view, FailReason failReason)
            {
                flags.put(position, true);
            }

            @Override
            public void onLoadingCancelled(String imageUri, View view)
            {
                flags.put(position, true);
            }

            @Override
            public void onLoadingComplete(String arg0, View arg1, Bitmap bitmap)
            {
                mBitmap = bitmap;
                flags.put(position, true);
            }
        });
    }
});

while (!flags.get(position))
{
    try
    {
        Thread.sleep(100);
    } catch (InterruptedException e)
    {
        e.printStackTrace();
    }
}
flags.put(position, false);
if (mBitmap != null)
{
    row.setImageViewBitmap(R.id.ivPoster, mBitmap);
} else
{
    row.setImageViewResource(R.id.ivPoster, R.drawable.cw);
}
mBitmap = null;
  } // End of getViewAt override


} // End of class

Please make use of it.

Answer 2

Picasso offers much more than just downloading image. It can resize the image, transform before it is displayed in ImageView. So you can resize or transform your image as follow.

Picasso.with(this)
     .load("YOUR IMAGE URL HERE")               
     .error(R.drawable.ic_error_fallback)      // optional        
     .resize(250, 200)                        // optional        
     .rotate(90)                             // optional        
     .into(imageView);

thank you.