Android ImageView Examples

android.widget.ImageView is android image manipulation class. It can be used to load image, show image and edit image. This article will introduce this class to you and show you an example to demonstrate it’s functions.

1. ImageView Introduction.

1.1 android.widget.ImageView Key Methods.

  1. setAdjustViewBounds(boolean adjustViewBounds) : Set whether the ImageView adjust image’s boundaries to maintain original image’s aspect ratio to display the image in it properly or not.
  2. setMaxHeight(int maxHeight) : Set the ImageView’s max height.
  3. setMaxWidth(int maxWidth) : Set the ImageView’s max width.
  4. setScaleType(ImageView.ScaleType scaleType) : Configure how to scale or move the image to fit the size of the ImageView.
  5. setImageResource(int drawableId) : Set drawable resource id which will be displayed in the ImageView.

1.2 ImageView.ScaleType Values.

  1. MATRIX : Scale image in Matrix way.
  2. FIT_XY : Both scale the image in horizontal and vertical. This allows the image to be fully adapted to the ImageView, but the aspect ratio of the image may change.
  3. FIT_START : Continue to zoom in and out image to keep it’s aspect ratio until the image is fully displayed in ImageView, and the image is placed in upper left corner of the ImageView.
  4. FIT_CENTER : Similar to FIT_START, the difference is image will be placed in the center of ImageView.
  5. FIT_END : Similar to FIT_START, the difference is image will be placed in the lower right of ImageView.
  6. CENTER : Place the image at the center of ImageView, do not scale the image any more.
  7. CENTER_CORP : Zooming the image and keep it’s aspect ratio until the image completely cover the ImageView.
  8. CENTER_INSIDE : Zooming the image and keep it’s aspect ratio until the ImageView can fully display the image.

2. ImageView Example.

This example has two ImageView object. The above one will show original image, when user touch the above image, the under imageview object will show part of above image.

READ :   Android Splash Screen Example

When you click each button, you can see the effect that take place.

Example Screen Demo.

android imageview example

Project File Structures.

android imageview example layout xml file

android imageview example ImageViewActivity java file

2.1 activity_image_view.xml

 <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="8dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                tools:layout_editor_absoluteX="8dp"
                tools:layout_editor_absoluteY="8dp">

                <ImageView
                    android:id="@+id/imageViewSource"
                    android:layout_width="match_parent"
                    android:layout_height="200sp"
                    android:layout_marginTop="10sp"/>

                <ImageView
                    android:id="@+id/imageViewDetail"
                    android:layout_width="100sp"
                    android:layout_height="100sp"
                    android:layout_marginTop="10sp"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                    <Button
                        android:id="@+id/buttonIncreaseTransparency"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_gravity="fill_vertical"
                        android:text="Increase Transparency" />

                    <Button
                        android:id="@+id/buttonDecreaseTransparent"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_gravity="fill_vertical"
                        android:text="Decrease Transparency" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
                        <Button
                            android:id="@+id/buttonNextImage"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="fill_vertical"
                            android:text="Next" />
                        <Button
                            android:id="@+id/buttonMatrixImage"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="fill_vertical"
                            android:text="Matrix" />
                        <Button
                            android:id="@+id/buttonFitXYImage"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="fill_vertical"
                            android:text="Fit_XY" />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
                        <Button
                            android:id="@+id/buttonFitStartImage"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="fill_vertical"
                            android:text="Fit_Start" />
                        <Button
                            android:id="@+id/buttonFitCenterImage"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="fill_vertical"
                            android:text="Fit_Center" />
                        <Button
                            android:id="@+id/buttonFitEndImage"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="fill_vertical"
                            android:text="Fit_End" />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
                        <Button
                            android:id="@+id/buttonCenterImage"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="fill_vertical"
                            android:text="Center" />
                        <Button
                            android:id="@+id/buttonCenterCorpImage"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="fill_vertical"
                            android:text="Center_Corp" />
                        <Button
                            android:id="@+id/buttonCenterInsideImage"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="fill_vertical"
                            android:text="Center_Inside" />
                </LinearLayout>
            </LinearLayout>
  </ScrollView>

2.2 ImageViewActivity.java

public class ImageViewActivity extends AppCompatActivity {

    // Image resource id array.
    private int imagesIdArr[] = new int[]{R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4, R.drawable.img5, R.drawable.img6};

    // Current image index in imagesIdArr array.
    private int currImageIndex = 0;

    // Image transparency value.Max value is 1.0f, Min value is 0.0f.
    private  float imageAlpha = 1.0f;

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

