how to display fullscreen image by clicking imagebutton

Question

i just have two image buttons in my layout containing two pictures which are in drawable folder. all i want is when the user clicks the image button he should see the full screen image and should be able to zoom as well.

this is my xml:

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


<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/piq1" 
android:layout_weight="1"
/>

<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/piq2" 
android:layout_weight="1"/>

</LinearLayout>

when the image button in clicked it should display the full image in full screen and user should be able to zoom it. please help me with the code for that.

my java looks like:

import android.app.Activity;
import android.os.Bundle;

public class Piq extends Activity{

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.piq);
}

i dont know how to display the onclick listener for imagebutton so it displays fullscreen image — Abhinav Raja, Jan 23 '14 at 22:08
ok , you can when user press image button remove image src and put layout background with selected button image it will take the whole screen in this case — mohammed momn, Jan 23 '14 at 22:11
you can also put your selected image height and width with match parent will achieve it also — mohammed momn, Jan 23 '14 at 22:14
how?how can i remove the src and put layout background. i am new to android. plz help me with the code — Abhinav Raja, Jan 23 '14 at 22:18
are you need to make the image in same activity or in another activity ?? — mohammed momn, Jan 23 '14 at 22:21
get Example here http://stackoverflow.com/a/35886019/4395114 — Mansukh Ahir, Mar 09 '16 at 08:03

mohammed momn · Accepted Answer · 2014-01-24T00:47:05.413

first of all , its only one idea you can make and it need you dirty your hand with this code to handle it as your case need , hope it helpful for you ,

here the tutorial that using full image and zooming feature you can using it

http://www.androidhive.info/2013/09/android-fullscreen-image-slider-with-swipe-and-pinch-zoom-gestures/

here the layout will be

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2" >

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:src="@android:drawable/btn_radio" />

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:src="@drawable/ic_launcher" />

</LinearLayout>

and here the code you will use

    final ImageButton img1 = (ImageButton) findViewById(R.id.imageButton1);
    final ImageButton img2 = (ImageButton) findViewById(R.id.imageButton2);

    final LinearLayout layout = (LinearLayout) findViewById(R.id.layout);

    img1.setOnClickListener(new OnClickListener() {

        @SuppressLint("NewApi")
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub

            layout.setBackground(img1.getDrawable());

        }
    });

    img2.setOnClickListener(new OnClickListener() {

        @SuppressLint("NewApi")
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            layout.setBackground(img2.getDrawable());
        }
    });

this displays images in full screen but the image buttons are also visible. also i cant zoom. i got the idea where to start from. but what i actually want is the picture to be displayed like those displayed in gallery photos. — Abhinav Raja, Jan 23 '14 at 23:30
how you want the zooming ??? , and if you want make some thing like gallery why need to making image button instead of implement gallery ?? — mohammed momn, Jan 23 '14 at 23:52
is that possible? just 2 images shown like it is shown in gallery. zooming should be like pinch zooming. also double tap (zoom in) and again double tap (back to normal) — Abhinav Raja, Jan 24 '14 at 00:41
yes i get it you need to use Gesture to zooming the image i will provide you with example in my edited answer — mohammed momn, Jan 24 '14 at 00:45
i had seen that tutorial earlier.. it seems a little complicated. i just need it for 2 images. do i have to make that entire code just for 2 images? — Abhinav Raja, Jan 24 '14 at 12:46

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

this code did the trick.

How to Zoom in/Out an ImageView(not using Canvas) in android

little bit of adjustment is still required in it like to set the default view and also to set max and min zoom limit. but that i can do it myself now. thanx.

edited May 23 '17 at 12:32

Community

1
1

answered Jan 24 '14 at 20:17

Abhinav Raja

349
1
5
25

how to display fullscreen image by clicking imagebutton

2 Answers2