Topics covered Material design Material design Weather app Weather app Android toolbar Android toolbar Android material colors Android material colors Android material guidelines Android material guidelines Home » android » android app tutorial » android weather » material design » openweathermap » toolbar » Develop android weather app with Material Design DEVELOP ANDROID WEATHER APP WITH MATERIAL DESIGN PUBBLICATO DA FRANCESCO AZZOLA IN ANDROID, ANDROID APP TUTORIAL, ANDROID WEATHER, MATERIAL DESIGN, OPENWEATHERMAP, TOOLBAR - ON NOVEMBER 3, 2014 - 20 COMMENTS This post describes how to create a weather app using material design guidelines. Material Design is a set of rules for visual design, UI interaction, motion and so on. These rules help developer when they design and create an Android app. This post wants to describe how we create a weather app using Weatherlib as weather layer and Material design rules. We want to develop this app not only for Android 5 Lollipop that supports Material design natively but we want to support previous version of Android like 4.x Kitkat. For that reason we will introduce appCompat v7 library that helps us to implement the Material Design even in the previous Android versions. We want to code an app that has a extended Toolbar that holds some information about the location and current weather and some basic weather information about temperature, weather icon, humidity, wind and pressure. At the end we will get something like the pic shown below: Android Project Set Up Android Project Set Up The first thing we have to do is configuring our project so that we can use Weatherlib and especially appCompat v7. We can open build.graddle and add these lines: 13 1 2 3 4 5 6 7 dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:21.0.+' compile 'com.mcxiaoke.volley:library:1.0.6@aar' compile 'com.survivingwithandroid:weatherlib:1.5.3' compile 'com.survivingwithandroid:weatherlib_volleyclient:1.5.3' } ? SURVIVING W/ ANDROID ANDROID DEVELOPMENT BLOG TUTORIALS ABOUT ANDROID DEV TOPICS Search here.... ! " # + %
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Topics covered
Material designMaterial designWeather appWeather appAndroid toolbarAndroid toolbarAndroid material colorsAndroid material colorsAndroid material guidelinesAndroid material guidelines
Home » android » android app tutorial » android weather » material design » openweathermap » toolbar » Develop
android weather app with Material Design
DEVELOP ANDROID WEATHER APP WITH MATERIAL DESIGNPUBBLICATO DA FRANCESCO AZZOLA IN ANDROID, ANDROID APP TUTORIAL, ANDROID WEATHER, MATERIAL DESIGN, OPENWEATHERMAP, TOOLBAR - ON NOVEMBER 3,2014 - 20 COMMENTS
This post describes how to create a weather app using material design
guidelines. Material Design is a set of rules for visual design, UI interaction,
motion and so on. These rules help developer when they design and create
an Android app.
This post wants to describe how we create a weather app using Weatherlib
as weather layer and Material design rules. We want to develop this app
not only for Android 5 Lollipop that supports Material design natively but we want to support previous
version of Android like 4.x Kitkat. For that reason we will introduce appCompat v7 library that helps us to
implement the Material Design even in the previous Android versions.
We want to code an app that has a extended Toolbar that holds some information about the location and
current weather and some basic weather information about temperature, weather icon, humidity, wind and
pressure. At the end we will get something like the pic shown below:
Android Project Set UpAndroid Project Set UpThe first thing we have to do is configuring our project so that we can use Weatherlib and especially
appCompat v7. We can open build.graddle and add these lines:
Now we have our project correctly set up, we can start defining our app layout.
App Layout: Material DesignApp Layout: Material DesignAs briefly explained before, we want to use the Toolbar in our case the extended toolbar. a Toolbar is
action bar generalization that gives us more control. Differently from Action bar that is tightly bound to an
Actvitiy, a Toolbar can be placed everywhere inside the View hierarchy.
So our layout will be divided in three main areas:
Toolbar area
Weather icon and temperature
Other weather data
The layout is shown below:
As you can see we used Toolbar. We set the toolbar height equals to 128dp as stated in the guidelines,
moreover we used the primary color as background. The primary color is defined in colors.xml. You can refer
to material design color guidelines for more information. We should define at least three different color:
The primary color, identified by 500
The primary dark color identified by 700
Accent color that should be for primary action buttons and so on
Our toolbar background color is set to primary color.
Moreover the left padding and the bottom padding inside the toolbar are defined according to the
guidelines. At the end we add the menu items as we are used to do with action bar. The main result is shown
Search City: Popup With Material DesignSearch City: Popup With Material DesignWe can use the popup to let the user to enter the location. The popup is very simple, it is made by a EditText
that is used to enter the data and a simple ListView that shows the city that match the pattern inserted in the
EditText. I will not cover how to search a city in weatherlib because i already covered it. The result is shown
here:
The popup layout is very shown below:
The code to create and handle the dialog is shown below: