Android Development for Beginners 12

Creating App Inventor InterfacesIn 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

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

8 Responses to “Android Development for Beginners 12”

  1. ben says:

    Thanks for the tutorials 🙂
    I just started on this and did some cool apps.
    Hope to see more tutorials.
    ben

  2. salim says:

    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

    • Derek Banas says:

      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.

  3. Bryant says:

    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

  4. Tal says:

    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

Leave a Reply

Your email address will not be published.

Google+