The size at which your images display in CommCare depends largely upon the size of the image file you provide. To help you choose the correct file size for how you want the image to look on your device, we have released a new CommCare Developer Toolkit app, which has a utility for image sizing. To use this, follow the steps below:
STEP 0: Get the device you will be using your app on
The final size at which images display in CommCare can also vary between Android device models. If you are only deploying your device on 1 model, just make sure to use that device model for these steps. If you will be deploying your app on multiple device models, refer to the more detailed instructions available here.
STEP 1: Downloading the CommCare Developer Toolkit App
Download the app_release.apk file from this page http://jenkins.dimagi.com/job/commcare-developer-toolkit/ (note that this is NOT a CommCare app; it is a completely separate Android app that runs on its own).
Put the .apk file on the device you wish to do image sizing for, and install it (by opening the .apk file).
STEP 2: Sizing your images
Open the developer toolkit app and select “Size Your Images”.
You will see a sample image whose size you can adjust on the screen. As you adjust the size of the image, the app will update you on the exact dimensions (in pixels) of the image that you are currently viewing, so that you can adjust the size of your image file to match. Use this tool to help you decide what size to make each of your own image files.
Often, you will be looking to resize an existing image, without changing its original aspect ratio. To help you do this, you can use the “Aspect Ratio Lock” button and enter the original dimensions of the image file there. This will lock the resizable image on the screen to that aspect ratio, and then you can size it up or down from there.