How to highlight a border of an Image View when I clicked imageview in android

Question

I have the list of images in horizontal view in android. If I click particular Image of an Image view have to highlight on border color programmtically. How can I do that for highlighted border of an Image View. Thanks in Advance.

I want to display like this border of an ImageView when user clicked a single image of an ImageView.

CODE

horizontalimage=(LinearLayout)findViewById(R.id.linearimage);
                                               // final RelativeLayout r1=(RelativeLayout)findViewById(R.id.relative_border);
                                             //   frame=(FrameLayout)findViewById(R.id.framelayout
  if(multipleimage.length()>0) {
  for (int j = 0;j<multipleimage.length();j++)
    {
    pimages=multipleimage.getJSONObject(j);
    JSONObject oneimage=multipleimage.getJSONObject(0);
    ii= new ImageView(singleshooppingcart.this);
    multipleimages=(ImageView)findViewById(R.id.singleimage);

   ii.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
   LinearLayout.LayoutParams image = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
   image.width=100;
   image.height=1
   image.setMargins(5,0,0,0);


   final String multimgs=pimages.getString("original_res");
   String oneimg=oneimage.getString("original_res");


   String[] img2 = multimgs.split("\\.");
   String imagone=productpath + alertObj.getString("seller_id")+  '/' + img2[0] + '(' + '1' + '0' + '0' + ')' + '.' + img2[1];
   String singleiamges=productpath + alertObj.getString("seller_id")+  '/' + oneimg;
// displayimages=productpath + alertObj.getString("seller_id")+  '/' + multimgs[];
   YelloPage.imageLoader.displayImage(imagone, ii, options);
   YelloPage.imageLoader.displayImage(singleiamges, multipleimages, options);

   ii.setLayoutParams(image);
 // ii.setBackgroundResource(R.drawable.imgviewpress);
 //  ii.setBackground(R.drawable.imgviewpress);
                                                       /* GradientDrawable gd = new GradientDrawable();
     gd.setColor(R.drawable.imageviewhighlight); // Changes this drawbale to use a single color instead of a gradient
     gd.setCornerRadius(5);
                  // gd.setStroke(1, 0xFF000000);
     ii.setBackgroundDrawable(gd);*/

     horizontalimage.addView(ii);
     ii.setOnClickListener(new View.OnClickListener() {
       @Override
   public void onClick(View view) {

   Drawable highlight = getResources().getDrawable( R.drawable.imgviewpress);
   ii.setBackground(highlight);
   int indexOfImage = horizontalimage.indexOfChild(view);
   String img1=String.valueOf(indexOfImage);



// Toast.makeText(getApplicationContext(),img1,Toast.LENGTH_LONG).show();
    try {
         images = multipleimage.getJSONObject(Integer.parseInt(img1)).getString(String.valueOf("original_res"));
        } catch (JSONException e) {
         e.printStackTrace();
        }
       // Toast.makeText(getApplicationContext(),images,Toast.LENGTH_LONG).show();
      // multipleimages.setImageResource(indexOfImage);
         try 
         YelloPage.imageLoader.displayImage(productpath + alertObj.getString("seller_id")+"/"+images, multipleimages, options);
         } catch (JSONException e) {
         e.printStackTrace();
         }

        // String img1=String.valueOf(indexOfImage);
     // YelloPage.imageLoader.displayImage(displayimages[indexOfImage], multipleimages, options);
 }
             });

Answer 1

1. Create a drawable file, in the drawable folder.

highlight.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="0dp"/>
    <solid android:color="@android:color/transparent"/>
    <stroke android:color="#FFC830"
        android:width="3dp"/>
</shape>

2. ImageView in your activity

   <ImageView
   android:id="@+id/iv_test"
   android:layout_width="150dp"
   android:layout_height="150dp"
   android:padding="3dp"
   android:src="@drawable/yourImageName"
   android:tint="@color/colorAccent"/>
   

Here padding is important.

3. Inside activity code

   imv.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
           Drawable highlight = getResources().getDrawable( R.drawable.highlight);
           imv.setBackground(highlight);
           //
           //Do your other stuff here.
           //
       }
   });
   

If you want to remove the background, use this code :

imv.setBackground(null);

In the activity xml, the padding attribute is important because the highlight background will take the same size of the imageview. So if there is any image in the imageview we will not be able to see the background/highlight. So the padding attribute pushes the image a bit inwards, letting the highlight to be seen.

Output

UPDATE

Inside you code implement View.OnClickListener.

And change your onClick() method

@Override
public void onClick(View v) {
    Drawable highlight = getResources().getDrawable( R.drawable.highlight );
    for (int j=0;j<ii.length;j++)
    {
        if (ii[j].getBackground()!=null) {
            ii[j].setBackground(null);
        }
    }
    v.setBackground(highlight);

    //
    //Do what you want to do when clicking on the imageview
    //
}

And right now you are using

ii=new ImageView(singleshooppingcart.this);

make it an array and use it like this

ii[i]=new ImageView(singleshooppingcart.this);

Change this

ii.setOnClickListener(new View.OnClickListener() {
   @Override
 public void onClick(View view) {

 Drawable highlight = getResources().getDrawable(R.drawable.imgviewpress);
ii.setBackground(highlight);

to

    ii[i].setOnClickListener(this);

Here i is the looping variable.

This way you will have objects for all your imageViews. and all these imageviews will have a ClickEvent which we have set.

Answer 2

put image in a RelativeLayout and add a margin of 1dp and make invisible on start. Then

imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        relativeLayout.SetVisibility(View.VISIBLE)
    }
});