I created simple gridview application. Now I wish to create glow effect for my images, please help me how to create glow effect for my gird view images? if anyone know please give me some idea and sample code....
This is my present screenshot:
And this is my expected glow effect screenshot:
source code:
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello" />
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center" />
</LinearLayout>
GridviewExampleActivity.java
public class GridviewExampleActivity extends Activity
{
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
}
public class ImageAdapter extends BaseAdapter{
private Context mContext;
public ImageAdapter(Context c){
mContext = c;
}
public int getCount()
{
return mThumbIds.length;
}
public Object getItem(int position)
{
return null;
}
public long getItemId(int position)
{
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null)
{
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
}
else
{
imageView = (ImageView) convertView;
}
imageView.setImageResource(R.drawable.icon);
return imageView;
}
private Integer[] mThumbIds = {
R.drawable.icon, R.drawable.icon,
R.drawable.icon, R.drawable.icon,
R.drawable.icon, R.drawable.icon,
R.drawable.icon, R.drawable.icon,
R.drawable.icon, R.drawable.icon};
}
}
glow effect screen shot:
![enter image description here][3]
You can use the following code to make each image in your custom view glow
the getView() function of the image adapter should be like this:
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null)
{
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
}
else
{
imageView = (ImageView) convertView;
Bitmap Image=BitmapFactory.decodeResource(mContext.getResources(),mThumbIds[position]);
Image=Image.copy(Bitmap.Config.ARGB_8888,true);
Paint paint=new Paint();
paint.setDither(true);
paint.setFilterBitmap(true);
Bitmap glow=BitmapFactory.decodeResource(mContext.getResources(), R.drawable.glow_image);
Bitmap bitmap=Bitmap.createBitmap(Image.getWidth(),Image.getHeight(), Config.ARGB_8888);
Canvas canvas=new Canvas(bitmap);
canvas.drawBitmap(glow, new Rect(0,0,glow.getWidth(),glow.getHeight()), new Rect(0,0,Image.getWidth(),Image.getHeight()),paint);
canvas.drawBitmap(Image, new Rect(0,0,Image.getWidth(),Image.getHeight()), new Rect(0+5,0+5,Image.getWidth()-5,Image.getHeight()-5),paint);
imageView.setImageBitmap(bitmap);
return imageView;
}
R.drawable.glow_image is the png image you can use as the grow effect image
Glow.png
check this link...its a custom selector
or simply u can use this
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/pressedback" />
<item android:state_focused="true" android:drawable="#drawable/focusedback" />
<item android:state_selected="true" android:drawable="#drawable/focusedback" />
</selector>
Related
I am trying to set a 3:2 ratio for a gridview (IE 300 pixels by 200 per cell). Here is my image adapter:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
// if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = {
R.drawable.image1, R.drawable.image2, R.drawable.image3,
};
}
I've tried adjusting the imageView.setLayoutParams(new GridView.LayoutParams(200, 200)); width parameter to 300 but it results in overlapping. Here is my XML File:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
Weird overlapping:
Hi there you can try like this from your Activity :
ViewGroup.LayoutParams layoutParams = gridview.getLayoutParams();
layoutParams.height = 200;
layoutParams.width = 300;
gridview.setLayoutParams(layoutParams);
or
int final width = 300;
int final height = 200;
ViewGroup.LayoutParams lauoutParams = new ViewGroup.LayoutParams(width,height);
gridView.setLayoutParams(lp);
This might help.
Discovered this library: AsymetricGridView
The first image is being overlapped by the second image in the grid. I want first image to be bigger than other images.First image should match the width of the device screen.
This is my xml
<GridView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/grid"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:numColumns="auto_fit"
android:columnWidth="90dp"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:gravity="center"
android:stretchMode="columnWidth"
android:paddingTop="16dp"
/>
This is my imageadapter code
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
MainActivity mainActivity=new MainActivity();
WindowManager wm = (WindowManager) mContext
.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int imgSize = 0;
if (convertView == null) {
// if it's not recycled, initialize some attributes
if(position!=0)
{
imgSize=200;
}
else
{
imgSize=size.x;
}
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(imgSize, 200));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
Screen Shot of Second image overlapping the first one
I'm having a problem of displaying ImageViews with the correct size. Almost all the posts that I've read through involves ImageViews that are created in the layout file. However in my case, I'm creating ImageViews programmatically.
I'm trying to display all images from a particular folder located in the storage. The bitmaps retrieved will be placed in ImageViews which are contained within a GridView.
Here's my code:
//pass an array containing all images paths to adapter
imageGrid.setAdapter(new GridViewAdapter(getActivity(), FilePathStrings));
part of GridVewAdapter code:
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if(convertView == null){
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setPadding(5, 5, 5, 5);
imageView.setAdjustViewBounds(true);
}else{
imageView = (ImageView) convertView;
}
imageView.setTag(filepath[position]);
new LoadImages(imageView).execute();
return imageView;
}
AsyncTask to retrieve bitmaps:
private class LoadImages extends AsyncTask<Object, Void, Bitmap> {
private ImageView imgView;
private String path;
private LoadImages(ImageView imgView) {
this.imgView = imgView;
this.path = imgView.getTag().toString();
}
#Override
protected Bitmap doInBackground(Object... params) {
Bitmap bitmap = null;
BitmapFactory.Options bmOptions = new BitmapFactory.Options();
bmOptions.inJustDecodeBounds = false;
bmOptions.inSampleSize = 6;
bitmap = BitmapFactory.decodeFile(path, bmOptions);
try {
int dimension = getSquareCropDimensionForBitmap(bitmap);
bitmap = ThumbnailUtils.extractThumbnail(bitmap, dimension, dimension);
}catch (Exception e) {
e.printStackTrace();
}
return bitmap;
}
#Override
protected void onPostExecute(Bitmap result) {
if (!imgView.getTag().toString().equals(path)) {
return;
}
if(result != null && imgView != null){
imgView.setVisibility(View.VISIBLE);
imgView.setImageBitmap(result);
}else{
imgView.setVisibility(View.GONE);
}
}
}
Method to get equal dimensions so bitmaps will be displayed as squares:
private int getSquareCropDimensionForBitmap(Bitmap bitmap) {
int dimension;
//If the bitmap is wider than it is height then use the height as the square crop dimension
if (bitmap.getWidth() >= bitmap.getHeight()) {
dimension = bitmap.getHeight();
}
//If the bitmap is taller than it is width use the width as the square crop dimension
else {
dimension = bitmap.getWidth();
}
return dimension;
}
GridView in the layout file:
<GridView
android:id="#+id/imageGridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnWidth="30dp"
android:numColumns="5"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:layout_marginTop="30dp">
</GridView>
The result that I've gotten:
The circled thin "lines" are actually the ImageViews displayed.
Any help is very much appreciated. Thank you in advance!
<GridView
android:id="#+id/imageGridView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:layout_marginTop="30dp">
I have other views above the GridView so I can't set its height to fill_parent/match_parent in the .xml file as it will affect the views above.
The solution to my problem is to set GridView's height and width programmatically.
Replace:
imageView.setLayoutParams(new GridView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
With this:
imageView.setLayoutParams(new GridView.LayoutParams(int height, int width));
Explanation:
Grid View doc
Anyone who has a better answer, please post it :)
I follow this guide to insert images in a gallery using grid view: http://developer.android.com/guide/topics/ui/layout/gridview.html
I edited the imageadapter code as follow:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setId(R.id.img_gallery);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private int[] mThumbIds = {R.drawable.itinerario1_1, R.drawable.itinerario1_1, R.drawable.itinerario1_1, R.drawable.itinerario1_1, R.drawable.itinerario1_1, R.drawable.itinerario1_1, R.drawable.itinerario1_1, R.drawable.itinerario1_1, R.drawable.itinerario1_1, R.drawable.itinerario1_1};
}
and this is img_gallery xml
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/img_gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:adjustViewBounds="true"/>
and this is the main layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:fadingEdge="none">
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:stretchMode="columnWidth"
android:numColumns="2"
android:gravity="center"
android:padding="5dp"
/>
the problem is that when i tun the app, imageview has a lot of top and bottom padding. I also tried to set it to 0 in the xml but it doesn't change.
You are setting the padding on runtime-
remove this line-
imageView.setPadding(8, 8, 8, 8);
imageView.setPadding(0, 0, 0, 0); in Base Adapter.
The xml file loads first, than the adapter. That means that if you set the padding to 0 in your xml, they will still be overriden from your adapter class. Try setting them to 0, or better yet, remove that line completely. It should work.
I have implemented GalleryView. I want to display a border image on selected image from Gallery.
Gallery ga = (Gallery)findViewById(R.id.Gallery01);
ga.setAdapter(new ImageAdapter(this));//, android.R.layout.simple_list_item_1, items));
imageView = (ImageView)findViewById(R.id.ImageView01);
ga.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> adapter, View view, int location,
long arg3) {
imageView.setImageResource(items.get(location));
final ImageView iv = (ImageView) adapter.getSelectedView();
iv.setBackgroundResource(R.drawable.large_button_sel_liner);
}
});
And my Adapter class
class ImageAdapter1 extends ArrayAdapter<Integer> {
private Context ctx;
private List<Integer> items;
public ImageAdapter1(Context context, int textViewResourceId,
List<Integer> objects) {
super(context, textViewResourceId, objects);
items = objects;
ctx = context;
}
#Override
public int getCount() {
return items.size();
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
final ImageView iv = new ImageView(ctx);
iv.setImageResource(items.get(position));
iv.setScaleType(ImageView.ScaleType.FIT_XY);
iv.setLayoutParams(new Gallery.LayoutParams(150,120));
return iv;
}
}!
It is totally mashed up.
I have got the solution using Selector.
I have created galleryselector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/large_button_sel_liner"/>
<item android:drawable="#android:color/transparent" /></selector>
and set it in Adapter class in getView():
imageView.setBackgroundDrawable(getResources().getDrawable(R.drawable.galleryselector));
Inspired by Nishant Shan's reply, I elaborate my own solution:
First of all, create a border resource: common_galleryborder_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners
android:radius="2dp"
/>
<solid
android:color="#android:color/transparent"
/>
<stroke
android:width="2dp"
android:color="#android:color/black"
/>
</shape>
Then create a selector that use this shape: common_gallerycurrentitem_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_selected="true"
android:drawable="#drawable/common_galleryborder_shape"
/>
<item
android:drawable="#android:color/transparent"
/>
</selector>
And, finally, add this code to your adapter class:
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(mContext);
Integer drawableId = items.get(position);
Drawable drawable = ctx.getResources().getDrawable(drawableId);
int width = drawable.getIntrinsicWidth();
int height = drawable.getIntrinsicHeight();
imageView.setImageResource(drawableId);
//sets image size to same size of true image
imageView.setLayoutParams(new Gallery.LayoutParams(width, height));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
//add a padding for the border
int padding = dipToPx(mContext, 2);
imageView.setPadding(padding, padding, padding, padding);
imageView.setBackgroundResource(R.drawable.common_gallerycurrentitem_selector);
return imageView;
}
// ----------------------------------------- Private Methods
/**
* Convert a dimension in dip to px
* #param context
* #param dip
* #return px
*/
private int dipToPx(Context context, int dip) {
return (int) (dip * context.getResources().getDisplayMetrics().density);
}
In addition, is also possible set Gallery.setSpacing(int) value to avoid overlapping images inside the gallery.
What has worked for me in the past is to create an Integer that tracks the click selection, and then apply the background in the getView() method if the position matches the click selection. So (roughly):
Integer selectedLocation = null;
#Override
public void onItemClick(AdapterView<?> adapter, View view, int location,
long arg3) {
selectedLocation = location;
}
and then in the Adapter View:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
final ImageView iv = new ImageView(ctx);
iv.setImageResource(items.get(position));
iv.setScaleType(ImageView.ScaleType.FIT_XY);
iv.setLayoutParams(new Gallery.LayoutParams(150,120));
if(position == selectedLocation){
iv.setBackgroundResource(R.drawable.large_button_sel_liner);
}else{
iv.setBackgroundResource(0);
}
return iv;
}
You might have to do a bit more work to track the right selection (the click location and the position might not be the right variables to use), but otherwise something similar should work.