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.
- 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.
- setMaxHeight(int maxHeight) : Set the ImageView’s max height.
- setMaxWidth(int maxWidth) : Set the ImageView’s max width.
- setScaleType(ImageView.ScaleType scaleType) : Configure how to scale or move the image to fit the size of the ImageView.
- setImageResource(int drawableId) : Set drawable resource id which will be displayed in the ImageView.
1.2 ImageView.ScaleType Values.
- MATRIX : Scale image in Matrix way.
- 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.
- 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.
- FIT_CENTER : Similar to FIT_START, the difference is image will be placed in the center of ImageView.
- FIT_END : Similar to FIT_START, the difference is image will be placed in the lower right of ImageView.
- CENTER : Place the image at the center of ImageView, do not scale the image any more.
- CENTER_CORP : Zooming the image and keep it’s aspect ratio until the image completely cover the ImageView.
- 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.
When you click each button, you can see the effect that take place.
Example Screen Demo.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/VNTOWMijcOI
Project File Structures.
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 id=”3492″]
