Android ImageView Examples

Leave a Comment / Android Tutorial / Android UI

android.widget.ImageView is android image manipulation class. It can be used to load images, show images, and edit images. 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 adjusts the image’s boundaries to maintain the 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 the 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 anymore.
  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.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/VNTOWMijcOI

  1. This example has two ImageView objects. The above one will show the original image.
  2. When the user touches the above image, the under ImageView object will show part of the above image.
  3. When you click each button, you can see the effect that takes place.
  4. Below is the example project file structures. 
    D:\WORK\DEV2QA.COM-EXAMPLE-CODE\ANDROIDEXAMPLEPROJECT\EXAMPLE
│
├─app
│  │  .gitignore
│  │  build.gradle
│  │  proguard-rules.pro
│  │
│  └─src
│      │
│      ├─main
│      │  │  AndroidManifest.xml
│      │  │
│      │  ├─java
│      │  │  └─com
│      │  │      └─dev2qa
│      │  │          └─example
│      │  │              │  ImageViewActivity.java
│      │  │
│      │  └─res
│      │      │
│      │      ├─layout
│      │      │      activity_image_view.xml

2.1 activity_image_view.xml

  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

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

Leave a Comment

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.