when it comes to being a good tinkerer a great tool to have in your arsenal is the ability to quickly mock up a mobile app but programming an app from scratch is very time consuming so what I'm going to do is show you how to make a simple Android app with mi t--'s App Inventor so that you can spend less time on creating an app and more time with your other projects no programming is required for this tutorial the idea is to make an app that one takes pictures to overlays an image on that picture three overlays text on the pictures well and four can share the image online and to properly set your expectations this is just going to be the basics on how to use the App Inventor and it's not really for serious developers and also know this is not a paid product placement all right we've got seven minutes to do this so let's start tinkering on the App Inventor website click create and lamp it forces you to log in with your Google account so if you're at all uncomfortable with that you're not going to be able to use this program click start new project and then give it a name all right now this is the main interface you have a phone simulator in the middle a list of different drag and drop components to the left and a component configuration panel to the right in this panel you can edit component settings now for instance on our screen component we can use it to add a description name icon background and so on all right let's start designing our app you can begin by clicking and dragging a label component onto the phone then add a canvas three buttons and a text box to help organize things you can drag out a horizontal layout component and move stuff into it you can also adjust height than width in the configuration panel ultimately you want it to look something like this change this label text to whatever you want to call your app and then select the first button this is going to be the one that takes a picture so go ahead and rename it to something that's more relevant and change the text to say picture the text box is for the image description and then you can add a hint here so the users know what it's for this will be the apply button and this last one will be the share button select the canvas and add an image as the background you can download the ones that I'm using in this video at this link or you can just make your own to keep it from looking warped you can set the height and width to match the size of the picture then to add an overlay drag a sprite on to the canvas and upload the overlay image that you want to use again give it a static height and width so it's not warped the last two components that we need to make this work are a camera component and a sharing component now if you want to preview this on your phone app inventor has a cool plugin called AI companion that you can download from the App Store to your Android device once it's installed click connect and then AI companion and scan the QR code from within the app now you can preview real-time changes on your actual Android device now we need to make it functional so click on the blocks button to get to the block li interface block li is like Legos for programmers instead of code you can stack and snap blocks together here you'll see different block categories including the ones for our different components so let's start with our picture button select it and drag out a win it is clicked block then select the camera and drag the take a picture block into the button block until it snaps this tells it to take a picture whenever the picture button is clicked piece of cake to set that image as our canvas background drag out a after picture block and then with the canvas drag a background image block if you hover over this image text you can drag the get image block to the end of this block now on your phone you should be able to take a pic sure and set it as the canvas background then to add overlay text drag out a wing clicked blocked for our apply button and then with the canvas clear it and then draw text to it using the text box as the source tags and Y values are for the width and height positioning respectively dragging out a number block I'm setting X to half of my image width and white about 30 pixels from the bottom of the image you can customize the text by adding a canvas paint color and font size block duplicating this set of blocks and adjusting the positioning will give you a cool 3d effect last let's make a way to share it so drag out a share button clicked block and then from the share component drag a share file block but you'll see that it requires a file path which we don't have so first we need to save our image to a file before we can share it so from the canvas drag out a save file as block and to get it to fit you can use and evaluate but ignore block to snap it into then drag out a text block and put a file name into it with the jpg extension now we can point to this file from our share block but we need to use its full file path name which would be this now give it a try and see if it works if you see this option then you can now share your image with whatever apps your phone allows tweak it as much as you want but at this point you have your first working app you can now go to the build menu to download it to your phone or to upload it to the App Store you can find mine here at this link if you want a more detailed behind-the-scenes look at making this app you can click here when it becomes available you can also click here to check out more of my videos like this and if you'd like to support my show feel free to like subscribe comment follow me on social media or donate at tinkernut.com slash donate all right that's it for this tutorial
No comments:
Post a Comment