One of the hot apps right now is the Instagram app and if you are looking to build something similar the filter effects are a key component. You easily build an app like Instagram with Delphi XE5 Firemonkey and this post includes demo source code to get you started. I have tested the app on Android and Windows but I think it should also work on IOS and OSX (except for the mobile only functionality). There are three parts to the demo: loading and cropping a photo, applying a filter effect, and sharing the resulting image. Delphi XE5 Firemonkey comes with over 60 different effects for you to use and you can combine them to make even more. The hardest part of getting the filters working are that the drag and drop functionality of filters does not automatically stack as far as I know. What this means is that if you want to combine the effects of two filters you have to do it in code. I searched and searched for the best way to do this and I finally found a way which only takes one line of code to apply a permanent filter to a bitmap. The other big piece of functionality in this demo is using TSelection to crop the image into a square. The math to get the TSelection object to crop correctly was tricky. I had to bring in an expert Delphi developer from oDesk to get the TSelection math right. Lastly I used the Share Sheet demo and the Camera Roll demo from Embarcadero to hook up getting a photo from CameraUI, getting a photo from the Camera Roll, and Sharing the photo at the end using the Share Sheet. I would really like to see some code that calls the Share Sheet without having the assign the action to a button. In any event I am including the demo source code for this app below. I included a default photo in the crop section of the app for testing purposes but for a real app you would remove that.
Download the Instagram Filters Clone Source Code For Delphi XE5 Firemonkey.
Nice one
I noticed something regarding the horizontal scrolling, which is while you are trying to scroll through the effects, you can accidently apply one of them, how to prevent this from happening? I would like to allow a user to scroll smoothly (iOS experience), but I do not want him accidently to apply the effect, is there a way to prevent this from happening.
Thanks in advance
I’ve experienced this with other controls on top of scrolling areas (like TListBox). How I solved it for scrolling with a TListBox was making sure there was enough empty space margin on the right side for the user’s finger to scroll. In my case I used 50 pixels.
For the Instagram clone code I’m not sure there is enough space to add an empty area like that. One solution might to require applying the filter be a long tap or a double tap. Another might be to do your own scrolling using gestures (not sure how this would fix the problem but maybe).
Maybe if the mouse moves more than 10-20 pixels between the mouse down and mouse up you don’t apply the filter (because it would probably be a scroll).
Thank you for your reply, I think they should try to solve this, s it UX is very important, do you know any resources on how to handle scrolling and tapping in code? appreciate your feedback.
Solution 🙂
Just bought TMS and used the native UICollectionView, although I am killing the “multi-platform” aspect of FM by this solution, and I will need to find a native component for Android.
You can try a TGridPanelLayout for Android. Not sure how the scrolling on it works yet.
I also noticed that the application is not handling images in portrait mode when taking a photo from library, they are always rotated to a landscape mode, I looked in many places to see how this can be handled, could you please guide me if you came across this problem before?
Regards
This only happens in Android!!!
Yeah different cameras and devices seem to all do it differently. The camera is in a different place on the device on an Ipad and Iphone for example.
If height is greater than width you can:
TBitmap.Rotate()