(Android)How can I show a part of image?

Question

I have an image like this->

enter image description here

And I want to show like this->

enter image description here

Then I can choose how much I can see(0~1,0=can not see,1=Whole picture,0.5=half picture,....etc,read from user input)

How to do that?

I tried to use android:scaleType but it is not working.

http://stackoverflow.com/questions/14544327/make-image-appear-half-of-the-screen — Rohit, Aug 06 '13 at 07:01

talkol · Accepted Answer · 2013-08-06T07:24:03.703

My best suggestion is to wrap your BitmapDrawable with a ClipDrawable.

ClipDrawable lets you define clipping for any other drawable, so instead of drawing the entire drawable, only a part of it will be drawn.

How would that work? Your ImageView can display a drawable - assignable through setImageDrawable(). Naturally, you would place a BitmapDrawable of your image bitmap there. If you wrap your BitmapDrawable first with ClipDrawable, and only then assign to the ImageView, you should be fine.

<ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/clip_source" />

and this is clip_source drawable:

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@drawable/your_own_drawable"
    android:gravity="top" />

You can define the amount of clipping by calling the function setLevel() on your ClipDrawable (clip_source). A level of 0 means the image is completely hidden and a level of 10000 means the image is completely revealed. You can use any int value in the middle.

You'll have to set the level in code, so your code should first get a reference to the ClipDrawable. You can do this by running getDrawable() on your ImageView instance. When you have a reference to your ClipDrawable, simply run setLevel(5000) on it (or any other number 0-10000).

ImageView img = (ImageView) findViewById(R.id.imageView1);
mImageDrawable = (ClipDrawable) img.getDrawable();
mImageDrawable.setLevel(5000);

how to setLevel? plz define more about it. – Sanket Kachhela Aug 06 '13 at 07:19 — Sanket Kachhela, Aug 06 '13 at 07:19
You sir, just saved someones life in 2020. UP you go! – KayD May 13 '20 at 20:43 — KayD, May 13 '20 at 20:43

score 3 · Answer 2 · answered Aug 06 '13 at 07:35

here is another way to achieve this

public static Bitmap getScaleBitmap(Bitmap bitmap) {

        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
        bitmap.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()/2);
        final RectF rectF = new RectF(rect);
        final float roundPx = 0;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}

Here in below line

final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()/2);

set hight as you require..

Enjoy :)

How to implement center crop. – Akanksha Rathore Jan 15 '14 at 10:59 — Akanksha Rathore, Jan 15 '14 at 10:59
do you mean round or rectangular? – Sanket Kachhela Jan 16 '14 at 06:59 — Sanket Kachhela, Jan 16 '14 at 06:59

score 3 · Answer 3 · answered Dec 15 '15 at 21:47

I've achieved this by setting the scrollY on my ImageView in the markup. From android's documentation, clearly this is not an option if you're dealing with devices running less than API 14. Also, in my case, I'm using fixed size images that I'm loading based on application state, so they're always the same size. As such, I'm able to just implement it in markup. I realize this approach won't work for everyone.

I wrap the image in a layout that's half as tall as the icon and intentionally have the icon's size at it's actual size. Without the scrollY set, it displays only the top half of the image. Setting the scrollY moves it to where I want it - displaying only the lower half of the image.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal"
    android:gravity="center_horizontal">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/default_icon"
        android:scrollY="50dp" />

</LinearLayout>

So, from my example, it's only displaying the bottom half of the icon.

leave white space below – Bhavin Patel Nov 29 '19 at 11:18 — Bhavin Patel, Nov 29 '19 at 11:18

score 1 · Answer 4 · answered Aug 06 '13 at 07:19

1

Here's an easy way.. Create a separate layout in your main layout just for your images. Make sure it is realitive. Now put your image view for your pictures in side the layout and make it fill parent. OK now make a blank image and add that image view to the bottom of the layout and the top to the center of the layout. Just mess with the margins and size of the imageviews till it looks the way you want it. Hope this helps.

answered Aug 06 '13 at 07:19

NightSkyCode

1,141
2
16
33

The second inageview can just be white for example. Just to hide the bottom half of the main image view. – NightSkyCode Aug 06 '13 at 07:22

score 1 · Answer 5 · answered Jul 21 '17 at 10:29

Convert your drawable into a bitmap and crop to get top of the image to form another bitmap, then display it into your image view.

// to convert  drawable to bitmap
Bitmap resource = BitmapFactory.decodeResource(context.getResources(),
                                           R.drawable.your_resource);
// to set width of bitmap to imageview's width if necessary,
                        int width = imageView.getMeasuredWidth();
// to crop the bitmap to specific width and height,
                            resource = Bitmap.createBitmap(resource, 0, 0, width, height);

score 1 · Answer 6 · answered Nov 09 '20 at 07:18

here is the code to crop image into two part

public static Bitmap getScaleBitmap(Bitmap bitmap, int check) {
    final Bitmap toBeCropped = bitmap;

    final BitmapFactory.Options bitmapOptions = new BitmapFactory.Options();
    bitmapOptions.inTargetDensity = 1;
    toBeCropped.setDensity(Bitmap.DENSITY_NONE);
    int top = 0;
    int bottom = 0;
    int targetheight = 0;
    if (check == 0) {// return 1st half of image 
        top = 0;
        bottom = bitmap.getHeight() / 2;

    } else {// return 2nd half of image 
        top = (bitmap.getHeight() / 2) - 10;
        bottom = (bitmap.getHeight() / 2) - 10;

    }
    int fromHere = (int) (toBeCropped.getHeight() * 0.5);

    Bitmap croppedBitmap = Bitmap.createBitmap(toBeCropped, 0, top, toBeCropped.getWidth(), bottom);
    return croppedBitmap;


}

(Android)How can I show a part of image?

6 Answers6

Linked