Android Development for Beginners 12
In this video I’ll focus on creating App Inventor interfaces. I’ll take the vector art I made in the last tutorial and convert it into a App Inventor interface.
I create regular non-App Inventor interfaces in pretty much exactly the same way. Here is the original vector art I created. Here is the finished transparent PNGs I made in this video. The component information follows the video.
If you like videos like this, it helps to tell Google Plus with a click here [googleplusone]
App Inventor Design View Component Info
Screen1 : Screen Orientation – Portrait
HorizontalArrangement1 : Width – Fill Parent
Image1 : Picture – TransparentPadding : Width – 15 px : Height – 22 px
CityTextBox : Fontsize – 11 : Hint – Enter City : Width – 256 px : Height – 30px
SearchButton : Image – SearchButton : Width – 37 px : Height – 30 px
HorizontalArrangement2 : Width – Fill Parent : Height – 4 px
HorizontalArrangement3 : Width – Fill Parent : Height – 22 px
Image2 : Picture – TransparentPadding : Width – 15 px : Height – Automatic
CityNameLabel : FontSize – 20 : Text – Pittsburgh : Width – Fill : Height – 22 px
HorizontalArrangement5 : Width – Fill Parent : Height – Automatic
Image3 (Margin) : Picture – None : Width – 15 px
TableArrangement1 : Column – 1 : Rows – 2 : Width – 167 px
CurrentTempLabel : FontSize – 48 : Text – 37˚
CurrentWeatherLabel : FontSize – 16 : Text – Chance Rain
Large Weather Image
HorizontalArrangement6 : Width – 107 px
CurrentWeatherIconImage : Picture – Rain.png
HorizontalArrangement8 : Width – Fill Parent : Height – 6 px
HorizontalArrangement7 : Width – Fill Parent
Image4 : Width – 15 px
CurrentWeatherReportLabel : FontSize – 14 : Text – Copy / Paste : Width – Fill
HorizontalArrangement10 : Width – Fill Parent : Height – 6 px
HorizontalArrangement9 : Width – Fill Parent : Height – 10 px
Image5 : Picture – TransparentPadding : Width – 15 px
DividingBar1Label : FontSize – 14 : Width – 290 px : Height – 4 px
HorizontalArrangement11 : Width – Fill Parent : Height – 6 px
TableArrangement2 : Column – 13 : Rows – 1 : Width – Fill Parent
Image6 : Picture – None : Width – 22 px
Image7 : Picture – LowTemp : Width – 12 px
Label1 : FontSize – 14 : Width – 19 px
CurrentLowLabel : FontSize – 14 : Text – 19˚ : Width – 43 px
Image8 : Picture – DewPoint : Width – 12 px
Label3 : FontSize – 14 : Width – 19 px
CurrentDewPointLabel : FontSize – 14 : Text – 22 : Width – 36 px
Image9 : Picture – WindChill : Width – 17 px
Label5 : FontSize – 14 : Width – 20 px
CurrentWindChillLabel : FontSize – 14 : Text – 27 : Width – 37 px
Image10 : Picture – Visibility : Width – 20 px
Label7 : FontSize – 14 : Width – 10 px
CurrentVisibilityLabel : FontSize – 14 : Text – 7.00 : Width – 42 px
HorizontalArrangement12 : Width – Fill Parent : Height – 6 px
TableArrangement3 : Column – 13 : Rows – 1 : Width – Fill Parent
Image11 : Picture – None : Width – 22 px
Image12 : Picture – LowTemp : Width – 12 px
Label8 : FontSize – 14 : Width – 19 px
CurrentHighLabel : FontSize – 14 : Text – 19˚ : Width – 43 px
Image13 : Picture – DewPoint : Width – 12 px
Label9 : FontSize – 14 : Width – 19 px
CurrentHumidityLabel : FontSize – 14 : Text – 22 : Width – 36 px
Image14 : Picture – WindChill : Width – 17 px
Label11 : FontSize – 14 : Width – 20 px
CurrentWindSpeedLabel : FontSize – 14 : Text – 27 : Width – 37 px
Image15 : Picture – Visibility : Width – 20 px
Label14 : FontSize – 14 : Width – 10 px
WindDirectionLabel : FontSize – 14 : Text – 7.00 : Width – 42 px
HorizontalArrangement13 : Width – Fill Parent : Height – 10 px
HorizontalArrangement14 : Width – Fill Parent : Height – 10 px
Image16 : Picture – Transparent : Width – 15 px
DividingBar2Label : FontSize – 14 : Width – 290 px : Height – 4 px
Thanks for the tutorials 🙂
I just started on this and did some cool apps.
Hope to see more tutorials.
ben
App Inventor is pretty awesome! I plan on making many more tutorials for it.
hello derek..
how are you.i hope you are doing great. it’s a great weather app but how to make it international. and how can we use any json or weather api or news api on app inventor .
thanks for your time and have a great day.
salim
salim2k2@gmail.com
Hello Salim,
I’d use the weather undergrounds feed to make this app international. The only reason I didn’t do that is because the Weather Underground requires an API key were the national service I used doesn’t. Every time I use API keys they get shutdown because of over use. That tends to cause confusion. Every thing I covered here can easily be switched over. I tested it.
Thanks for your tutorials and I appreciate it so much.
The component info and weather PNG images are important for me to speed up learning.
Though I try to figure out where I may download free Photoshop and Illustrator. My question : Is there any website to download free Photoshop and Illustrator software?
Thanks
You’re very welcome 🙂 I don’t know about where to get Illustrator for free, but Inkscape is free and is similar to Illustrator. I have a tutorial on Inkscape. Gimp is a free version of Photoshop.
Hi Derek
Thanks for the great tutorials, they gave me the boost I needed.
My question is why no use just layouts for padding?
Another question is this will only work on a specific phone, if the screen size will be different you will need to make every padding dynamic, am I right?
Thanks,
Tal
Hi Tal,
App Inventor automatically scales even if you define sizes for your components. It is pretty great 🙂