Show GridView Items in a Frame

Question

How to show grid view item in a frame, I am using GridView in my application and now i have to show each and every grid item within a frame

I am using black color as background, and want to use frame of some other color (like:white), so how can i use white as frame of griditems

    <ImageView
        android:id="@+id/imageItem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:background="@null"
        android:contentDescription="@null"
        />

`setImageBackground` for Frame and `setImageResource` for your Image else you can use masking Effect. — SilentKiller, Oct 14 '14 at 05:14
@SilentKiller why i am not getting setImageBackground option, i am using already using setImageResource like this: viewHolder.imageview.setImageResource(R.drawable.ic_launcher); — Sophie, Oct 14 '14 at 05:19
@SilentKiller i tried this: android:background="@color/white" showing when image has not downloaded, but not getting white in corner of grid images - resolution (W-320xH-180) — Sophie, Oct 14 '14 at 05:26

score 3 · Accepted Answer · edited May 23 '17 at 11:58

For showing image in frame there are two ways to do so

Set Background Image or Color to show image is in Frame
Set Masking

For setting BackGround :

<ImageView
    android:id = "@+id/imageItem"
    android:layout_width = "match_parent"
    android:layout_height = "wrap_content"
    android:adjustViewBounds = "true"
    android:scaleType = "center"
    android:padding = "5dp"
    android:background = "#FFFFFF"
    android:contentDescription = "@null" />

For Masking check following code :

ImageView mImageView= (ImageView)findViewById(R.id.imageview_id);
Bitmap original = BitmapFactory.decodeResource(getResources(),R.drawable.content_image);
Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.mask);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), 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);
mImageView.setImageBitmap(result);
mImageView.setScaleType(ScaleType.CENTER);
mImageView.setBackgroundResource(R.drawable.background_frame);

If you want to show color as background then first option will be much better and efficient too.

thank you so much, such an easy and best way, use padding...may i know what to use if i want to show red color in place of white when user tap on grid item ? — Sophie, Oct 14 '14 at 05:47
you just need to change backGround color of ImageView from `#FFFFFF` to `#FF0000` its a combination of RGB #RRGGBB. — SilentKiller, Oct 14 '14 at 05:49
no i am asking how to change frame color when user do tap on griditem ? — Sophie, Oct 14 '14 at 06:01
@Sophie i am saying same thing as currently White color is the frame color so you just need to change Color to Red. — SilentKiller, Oct 14 '14 at 06:02

score 0 · Answer 2 · edited May 23 '17 at 11:51

Save a XML file in your Drawable folder with this code :

<?xml version="1.0" encoding="utf-8"?>

<item android:state_enabled="true"><shape>
        <solid android:color="#FFFFFF" />

        <stroke android:width="1dp" android:color="#CACACA" />

        <corners android:radius="5dp" />

 <!--       <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" />-->
    </shape></item>

Now use this as a background of your image view and set your images as background resources. Source

<ImageView
        android:id="@+id/imageItem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:background="@drawable/your_xml_name"
        android:contentDescription="@null"
        />

Show GridView Items in a Frame

2 Answers2