        // Source image view object and set default image.
        final ImageView imageViewSource = (ImageView)findViewById(R.id.imageViewSource);
        imageViewSource.setScaleType(ImageView.ScaleType.CENTER);
        // Set
        imageViewSource.setAdjustViewBounds(true);
        // Set default image.
        imageViewSource.setImageResource(imagesIdArr[currImageIndex]);

        // Detail image view object.
        final ImageView imageViewDetail = (ImageView)findViewById(R.id.imageViewDetail);

        // imageViewSource OnTouch Event Listener.
        imageViewSource.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {

                BitmapDrawable srcBitmap = (BitmapDrawable)imageViewSource.getDrawable();

                double srcBitmapWidth = srcBitmap.getMinimumWidth();
                double screenWidth = Resources.getSystem().getDisplayMetrics().widthPixels;


                double srcImgScale = srcBitmapWidth / screenWidth;

                int srcImgX = (int)(motionEvent.getX() * srcImgScale);
                int srcImgY = (int)(motionEvent.getY() * srcImgScale);

                //int srcImgX = (int)(motionEvent.getX());
                //int srcImgY = (int)(motionEvent.getY());

                if(srcImgX + 100 > srcBitmap.getMinimumWidth())
                {
                    srcImgX = srcBitmap.getMinimumWidth() - 100;
                }

                if(srcImgY + 100 > srcBitmap.getMinimumHeight())
                {
                    srcImgY = srcBitmap.getMinimumHeight() - 100;
                }

                Bitmap partialBitmap = Bitmap.createBitmap(srcBitmap.getBitmap(), srcImgX, srcImgY, 100, 100);
                imageViewDetail.setImageBitmap(partialBitmap);
                imageViewDetail.setAlpha(imageAlpha);

                return false;
            }
        });

        // Next image button.
        Button nextImageButton = (Button)findViewById(R.id.buttonNextImage);
        nextImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(currImageIndex==5)
                {
                    currImageIndex = -1;
                }
                currImageIndex++;
                imageViewSource.setImageResource(imagesIdArr[currImageIndex]);
            }
        });

        // Matrix Scale button.
        Button matrixImageButton = (Button)findViewById(R.id.buttonMatrixImage);
        matrixImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageViewSource.setScaleType(ImageView.ScaleType.MATRIX);
            }
        });

        // FIT_XY Scale button.
        Button fitXYImageButton = (Button)findViewById(R.id.buttonFitXYImage);
        fitXYImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageViewSource.setScaleType(ImageView.ScaleType.FIT_XY);
            }
        });

        // FIT_START Scale button.
        Button fitStartImageButton = (Button)findViewById(R.id.buttonFitStartImage);
        fitStartImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageViewSource.setScaleType(ImageView.ScaleType.FIT_START);
            }
        });

        // FIT_CENTER Scale button.
        Button fitCenterImageButton = (Button)findViewById(R.id.buttonFitCenterImage);
        fitCenterImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageViewSource.setScaleType(ImageView.ScaleType.FIT_CENTER);
            }
        });

        // FIT_END Scale button.
        Button fitEndImageButton = (Button)findViewById(R.id.buttonFitEndImage);
        fitEndImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageViewSource.setScaleType(ImageView.ScaleType.FIT_END);
            }
        });

        // CENTER Scale button.
        Button centerImageButton = (Button)findViewById(R.id.buttonCenterImage);
        centerImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageViewSource.setScaleType(ImageView.ScaleType.CENTER);
            }
        });

        // CENTER_CORP Scale button.
        Button centerCorpImageButton = (Button)findViewById(R.id.buttonCenterCorpImage);
        centerCorpImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageViewSource.setScaleType(ImageView.ScaleType.CENTER_CROP);
            }
        });

        // CENTER_INSIDE Scale button.
        Button centerInsideImageButton = (Button)findViewById(R.id.buttonCenterInsideImage);
        centerInsideImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageViewSource.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            }
        });

        // Increase Image Transparency button.
        Button increaseImageTransparencyButton = (Button)findViewById(R.id.buttonIncreaseTransparency);
        increaseImageTransparencyButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(imageAlpha > 1)
                {
                    imageAlpha = 1;
                }

                imageAlpha += 0.1;
                imageViewSource.setAlpha(imageAlpha);
            }
        });

        // Decrease Image Transparency button.
        Button decreaseImageTransparencyButton = (Button)findViewById(R.id.buttonDecreaseTransparent);
        decreaseImageTransparencyButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(imageAlpha < 0)
                {
                    imageAlpha = 0;
                }

                imageAlpha -= 0.1;
                imageViewSource.setAlpha(imageAlpha);
            }
        });
    }
}

Download “Android-ImageView-Examples.zip” Android-ImageView-Examples.zip – Downloaded 172 times – 2 KB

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.