Weather app using API | Android | Java

In this tutorial, we are going to create a weather app using https://openweathermap.org/ API.

Before going to create the app using API, first see what an API is and how it works.

What is an API?

API stands for Application Programming Interface. A tool that allows for the automatic transfer of data from one program to one or more applications or programs.

Why use an API?

Create automatic transfers of your valuable GO Smart data into your favorite programs.

Working of API

Part 1: Create your API using https://openweathermap.org/

go to the https://openweathermap.org/ and signup using your Google account, then go to the API and create your API.

Part 2: Set the dependency

add JitPack repository to your build file

allprojects {

repositories {

…………….

maven { url ‘https://jitpack.io' }

}

}

add the dependency

dependencies {

……………….

implementation ‘com.github.androdocs:Simple-HTTP-Request:v1.0’

}

Part 3: define the XML file

here in the XML file, we define our layout for the weather app. Here we display Temperature, Last updated time, Forcast, City name, Country name, Humidity, Min Temperature, Maximum Temperature, Time of Sunrise, and Time of Sunset. Here we add searching functionality, which means we search the temperature by city names. Before design, the main XML file first designs other drawable files also copy and paste the other drawable files, now it’s time to design our main XML file

activity_main.xml

<?xml version=”1.0" encoding=”utf-8"?>

<androidx.core.widget.NestedScrollView

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”

android:background=”@drawable/weather_app_background”

tools:context=”.MainActivity”

android:padding=”10dp”>

<LinearLayout

android:orientation=”vertical”

android:layout_width=”match_parent”

android:layout_height=”match_parent”>

<RelativeLayout

android:id=”@+id/first”

android:layout_width=”match_parent”

android:layout_height=”40dp”

android:layout_marginStart=”20dp”

android:layout_marginTop=”30dp”

android:layout_marginEnd=”20dp”

android:padding=”2dp”

android:background=”@drawable/rounded_border”

android:gravity=”center_horizontal”>

<EditText

android:id=”@+id/Your_city”

android:layout_width=”wrap_content”

android:layout_height=”match_parent”

android:layout_alignParentStart=”true”

android:layout_marginStart=”10dp”

android:background=”@drawable/rounded_border”

android:ems=”10"

android:hint=”@string/enter_your_city_name”

android:inputType=”text”

android:textColor=”#ffffff”

android:textColorHint=”#939393"

android:textSize=”15sp”

android:layout_centerVertical=”true”/>

<ImageView

android:id=”@+id/search”

android:layout_width=”35dp”

android:layout_height=”35dp”

android:background=”?android:attr/selectableItemBackground”

android:layout_alignParentEnd=”true”

android:layout_centerVertical=”true”

android:src=”@drawable/search_icon”/>

</RelativeLayout>

<LinearLayout

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:layout_marginTop=”20dp”

android:orientation=”vertical”>

<TextView

android:id=”@+id/forecast”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:textAllCaps=”true”

android:layout_gravity=”center_horizontal”

android:textColor=”@color/text2"

android:textSize=”16sp”

android:includeFontPadding=”false” />

<TextView

android:id=”@+id/temp”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_marginTop=”10dp”

android:textColor=”@color/text2"

android:textSize=”40sp”

android:includeFontPadding=”false”

android:layout_gravity=”center_horizontal”

android:textStyle=”bold” />

<TextView

android:id=”@+id/time”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:textColor=”@color/text2"

android:layout_marginTop=”40dp”

android:textSize=”13sp”

android:layout_gravity=”center_horizontal”

android:includeFontPadding=”false”/>

</LinearLayout>

<LinearLayout

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:layout_marginTop=”210dp”

android:orientation=”vertical”

android:gravity=”center_horizontal”>

<TextView

android:id=”@+id/city”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:textColor=”@color/text3"

android:textSize=”18sp”

android:includeFontPadding=”false”

android:textStyle=”bold” />

<TextView

android:id=”@+id/country”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:textColor=”@color/text1"

android:textSize=”16sp”

android:layout_marginTop=”8dp”

android:includeFontPadding=”false” />

</LinearLayout>

<View

android:layout_width=”150dp”

android:layout_height=”1dp”

android:background=”@color/colorPrimaryDark”

android:layout_marginTop=”15dp”

android:layout_gravity=”center_horizontal”/>

<LinearLayout

android:orientation=”vertical”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:layout_marginTop=”5dp”>

<LinearLayout

android:orientation=”horizontal”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”>

<TextView

android:layout_width=”120dp”

android:layout_height=”wrap_content”

android:gravity=”start”

android:text=”Humidity”

android:textAllCaps=”false”

android:layout_gravity=”center_vertical”

android:textColor=”@color/text1"

android:textSize=”16sp”

android:layout_marginStart=”5dp”

android:textStyle=”bold” />

<ImageView

android:layout_width=”20dp”

android:layout_height=”20dp”

android:src=”@drawable/hum”

android:layout_gravity=”center_vertical”

android:layout_marginStart=”38dp” />

<TextView

android:id=”@+id/humidity”

android:layout_width=”80dp”

android:layout_height=”wrap_content”

android:layout_gravity=”end”

android:gravity=”center”

android:padding=”5dp”

android:text=” — “

android:layout_marginStart=”80dp”

android:textColor=”@color/text1"

android:textSize=”16sp” />

</LinearLayout>

<LinearLayout

android:orientation=”horizontal”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”>

<TextView

android:layout_width=”120dp”

android:layout_height=”wrap_content”

android:gravity=”start”

android:text=”Min Temperature”

android:textColor=”@color/text1"

android:textSize=”15sp”

android:layout_marginStart=”5dp”

android:layout_gravity=”center_vertical”

android:textStyle=”bold” />

<ImageView

android:layout_width=”20dp”

android:layout_height=”20dp”

android:src=”@drawable/tem_down”

android:layout_gravity=”center_vertical”

android:layout_marginStart=”38dp” />

<TextView

android:id=”@+id/min_temp”

android:layout_width=”80dp”

android:layout_height=”wrap_content”

android:layout_gravity=”center_vertical”

android:gravity=”center”

android:padding=”5dp”

android:text=” — “

android:layout_marginStart=”80dp”

android:textColor=”@color/text1"

android:textSize=”16sp” />

</LinearLayout>

<LinearLayout

android:orientation=”horizontal”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”>

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:gravity=”start”

android:text=”Max Temperature”

android:textColor=”@color/text1"

android:textSize=”15sp”

android:layout_gravity=”center_vertical”

android:layout_marginStart=”5dp”

android:textStyle=”bold” />

<ImageView

android:layout_width=”20dp”

android:layout_height=”20dp”

android:src=”@drawable/tem_up”

android:layout_gravity=”center_vertical”

android:layout_marginStart=”38dp” />

<TextView

android:id=”@+id/max_temp”

android:layout_width=”80dp”

android:layout_height=”wrap_content”

android:layout_gravity=”center_vertical”

android:gravity=”center”

android:padding=”5dp”

android:text=” — “

android:layout_marginStart=”80dp”

android:textColor=”@color/text1"

android:textSize=”16sp”/>

</LinearLayout>

</LinearLayout>

<LinearLayout

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:layout_marginLeft=”20dp”

android:layout_marginTop=”15dp”

android:layout_marginRight=”20dp”

android:orientation=”horizontal”

android:layout_gravity=”center_vertical”

android:weightSum=”2">

<LinearLayout

android:layout_width=”0dp”

android:layout_height=”wrap_content”

android:layout_margin=”5dp”

android:layout_weight=”1"

android:gravity=”center”

android:orientation=”vertical”>

<ImageView

android:layout_width=”40dp”

android:layout_height=”wrap_content”

android:src=”@drawable/sunrise”/>

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”Sunrise”

android:includeFontPadding=”false”

android:textColor=”@color/text3"/>

<TextView

android:id=”@+id/sunrises”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_marginTop=”5dp”

android:text=” — “

android:includeFontPadding=”false”

android:gravity=”center”

android:padding=”5dp”

android:textColor=”@color/text1"

android:textSize=”14sp” />

</LinearLayout>

<LinearLayout

android:layout_width=”0dp”

android:layout_height=”wrap_content”

android:layout_margin=”5dp”

android:layout_weight=”1"

android:gravity=”center”

android:orientation=”vertical”>

<ImageView

android:layout_width=”40dp”

android:layout_height=”wrap_content”

android:src=”@drawable/sunset”/>

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”Sunset”

android:includeFontPadding=”false”

android:textColor=”@color/text3"/>

<TextView

android:id=”@+id/sunsets”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_marginTop=”5dp”

android:text=” — “

android:gravity=”center”

android:padding=”5dp”

android:textColor=”@color/text1"

android:textSize=”14sp” />

</LinearLayout>

</LinearLayout>

</LinearLayout>

</androidx.core.widget.NestedScrollView>

the output of the above code:

Part 4: Define our main Java file

first, call the elements in the onCreate() method, also store your API key in a String.

public class MainActivity extends AppCompatActivity {

String CITY;

String API = “Your API Key”;

ImageView search;

EditText etCity;

TextView city,country,time,temp,forecast,humidity,min_temp,max_temp,sunrises,sunsets;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

{

etCity = (EditText) findViewById(R.id.Your_city);

search = (ImageView) findViewById(R.id.search);

// CALL ALL ANSWERS :

city = (TextView) findViewById(R.id.city);

country = (TextView) findViewById(R.id.country);

time = (TextView) findViewById(R.id.time);

temp = (TextView) findViewById(R.id.temp);

forecast = (TextView) findViewById(R.id.forecast);

humidity = (TextView) findViewById(R.id.humidity);

min_temp = (TextView) findViewById(R.id.min_temp);

max_temp = (TextView) findViewById(R.id.max_temp);

sunrises = (TextView) findViewById(R.id.sunrises);

sunsets = (TextView) findViewById(R.id.sunsets);

}

}

now, get return result from URL in your AsyncTask doInBackground()

class weatherTask extends AsyncTask<String, Void, String>{

@Override

protected void onPreExecute() {

super.onPreExecute();

}

@Override

protected String doInBackground(String… args) {

String response = HttpRequest.excuteGet(“https://api.openweathermap.org/data/2.5/weather?q=" + CITY + “&units=metric&appid=” + API);

return response;

}

@Override

protected void onPostExecute(String result) {

try {

JSONObject jsonObj = new JSONObject(result);

JSONObject main = jsonObj.getJSONObject(“main”);

JSONObject weather = jsonObj.getJSONArray(“weather”).getJSONObject(0);

JSONObject sys = jsonObj.getJSONObject(“sys”);

// CALL VALUE IN API :

String city_name = jsonObj.getString(“name”);

String countryname = sys.getString(“country”);

Long updatedAt = jsonObj.getLong(“dt”);

String updatedAtText = “Last Updated at: “ + new SimpleDateFormat(“dd/MM/yyyy hh:mm a”, Locale.ENGLISH).format(new Date(updatedAt * 1000));

String temperature = main.getString(“temp”);

String cast = weather.getString(“description”);

String humi_dity = main.getString(“humidity”);

String temp_min = main.getString(“temp_min”);

String temp_max = main.getString(“temp_max”);

Long rise = sys.getLong(“sunrise”);

String sunrise = new SimpleDateFormat(“hh:mm a”, Locale.ENGLISH).format(new Date(rise * 1000));

Long set = sys.getLong(“sunset”);

String sunset = new SimpleDateFormat(“hh:mm a”, Locale.ENGLISH).format(new Date(set * 1000));

// SET ALL VALUES IN TEXTBOX :

city.setText(city_name);

country.setText(countryname);

time.setText(updatedAtText);

temp.setText(temperature + “°C”);

forecast.setText(cast);

humidity.setText(humi_dity);

min_temp.setText(temp_min);

max_temp.setText(temp_max);

sunrises.setText(sunrise);

sunsets.setText(sunset);

} catch (Exception e) {

Toast.makeText(MainActivity.this, “Error:” + e.toString(), Toast.LENGTH_SHORT).show();

}

}

}

MainActivity.java

package com.example.weatherinfo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.AsyncTask;

import android.os.Bundle;

import android.view.View;

import android.widget.EditText;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

import com.androdocs.httprequest.HttpRequest;

import org.json.JSONObject;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.Locale;

public class MainActivity extends AppCompatActivity {

String CITY;

String API = “Your Api Key here”;

ImageView search;

EditText etCity;

TextView city,country,time,temp,forecast,humidity,min_temp,max_temp,sunrises,sunsets;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

{

etCity = (EditText) findViewById(R.id.Your_city);

search = (ImageView) findViewById(R.id.search);

// CALL ALL ANSWERS :

city = (TextView) findViewById(R.id.city);

country = (TextView) findViewById(R.id.country);

time = (TextView) findViewById(R.id.time);

temp = (TextView) findViewById(R.id.temp);

forecast = (TextView) findViewById(R.id.forecast);

humidity = (TextView) findViewById(R.id.humidity);

min_temp = (TextView) findViewById(R.id.min_temp);

max_temp = (TextView) findViewById(R.id.max_temp);

sunrises = (TextView) findViewById(R.id.sunrises);

sunsets = (TextView) findViewById(R.id.sunsets);

// CLICK ON SEARCH BUTTON :

search.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

CITY = etCity.getText().toString();

new weatherTask().execute();

}

});

}

}

