With more and more apps like Instagram flooding the market, having a square mode camera in your application is just as common as it gets. However, as easy may it seem, coding a custom square mode camera with precise image capturing has proven to be a pain in the a** for many developers. But as they say, your solution is just a step away when you give an honest attempt. We recently implemented the square mode camera for one of our dear customers ‘Krumbb’. It was quite a challenge in the beginning to find a workaround with the calculations for the square camera, but the end result was sweet. We decided to jot down the procedure and steps to develop a custom camera in square mode for Android, like Instagram.
To implement a custom camera like that of Instagram in square mode, we open a custom camera in full screen mode. Now, the trick is to calculate the bottom view height instead of the square screen height. In our example, we have used Action Bar of 50 pixels, so in that case you’ll have to subtract that value too in your calculation. Read below for a detailed description on how to implement this functionality,
Steps to Employ custom camera option in Android Mobiles
- First, take custom camera in full screen mode.
- Then add a view at the top of screen with height say 50 pixels and width equal to screen width.
- Then add a view at the bottom of screen with height equal to:
Bottom view height = (screen height – (width of screen + top view height))
- Now, capture the image. The captured image is of full screen height. So, we have to crop the image to make it square.
- For this, we have to crop the image (as told above) with height equals to image width. Now, the image is in the square mode.
- Now, make another view with width of view equal to screen width and also height of view equal to screen width. The view will also be in square mode.
- Now, place that captured image on that view. So, the image will be in square mode like Instagram.
By default, Android custom camera is not in square mode.
To convert it to Instagram square mode option, we need to open camera in full screen. After the picture has been captured, calculations are done to make both height and width of the picture equal. Equal height and width results in square mode. Just what we wanted.
Editor’s Note: We are sure you will love our Android Square Mode Camera tutorial as much as our developers loved to make it. For any source code related enquiries, please drop us your queries at email@example.com.