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

1. Topics covered
Material designMaterial design
Weather appWeather app
Android toolbarAndroid toolbar
Android material colorsAndroid material colors
Android 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 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 UpAndroid 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....! " # + %

2. Now we have our project correctly set up, we can start defining our app layout.
App Layout: Material DesignApp Layout: Material Design
As 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
below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WeatherActivity"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/my_toolbar"
android:layout_height="128dp"
app:popupTheme="@style/ActionBarPopupThemeOverlay"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:paddingLeft="72dp"
android:paddingBottom="16dp"
android:gravity="bottom"
app:titleTextAppearance="@style/Toolbartitle"
app:subtitleTextAppearance="@style/ToolbarSubtitle"
app:theme="@style/ThemeOverlay.AppCompat.Light"
android:title="@string/location_placeholder"
/>
....
</RelativeLayout>
1
2
3
4
5
<resources>
<color name="primaryColor_500">#03a9f4</color>
<color name="primaryDarkColor_700">#0288d1</color>
....
</resources>
?
?

3. Search City: Popup With Material DesignSearch City: Popup With Material Design
We 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/dialog.city.header"
style="@style/Theme.AppCompat.Dialog"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8sp"
android:text="@string/dialog.city.pattern"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:id="@+id/ptnEdit"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/cityList"
android:clickable="true"/>
</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
private Dialog createDialog() {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
LayoutInflater inflater = this.getLayoutInflater();
View v = inflater.inflate(R.layout.select_city_dialog, null);
builder.setView(v);
EditText et = (EditText) v.findViewById(R.id.ptnEdit);
....
et.addTextChangedListener(new TextWatcher() {
....
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (count > 3) {
// We start searching
weatherclient.searchCity(s.toString(), new WeatherClient.CityEventListener() {
@Override
public void onCityListRetrieved(List<City> cities) {
CityAdapter ca = new CityAdapter(WeatherActivity.this, cities);
cityListView.setAdapter(ca);
}
});
}
}
});
?
?

