How to set an image onClick from gridview?

Question

I'm able to show the ID of the item that gets clicked in a gridview, however what I want to achieve is that when I click on any of the images inside the Gridview it appears as an image, also, when I click on any of the images using the below code it just shows the ID, however when I try to display the image itself the app crashes and comes up with LinearLayout cannot be casted to ImageView

gifts_layout_2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fragment_history_menu_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:gravity="center"
android:orientation="vertical"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">


<ImageView
    android:id="@+id/close"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_gravity="right"
    android:layout_marginRight="15dp"
    android:layout_marginTop="15dp"
    android:src="@drawable/close" />


<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:text="Smiles"
    android:textColor="#000000"
    android:textSize="17sp"
    android:textStyle="bold"
    android:layout_gravity="left"
    android:layout_marginLeft="15dp"/>


<GridView
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_marginTop="10dp"
    android:numColumns="4"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:gravity="center|center_horizontal|center_vertical"
    android:columnWidth="100dp"
    android:stretchMode="columnWidth"
    android:scrollbars="vertical"
    android:scrollbarSize="3dp"
    android:scrollIndicators="left"
    android:id="@+id/grid_view2"
    android:paddingLeft="10dp"
    android:layout_marginBottom="10dp"
    android:layout_gravity="center|center_horizontal|center_vertical"
    android:clipChildren="false"
    android:clipToPadding="false"/>


</LinearLayout>

smiles_items_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView android:id="@+id/smile_image_view"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_gravity="center"/>


</LinearLayout>

BottomSheetDialog_Smiles.java

@Override
public View getView(final int position, View convertView, ViewGroup parent) 
{

final Holder holder = new Holder();
LayoutInflater inflater = (LayoutInflater) 
getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
grid = inflater.inflate(R.layout.smile_items_layout, null);
lottieImage = inflater.inflate(R.layout.activity_streaming2, null);

holder.img = (ImageView) grid.findViewById(R.id.smile_image_view);
holder.img.setImageResource(mThumbIds[position]);

gridView2.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long 
l) {
JSONDictionary imageChat = new JSONDictionary();
int imageId = (int) getItem(i);
imageChat.put("message",imageId);
Communicator.getInstance().emit("new chat message", imageChat);
}
});

return grid;
}

You Grid has images correct ? What should happen when one image of the grid is clicked ? — Greggz, Dec 27 '17 at 17:33
Exactly, when the image gets clicked it should be sent to the server as I'm using socket io, i am able to achieve this if I put a string or an int instead of an image, however what I need is to display the image itself — O.D, Dec 27 '17 at 17:50
I suggest you to host that new image in a fragment and use a fragment transiction to let the image display on the screen. I can post an actual answer if you feel lost — Greggz, Dec 27 '17 at 17:54
Well the thing is Im able to send the id of the image as displayed in my code, so inorder to send an image instead of a text do I have to something specific? — O.D, Dec 27 '17 at 17:59
Sorry I was getting your question wrong. Check this answer [answer](https://stackoverflow.com/questions/16446841/android-send-image-file-to-the-server-db) — Greggz, Dec 27 '17 at 18:02

Munir · Accepted Answer · 2017-12-28T16:33:56.907

1

Try below code,OnItemClick Retrun view which you have click

gridView2.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l){
   ImageView imageView = (ImageView)view;
   //if you want to get image from imageview
   imageView .getDrawable()
  }
});

And If you want to get inputstream from the drawable use following:

BitmapDrawable bitmapDrawable = ((BitmapDrawable) drawable);
Bitmap bitmap = bitmapDrawable .getBitmap();
ByteArrayOutputStream stream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);
byte[] imageInByte = stream.toByteArray();
ByteArrayInputStream bis = new ByteArrayInputStream(imageInByte);

UPDated

You do it by 2 way

1st Way: Remove LinerLayout from xml and make ImageView Parent as LinerLayout only contain one view Like this, if you use this then no need to change java code

smiles_items_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/smile_image_view"
        android:layout_width="45dp"
        android:layout_height="45dp"
 />

2nd Way

if you want to keep your xml as it is then change the java code like below

 LinearLayout linearLayout= (LinearLayout)view;
 ImageView imageView = (ImageView) linearLayout.getChildAt(0);
 //if you want to get image from imageview
 imageView .getDrawable()

edited Dec 28 '17 at 16:33

answered Dec 27 '17 at 18:04

Munir

2,548
1
11
20

I've tried the code that you wrote to get the image from the imageview however the app crashed and came up with an error java.lang.ClassCastException: android.widget.LinearLayout cannot be cast to android.widget.ImageView, please help – O.D Dec 28 '17 at 12:38
I've tried everything from https://stackoverflow.com/questions/11191040/android-java-lang-classcastexception-android-widget-imageview-cannot-be-cast-t but still not working – O.D Dec 28 '17 at 13:46
@O.D i need to show your xml for `gridView2 `. which xml you have inflate in gridView2, that's post, which content the image that's you have to got when cliclk – Munir Dec 28 '17 at 16:14
so you get `smile_image_view` this imageview right ? – Munir Dec 28 '17 at 16:22
I've tried it out, it comes up with some text like android.support.v7.widget.AppCompactImageView(baa77fcV.ED........52,0-187,135#7f080101 app:id/smile_image_view but doesnt come up with the image itself, also when I changed the xml it didn't come up with the images, it was totally blank – O.D Dec 28 '17 at 16:37
@O.D I have just written code for get Imagview control now you make google how to get image from imageview or the formate which you want to send it to your server. for that you need to do google..:) – Munir Dec 28 '17 at 16:44

How to set an image onClick from gridview?

1 Answers1