How to Build a News App in Android Using NewsAPI, ListView, and WebView

Tuesday, October 15, 2019

How to Build a News App in Android Using NewsAPI, ListView, and WebView

News applications are one of the most common real-world Android projects for learning:

REST APIs
JSON parsing
ListView and RecyclerView
Image loading
Networking
WebView integration

In this tutorial, we will build a simple Android News App using:

NewsAPI
Java
ListView
Picasso Image Library
JSON Parsing
WebView

What We Will Build

In this Android News App:

Fetch latest news articles
Display news headlines
Load news images
Open full article inside WebView
Check internet connectivity
Parse JSON response

Important Modern Android Note

This tutorial modernizes an older Android project structure.

Modern Android applications should preferably use:

RecyclerView instead of ListView
Retrofit instead of AsyncTask
Coroutines instead of AsyncTask
Glide or Coil instead of older Picasso versions
MVVM Architecture
Jetpack Compose

However, this tutorial is still excellent for beginners learning Android networking fundamentals.

Step 1 — Create NewsAPI Account

Create a free API key from:

https://newsapi.org/

You will receive an API key required for fetching news articles.

Step 2 — Create Android Project

Open Android Studio and create:


Empty Activity

using:

Java
Minimum SDK 21+

Step 3 — Add Dependency

Inside:


build.gradle

Add:


implementation 'com.squareup.picasso:picasso:2.8'

Why Picasso?

Picasso simplifies:

Image downloading
Caching
Async image loading
Memory optimization

Step 4 — Add Internet Permission

Open:


AndroidManifest.xml

Add:


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

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

Modernized AndroidManifest.xml


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

<manifest
    xmlns:android=
    "http://schemas.android.com/apk/res/android">

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

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

    <application
        android:allowBackup="true"
        android:supportsRtl="true"
        android:theme="@style/Theme.NewsApp">

        <activity
            android:name=".DetailsActivity"/>

        <activity
            android:name=".MainActivity"
            android:exported="true">

            <intent-filter>

                <action
                    android:name=
                    "android.intent.action.MAIN"/>

                <category
                    android:name=
                    "android.intent.category.LAUNCHER"/>

            </intent-filter>

        </activity>

    </application>

</manifest>

Step 5 — Create activity_main.xml

Create:


res/layout/activity_main.xml


<RelativeLayout
    xmlns:android=
    "http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <ListView
        android:id="@+id/listNews"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:divider="#EEEEEE"

        android:dividerHeight="1dp"/>

    <ProgressBar
        android:id="@+id/loader"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"/>

</RelativeLayout>

Step 6 — Create News List Item Layout

Create:


res/layout/list_row.xml

This layout contains:

News Image
Title
Description
Author
Publish Time

Modern Android applications should prefer:


ConstraintLayout

instead of deeply nested LinearLayouts for better performance.

Step 7 — Create activity_details.xml

This screen loads the full news article inside a WebView.


<RelativeLayout
    xmlns:android=
    "http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"

        android:layout_width="match_parent"

        android:layout_height="match_parent"/>

    <ProgressBar
        android:id="@+id/loader"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"/>

</RelativeLayout>

Step 8 — Create Network Utility Class

Create:


Function.java

This class handles:

Internet checking
HTTP requests
API response handling

Modern Networking Recommendation

This project uses:


HttpURLConnection

Modern Android apps should instead use:

Retrofit
OkHttp
Coroutines
Flow

Step 9 — Create MainActivity.java

MainActivity handles:

Fetching news articles
Parsing JSON
Populating ListView
Opening article details

Important Modernization

The original tutorial uses:


AsyncTask

AsyncTask is deprecated in modern Android development.

Recommended alternatives:

Coroutines
Executors
WorkManager

Example NewsAPI Request


https://newsapi.org/v2/top-headlines
?country=us
&apiKey=YOUR_API_KEY

Step 10 — Create Adapter Class

Create:


ListNewsAdapter.java

The adapter binds:

News title
Description
Image
Author
Publish date

to ListView items.

Step 11 — Create DetailsActivity.java

DetailsActivity loads article URLs inside WebView.

Features:

Zoom support
Progress loading
Web page rendering

How This News App Works

User opens app
App checks internet connection
NewsAPI request is executed
JSON response is parsed
Articles displayed in ListView
User clicks article
WebView opens full article

JSON Parsing Example

NewsAPI returns:


{
  "articles":[
    {
      "title":"News Title",
      "description":"News Description",
      "url":"https://...",
      "urlToImage":"https://..."
    }
  ]
}

Why WebView Is Used?

WebView allows:

Displaying full web pages
Opening articles inside app
Better user retention

Modern Android Architecture Recommendation

Production-grade News Apps should use:

MVVM Architecture
Retrofit
Room Database
Paging 3
RecyclerView
Jetpack Compose
Offline caching
Repository Pattern

Common Beginner Mistakes

1. Exposing API Keys

Never hardcode API keys directly in source code for production applications.

2. Using AsyncTask

AsyncTask is deprecated.

Prefer:

Coroutines
Executors
WorkManager

3. Not Handling Null JSON Values

Some news articles may not contain:

Author
Image
Description

Always handle null values safely.

Picasso vs Glide vs Coil

Library	Use Case
Picasso	Simple image loading
Glide	Large-scale image optimization
Coil	Kotlin-first image loading

FAQ

Can this app work offline?

Not currently.

Offline support can be added using:

Room Database
Caching
Paging Library

Why use RecyclerView instead of ListView?

RecyclerView provides:

Better performance
Animations
Flexible layouts
View recycling optimization

What is the modern networking solution?

Retrofit with Kotlin Coroutines is the modern Android networking standard.

Conclusion

Building a News App is an excellent Android project for learning networking, JSON parsing, image loading, adapters, and API integration.

This project demonstrates how Android applications communicate with remote APIs and display dynamic content.

Modern Android applications should additionally use MVVM architecture, Retrofit, RecyclerView, and lifecycle-aware components for scalable production-grade implementations.

About the Author

Salil Jha is a Full Stack and Mobile Developer specializing in Android, React Native, fintech systems, scalable SaaS platforms, and developer tooling products.

CodeChain Dev — Build Modern Products. Solve Real Problems.

Tuesday, October 15, 2019