Android imageview resize and rotate

You must Login before you can answer or comment on any questions.

We have a few iOS apps with a feature to add images to a photo from the gallery. The image can be drag/dropped, rotated, and resized w/ pinch pull, and then saved to the photo. Works perfect. We are attempting to port the functionality over to Android but are having issues. Right now we are just trying to make an imageview draggable, resizable, and able to rotate. We were able to finally get a smooth drag/drop using the following code, and had planned on just using canScale w/ the built in +/- that comes up next to image on Android; however, the drag code immediately removes the +/- next to image on click. So we are thinking if we could just add a plus and minus button on the screen with an action to increase and decrease the image size by 10% on each click and a rotate left and right button that rotates the image 10 degrees with each click, that it would be our workaround. Maybe I am searching the wrong terms, I can not find how to dynamically resize or rotate an imageview with an eventlistener 'click' on those buttons. Any advice/links/code snippets would be greatly appreciated. Thanks!

var win = Ti.UI.createWindow({
    exitOnClose: true,
    backgroundColor: 'black',
    navBarHidden: true  
});
var view1 = Ti.UI.createView({
    left: 0,
    width: '100%',
    height: '100%'
});
win.add(view1);
var dragView = Ti.UI.createImageView({
    image:'/images/amyhair.png',
    left: 0, top: 0,
    width: 280,
    canScale:true,
    height: 369,
    zIndex: 5,
    startDragx: 0,
    startSragy: 0,
    dragCoef: 0    
});
dragView.addEventListener('touchstart', function(e){
    var p = {x: e.source.left, y: e.source.top};
    var tp = e.source.parent.convertPointToView(p, win);
    e.source.dragCoef = 0;
    e.source.parent.remove(e.source);
    e.source.left = tp.x;
    e.source.top = tp.y;
    win.add(e.source);
    e.source.startDragx = e.x;
    e.source.startDragy = e.y;
});
dragView.addEventListener('touchmove', function(e){
    if ((++e.source.dragCoef % 2) == 0){
        e.source.left += e.x - e.source.startDragx;
        e.source.top += e.y - e.source.startDragy;
        e.source.startDragx = e.x;
        e.source.startDragy = e.y;
        e.source.dragCoef = 0;
    }
});
dragView.addEventListener('touchend', function(e){
    var p = {x: e.source.left, y: e.source.top};
    var tp = win.convertPointToView(p, view1);   
    e.source.parent.remove(e.source);
    e.source.left = tp.x;
    e.source.top = tp.y;
    view1.add(e.source);     
});
view1.add(dragView);
win.open();

1 Answer

Hi

This sample will allow you to create a pin/zoom option in Android. The sample is simple but you can adapt it to allow you to detect rotation by using the returned values as they are rather than the simplified version in here.

This code will show you how to do it, It is a simple test and re-posted form a different questions answer I have given before, the sample includes;

  • Scrollable view
  • Three views added to scrollable view
  • The first view has an image (remote but can be local)
  • A label for feedback on the first view
  • Pinching increases the size of the image
  • Reverse Pinching (who thought that was a good name for the action?) decrease the size of the image
  • Pinching updates the label to tell you the current width and height
  • The example leaves width and height the same but you can change this to suit your needs easily

If this is what you are after then here we go. I have built it as a stand-alone test which you can run by creating a new default project and then replacing the code in app.js with the following code;

var win = Ti.UI.createWindow({  
    backgroundColor: '#fff',
    title: 'Tab'
});
var tab = Ti.UI.createTab({
    icon: 'KS_nav_ui.png',
    title: 'Tab',
    window: win
});
 
//start
var view1 = Ti.UI.createView({ backgroundColor:'#123' });
var view2 = Ti.UI.createView({ backgroundColor:'#246' });
var view3 = Ti.UI.createView({ backgroundColor:'#48b' });
 
var scrollableView = Ti.UI.createScrollableView({
    views: [
        view1,
        view2,
        view3
    ],
    showPagingControl: true
});
win.add(scrollableView);
 
var baseHeight = 200;
var baseWidth = 200;
 
var img = Ti.UI.createImageView({
    height: baseHeight,
    image: 'http://placekitten.com/200/200', // kitten image
    //image: 'http://placehold.it/200x200/c60000/ffffff', // red box with caption
    width: baseWidth,
});
var label = Ti.UI.createLabel({
    color: '#fff',
    font: {
        fontSize: 24,
        fontWeight: 'bold'
    },
    text: baseWidth + ' x ' + baseHeight,
    top: 10
});
view1.add(label);
view1.add(img);
 
img.addEventListener('pinch', function(e) {
    img.height = baseHeight * e.scale;
    img.width = baseWidth * e.scale;
    label.text = Math.round(img.width) + ' x ' + Math.round(img.height);
});
img.addEventListener('touchstart', function(e) {
    baseHeight = img.height;
    baseWidth = img.width;
});
//end
 
var tabGroup = Ti.UI.createTabGroup();
tabGroup.addTab(tab);
tabGroup.open();
If you want to play with it in your won app the chunk that is interesting is between the comments //start and //end.

Change the test image to whatever you want - I have added a kitten from a place holder web site (seriously I am not making it up - there is a place holder site with kittens!) or a simple dark red version.

Important Note: You CANNOT test this on the emulator you MUST compile and test on an actual device. The Android Emulator does not support (as far as I can see) multiple touches suitable for pinching. You can however test it on the iOS simulator without issues (use the Alt key to trigger second point testing).

I have this working on my device right now.

Let me know how you get on.

Your Answer

Think you can help? Login to answer this question!