Set Imageview To Full Screen of Activity

Question

i have a linear layout which have two imageview 1st one is set to display normal image and onother one is hide when any user touch on 1st imageview 2nd image view is visible and set to full screen ..but during this i got error which m posting to you ... i have followed this code

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

    <LinearLayout
        android:id="@+id/liimage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/property_image"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                 android:scaleType="matrix"
                android:src="@drawable/house" />
        </LinearLayout>
         <ImageView
        android:id="@+id/expanded_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible"/>
    </LinearLayout>
   </ScrollView>

my code for this

            property_image.setImageBitmap(bmp);
            property_image.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    zoomImageFromPhoto(property_image, property_image);

                }
            });

propertyImage is my 1st image which display my image but when i touch it goes to zoomImagefromphoto class

        private void zoomImageFromPhoto(final View thumbView, ImageView property_image2) {
            if (mCurrentAnimator != null) {
                mCurrentAnimator.cancel();
            }
            final ImageView expandedImageView = (ImageView) findViewById(R.id.expanded_image);
           // expandedImageView.setImageResource(property_image2);
            final Rect startBounds = new Rect();
            final Rect finalBounds = new Rect();
            final Point globalOffset = new Point();
            thumbView.getGlobalVisibleRect(startBounds);
            findViewById(R.id.liimage).getGlobalVisibleRect(finalBounds, globalOffset);
            startBounds.offset(-globalOffset.x, -globalOffset.y);
            finalBounds.offset(-globalOffset.x, -globalOffset.y);
            float startScale;
            if ((float) finalBounds.width() / finalBounds.height()
                    > (float) startBounds.width() / startBounds.height()) {
                startScale = (float) startBounds.height() / finalBounds.height();
                float startWidth = startScale * finalBounds.width();
                float deltaWidth = (startWidth - startBounds.width()) / 2;
                startBounds.left -= deltaWidth;
                startBounds.right += deltaWidth;
            } else {
                startScale = (float) startBounds.width() / finalBounds.width();
                float startHeight = startScale * finalBounds.height();
                float deltaHeight = (startHeight - startBounds.height()) / 2;
                startBounds.top -= deltaHeight;
                startBounds.bottom += deltaHeight;
            }
            thumbView.setAlpha(0f);
            expandedImageView.setVisibility(View.VISIBLE);
            expandedImageView.setPivotX(0f);
            expandedImageView.setPivotY(0f);
            AnimatorSet set = new AnimatorSet();
            set
                    .play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left,
                            finalBounds.left))
                    .with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top,
                            finalBounds.top))
                    .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale, 1f))
                    .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale, 1f));
            set.setDuration(mShortAnimationDuration);
            set.setInterpolator(new DecelerateInterpolator());
            set.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mCurrentAnimator = null;
                }

                @Override
                public void onAnimationCancel(Animator animation) {
                    mCurrentAnimator = null;
                }
            });
            set.start();
            mCurrentAnimator = set;
            final float startScaleFinal = startScale;
            expandedImageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (mCurrentAnimator != null) {
                        mCurrentAnimator.cancel();
                    }
                    AnimatorSet set = new AnimatorSet();
                    set
                            .play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left))
                            .with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top))
                            .with(ObjectAnimator
                                    .ofFloat(expandedImageView, View.SCALE_X, startScaleFinal))
                            .with(ObjectAnimator
                                    .ofFloat(expandedImageView, View.SCALE_Y, startScaleFinal));
                    set.setDuration(mShortAnimationDuration);
                    set.setInterpolator(new DecelerateInterpolator());
                    set.addListener(new AnimatorListenerAdapter() {
                        @Override
                        public void onAnimationEnd(Animator animation) {
                            thumbView.setAlpha(1f);
                            expandedImageView.setVisibility(View.GONE);
                            mCurrentAnimator = null;
                        }

                        @Override
                        public void onAnimationCancel(Animator animation) {
                            thumbView.setAlpha(1f);
                            expandedImageView.setVisibility(View.GONE);
                            mCurrentAnimator = null;
                        }
                    });
                    set.start();
                    mCurrentAnimator = set;
                }
            });
        }

but i got error like

 04-06 11:02:31.649: E/AndroidRuntime(2739): Process: com.big_property, PID: 2739
 04-06 11:02:31.649: E/AndroidRuntime(2739): java.lang.NullPointerException: Attempt to invoke virtual method 'boolean  android.view.View.getGlobalVisibleRect(android.graphics.Rect,       android.graphics.Point)' on a null object reference
