Simple Image Selector and Editor

This demo is about achieving two main things, selecting images found on a user's sdcard (excluding assets and private app directory) and displaying them with thumbnails, and carrying out some simple editing on the image file (without destroying the original file) - make a thumbnail, crop the image, and resize the image.

I used six extensions to achieve this, and these need mentioning up front. Credits go to the extension developers! :




The app starts off by creating a working directory, ImageEdit, on the sdcard, the user needs to give permission for access to the sdcard for read and write, without this, nothing will work.



Then the app will fetch all the directories on the sdcard that contain jpg or png images and return this list of directories in a standard listview (Taifun File), inside a dialog (Zhangzqs).












On selection of a directory, the app will then return a custom listview (Taifun File)(ColinTree) inside a dialog (Zhangzqs), showing a thumbnail of each file and it's name. For directories with a large number of images, it can take some time to return the custom listview.

Commentary: for the listviews inside dialogs, you need to include a container arrangement in order to get the listview to size by pixels or percentage. The dialog takes its sizing from the arrangement, otherwise it will fill most of the screen. Also if requiring more than one "dialog", use a separate instance of the extension (drag out another one).



+



+



+



On selection of a file from the custom listview, the image is displayed, along with its name and path. 



+



+



+





The user is offered "Actions":

Commentary: In all cases, a copy of the the target file is made to the ImageEdit folder to be worked on, this preserves the original file in it's original location. png images are converted to jpg images to allow the Taifun Image extension to work.



+



+



Make Thumbnail

Carlos' Thumbnail extension does just that, the user is provide options for quality and thumbnail size. The extension saves the thumbnail to the root of the sdcard, therefore the app moves this to the ImageEdit folder. The thumbnail is displayed.



+




+



Crop Image

The app uses a canvas to display the image, and provides four cropping bars, which the user can drag into position. If the user presses on an intersection of two cropping bars, both can be dragged at the same time. 



+



+



+




Once the user is happy with their crop arrangement they can crop the image (Taifun Image), which is then displayed inside the canvas.

Commentary: To affect the crop, the app has to resize the image to fit in the canvas, then use the position of all the cropping bars to determine the cropping points for the extension.



+



+



+


Resize Image

The image is displayed and the user is offered a percentage selector. 0% shows the start dimensions. Selecting a higher percentage will present the output dimensions. for example, selecting 25% will reduce the size of the image by 25%, keeping the aspect ratio. 



+



+



+



When the user is happy, they can resize the image (Taifun Image), a notification confirms this is done. (Purposefully, the app does not allow for making an image bigger, or resizing away from the aspect ratio).



+




+



Commentary: The app will show the ImageEdit folder when selecting directories to allow the user to see the images created. The user may want to "tidy" this directory using their device File Manager or a decent third party File Manager such as andExplorer.

Directories

Images

Display

Actions

Make Thumbnail

Crop Image 1

Crop Image 2

Resize Image 1

Resize Image 2

BLOCKS

DOWNLOADS