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.

Answer 1

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

Answer 2

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);

Answer 3

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;
         }
     });
 }

}

Answer 4

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