preloader LOADING

42Works Blog

Posted on July 29, 2015

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.

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 contact@42works.net.


Comments

  • Hello,

    Can I get source code zip file

    Thanks

    Reply
    • Hi Anirudh,

      Please leave your contact details (name, email id and phone number) at and we’ll get in touch with you.

      Reply
      • Mayank Dudhatra

        I need a source code

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

    Reply
    • Hi Anirudh,

      Please leave your contact details (name, email id and phone number) at and we’ll get in touch with you.

      Reply
      • Can i also get the source code?
        email:

        Reply
      • I have need sourcw code of camera perview.
        Thanks
        Vikram

        Reply
  • Hi there… Its a wonderful blog post….

    Reply
  • Please can i have this project code, because i want study it carefully. Email:

    Reply
  • Helpful post

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

    Reply
  • Please can i have this project code, because i want study it carefully. Email:

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

    Reply
  • 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.

    Reply
  • can i have the source please thanks.

    Reply
  • Hey,
    Thanks for the tutorial.
    If possible, I would love to get the source code.

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

    Reply
  • Hi,
    Can I get source code
    Thanks,

    Reply
  • Hi,
    Can i get source code
    Thanks,

    Reply
  • hi can you pls mail the source code at :
    Thanks and grt tutorial.

    Reply
  • Hi can you give me a source code at : –

    Reply
  • Can i get the source code please?

    Thank you

    Reply
  • 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:

    Reply
    • mail: not

      Reply
  • 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:

    Reply
  • this is solution in my app. thank you for share.
    my mail :

    Reply
  • Can i get the source code please?

    Thank you 🙂

    Reply
  • Can I get the source code please?
    My email :

    Thank you

    Reply
  • Can i get the source code please?


    Thank you ?

    Reply
  • Can i get the source code please?

    Thank you 🙂

    Reply
  • Hi can you give me a source code at : –

    Reply
  • Hi can you give me a source code at : –

    Thank you 🙂

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

    Reply
  • Can I give the source code please .

    Reply
  • Hi can you give me a source code at : –

    Reply
  • Hey,
    Thanks for the tutorial.
    If possible, I would love to get the source code.

    Reply
  • Please can I have the code? Thanks a lot

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

    Reply
  • Thanks for the tutorial.
    If possible, I would love to get the source code.
    my email:

    Reply
  • Hi can you give me a source code, I need it 🙂
    email:-

    Thank you

    Reply
  • Thanks for the tutorial.
    please can you send me the source code at this email

    Reply
  • Thanks for the tutorial.
    If possible, I would love to get the source code.
    my email:

    Thank you.

    Reply
  • Please provide the code snippet i possible. Thank You

    Reply
  • Helpful post, please can i get the source code for the square camera.
    email:

    Reply
  • Hi,

    Can i pls get the source code so that i can study it ,my email id is

    Reply
  • Can i get the source code please?

    Reply
  • I need an app with similar functionality.

    Reply
  • Can i get the source code please?

    Thank you

    Reply
  • Hello Can you please provide source code
    email:-

    Thank you

    Reply
  • Please send source code, thank you in advance.

    Reply

Leave a Comment:

Your email address will not be published.

para glider
Have a Project ?
We are just as excited
about your Idea
My name is
& I'm interested in discussing about
for my project
. You can email me at
or ring me up at
.

Beijing China 220.181.125.138 https://42works.net/tutorials/easy-steps-to-set-square-mode-camera-in-android-like-instagram