PAPERCLIPSANDPAPER
Reputation: 77
Enlarging an Imageview on click
Hello Stackoverflow friendo's. I'm just wondering if someone can assist me.
I've created an app which holds a lot of images, the images are currently pretty small but I want them to expand once they're clicked. Is there any way of doing this? My app holds about 50 xml and the same in classes. But it holds about 100 images, is there any simple way to do this?
An example of my XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#808080"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="499dp"
android:orientation="vertical" >
<ImageView
android:id="@+id/Logo"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_marginLeft="255dp"
android:layout_marginTop="3dp"
android:src="@drawable/logov2" />
<TextView
android:id="@+id/title"
android:layout_width="210dp"
android:layout_height="84dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="-90dp"
android:gravity="center"
android:text="@string/seatedcablerows"
android:textColor="#FFFFFF"
android:textSize="32sp" />
<ImageView
android:id="@+id/blackline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:src="@drawable/blackline" />
<TextView
android:id="@+id/textView1"
android:layout_width="95dp"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginLeft="15dp"
android:text="@string/startphase"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff"
android:textSize="16sp" />
<TextView
android:id="@+id/textView2"
android:layout_width="121dp"
android:layout_height="wrap_content"
android:layout_marginLeft="130dp"
android:layout_marginTop="-20dp"
android:text="@string/middlephase"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff"
android:textSize="16sp" />
<TextView
android:id="@+id/textView3"
android:layout_width="95dp"
android:layout_height="wrap_content"
android:layout_marginTop="-20dp"
android:layout_marginLeft="260dp"
android:text="@string/endphase"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff"
android:textSize="16sp" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="97dp"
android:layout_height="100dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="5dp"
android:src="@drawable/seatedcablerowstart" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="97dp"
android:layout_height="100dp"
android:layout_marginLeft="130dp"
android:layout_marginTop="-100dp"
android:src="@drawable/seatedcablerowmid" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="97dp"
android:layout_height="100dp"
android:layout_marginLeft="245dp"
android:layout_marginTop="-100dp"
android:src="@drawable/seatedcablerowend" />
<ImageView
android:id="@+id/blackline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:src="@drawable/blackline" />
<TextView
android:id="@+id/seatedcablerowsdesc"
android:layout_width="match_parent"
android:layout_height="41dp"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="@string/seatedcablerowsdesc"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff"
android:textSize="16sp" />
<TextView
android:id="@+id/seatedcablerowsperf"
android:layout_width="match_parent"
android:layout_height="238dp"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="@string/seatedcablerowsperf"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#FFFFFF"
android:textSize="14sp" />
<TextView
android:id="@+id/seatedcablerowscaut"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="@string/seatedcablerowscaut"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#FFFFFF"
android:textSize="14sp" />
<ImageView
android:id="@+id/blackline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:src="@drawable/blackline" />
<!--Set 1 starts here -->
<TextView
android:id="@+id/set1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/set1"
android:textColor="#FFFF00"
android:textSize="25sp" />
<TextView
android:id="@+id/weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-30dp"
android:layout_marginLeft="100dp"
android:text="@string/weight"
android:textColor="#FFFF00"
android:textSize="16sp"
/>
<TextView
android:id="@+id/repititions"
android:layout_width="116dp"
android:layout_height="wrap_content"
android:layout_marginLeft="240dp"
android:layout_marginTop="-20dp"
android:text="@string/repetitions"
android:textColor="#FFFF00"
android:textSize="16sp" />
<EditText
android:id="@+id/editText1"
android:layout_width="67dp"
android:layout_height="36dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number"
>
</EditText>
<EditText
android:id="@+id/editText2"
android:layout_width="67dp"
android:layout_height="36dp"
android:layout_marginLeft="240dp"
android:layout_marginTop="-37dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" >
</EditText>
<ImageView
android:id="@+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/blackline2" />
<!--Set 2 starts here -->
<TextView
android:id="@+id/set2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/set2"
android:textColor="#FFFF00"
android:textSize="25sp"
/>
<TextView
android:id="@+id/weight1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-30dp"
android:layout_marginLeft="100dp"
android:text="@string/weight"
android:textColor="#FFFF00"
android:textSize="16sp"
/>
<TextView
android:id="@+id/repititions2"
android:layout_width="116dp"
android:layout_height="wrap_content"
android:layout_marginLeft="240dp"
android:layout_marginTop="-20dp"
android:text="@string/repetitions"
android:textColor="#FFFF00"
android:textSize="16sp" />
<EditText
android:id="@+id/editText3"
android:layout_width="67dp"
android:layout_height="36dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" >
</EditText>
<EditText
android:id="@+id/editText4"
android:layout_width="67dp"
android:layout_height="36dp"
android:layout_marginLeft="240dp"
android:layout_marginTop="-37dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" >
</EditText>
<ImageView
android:id="@+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/blackline2" />
<!--Set 3 starts here -->
<TextView
android:id="@+id/set3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/set3"
android:textColor="#FFFF00"
android:textSize="25sp"
/>
<TextView
android:id="@+id/weight3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-30dp"
android:layout_marginLeft="100dp"
android:text="@string/weight"
android:textColor="#FFFF00"
android:textSize="16sp"
/>
<TextView
android:id="@+id/repititions3"
android:layout_width="116dp"
android:layout_height="wrap_content"
android:layout_marginLeft="240dp"
android:layout_marginTop="-20dp"
android:text="@string/repetitions"
android:textColor="#FFFF00"
android:textSize="16sp" />
<EditText
android:id="@+id/editText5"
android:layout_width="67dp"
android:layout_height="36dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" >
</EditText>
<EditText
android:id="@+id/editText6"
android:layout_width="67dp"
android:layout_height="36dp"
android:layout_marginLeft="240dp"
android:layout_marginTop="-37dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" >
</EditText>
<ImageView
android:id="@+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/blackline2" />
<!--Set 4 starts here -->
<TextView
android:id="@+id/set4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/set4"
android:textColor="#FFFF00"
android:textSize="25sp"
/>
<TextView
android:id="@+id/weight4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-30dp"
android:layout_marginLeft="100dp"
android:text="@string/weight"
android:textColor="#FFFF00"
android:textSize="16sp"
/>
<TextView
android:id="@+id/repititions4"
android:layout_width="116dp"
android:layout_height="wrap_content"
android:layout_marginLeft="240dp"
android:layout_marginTop="-20dp"
android:text="@string/repetitions"
android:textColor="#FFFF00"
android:textSize="16sp" />
<EditText
android:id="@+id/editText7"
android:layout_width="67dp"
android:layout_height="36dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" >
</EditText>
<EditText
android:id="@+id/editText8"
android:layout_width="67dp"
android:layout_height="36dp"
android:layout_marginLeft="240dp"
android:layout_marginTop="-37dp"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" >
</EditText>
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="240dp"
android:layout_marginTop="35dp"
android:src="@drawable/savebutton"
android:background="@null" />
<ImageButton
android:id="@+id/QR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="-10dp"
android:layout_marginBottom="-60dp"
android:src="@drawable/qrscanner" />
</LinearLayout>
</ScrollView>
Java class:
package com.example.workplease;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import com.example.workplease_v2.R;
public class Seatedcablerows extends Activity {
ImageButton imagebutton;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.seatedcablerows);
AddListenerOnButton();
}
public void AddListenerOnButton(){
final Context context = this;
imagebutton = (ImageButton) findViewById(R.id.QR);
imagebutton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
Intent intent = new Intent(context, Qrscanner.class);
startActivity(intent);
}
});
}
}
Upvotes: 3
Views: 26118
Answers (2)
Pratap
Reputation: 4727
Google has nicely explained How to enlarge view on a touch. You can use same technique for your image view also. Check the given link for full example code.
Upvotes: 12
Eenvincible
Reputation: 5626
Assuming you have a fragment with a gridview that holds your images, just attach an onItemClickListener to them and when someone clicks the image, get the ID and pass it back to the activity which will get the image from where it is located using the id and set up a new fragment with a single ImageView; that will do it.
EDIT
After reading your question a second time, I think you might have to change the way you are doing it (up to you really)
Have two arrays to store the smaller images and the larger versions of the images respectively.
Now, use a fragment or just a regular view with a gridview in it to display all your images and then implement an a click listener to keep track of which image was clicked using the position argument.
After knowing which image was clicked, just pass back the position to the activity and use that position to load the bigger image from the second array of larger images and display it in an imageview with the preset dimensions/ width/height respectively.
This is what I think will help solve your problem.
NOTE In order to pass back the position of the clicked image, you just need an interface in a fragment if you use a fragment (then implement it in your activity), otherwise, you can just get the position from within the activity and do your next task there.
Upvotes: 1
Related Questions
- Setting onclickListener on ImageView to view enlarged image
- How to make an image larger while clicking on it?
- How to Zoom in/out imageView on Click using java in Android?
- Android: Enlarging an image on click
- Resizing imageview on screen touch
- Change the size of an Imageview in android
- Changing the size of an ImageView when image clicked
- Image get bigger on click on small image
- Add zoom to an imageview in Android
- android:enlarging an image on click