Easy Steps to Set Square mode camera in Android [like Instagram]
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.
Overview:
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.
Conclusion
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 .
Comments
Aniruddh says:
February 8, 2016 at 1:27 pmHello,
Can I get source code zip file
Thanks
Priyanka Thakur says:
April 7, 2016 at 10:11 amHi Anirudh,
Please leave your contact details (name, email id and phone number) at and we’ll get in touch with you.
Mayank says:
December 20, 2016 at 6:30 amMayank Dudhatra
I need a source code
jaehun says:
March 15, 2016 at 6:17 pmhello, I will hope create custom camera view.
can i get this project code?
I would like to study.
Priyanka Thakur says:
April 7, 2016 at 10:12 amHi Anirudh,
Please leave your contact details (name, email id and phone number) at and we’ll get in touch with you.
Vlad livaya says:
September 28, 2016 at 2:08 pmCan i also get the source code?
email:
Vikram Sharma says:
January 8, 2018 at 9:34 amI have need sourcw code of camera perview.
Thanks
Vikram
Riya says:
April 7, 2016 at 10:13 amHi there… Its a wonderful blog post….
Mishael says:
April 28, 2016 at 10:18 pmPlease can i have this project code, because i want study it carefully. Email:
Prakash says:
May 23, 2016 at 11:35 amHelpful post
Umair says:
June 14, 2016 at 5:53 amHi,can i get code of this project,Email:
Ashish says:
July 11, 2016 at 11:00 amPlease can i have this project code, because i want study it carefully. Email:
Raydem0n says:
July 20, 2016 at 12:46 amThanks. I did the same work but had compatible issues across devices.
Raydem0n says:
July 20, 2016 at 12:57 amAh, I saw that your two sample square are different. The captured one got a few offset compared to the previewed one. That’s one of the compatible issue. Another two issues was out of shape or got blur preview and captured bitmap on various devices.
Fessi says:
July 30, 2016 at 6:36 pmcan i have the source please thanks.
eitan says:
September 18, 2016 at 10:11 amHey,
Thanks for the tutorial.
If possible, I would love to get the source code.
Vlad livaya says:
September 28, 2016 at 2:09 pmHi,
could i also get the source code for this project for studying it in greater detail.
regards,
Vlad
Dhaval Solanki says:
October 4, 2016 at 11:36 amHi,
Can I get source code
Thanks,
sakshi says:
October 14, 2016 at 11:17 amHi,
Can i get source code
Thanks,
HARSH MITTAL says:
October 16, 2016 at 3:05 pmhi can you pls mail the source code at :
Thanks and grt tutorial.
virat bhavsar says:
October 22, 2016 at 9:57 amHi can you give me a source code at : –
Leonel Menaia says:
October 24, 2016 at 2:17 pmCan i get the source code please?
Thank you
Nguyen Hy says:
November 2, 2016 at 2:58 pmHi. i need this source code in my app. i was search this solution very long. Can you share for me source code this app. Thanks you so much
my mail:
Nguyen Hy says:
November 2, 2016 at 3:07 pmmail: not
Nguyen Hy says:
November 2, 2016 at 3:06 pmHi. i need this source code in my app. i was search this solution very long. Can you share for me source code this app. Thanks you so much
my mail:
Huy Bee Nguyễn says:
November 3, 2016 at 9:46 amthis is solution in my app. thank you for share.
my mail :
Alex Kim says:
November 7, 2016 at 5:46 amCan i get the source code please?
Thank you 🙂
Alfian says:
November 7, 2016 at 12:04 pmCan I get the source code please?
My email :
Thank you
sauda says:
November 11, 2016 at 3:46 pmCan i get the source code please?
Thank you ?
Andjela says:
November 21, 2016 at 11:02 amCan i get the source code please?
Thank you 🙂
Jayant Paliwal says:
November 26, 2016 at 11:36 amHi can you give me a source code at : –
Patrycjusz says:
December 8, 2016 at 12:56 pmHi can you give me a source code at : –
Thank you 🙂
Anony_Dev91 says:
February 3, 2017 at 7:46 amHi. Can you please send me the source code zip file? Thanks.
Gyana ranjan Mohapatra says:
March 15, 2017 at 5:19 amCan I give the source code please .
bhagwan singh verma says:
March 15, 2017 at 8:42 amHi can you give me a source code at : –
Arihant jain says:
March 30, 2017 at 10:50 amHey,
Thanks for the tutorial.
If possible, I would love to get the source code.
Stefano Camaiani says:
April 9, 2017 at 11:35 amPlease can I have the code? Thanks a lot
MP says:
May 13, 2017 at 12:29 pmHow to capture square video to many examples have issue using ffmpeg library in android ?
hanen says:
September 27, 2017 at 6:58 pmThanks for the tutorial.
If possible, I would love to get the source code.
my email:
Deepak Patidar says:
October 6, 2017 at 4:29 amHi can you give me a source code, I need it 🙂
email:-
Thank you
hussein yehya says:
December 26, 2017 at 3:51 pmThanks for the tutorial.
please can you send me the source code at this email
Merve says:
February 5, 2018 at 9:00 amThanks for the tutorial.
If possible, I would love to get the source code.
my email:
Thank you.
Arnold says:
July 20, 2018 at 10:34 amPlease provide the code snippet i possible. Thank You
David Cobbina says:
September 20, 2018 at 10:28 amHelpful post, please can i get the source code for the square camera.
email:
gaurav says:
December 22, 2018 at 11:54 amHi,
Can i pls get the source code so that i can study it ,my email id is
Rohash says:
January 3, 2019 at 5:23 amCan i get the source code please?
Chirag says:
January 15, 2019 at 8:20 pmI need an app with similar functionality.
Sanket says:
March 8, 2019 at 3:41 pmCan i get the source code please?
Thank you
Sanket says:
March 8, 2019 at 3:47 pmHello Can you please provide source code
email:-
Thank you
Rigo says:
April 25, 2019 at 4:53 pmPlease send source code, thank you in advance.