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:

13

1234567

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/ ANDROIDANDROID DEVELOPMENT BLOG TUTORIALS ABOUT ANDROID DEV TOPICS

Search here.... ! " # + %

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

below:

123456789

10111213141516171819202122232425

<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>

12345

<resources> <color name="primaryColor_500">#03a9f4</color> <color name="primaryDarkColor_700">#0288d1</color> ....</resources>

?

?

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:

123456789

101112131415161718192021222324252627282930

<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>

123456789

101112131415161718192021222324252627

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); } }); } } });

?

?

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: WeatherTo 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.

2829303132333435363738394041424344454647

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();}

123456789

101112131415161718

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.currentCondition.getIcon(), currentWeather.weather.currentCondition.getWeatherId())); setToolbarColor(currentWeather.weather.temperature.getTemp()); } ....}

?

Source code is available @github

If you like my work and want to help me tokeep this blog free, please support me clicking

on the banner.

Help me to share this blog and give +1 clickingbelow

How to create a simplegame:Peg boa...

Android WeatherLib: Anew lib to cr...

Using AndroidLocation API in

Weath...

Android Weather appTutorial: Step ...

Android Weather appTutorial: Step ...

Android Weather appusing Yahoo wea...

Android Weather App:Google play st...

A Guide to AndroidRecyclerView and...

RELATED POSTS :

RELATEDPOSTS :

Newer Post Older Post

ETICHETTE: ANDROID, ANDROID APP TUTORIAL, ANDROID WEATHER, MATERIAL DESIGN, OPENWEATHERMAP, TOOLBAR

Home

FlashAir DevelopersAPI and Tutorial to develop apps Toshiba FlashAir Wireless SD Card

8447 136Google + 61 139DZone 138Reddit 0

407

FOLLOW MEFOLLOW ME

ARCHIVIO BLOGARCHIVIO BLOG

► ► 20152015 (3)

▼ ▼ 20142014 (26)

▼ ▼ NovemberNovember (2)

A Guide to Android RecyclerView andA Guide to Android RecyclerView andCardViewCardView

Develop android weather app withDevelop android weather app withMaterial 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

++ &&

FOLLOW SWAFOLLOW SWA

POST PIÙ POPOLARIPOST PIÙ POPOLARI

Topics covered Android ListViewSimpleAdapter ...

In the previous post we showed theway we can...

Topics covered HTTP connectionPost request ...

Topics covered How to developweather app ...

Topics covered Android Fragment Fragment...

© 2012-2015 Survivingwithandroid.com

All Rights Reserved. Reproduction without explicitpermission is prohibited.

FOLLOW SWA BY EMAILFOLLOW SWA BY EMAIL

CHECK MY APPCHECK MY APPCATEGORIES

' Android ListView – Tutorial andbasic example

'

' Android ListView : Custom Filter andFilterable interface

'

' Android HTTP Client: GET, POST,Download, Upload, MultipartRequest

'

' Android weather app: JSON, HTTPand Openweathermap

'

Android Fragment transaction: FragmentManagerand Backstack

'

Android Blog' Contact me'

About Me'

Email address... Submit

android UI ListView tutorial androidweather http Fragment Adapter android studioapp 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

Topics covered AndroidSlidingPaneLayout ...

Topics covered Android ListViewArray Adapter ...

Topics covered AndroidSwipeRefreshLayout ...

In this post i want to analyze how touse ListView ...

Topics covered Android WeatherApp Yahoo...

'

' Android SlidingPaneLayout: Tutorial'

' Android ListView : Custom Adapterand Layout

'

' Android SwipeRefreshLayoutTutorial

'

' Android ListView withSectionIndexer and fast scroll

'

' Android Weather app Tutorial: Stepby 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