class weatherTask extends AsyncTask<String, Void, String>{

@Override

protected void onPreExecute() {

super.onPreExecute();

}

@Override

protected String doInBackground(String… args) {

String response = HttpRequest.excuteGet(“https://api.openweathermap.org/data/2.5/weather?q=" + CITY + “&units=metric&appid=” + API);

return response;

}

@Override

protected void onPostExecute(String result) {

try {

JSONObject jsonObj = new JSONObject(result);

JSONObject main = jsonObj.getJSONObject(“main”);

JSONObject weather = jsonObj.getJSONArray(“weather”).getJSONObject(0);

JSONObject sys = jsonObj.getJSONObject(“sys”);

// CALL VALUE IN API :

String city_name = jsonObj.getString(“name”);

String countryname = sys.getString(“country”);

Long updatedAt = jsonObj.getLong(“dt”);

String updatedAtText = “Last Updated at: “ + new SimpleDateFormat(“dd/MM/yyyy hh:mm a”, Locale.ENGLISH).format(new Date(updatedAt * 1000));

String temperature = main.getString(“temp”);

String cast = weather.getString(“description”);

String humi_dity = main.getString(“humidity”);

String temp_min = main.getString(“temp_min”);

String temp_max = main.getString(“temp_max”);

Long rise = sys.getLong(“sunrise”);

String sunrise = new SimpleDateFormat(“hh:mm a”, Locale.ENGLISH).format(new Date(rise * 1000));

Long set = sys.getLong(“sunset”);

String sunset = new SimpleDateFormat(“hh:mm a”, Locale.ENGLISH).format(new Date(set * 1000));

// SET ALL VALUES IN TEXTBOX :

city.setText(city_name);

country.setText(countryname);

time.setText(updatedAtText);

temp.setText(temperature + “°C”);

forecast.setText(cast);

humidity.setText(humi_dity);

min_temp.setText(temp_min);

max_temp.setText(temp_max);

sunrises.setText(sunrise);

sunsets.setText(sunset);

} catch (Exception e) {

Toast.makeText(MainActivity.this, “Error:” + e.toString(), Toast.LENGTH_SHORT).show();

}

}

}

}

Output

enter your city name in the EditText field and click the search button.

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store