How to Create Free Live Weather App In Android – Step by step – Part 1

Thumb-Weather--App-1

6th March, 2020

Hi Developer! In this Android project you will learn how to Create Free Live Weather App In Android – Step by step.

Step 1: Get OpenWeatherMap API Key

OpenWeatherMap is an online service that provides weather data. You need to get an API key to use the OpenWeatherMap service on your Android project. Sign up or login to the OpenWeatherMap and get your API Key.

OpenWeatherMap-API-Key

API CALL:
This is the sample API URL to get current weather.
http://api.openweathermap.org/data/2.5/weather?q=city,country&APPID={your api key}

For example,
http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=your_api_key

API RESPONSE:
Please see the example of API JSON response.

{
  "coord": {
    "lon": -122.08,
    "lat": 37.39
  },
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 282.55,
    "feels_like": 281.86,
    "temp_min": 280.37,
    "temp_max": 284.26,
    "pressure": 1023,
    "humidity": 100
  },
  "visibility": 16093,
  "wind": {
    "speed": 1.5,
    "deg": 350
  },
  "clouds": {
    "all": 1
  },
  "dt": 1560350645,
  "sys": {
    "type": 1,
    "id": 5122,
    "message": 0.0139,
    "country": "US",
    "sunrise": 1560343627,
    "sunset": 1560396563
  },
  "timezone": -25200,
  "id": 420006353,
  "name": "Mountain View",
  "cod": 200
}

Step 2: Create New Project

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from the templates.

2.1 Enable View Binding

Open your app level build.gradle and enable View Binding.

Project ⇒ app ⇒ build.gradle

apply plugin: 'com.android.application'

android {
    viewBinding {
        enabled = true
    }
    /*other stuff*/
}

2.2 Add Internet permission

Open AndroidManifest.xml and add the internet usage permission.

<uses-permission android:name="android.permission.INTERNET" />

Step 3: Design Live Weather Layout

Now next step, design layout for the Live Weather App.

3.1 Create app background drawable (optional)

First create a drawable resource for the app background.
Project ⇒ app ⇒ src ⇒ main ⇒ res ⇒ drawable ⇒ background1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="90"
        android:endColor="#3091FF"
        android:centerColor="#3D98FF"
        android:startColor="#A1CDFF"
        android:type="linear" />
</shape>

3.2 Design Weather Main Layout

Open the activity layout file and add the code given below.

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="@drawable/background1"
    tools:context=".MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/cityTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="City"
                android:textColor="#FFFFFF"
                android:textSize="22sp" />

            <TextView
                android:id="@+id/countryTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Country"
                android:textColor="#FFFFFF"
                android:textSize="16sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="25dp"
                android:orientation="horizontal"
                android:baselineAligned="false">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="end|center"
                    android:layout_gravity="center"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/temperatureTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="15"
                        android:textColor="#FFFFFF"
                        android:textSize="52sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="top"
                        android:text="\u2103"
                        android:textColor="#FFFFFF"
                        android:textSize="22sp" />
                </LinearLayout>

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_gravity="center"
                    android:padding="10dp">

                    <ImageView
                        android:id="@+id/weatherIconImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:adjustViewBounds="true"
                        tools:ignore="ContentDescription"
                        android:src="@mipmap/ic_launcher"/>
                </RelativeLayout>
            </LinearLayout>

            <TextView
                android:id="@+id/weatherConditionTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="25dp"
                android:gravity="center"
                android:text="Condition"
                android:textColor="#FFFFFF"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/weatherDescriptionTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Description"
                android:textColor="#FFFFFF"
                android:textSize="14sp" />
        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:id="@+id/myLoadingLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#33000000"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="gone">

        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Loading data. Please wait..."
            android:textColor="#FFFFFF" />
    </LinearLayout>

</RelativeLayout>

Happy coding!

NEXT PART

Leave a Reply