CODEWITHSUNDEEP
androidimage
范植勝
范植勝

Reputation: 807

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

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.

Upvotes: 24

Views: 20966

Answers (6)

Kamran Khadim
Kamran Khadim

Reputation: 191

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;


}

Upvotes: 1

Fathima km
Fathima km

Reputation: 2689

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

Upvotes: 1

oddmeter
oddmeter

Reputation: 774

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.

Upvotes: 3

Sanket Kachhela
Sanket Kachhela

Reputation: 10856

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

Upvotes: 3

talkol
talkol

Reputation: 12887

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

Upvotes: 36

NightSkyCode
NightSkyCode

Reputation: 1141

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.

Upvotes: 1

Related Questions