04-06 11:02:31.649: E/AndroidRuntime(2739):at   com.big_property.search_property_activity.zoomImageFromPhoto(search_property_   activity.java:284)
04-06 11:02:31.649: E/AndroidRuntime(2739):at com.big_property.search_property_activity.access$4(search_property_activity.java:274)
 04-06 11:02:31.649: E/AndroidRuntime(2739):at com.big_property.search_property_activity$3.onClick(search_property_activity.java:268)

I think Eror is in this line

   findViewById(R.id.liimage).getGlobalVisibleRect(finalBounds, globalOffset);

How to Solve This? Help me friend thanks in advance.

Help Me Frienif any one know how to solve this then late me knowd if any one know it dosen't find my linear layout id.... — Tufan, Apr 06 '15 at 06:06
Please correct me if I misunderstood.I think you want to show an large image when the user click on the small icon image in the same screen with alpha animation?Am I correct? — Srinivasan, Apr 06 '15 at 06:43

score 2 · Answer 1 · answered Apr 06 '15 at 06:50

Instead of zoomImageFromPhoto(final View thumbView, ImageView property_image2) use zoomImageFromPhoto(final View thumbView, int property_image2) and after that don't forget to do expandedImageView.setImageResource(property_image2);

The changes that should be made are as follows...Hope this will help

public class MainActivity extends Activity implements OnClickListener {

ImageView property_image;
private Animator mCurrentAnimator;
private int mShortAnimationDuration;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    property_image=(ImageView) findViewById(R.id.property_image);
    Bitmap bmp=BitmapFactory.decodeResource(this.getResources(),
            R.drawable.desert);
    property_image.setImageBitmap(bmp);
    mShortAnimationDuration = getResources().getInteger(
            android.R.integer.config_shortAnimTime);

    property_image.setOnClickListener(this);
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}


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

    zoomImageFromPhoto(property_image, R.drawable.desert);
}

 private void zoomImageFromPhoto(final View thumbView, int  property_image2) {
     if (mCurrentAnimator != null) {
         mCurrentAnimator.cancel();
     }
     final ImageView expandedImageView = (ImageView) findViewById(R.id.expanded_image);
    // expandedImageView.setImageResource(property_image2);

     final Rect startBounds = new Rect();
     final Rect finalBounds = new Rect();
     final Point globalOffset = new Point();
     thumbView.getGlobalVisibleRect(startBounds);
     findViewById(R.id.liimage).getGlobalVisibleRect(finalBounds, globalOffset);
     startBounds.offset(-globalOffset.x, -globalOffset.y);
     finalBounds.offset(-globalOffset.x, -globalOffset.y);
     float startScale;
     if ((float) finalBounds.width() / finalBounds.height()
             > (float) startBounds.width() / startBounds.height()) {
         startScale = (float) startBounds.height() / finalBounds.height();
         float startWidth = startScale * finalBounds.width();
         float deltaWidth = (startWidth - startBounds.width()) / 2;
         startBounds.left -= deltaWidth;
         startBounds.right += deltaWidth;
     } else {
         startScale = (float) startBounds.width() / finalBounds.width();
         float startHeight = startScale * finalBounds.height();
         float deltaHeight = (startHeight - startBounds.height()) / 2;
         startBounds.top -= deltaHeight;
         startBounds.bottom += deltaHeight;
     }
     thumbView.setAlpha(0f);
     expandedImageView.setVisibility(View.VISIBLE);
     expandedImageView.setPivotX(0f);
     expandedImageView.setPivotY(0f);
     expandedImageView.setImageResource(property_image2);
     AnimatorSet set = new AnimatorSet();
     set
             .play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left,
                     finalBounds.left))
             .with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top,
                     finalBounds.top))
             .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale, 1f))
             .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale, 1f));
     set.setDuration(mShortAnimationDuration);
     set.setInterpolator(new DecelerateInterpolator());
     set.addListener(new AnimatorListenerAdapter() {
         @Override
         public void onAnimationEnd(Animator animation) {
             mCurrentAnimator = null;
         }

         @Override
         public void onAnimationCancel(Animator animation) {
             mCurrentAnimator = null;
         }
     });
     set.start();
     mCurrentAnimator = set;
     final float startScaleFinal = startScale;
     expandedImageView.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View view) {
             if (mCurrentAnimator != null) {
                 mCurrentAnimator.cancel();
             }
             AnimatorSet set = new AnimatorSet();
             set
                     .play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left))
                     .with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top))
                     .with(ObjectAnimator
                             .ofFloat(expandedImageView, View.SCALE_X, startScaleFinal))
                     .with(ObjectAnimator
                             .ofFloat(expandedImageView, View.SCALE_Y, startScaleFinal));
             set.setDuration(mShortAnimationDuration);
             set.setInterpolator(new DecelerateInterpolator());
             set.addListener(new AnimatorListenerAdapter() {
                 @Override
                 public void onAnimationEnd(Animator animation) {
                     thumbView.setAlpha(1f);
                     expandedImageView.setVisibility(View.GONE);
                     mCurrentAnimator = null;
                 }

                 @Override
                 public void onAnimationCancel(Animator animation) {
                     thumbView.setAlpha(1f);
                     expandedImageView.setVisibility(View.GONE);
                     mCurrentAnimator = null;
                 }
             });
             set.start();
             mCurrentAnimator = set;
         }
     });
 }

}

