Blog

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,

android square camera android square camera

Steps to Employ custom camera option in Android Mobiles

  1. First, take custom camera in full screen mode.
  2. Then add a view at the top of screen with height say 50 pixels and width equal to screen width.
  3. Then add a view at the bottom of screen with height equal to:
    Bottom view height = (screen height – (width of screen + top view height))
  4. Now, capture the image. The captured image is of full screen height. So, we have to crop the image to make it square.
  5. 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.
  6. 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.
  7. 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.

Ankit

About Ankit Kamboj

This lead android developer is lunatic about spiderman movies and an enthusiast for sports bikes. His shared love for cricket and movies make sure that his life is never fun-deprived. Having realized his crush for crafting beautiful mobile applications, he stays adamant on enriching the world with his creative work.

Read More from Ankit Kamboj

Leave a Reply:

  1. Aniruddh says:

    Hello,

    Can I get source code zip file

    Thanks

  2. jaehun says:

    hello, I will hope create custom camera view.
    can i get this project code?
    I would like to study.

  3. Riya says:

    Hi there… Its a wonderful blog post….

  4. Mishael says:

    Please can i have this project code, because i want study it carefully. Email: harry4sure@hotmail.com

  5. Umair says:

    Hi,can i get code of this project,Email:saeed.umair8@gmail.com

  6. Ashish says:

    Please can i have this project code, because i want study it carefully. Email: ashishcd94@gmail.com

  7. Raydem0n says:

    conanhawke@hotmail.com

    Thanks. I did the same work but had compatible issues across devices.

  8. Raydem0n says:

    Ah, 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.

  9. Fessi says:

    can i have the source please thanks.

  10. eitan says:

    Hey,
    Thanks for the tutorial.
    If possible, I would love to get the source code.
    eitan@picokapp.com

  11. Vlad livaya says:

    Hi,
    could i also get the source code for this project for studying it in greater detail.
    regards,
    Vlad

  12. Dhaval Solanki says:

    Hi,
    Can I get source code
    Thanks,

  13. sakshi says:

    Hi,
    Can i get source code
    Thanks,

    shatakshiyuvasoft179@gmail.com

  14. HARSH MITTAL says:

    hi can you pls mail the source code at : mittal.harsh54@gmail.com
    Thanks and grt tutorial.

  15. virat bhavsar says:

    Hi can you give me a source code at : – virat.bhavsar1218@gmail.com

  16. Leonel Menaia says:

    Can i get the source code please? lcmenaia@gmail.com

    Thank you

  17. Nguyen Hy says:

    Hi. 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: huychang@outlook.com

  18. Nguyen Hy says:

    Hi. 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: huychang2012@outlook.com

  19. this is solution in my app. thank you for share.
    my mail : huychang2012@outlook.com

  20. Alex Kim says:

    Can i get the source code please?

    hunki1000@gmail.com

    Thank you 🙂

  21. Alfian says:

    Can I get the source code please?
    My email : alfiantryputranto@gmail.com

    Thank you

  22. sauda says:

    Can i get the source code please?

    sadafsauda@gmail.com
    Thank you ?

  23. Andjela says:

    Can i get the source code please? branovicandjela92@gmail.com

    Thank you 🙂

  24. Jayant Paliwal says:

    Hi can you give me a source code at : – mewarisherjayant@gmail.com

  25. Patrycjusz says:

    Hi can you give me a source code at : – p.zajaq@gmail.com

    Thank you 🙂

  26. Anony_Dev91 says:

    Hi. Can you please send me the source code zip file? Thanks.

  27. Gyana ranjan Mohapatra says:

    Can I give the source code please .

  28. bhagwan singh verma says:

    Hi can you give me a source code at : – bhagwanverma11@gmail.com

  29. Arihant jain says:

    Hey,
    Thanks for the tutorial.
    If possible, I would love to get the source code.
    arihant789@gmail.com

  30. Stefano Camaiani says:

    Please can I have the code? stefano@monkeyisland.it Thanks a lot

  31. MP says:

    How to capture square video to many examples have issue using ffmpeg library in android ?

Leave a Comment:

Your email address will not be published. Required fields are marked *

Word on the street

Anmol & his bunch of designers at 42Works surpassed all my expectations — be it design, speed or delivery. His organisation has certainly been the best experience I have encountered with outsourcing. I will certainly recommend them again. They are now my “Go-To-Guys” for all projects.
Dan TaylorVenture CapitalistKilmacolm, United Kingdom
42works

We Love Listening to You

With whom do we have the pleasure of speaking?

Pleasure to meet you, . What business are you from?

How can we help you?

What’s on your mind? Tell us a bit about your project.

Have a current website or reference link?

Any estimate on the budget for your project/campaign?

Great, Where shall we email you?

And how about your phone number?

How did you find us?