4. An important thing to notice it is at line 33, where we set the toolbar title according to the city selected by the
user and then we get the current weather. The result of this piece of code is shown here:
Weatherlib: WeatherWeatherlib: Weather
To get the current weather we use Weatherlib:
You can notice at line 8 we set the toolbar subtitle according to the current weather while at line 15 we
change the toolbar color according to the current temperature. As toolbar background color we used the
primary colors shown in the guidelines.
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
builder.setPositiveButton("Accept", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
// We update toolbar
toolbar.setTitle(currentCity.getName() + "," + currentCity.getCountry());
// Start getting weather
getWeather();
}
});
builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
return builder.create();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
private void getWeather() {
weatherclient.getCurrentCondition(new WeatherRequest(currentCity.getId()),
new WeatherClient.WeatherEventListener() {
@Override
public void onWeatherRetrieved(CurrentWeather currentWeather) {
// We have the current weather now
// Update subtitle toolbar
toolbar.setSubtitle(currentWeather.weather.currentCondition.getDescr());
tempView.setText(String.format("%.0f",currentWeather.weather.temperature.getTemp()));
pressView.setText(String.valueOf(currentWeather.weather.currentCondition.getPressure()));
windView.setText(String.valueOf(currentWeather.weather.wind.getSpeed()));
humView.setText(String.valueOf(currentWeather.weather.currentCondition.getHumidity()));
weatherIcon.setImageResource(WeatherIconMapper.getWeatherResource(currentWeather.weather.curren
setToolbarColor(currentWeather.weather.temperature.getTemp());
}
....
}
?

5. Source code is available @github

6. If you like my work and want to help me to
keep this blog free, please support me clicking
on the banner.
Help me to share this blog and give +1 clicking
below
How to create a simple
game:Peg boa...
Android WeatherLib: A
new lib to cr...
Using Android
Location API in
Weath...
Android Weather app
Tutorial: Step ...
Android Weather app
Tutorial: Step ...
Android Weather app
using Yahoo wea...
Android Weather App:
Google play st...
A Guide to Android
RecyclerView and...
RELATED POSTS :
RELATED
POSTS :
Newer Post Older Post
ETICHETTE: ANDROID, ANDROID APP TUTORIAL, ANDROID WEATHER, MATERIAL DESIGN, OPENWEATHERMAP, TOOLBAR
Home
FlashAir Developers
API and Tutorial to develop apps Toshiba FlashAir Wireless SD Card
8447 136Google + 61 139DZone 138Reddit 0

7. 407
FOLLOW MEFOLLOW ME
ARCHIVIO BLOGARCHIVIO BLOG
►► 20152015 (3)
▼▼ 20142014 (26)
▼▼ NovemberNovember (2)
A Guide to Android RecyclerView andA Guide to Android RecyclerView and
CardViewCardView
Develop android weather app withDevelop android weather app with
Material DesignMaterial Design
►► OctoberOctober (1)
►► SeptemberSeptember (2)
►► AugustAugust (1)
►► JulyJuly (1)
►► JuneJune (1)
►► MayMay (4)
►► AprilApril (4)
►► MarchMarch (4)
►► FebruaryFebruary (3)
►► JanuaryJanuary (3)
►► 20132013 (32)
►► 20122012 (19)
SUPPORT THIS BLOGSUPPORT THIS BLOG
POPULAR POSTSPOPULAR POSTS
Android ListView – Tutorial and basic exampleAndroid ListView – Tutorial and basic example
Android ListView : Custom Filter and Filterable interfaceAndroid ListView : Custom Filter and Filterable interface
Android HTTP Client: GET, POST, Download, Upload, MultipartAndroid HTTP Client: GET, POST, Download, Upload, Multipart
RequestRequest
Android weather app: JSON, HTTP and OpenweathermapAndroid weather app: JSON, HTTP and Openweathermap
Android Fragment transaction: FragmentManager and BackstackAndroid Fragment transaction: FragmentManager and Backstack
Android SlidingPaneLayout: TutorialAndroid SlidingPaneLayout: Tutorial
++ &&

8. FOLLOW SWAFOLLOW SWA
POST PIÙ POPOLARIPOST PIÙ POPOLARI
Topics covered Android ListView
SimpleAdapter ...
In the previous post we showed the
way we can...
Topics covered HTTP connection
Post request ...
Topics covered How to develop
weather app ...
Topics covered Android Fragment Fragment...
© 2012-2015 Survivingwithandroid.com
All Rights Reserved. Reproduction without explicit
permission is prohibited.
FOLLOW SWA BY EMAILFOLLOW SWA BY EMAIL
CHECK MY APPCHECK MY APP
CATEGORIES
' Android ListView – Tutorial and
basic example
'
' Android ListView : Custom Filter and
Filterable interface
'
' Android HTTP Client: GET, POST,
Download, Upload, Multipart
Request
'
' Android weather app: JSON, HTTP
and Openweathermap
'
Android Fragment transaction: FragmentManager
and Backstack
'
Android Blog' Contact me'
About Me'
Email address... Submit
android UI ListView tutorial android
weather http Fragment Adapter android studio
app actionbar activity android volley custom view
eclipse json weather aar adt aidl androd android app
tutorial android service animation apache app tutorial
asynctask client custom adapter design free gradle
intent intentservice ipc layout market material design
navigation nfc onTouchEvent openweathermap os x
peg board recyclerview remote service sensor service
slidingpanelayout uml volley weather app xml parser
ExpandableListView Filter OnClickListener SimpleAdapter
account achartengine android bound service android
broadcastreceiver android camera android chart android
html parsing android library android location api android
nfc android torch app android wear apn

9. Topics covered Android
SlidingPaneLayout ...
Topics covered Android ListView
Array Adapter ...
Topics covered Android
SwipeRefreshLayout ...
In this post i want to analyze how to
use ListView ...
Topics covered Android Weather
App Yahoo...
'
' Android SlidingPaneLayout: Tutorial'
' Android ListView : Custom Adapter
and Layout
'
' Android SwipeRefreshLayout
Tutorial
'
' Android ListView with
SectionIndexer and fast scroll
'
' Android Weather app Tutorial: Step
by Step guide (Part 2)
'
autocompletetextview avd back button barometer
bluetooth board bound service broadcast receiver button
camera camera flash cardview chart client lib consume
service consume webservice custom component denisty
deserialization. diagram drive drop down navigation
emulator endless adapter error example face face detect
face recognition flash light floating action button forecast
fragments free app genymotion google haxm high pass
filter http post import library inter process coimmunication
java jsoup lib link location locationManager ltiple screen
mac maven central menu money motionevent multipart
request navigation drawer ndef ndef text network
opensource orbitix parcelable parse parser pitch plugin
process project structure promoted actions publish maven
pull-to-refresh restful resultreceiver rtd save layout sdk
sensorlistener sensormanager serialization shake to
refresh share smart poster source code sphero sphero API
start service stats swiperefreshlayout tab tag text to speech
toolbar tts use case user interface view holder viewpager
voice webservice well known type xml yahoo weather
provider
© Copyright 2013 Surviving W/ Android - All Rights Reserved - Distributed By Gooyaabi Templates | Powered By Blogger
Template by Kang Ismet Published by GBTemplatesTemplate by Kang Ismet Published by GBTemplates