android : How to place a scrollable photo into imageView?

Question

I'm now working on some project and actually what I want to do is I will give a user a circle and when he clicks it , he will be able to choose photo either from gallery or with his/her cam , I've actually draw my custom shape of the circle , and then place image into it using Glide-Transformation Library , but the problem is I can't scroll inside this circle to show some specific part of user's image . Any Solution will be helpful . My XML file looks like this :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#D2DDD7"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.karim.helloworld.MainActivity">
<ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/imgView"
    android:padding="5dp"
    android:scaleType="centerCrop"
    android:background="@drawable/circle_image"/>
</RelativeLayout>

and my class activity is :

package com.example.karim.helloworld;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

import jp.wasabeef.glide.transformations.BlurTransformation;
import jp.wasabeef.glide.transformations.CropCircleTransformation;

public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.imgView);
        Glide.with(this).load(R.drawable.pk).bitmapTransform(new CropCircleTransformation(getApplicationContext()))
                .into(imageView);
    }
}]

LychmanIT · Accepted Answer · 2016-09-01T15:27:28.150

There is example of scroll of imageView, hope it helps:

// set maximum scroll amount (based on center of image)
    int maxX = (int)((bitmapWidth / 2) - (screenWidth / 2));
    int maxY = (int)((bitmapHeight / 2) - (screenHeight / 2));
// set scroll limits
final int maxLeft = (maxX * -1);
final int maxRight = maxX;
final int maxTop = (maxY * -1);
final int maxBottom = maxY;

// set touchlistener
ImageView_BitmapView.setOnTouchListener(new View.OnTouchListener()
{
    float downX, downY;
    int totalX, totalY;
    int scrollByX, scrollByY;
    public boolean onTouch(View view, MotionEvent event)
    {
        float currentX, currentY;
        switch (event.getAction())
        {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                break;

            case MotionEvent.ACTION_MOVE:
                currentX = event.getX();
                currentY = event.getY();
                scrollByX = (int)(downX - currentX);
                scrollByY = (int)(downY - currentY);

                // scrolling to left side of image (pic moving to the right)
                if (currentX > downX)
                {
                    if (totalX == maxLeft)
                    {
                        scrollByX = 0;
                    }
                    if (totalX > maxLeft)
                    {
                        totalX = totalX + scrollByX;
                    }
                    if (totalX < maxLeft)
                    {
                        scrollByX = maxLeft - (totalX - scrollByX);
                        totalX = maxLeft;
                    }
                }

                // scrolling to right side of image (pic moving to the left)
                if (currentX < downX)
                {
                    if (totalX == maxRight)
                    {
                        scrollByX = 0;
                    }
                    if (totalX < maxRight)
                    {
                        totalX = totalX + scrollByX;
                    }
                    if (totalX > maxRight)
                    {
                        scrollByX = maxRight - (totalX - scrollByX);
                        totalX = maxRight;
                    }
                }

                // scrolling to top of image (pic moving to the bottom)
                if (currentY > downY)
                {
                    if (totalY == maxTop)
                    {
                        scrollByY = 0;
                    }
                    if (totalY > maxTop)
                    {
                        totalY = totalY + scrollByY;
                    }
                    if (totalY < maxTop)
                    {
                        scrollByY = maxTop - (totalY - scrollByY);
                        totalY = maxTop;
                    }
                }

                // scrolling to bottom of image (pic moving to the top)
                if (currentY < downY)
                {
                    if (totalY == maxBottom)
                    {
                        scrollByY = 0;
                    }
                    if (totalY < maxBottom)
                    {
                        totalY = totalY + scrollByY;
                    }
                    if (totalY > maxBottom)
                    {
                        scrollByY = maxBottom - (totalY - scrollByY);
                        totalY = maxBottom;
                    }
                }

                ImageView_BitmapView.scrollBy(scrollByX, scrollByY);
                downX = currentX;
                downY = currentY;
                break;

        }

        return true;
    }
});

EDIT: Make a mask using follow XML:

<FrameLayout>
    <ImageView />  put a image which has a transparent circle in it
    <ImageView />  your image 
</FrameLayout>

Hmmmmm , Good answer , This helps me to make my image scrollable but It actually doesn't do what I imagine , I want to scroll inside the circle ? Do you have any suggestions ?? Thank @LychmanIT — Karim Abd Elhameed Mohamed, Sep 01 '16 at 15:18
Yeah, Im think that you should make a mask of your circle. http://stackoverflow.com/questions/14801075/android-how-to-apply-mask-on-imageview — LychmanIT, Sep 01 '16 at 15:25
I don't understand , you mean that I should replace my Relative Layout with that frame layout ? .. If so , you mean that in the first imageView I should put my imageView with background @drawble/myshape.xml and In the second ImageView I should put my imageView with src : ../image ?? Please , Refer to that link to know what I mean by the scrolling is outside the circle : http://imgur.com/a/oovmn — Karim Abd Elhameed Mohamed, Sep 01 '16 at 15:39
Read this one: http://stackoverflow.com/questions/18527467/mask-imageview-with-round-corner-background — LychmanIT, Sep 01 '16 at 15:43
Yeahhh , Thank u very much It works (Y) . Check this : http://imgur.com/a/VONAW final question is : have you any idea about how to remove the remaining from the image which is outside the circle , and make user scroll into the image only ?? Thanks for ur effort @LychmanIT — Karim Abd Elhameed Mohamed, Sep 01 '16 at 16:02
By the way I have founded a great repo at GIthub. Maybe it will be usefull for you later... https://github.com/siyamed/android-shape-imageview — LychmanIT, Sep 01 '16 at 17:14

android : How to place a scrollable photo into imageView?

1 Answers1

Linked