this could be correct but my image is set runtime ...so i can send direclty image to imageview ...nd even whatever you said i have to send id of image if i set it runtime this is not helped me ..... — Tufan, Apr 06 '15 at 08:09
In that case you just have to change your function, Instead of int drawable image you can call bitmap image in function, though there are to many other ways to achieve this thing I tried to make your code run..Instead of giving you any other solution, Let me know if you have any further queries regarding this.. — Nitin Mali, Apr 06 '15 at 08:57

score 0 · Accepted Answer · answered Apr 06 '15 at 06:06

0

Instead of this approach you could do as , When clicked on Image add a Fragment/Activity that displays your image in full screen .

answered Apr 06 '15 at 06:06

Nikhil Verma

1,777
1
20
41

1

But there is no need to implemnt onother fragment/activity ...we can do this in same activity – Tufan Apr 06 '15 at 06:09
See this : http://stackoverflow.com/questions/27277337/how-to-display-an-image-in-full-screen-on-click-in-the-imageview – Nikhil Verma Apr 06 '15 at 06:16

Srinivasan · Answer 3 · 2015-04-06T09:03:29.120

Please find the layout design,

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ImageView 
        android:id="@+id/img_small_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ic_launcher"
        android:layout_centerInParent="true"/>

    <ImageView 
        android:id="@+id/img_large_icon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/ic_launcher"
        android:layout_centerInParent="true"
android:visibility="invisible"/>

And add click listener for 'img_small_icon' small icon. for ex:

    ImageView imgSmall,imgLarge;
imgSmall = (ImageView) findViewById(R.id.img_small_icon);
        imgLarge = (ImageView) findViewById(R.id.img_large_icon);
        imgSmall.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                if(imgLarge.getVisibility() == View.INVISIBLE){
//Here you can add the Fade In/Out animation start
                    imgLarge.setVisibility(View.VISIBLE);

                }
            }
        });

Hope this will help you.Please let me know if you found any difficulty.

Updated:

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <alpha 
        android:duration="500"
        android:fromAlpha="5.0"
        android:toAlpha="5.0"/>

</set>

save this file in drawable fodler.

Within your onClickListener

    Animation fadeOutAnimation = AnimationUtils.loadAnimation(mContext, R.anim.fade_out);
imgLarge.startAnimation(fadeOutAnimation);

this is correct shrinivas but it dosent display on full screen ....yes it is full but not on full screeen... — Tufan, Apr 06 '15 at 08:11
I think you want to remove the title bar of your application right? Or the layout is not covered fully.... — Srinivasan, Apr 06 '15 at 08:13
There is no chance Tufan.I think problem with your animation,I will give you sample fadeout animation. — Srinivasan, Apr 06 '15 at 09:01

score 0 · Answer 4 · answered Apr 06 '15 at 10:14

There is no need to do such lengthy process..just do it you need a xml class

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

<ImageView
    android:id="@+id/img_large_icon"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

then convert that image in byte array

   ByteArrayOutputStream stream = new ByteArrayOutputStream();
   bmp.compress(Bitmap.CompressFormat.PNG, 100, stream);
   byteArray = stream.toByteArray();

when click on pics send this byte array using intent

intent.putExtra("Image", byteArray);

make onother activity

it will goes to next activity

write this code

 public class Image_fullscreen_activity extends Activity {
  private Bitmap bmp;
 @Override
 public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setContentView(R.layout.fullscreen_image);
    byte[] byteArray = getIntent().getByteArrayExtra("Image");
    Bitmap bmp = BitmapFactory.decodeByteArray(byteArray, 0, byteArray.length);
    ImageView iv=(ImageView)findViewById(R.id.img_large_icon);
    iv.setImageBitmap(bmp);
    }   
@Override
public void onBackPressed() {
        super.onBackPressed();
        }

 }

nd in your android mainfiest register this

 <activity
        android:name=".Image_fullscreen_activity"
        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"
        android:label="@string/app_name" >
    </activity>

Just do it you will get exact output

Set Imageview To Full Screen of Activity

4 Answers4