Making a clickable image to open another activity

Question

Here i practice some tutorial of making gridview with auto resize image. i'm adopted this tutorial to my activity. what i'm gonna do next is how to make the image clickable. so that when users clicked on each image it goes to some class/activity.

Here is several code from the program I experimented :

activity_main.xml to throw a gridview into layout,stretch mode and column width :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<GridView
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:verticalSpacing="5dp"
    android:horizontalSpacing="5dp"
    android:stretchMode="columnWidth"
    android:numColumns="2" 
    />
</FrameLayout>

MainActivity.java custom ImageView that maintains its aspect ratio:

public class MainActivity extends ImageView {
public MainActivity(Context context) {
    super(context);
}

public MainActivity(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public MainActivity(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
}
}

This is a layout for a grid item :

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

<com.example.conversa.MainActivity
    android:id="@+id/picture"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    />
<TextView
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="15dp"
    android:paddingBottom="15dp"
    android:layout_gravity="bottom"
    android:textColor="@android:color/white"
    android:background="#55000000"
    />

</FrameLayout>

This is an adapter for gridview :

public class MyAdapter extends BaseAdapter {
private List<Item> items = new ArrayList<Item>();
private LayoutInflater inflater;

public MyAdapter(Context context) {
    inflater = LayoutInflater.from(context);

    items.add(new Item("Conversation 1",       R.drawable.pic1));
    items.add(new Item("Conversation 2",   R.drawable.pic2));
    items.add(new Item("Conversation 3", R.drawable.pic3));
    items.add(new Item("Conversation 4",      R.drawable.pic4));
    items.add(new Item("Conversation 5",     R.drawable.pic5));
    items.add(new Item("Conversation 6",      R.drawable.pic6));
    items.add(new Item("Conversation 7",       R.drawable.pic7));
    items.add(new Item("Conversation 8",     R.drawable.pic8));
    items.add(new Item("Conversation 9",      R.drawable.pic9));
    items.add(new Item("Conversation 10",       R.drawable.pic10));
}

@Override
public int getCount() {
    return items.size();
}

@Override
public Object getItem(int i) {
    return items.get(i);
}

@Override
public long getItemId(int i) {
    return items.get(i).drawableId;
}

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    View v = view;
    ImageView picture;
    TextView name;

    if(v == null) {
        v = inflater.inflate(R.layout.gridimage, viewGroup, false);
        v.setTag(R.id.picture, v.findViewById(R.id.picture));
        v.setTag(R.id.text, v.findViewById(R.id.text));
    }

    picture = (ImageView)v.getTag(R.id.picture);
    name = (TextView)v.getTag(R.id.text);

    Item item = (Item)getItem(i);

    picture.setImageResource(item.drawableId);
    name.setText(item.name);

    return v;
}

private class Item {
    final String name;
    final int drawableId;

    Item(String name, int drawableId) {
        this.name = name;
        this.drawableId = drawableId;
    }
}
}

And this is where the adapter set into gridview :

public class Gridpiw extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    GridView gridView = (GridView)findViewById(R.id.gridview);
    gridView.setAdapter(new MyAdapter(this));
}

}

What should I add or maybe modify so that the image can be clicked to show new activity?

romtsn · Accepted Answer · 2014-10-27T20:13:31.900

You should do it like this:

Firstly, create you activity_main.xml:

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

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="5dp"
        android:horizontalSpacing="5dp"
        android:stretchMode="columnWidth"
        android:numColumns="2"/>

</FrameLayout>

Secondly, change your Gridpiw to MainActivity classname:

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridView gridView = (GridView) findViewById(R.id.gridview);
        gridView.setAdapter(new MyAdapter(this));
    }
}

Thirdly, change your MainActivity extends ImageView to MeasuredImageView extends ImageView, like this:

public class MeasuredImageView extends ImageView {
    public MeasuredImageView(Context context) {
       super(context);
    }

    public MeasuredImageView(Context context, AttributeSet attrs) {
       super(context, attrs);
    }

    public MeasuredImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       super.onMeasure(widthMeasureSpec, heightMeasureSpec);
       setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
    }
}

Then, include it into your grid item layout:

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

    <com.example.conversa.MeasuredImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:scaleType="centerCrop"
    />
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:layout_gravity="bottom"
        android:textColor="@android:color/white"
        android:background="#55000000"
    />

</FrameLayout>

NOTE: your ImageView with id "picture" should have attribute android:clickable="true".

Then in your adapter you should store the context, passed as the parameter.

public class MyAdapter extends BaseAdapter {
    ...
    private Context context
    ...
    public MyAdapter(Context context) {
        this.context = context;
        //your actions...
    }
}

And finally, in your getView() function of the adapter class, you should setOnClickListener to your ImageView:

...
@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    View v = view;
    ImageView picture;
    TextView name;

    if(v == null) {
        v = inflater.inflate(R.layout.gridimage, viewGroup, false);
        v.setTag(R.id.picture, v.findViewById(R.id.picture));
        v.setTag(R.id.text, v.findViewById(R.id.text));
    }

    picture = (ImageView)v.getTag(R.id.picture);
    name = (TextView)v.getTag(R.id.text);

    Item item = (Item)getItem(i);

    picture.setImageResource(item.drawableId);
    name.setText(item.name);

    picture.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
          Intent intent = new Intent(context, SecondActivity.class);
          context.startActivity(intent);
       }
    });

    return v;
}
...

Hope this helps.

thanks for the answer, but how could i make each image item has it own activity. i want each item owned an activity. for example,image 3 goes to the ThirdActivity, image 4 goes to the FourthActivity and so on. — Sororon, Oct 29 '14 at 15:51
I'm trying to make simple conversation app, and it has 10 activities to show up. when you click each item, it will goes to the activity that refers to the item you're clicked. for example, item 1 is about "introduction" conversation, so when you clicked the item, it calling the activity named "introduction.java". Item 2 is about "asking for help" conversation, and when you clicked that item, it goes to "askhelp.java" activity. And so the others. how could it possibly works in the code below? — Sororon, Oct 30 '14 at 01:20
The best approach is to store index as field for each activity in your `Item` object, and then in OnClickListener,check that index using `switch(index)`, and start own activity for each index. — romtsn, Oct 30 '14 at 04:32

score 0 · Answer 2 · edited Oct 27 '14 at 18:32

0

Add This Kind Of Code For ImageViews to Your Code Inside Your Adapter Inside getView()

Add onClickListener()

 picture.setOnClickListener(new OnClickListener() {
        // Start new list activity
        public void onClick(View v) {
            Intent mainIntent = new Inten(SampleMainActivity.this,SecondActivity.class);
            startActivity(mainIntent);
        }
 }

edited Oct 27 '14 at 18:32

Willi Mentzel

27,862
20
113
121

answered Oct 27 '14 at 18:29

Sandeep Londhe

405
1
6
17

i implement this method on my program, but i couldn't make it for calling more than 1 activity with switch case. can you explain it? – Sororon Oct 29 '14 at 16:37

Making a clickable image to open another activity

2 Answers2