I have set up a gallery for my app using BaseAdapter. Here is the code I used for the gallery.
homeGallery = (Gallery) findViewById(R.id.homeimggallery);
homeGallery.setSpacing(0);
homeGallery.setSelection(0);
homeGallery.setAdapter(new AddImgAdp(this));
private class AddImgAdp extends BaseAdapter {
private int GalItemBg, temp;
private Context cont;
private View convertView1;
private ViewGroup parent1;
private Bitmap mask = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.mask);
private Bitmap whiteBorder = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.stroke);
private Bitmap blueBorder = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.strokeactive);
private Bitmap src;
private Bitmap dest;
private Canvas canvas;
private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private ImageView homeImgView;
private ImageView[] homeImgViewArr= new ImageView[arrThumbImage.length];
public AddImgAdp(Context c) {
cont = c;
TypedArray typArray = obtainStyledAttributes(styleable.GalleryTheme);
GalItemBg = typArray.getResourceId(styleable.GalleryTheme_android_galleryItemBackground, 0);
typArray.recycle();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
}
public int getCount() {
return arrThumbImage.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
homeImgView = new ImageView(cont);
try{
src = BitmapFactory.decodeResource(mContext.getResources(), arrThumbImage[position]);
dest = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
canvas = new Canvas(dest);
canvas.drawColor(Color.TRANSPARENT);
canvas.save();
canvas.translate((canvas.getWidth() - src.getWidth())>> 1, (canvas.getHeight() - src.getHeight())>> 1);
canvas.drawBitmap(src, 0, 0, null);
canvas.drawBitmap(mask, 0, 0, paint);
canvas.drawBitmap(dest, 0, 0, paint);
homeImgView.setBackgroundDrawable(new BitmapDrawable(dest));
homeImgView.setImageResource(R.drawable.stroke);
homeImgView.setScaleType(ImageView.ScaleType.FIT_XY);
homeImgViewArr[position] = homeImgView;
} catch(Exception e) {}
return homeImgView;
}
}
The gallery looks like below:
On finger movement, it is moving right to left or left to right as expected. Now I want to add some onClick action to items. If user click on any image, it will be selected and align in the middle. The following code is used for this action.
homeGallery.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView parent, View v, int position, long id) {
homeGallery.setSelection(position);
}
});
But it results wrongly. If I am selecting item no. 2, the item no. 3 got selected, although setSelection action is firing against item no 2. If I click on the right most item of the above pic, it is resulting line below:
What is the problem in my code?
I'm working with a Gallery myself, but I'm not quite sure what the problem is here, since your code is further than where I stand.
Anyways, since you click item 3?? and you get item 4 centered I can think of a few options:
-Something is wrong with the array indexes, might wanna take a log of the positions.
-Personally, I work with an array of Integer and on the getView() I just get the position which is easier than what you're doing I believe.
public ArrayList mImageIds = new ArrayList(); the array...
i.setImageResource(mImageIds.get(position)); and in getView() it's sorted.
Hope this is helpful
Related
I want to implement a drag-and-drop functionality within a recyclerview. Everything goes perfectly until I want to customize the looks of the view being dragged (not the view from which the drag event starts, I want to modify the "shadow" and keep the original view the same).
I've tried to make a bitmap out of the view being passed, but the end result is both the original item and the Shadow are modified AND the original view loses its position on the list... WTF
Here is my code:
public class ImageDragShadowBuilder extends View.DragShadowBuilder {
private Bitmap shadow;
LinearLayout linearLayout;
private ImageDragShadowBuilder() {
super();
}
public static ImageDragShadowBuilder create(Context context, View view) {
ImageDragShadowBuilder builder = new ImageDragShadowBuilder();
builder.linearLayout = (LinearLayout) view.findViewById(R.id.metric_item);
builder.linearLayout.setBackgroundResource(R.drawable.background_item_dragging);
builder.shadow = createBitmapFromView(builder.linearLayout);
return builder;
}
public View getLayout() {
return linearLayout;
}
private static Bitmap createBitmapFromView(View v) {
Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(), Bitmap.Config.ARGB_8888);
v.layout(0, 0, v.getWidth(), v.getHeight());
v.draw(new Canvas(b));
return b;
}
#Override
public void onDrawShadow(Canvas canvas) {
canvas.drawBitmap(shadow, 0, 0, null);
}
#Override
public void onProvideShadowMetrics(Point shadowSize, Point shadowTouchPoint) {
shadowSize.x = shadow.getWidth();
shadowSize.y = shadow.getHeight();
shadowTouchPoint.x = shadowSize.x / 2;
shadowTouchPoint.y = shadowSize.y / 2;
}
}
Any ideas?
I think that there are 2 problems :
Setting the background on the view attached to the RecyclerView affects the original item and the shadow
Triggering a layout changes the item's children position
Basically you can use the original view, but you should never modify it. A slightly modified version of your shadow builder could be :
public static ImageDragShadowBuilder create(Context context, View view) {
ImageDragShadowBuilder builder = new ImageDragShadowBuilder();
builder.linearLayout = (LinearLayout) view.findViewById(R.id.metric_item);
// do not change the original view
// we will draw the background directly later
// builder.linearLayout.setBackgroundResource(R.drawable.background_item_dragging);
builder.shadow = createBitmapFromView(builder.linearLayout);
return builder;
}
private static Bitmap createBitmapFromView(View v) {
Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(), Bitmap.Config.ARGB_8888);
// do not change the original view
// v.layout(0, 0, v.getWidth(), v.getHeight());
Canvas c = new Canvas(b);
// draw the background
Drawable background = v.getContext().getDrawable(R.drawable.background_item_dragging);
background.setBounds(0, 0, b.getWidth(), b.getHeight());
background.draw(c);
v.draw(c);
return b;
}
I would like to show the custom marker to google map and cluster them. The marker contains a ImageView that will shows the avatar that is downloaded from network. Here is my target:
Everythings are OK, however, when I implemented the Google Maps Android Marker Clustering Utility, the ImageView shows the same avatar (sometime two wrong avatars).
Here is my custom MarkerRender:
public class MarkerRender extends DefaultClusterRenderer<Image> {
private static final String TAG = MarkerRender.class.getSimpleName();
private IconGenerator clusterGenerator;
private IconGenerator markerGenerator;
private ImageView mImgMarkerThumbnail;
private ImageView mImgMarkerClusterThumbnail;
private TextView txtSizeCluster;
private Activity activity;
private Bitmap mask, background;
private AtomicInteger imageDownloadCounter;
private int totalItem;
private ImageSize imageSize;
public MarkerRender(FragmentActivity activity, GoogleMap mMap, ClusterManager<Image> mClusterManager) {
super(activity, mMap, mClusterManager);
this.activity = activity;
imageDownloadCounter = new AtomicInteger(0);
mask = BitmapFactory.decodeResource(activity.getResources(),
R.drawable.annotation_behind);
background = BitmapFactory.decodeResource(activity.getResources(),
R.drawable.annotation_behind);
setUpClusterIcon();
setUpMarker();
}
private void setUpClusterIcon() {
clusterGenerator = new IconGenerator(activity);
View clusterView = activity.getLayoutInflater().inflate(R.layout.custom_marker_cluster, null);
txtSizeCluster = (TextView) clusterView.findViewById(R.id.tv_number_marker);
mImgMarkerClusterThumbnail = (ImageView) clusterView.findViewById(R.id.img_load);
clusterGenerator.setContentView(clusterView);
clusterGenerator.setBackground(null);
}
private void setUpMarker() {
markerGenerator = new IconGenerator(activity);
View markerView = activity.getLayoutInflater().inflate(R.layout.custom_marker, null);
mImgMarkerThumbnail = (ImageView) markerView.findViewById(R.id.img_load);
markerGenerator.setContentView(markerView);
markerGenerator.setBackground(null);
}
#Override
protected void onBeforeClusterItemRendered(final Image image, final MarkerOptions markerOptions) {
initImageSizeIfNeed();
Bitmap icon = markerGenerator.makeIcon();
PFLogManager.INSTANCE.logE(TAG, "maken icon: " + icon.hashCode());
markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
icon.recycle();
}
#Override
protected void onClusterItemRendered(final Image image, Marker marker) {
super.onClusterItemRendered(image, marker);
ImageLoader.getInstance().loadImage(image.getMapImageLink(), imageSize,
new SimpleImageLoadingListener() {
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
Bitmap croppedBitmap = Helpers.makeCroppedBitmap(loadedImage, background, mask);
mImgMarkerThumbnail.setImageBitmap(croppedBitmap);
}
});
}
#Override
protected void onBeforeClusterRendered(Cluster<Image> cluster, MarkerOptions markerOptions) {
initImageSizeIfNeed();
Bitmap icon = clusterGenerator.makeIcon();
markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
icon.recycle();
}
#Override
protected void onClusterRendered(Cluster<Image> cluster, Marker marker) {
super.onClusterRendered(cluster, marker);
ArrayList<Image> list = new ArrayList<>(cluster.getItems());
setTextNumberMarker(cluster);
String urlFirstImage = list.get(0).getMapImageLink();
ImageLoader.getInstance().loadImage(urlFirstImage, imageSize,
new SimpleImageLoadingListener() {
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
final Bitmap croppedBitmap = Helpers.makeCroppedBitmap(loadedImage, background, mask);
mImgMarkerClusterThumbnail.setImageBitmap(croppedBitmap);
}
});
}
private void loadClusterThumbnail(String url) {
}
private void setTextNumberMarker(Cluster<Image> cluster) {
int size = cluster.getSize();
if (size > 99) {
txtSizeCluster.setText("99+");
} else {
txtSizeCluster.setText(String.valueOf(cluster.getSize()));
}
}
#Override
protected boolean shouldRenderAsCluster(Cluster cluster) {
return cluster.getSize() > 1;
}
}
I've guess that the issue is I use only one ImageView to show those avatar, so I try to use unique ImageView for each marker (by inflat new one from xml every time needed), but the result is they are all show the blank marker (just the background and there is no avatar).
I've resolved it myself. My solution is use the Marker.setIcon() method after the image is downloaded from netword or got from cache. I dont use the ImageView anymore.
So, i modified the above MarkerRender class:
The setUpClusterIcon() method:
private void setUpClusterIcon() {
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(markerWidth, markerHeight);
ImageView marker = new ImageView(activity);
marker.setLayoutParams(params);
clusterGenerator = new IconGenerator(activity);
clusterGenerator.setContentView(marker);
clusterGenerator.setBackground(null);
}
And the onClusterItemRendered() method:
protected void onClusterItemRendered(final Image image, final Marker marker) {
super.onClusterItemRendered(image, marker);
ImageLoader.getInstance().loadImage(image.getMapImageLink(), imageSize,
new SimpleImageLoadingListener() {
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
Bitmap croppedBitmap = Helpers.makeClusterItemBitmap(background, loadedImage, mask);
try {
marker.setIcon(BitmapDescriptorFactory.fromBitmap(croppedBitmap));
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
Also the makeClusterItemBitmap helper method:
public static Bitmap makeClusterItemBitmap(Bitmap background, Bitmap original, Bitmap mask) {
Bitmap croppedOriginal = makeCroppedBitmap(original, mask);
Bitmap result = Bitmap.createBitmap(background.getWidth(), background.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas mCanvas = new Canvas(result);
croppedOriginal = Bitmap.createScaledBitmap(croppedOriginal, croppedOriginal.getWidth() - 20, croppedOriginal.getHeight() - 20, true);
mCanvas.drawBitmap(background, 0, 0, null);
mCanvas.drawBitmap(croppedOriginal, 10, 10, null);
return result;
}
public static Bitmap makeCroppedBitmap(Bitmap original, Bitmap mask) {
original = Bitmap.createScaledBitmap(original, mask.getWidth(),
mask.getHeight(), true);
Bitmap result = Bitmap.createBitmap(original.getWidth(), original.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas mCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mCanvas.drawBitmap(original, 0, 0, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
return result;
}
Done, finish three nightmare researchingdays days :P
However, this approach leads new issue: the performance. Cause by drawing new bitmap with many layers, the map is laggy a bit. I'm thinking in improving this :)
Any sugguestion are appriciate :D
I'm using an adapter view for for a list view to retrieve " Publications " from Parse.com, I'm using an animation for loading image from Parse. and i'm using another function to get a circle view of the image.
all is working great, the loading is perfect but when I slide down/up on the list view the image is animated again each time I slide Up/Down. and I couldn't stop that.
here is the code of my adapter :
public class adapterview extends ArrayAdapter<Message> {
Bitmap image;
public adapterview(Context context, ArrayList<Message> Messages) {
super(context, 0, Messages);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// Get the data item for this position
final Message m = getItem(position);
// Check if an existing view is being reused, otherwise inflate the view
if (convertView == null) {
convertView = LayoutInflater.from(getContext()).inflate(R.layout.custom2, parent, false);
}
TextView message = (TextView) convertView.findViewById(R.id.message);
TextView date = (TextView) convertView.findViewById(R.id.date);
TextView user = (TextView) convertView.findViewById(R.id.user);
message.setText(m.getMessage());
user.setText(m.getUser());
new DownloadImageTask((ImageView) convertView.findViewById(R.id.imageView1))
.execute(m.getImage());
return convertView;
}
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 mIcon11 = null;
try {
InputStream in = new java.net.URL(urldisplay).openStream();
mIcon11 = BitmapFactory.decodeStream(in);
} catch (Exception e) {
Log.e("Error", e.getMessage());
e.printStackTrace();
}
return mIcon11;
}
protected void onPostExecute(Bitmap result) {
TransitionDrawable td = new TransitionDrawable(new Drawable[]{
new ColorDrawable(android.R.color.transparent),
new BitmapDrawable(getContext().getResources(), getCircleBitmap(result))
});
bmImage.setImageDrawable(td);
td.startTransition(2000);
}
}
private Bitmap getCircleBitmap(Bitmap bitmap) {
final Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Bitmap.Config.ARGB_8888);
final Canvas canvas = new Canvas(output);
final int color = Color.RED;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawOval(rectF, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
bitmap.recycle();
return output;
}
}
if you need any other information you think could be helpful for you to determine the problem just let me know
When a list needs to display a item it calls its Adapters getView() function. When you scroll and list items are no longer visible they are release and not kept in memory.
When scrolling every list item has DownloadImageTask() executed each time it becomes visible. The downloaded image from function is stored only in the ImageView of list item, so is it released from memory as soon as you scroll the list item.
The solution is to store the downloaded image then in getView() function assign the image into the ImageView.
I've just asked a question about an hour ago, while waiting for replies, I've thought maybe I can achieve what I want differently. I was thinking of changing the image but it would be better if I could perhaps overlay something over the top of complete levels in the gridview i.e a small tick icon
At the moment, when a level has been completed I am storing that with sharedpreferences
So I have a gridView layout to display images that represent levels. Let's just say for this example I have 20 levels. When one level is complete is it possible to overlay the tick icon or somehow highlight the level image. Maybe change the border of the image??
Here are the image arrays I use
int[] imageIDs = {
R.drawable.one,
R.drawable.two,
R.drawable.three,
R.drawable.four,
R.drawable.five,
R.drawable.six
etc.......
and then I have my code to set the images in gridView. Obviously there is more code in between.
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(140, 140));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(5, 5, 5, 5);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(imageIDs[position]);
return imageView;
would it be possible to do any of the above, even the border method would be fine.
Thanks for any help
When the level is open, I am using a switch case to do other tasks as well as change the item string to the name of the image it represents.
switch(question){
case 0:
iv.setImageResource(R.drawable.one);
item = imageOne;
answer1 = "one"
break;
case 1:
iv.setImageResource(R.drawable.two);
item = imageTwo;
answer1 = "two"
break;
default:
break;
}
I'm then calling that string to save a boolean with the name of image
final boolean answerStatusCase = preferences.getBoolean(item, false);
final SharedPreferences.Editor editor = preferences.edit();
Button checkAnswer = (Button) findViewById(R.id.bCheckAnswer);
checkAnswer.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
String yourAnswerCheck = yourAnswerReview.toString();
if (yourAnswerCheck.equals(answer1)) {
Toast.makeText(getBaseContext(), "That's correct", 2000).show();
editor.putBoolean(item, true);
editor.commit();
}else{
Toast.makeText(getBaseContext(), "That's incorrect", 2000).show();
}
}
});
Yeah, definitely possible. I'd say you could simply subclass ImageView and handle the drawing in the onDraw(Canvas) method. For example (and this is just a quickie, in practice I'd probably handle drawing it at different sizes and a fixed offset in dip for different canvas sizes):
public class MarkableImageView extends ImageView {
private boolean checked = true;
public MarkableImageView(Context context) {
super(context);
}
public MarkableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MarkableImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void setChecked(boolean checked) {
this.checked = checked;
invalidate();
}
public boolean isChecked() {
return checked;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(checked) {
Bitmap check = BitmapFactory.decodeResource(
getResources(), R.drawable.check);
int width = check.getWidth();
int height = check.getHeight();
int margin = 15;
int x = canvas.getWidth() - width - margin;
int y = canvas.getHeight() - height - margin;
canvas.drawBitmap(check, x, y, new Paint());
}
}
}
EDIT: Then your code would be something like:
public View getView(int position, View convertView, ViewGroup parent)
{
MarkableImageView imageView;
if (convertView == null) {
imageView = new MarkableImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(140, 140));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(5, 5, 5, 5);
} else {
imageView = (MarkableImageView) convertView;
}
imageView.setImageResource(imageIDs[position]);
imageView.setChecked(shouldBeChecked);
return imageView;
I am trying to make a listview with direction pointers in the list items just like gooing latitude:
http://www.eurodroid.com/pics/android_google_maps_latitude_update_2.png
I already have working code, but i am worried about the performance.
Everytime the orientation sensor(thats a lot) the code rebuilds the entire list with the listview adapter when i only want to rotate the direction pointer image, so it is doing to same as calling for notifyDataSetChanged.
I tried to see what happens if i only call for an setText() whenever the sensor changes, i found out that it does not rebuild the entire list then.
public class SensorWatcher{
private SensorManager mgr = null;
public float azimuth = 0;
private Main main;
SensorWatcher(Main mainContext){
main = mainContext;
mgr = (SensorManager)mainContext.getSystemService(Context.SENSOR_SERVICE);
mgr.registerListener(listener, mgr.getDefaultSensor(Sensor.TYPE_ORIENTATION), SensorManager.SENSOR_DELAY_UI);
}
private SensorEventListener listener = new SensorEventListener() {
int newAzimuth;
public void onSensorChanged(SensorEvent e) {
if (e.sensor.getType()==Sensor.TYPE_ORIENTATION) {
newAzimuth = Math.round(e.values[0]);
if(newAzimuth != azimuth){
azimuth= newAzimuth;
updateItems();
//main.adapter.notifyDataSetChanged();
}
}
}
#Override
public void onAccuracyChanged(Sensor arg0, int arg1) {
// TODO Auto-generated method stub
}
};
public void updateItems(){
ListView list = main.list;
ImageView img;
View listItem;
if(list != null){
for(int i =list.getFirstVisiblePosition();i<=list.getLastVisiblePosition();i++ ){
if(i< list.getChildCount()){
listItem=(View) list.getChildAt(i);
//listItem = list.getAdapter().getView(i, null, null);
img =(ImageView) listItem.findViewById(R.id.allowtest);
Bitmap bmp = BitmapFactory.decodeResource(main.getResources(), R.drawable.arrowup);
Matrix mtx = new Matrix();
mtx.postRotate(calculateDirection(list,i));
Bitmap rotatedBMP = Bitmap.createBitmap(bmp, 0, 0, bmp.getWidth(), bmp.getHeight(), mtx, true);
BitmapDrawable bmd = new BitmapDrawable(rotatedBMP);
img.setImageDrawable(bmd);
}
}
}
}
For making changes in the list u need to call notifyDataSetChanged.. There is no other alternative for that .