Social Icons

Ryan's picture

Making the Hilltop Sunset App Part 3: Linking Websites and Changing Colors

Submitted by Ryan on

After figuring out how to add all my lyrics, and display them in an easy-to-read format, I was finally starting to get the hang of navigating all the different block types MIT App Inventor had to offer, and getting a strong sense of what they did and what they were capable of. I kept wanting to expand the app and make it more complex, so I had to think of other functions that could benefit me or someone interested in my music.

The first thing that came to my mind was creating a button that linked straight to my main web page, where there are links to all my social media, songs I have uploaded, blog posts I’ve written, and many other things. Making a link to a webpage turned out to be pretty simple: first, I created a button that read “Website.” Then I jumped over the the Blocks tab, found my Website button, pulled out the “when .Click” block, and set it down.

But before I could make the button link to my website, I had to hop back over to the Designer tab momentarily, because I’d forgotten a necessary step. Under Connectivity in the lefthand Palette there is an option called ActivityStarter. I had to drag that over and drop it onto my app, thereby setting a new, non-visible component that showed below the preview screen.

Once that was done, I went back to the Blocks tab and located the new Activity Starter menu, which had everything I needed: set ActivityStarter DataUri, set ActivityStarter Action, and call ActivityStarter .StartActivity. I set these into the “when Website .Click” block in the order I mentioned them from top to bottom. For the DataUri block, I connected a blank textbox and input my website’s URL. The Action block needed to have a textbox with the text “android.intent.action.VIEW” in order to function properly, and the .StartActivity block needed no additions.

At this point I felt like I basically had everything I wanted, but just to take it a step further, I decided to update the Wheel-O-Songs to include two extra buttons--one for each of my albums. So I took the simple steps from Part 1, making buttons with my album titles above and below the main Wheel-O-Songs button in the middle. When clicked, I set it changed the text on the middle button to a random song within the album clicked. To do this I just established two separate lists containing only songs from the respective albums. The middle button still caused the randomizer to select a random song from either album, which I liked.

And with that, my app was all done! At least, mechanically. I tested all the functions as I went, made sure they worked as they were supposed to, and once I was sure things were working as intended, I decided I wasn’t happy with the default colors offered by MIT App Inventor; they were all very bright and clashing. I wanted to manually select a few colors to keep a consistent color scheme with my main website.

Unfortunately I was not able to find any easy way to establish a new color palette for my app. The only way I could see to do it was to change every aspect of every screen individually, piece by piece. So I did. I used this website to find the codes for the colors I wanted to use, and proceeded to meticulously set the colors for my backgrounds, texts, buttons, and labels using the “make color” block under Colors. I used the “when .Initialize” block under the screen options for every screen to make the colors set themselves immediately upon each screen opening. I connected my phone to App Inventor, checked every screen to make sure I’d changed all the colors and that the new colors were correct, and was done!

After researching tutorials and info from the MIT App Inventor site directly and experimenting on my own for several hours a day over 4 or 5 days, my android app was finally complete. Despite my lack of pre-existing knowledge or experience with programming, I had successfully put together enough puzzle pieces to call myself an app inventor.

Overall, my first experience with MIT App Inventor was a great success. I’m really happy with the program, and with my app, and I definitely encourage anyone else who enjoyed problem solving to give MIT App Inventor a try! Not only was it fun, but it produced a useful tool that I now have forever.