How To Create A News Feed In Android Studio

Summarize this article with:

Every popular app has one thing in common: a feed that keeps users scrolling.

Learning how to create news feed in Android Studio gives you the foundation to build content-driven apps that users actually want to open.

This tutorial walks you through the complete process. You will set up RecyclerView, connect to a news API, parse JSON data, and display articles with images in a clean, scrollable list.

No fluff. Just working code you can run in under an hour.

By the end, you will have a functional mobile application that fetches real headlines and handles loading states, errors, and user interactions properly.

Introduction

Creating a news feed in Android Studio is the process of building a scrollable list that displays articles, images, and headlines from a remote data source using RecyclerView and an API connection.

Developers need this when building social media apps, content aggregation platforms, or any application requiring dynamic content display.

This guide covers 8 steps requiring approximately 45 minutes.

You should have basic knowledge of Kotlin or Java programming before starting.

Why does Android dominate the mobile world?

Uncover Android development statistics: market share dominance, developer opportunities, ecosystem growth, and mobile innovation trends.

Explore Android Insights →

The final result: a fully functional news reader application that fetches and displays articles in a clean, scrollable interface.

Prerequisites

Before you start, make sure your development environment meets these requirements.

Required Software

  • Android Studio Hedgehog (2023.1.1) or later
  • Android SDK 34 or higher
  • Kotlin 1.9+ or Java 11+
  • Gradle 8.0+

Required Resources

  • News API key from newsapi.org or similar service
  • Internet connection for API integration testing
  • Physical device or emulator for testing

Skill Level

Basic understanding of Android development and app architecture.

Familiarity with XML layout design and Gradle dependencies.

maxresdefault How To Create A News Feed In Android Studio

Step One: How Do You Set Up the Project Dependencies?

Adding the correct dependencies to your Gradle configuration connects your project to the libraries needed for network requests, JSON parsing, and image loading.

Open your module-level build.gradle file located at app/build.gradle.

Add the required dependencies inside the dependencies block.

Action

File location: app/build.gradle (Module: app)

Add these lines inside dependencies:

// Retrofit for network requests implementation 'com.squareup.retrofit2:retrofit:2.9.0' implementation 'com.squareup.retrofit2:converter-gson:2.9.0'

// Glide for image loading implementation ‘com.github.bumptech.glide:glide:4.16.0’

// RecyclerView implementation ‘androidx.recyclerview:recyclerview:1.3.2’

// CardView for item layout implementation ‘androidx.cardview:cardview:1.0.0’

// ViewModel and LiveData implementation ‘androidx.lifecycle:lifecycle-viewmodel-ktx:2.7.0’ implementation ‘androidx.lifecycle:lifecycle-livedata-ktx:2.7.0’

// Coroutines for async operations implementation ‘org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3’ `

Sync Gradle

Click “Sync Now” in the yellow banner or go to File > Sync Project with Gradle Files.

Learn more about how to sync Gradle in Android Studio if you run into issues.

Add Internet Permission

File location: app/src/main/AndroidManifest.xml

Add this line before the application tag:

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

Purpose

Retrofit handles all HTTP network requests to the news API.

Gson converts JSON responses into Kotlin data objects automatically.

Glide loads and caches thumbnail images efficiently.

Step Two: How Do You Create the News Item Data Model?

The data model class defines the structure of each news article your app receives from the API.

This class maps directly to the JSON response fields.

Action

Create new file: app/src/main/java/[your.package]/model/Article.kt

` data class Article( val title: String?, val description: String?, val url: String?, val urlToImage: String?, val publishedAt: String?, val source: Source? )

data class Source( val id: String?, val name: String? )

data class NewsResponse( val status: String?, val totalResults: Int?, val articles: List<Article>? ) `

Field Mapping

  • title: Article headline displayed in the feed
  • description: Short summary text below the title
  • urlToImage: Thumbnail image URL for Glide
  • publishedAt: Publication timestamp for sorting
  • source.name: News outlet name

Purpose

Gson uses these data classes to automatically parse the JSON response from the news API.

Nullable types (String?) handle missing fields without crashing.

Step Three: How Do You Design the News Feed Item Layout?

Each item in your RecyclerView needs an XML layout that defines how a single news article appears.

This layout uses CardView for the container and ConstraintLayout for positioning.

Action

Create new file: app/src/main/res/layout/itemnews.xml

` <?xml version="1.0" encoding="utf-8"?> <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layoutwidth="matchparent" android:layoutheight="wrapcontent" android:layoutmargin="8dp" app:cardCornerRadius="8dp" app:cardElevation="4dp">

<androidx.constraintlayout.widget.ConstraintLayout android:layoutwidth=”matchparent” android:layoutheight=”wrapcontent” android:padding=”12dp”>

<ImageView android:id=”@+id/ivThumbnail” android:layoutwidth=”100dp” android:layoutheight=”100dp” android:scaleType=”centerCrop” app:layoutconstraintStarttoStartOf=”parent” app:layoutconstraintToptoTopOf=”parent” />

<TextView android:id=”@+id/tvTitle” android:layoutwidth=”0dp” android:layoutheight=”wrapcontent” android:layoutmarginStart=”12dp” android:maxLines=”3″ android:textSize=”16sp” android:textStyle=”bold” app:layoutconstraintEndtoEndOf=”parent” app:layoutconstraintStarttoEndOf=”@id/ivThumbnail” app:layoutconstraintToptoTopOf=”parent” />

<TextView android:id=”@+id/tvSource” android:layoutwidth=”0dp” android:layoutheight=”wrapcontent” android:layoutmarginStart=”12dp” android:layoutmarginTop=”4dp” android:textColor=”#666666″ android:textSize=”12sp” app:layoutconstraintEndtoEndOf=”parent” app:layoutconstraintStarttoEndOf=”@id/ivThumbnail” app:layoutconstraintToptoBottomOf=”@id/tvTitle” />

<TextView android:id=”@+id/tvDate” android:layoutwidth=”0dp” android:layoutheight=”wrapcontent” android:layoutmarginStart=”12dp” android:layoutmarginTop=”4dp” android:textColor=”#999999″ android:textSize=”11sp” app:layoutconstraintEndtoEndOf=”parent” app:layoutconstraintStarttoEndOf=”@id/ivThumbnail” app:layoutconstraintToptoBottomOf=”@id/tvSource” />

</androidx.constraintlayout.widget.ConstraintLayout> </androidx.cardview.widget.CardView> `

Layout Components

  • CardView: 8dp corner radius, 4dp elevation for shadow
  • ImageView: 100x100dp thumbnail on the left
  • tvTitle: Bold headline, max 3 lines
  • tvSource: News outlet name in gray
  • tvDate: Publication date in light gray

Purpose

This item layout gets inflated by the RecyclerView adapter for each article in the list.

The design follows Material Design principles for clean readability and touch targets.

Step Four: How Do You Build the RecyclerView Adapter?

The RecyclerView adapter connects your data to the UI by creating and binding view holders for each news article.

This adapter pattern handles list rendering efficiently by recycling views as you scroll.

Action

Create new file: app/src/main/java/[your.package]/adapter/NewsAdapter.kt

` class NewsAdapter( private var articles: List<Article> = emptyList(), private val onItemClick: (Article) -> Unit ) : RecyclerView.Adapter<NewsAdapter.NewsViewHolder>() {

inner class NewsViewHolder( private val binding: ItemNewsBinding ) : RecyclerView.ViewHolder(binding.root) {

fun bind(article: Article) { binding.tvTitle.text = article.title binding.tvSource.text = article.source?.name binding.tvDate.text = formatDate(article.publishedAt)

Glide.with(binding.root.context) .load(article.urlToImage) .placeholder(R.drawable.placeholder) .into(binding.ivThumbnail)

binding.root.setOnClickListener { onItemClick(article) } } }

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): NewsViewHolder { val binding = ItemNewsBinding.inflate( LayoutInflater.from(parent.context), parent, false ) return NewsViewHolder(binding) }

override fun onBindViewHolder(holder: NewsViewHolder, position: Int) { holder.bind(articles[position]) }

override fun getItemCount(): Int = articles.size

fun updateArticles(newArticles: List<Article>) { articles = newArticles notifyDataSetChanged() }

private fun formatDate(dateString: String?): String { // Parse ISO 8601 date and format for display return dateString?.take(10) ?: “” } } `

Key Components

  • ViewHolder: Holds references to views, binds article data
  • onCreateViewHolder: Inflates the item layout
  • onBindViewHolder: Populates views with article data
  • Glide.load(): Loads thumbnail images asynchronously

Purpose

The view holder pattern prevents expensive findViewById() calls on every scroll.

Glide handles image loading, caching, and memory management automatically.

Step Five: How Do You Configure the News API Service?

Retrofit simplifies HTTP network requests by converting your API endpoints into Kotlin interfaces.

This service layer handles all communication with the news data source.

Action

Create new file: app/src/main/java/[your.package]/api/NewsApiService.kt

` interface NewsApiService {

@GET(“v2/top-headlines”) suspend fun getTopHeadlines( @Query(“country”) country: String = “us”, @Query(“apiKey”) apiKey: String ): Response<NewsResponse>

@GET(“v2/everything”) suspend fun searchNews( @Query(“q”) query: String, @Query(“apiKey”) apiKey: String ): Response<NewsResponse> }

object RetrofitInstance {

private const val BASEURL = “https://newsapi.org/”

private val retrofit by lazy { Retrofit.Builder() .baseUrl(BASEURL) .addConverterFactory(GsonConverterFactory.create()) .build() }

val api: NewsApiService by lazy { retrofit.create(NewsApiService::class.java) } } `

Configuration Details

  • Base URL: https://newsapi.org/
  • Endpoints: /v2/top-headlines, /v2/everything
  • Converter: GsonConverterFactory for JSON parsing
  • Suspend functions: Enable RESTful API calls with Kotlin coroutines

Purpose

The singleton RetrofitInstance ensures one network client throughout the app lifecycle.

Suspend functions allow non-blocking network calls on background threads.

Step Six: How Do You Implement the ViewModel for Data Management?

The ViewModel separates UI logic from data operations, surviving configuration changes like screen rotation.

LiveData observables notify the UI when news data updates.

Action

Create new file: app/src/main/java/[your.package]/viewmodel/NewsViewModel.kt

` class NewsViewModel : ViewModel() {

private val articles = MutableLiveData<List<Article>>() val articles: LiveData<List<Article>> = articles

private val isLoading = MutableLiveData<Boolean>() val isLoading: LiveData<Boolean> = isLoading

private val error = MutableLiveData<String?>() val error: LiveData<String?> = error

fun fetchNews(apiKey: String) { viewModelScope.launch { isLoading.value = true error.value = null

try { val response = RetrofitInstance.api.getTopHeadlines( apiKey = apiKey )

if (response.isSuccessful) { articles.value = response.body()?.articles ?: emptyList() } else { error.value = “Error: ${response.code()}” } } catch (e: Exception) { error.value = e.message ?: “Unknown error” } finally { isLoading.value = false } } } } `

LiveData Observables

  • articles: List of fetched news items
  • isLoading: Boolean for loading indicator state
  • error: Error message string when requests fail

Purpose

The MVVM architecture keeps your Activity clean and testable.

viewModelScope automatically cancels coroutines when the ViewModel clears.

Step Seven: How Do You Set Up the Main Activity with RecyclerView?

The MainActivity connects all components: RecyclerView, adapter, ViewModel, and LiveData observers.

This is where your news feed comes together.

Action

Update file: app/src/main/java/[your.package]/MainActivity.kt

` class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding private lateinit var newsAdapter: NewsAdapter private val viewModel: NewsViewModel by viewModels()

companion object { private const val APIKEY = “yourapikeyhere” }

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityMainBinding.inflate(layoutInflater) setContentView(binding.root)

setupRecyclerView() observeViewModel() viewModel.fetchNews(APIKEY) }

private fun setupRecyclerView() { newsAdapter = NewsAdapter { article -> // Handle item click – open article URL article.url?.let { url -> startActivity(Intent(Intent.ACTIONVIEW, Uri.parse(url))) } }

binding.recyclerView.apply { layoutManager = LinearLayoutManager(this@MainActivity) adapter = newsAdapter } }

private fun observeViewModel() { viewModel.articles.observe(this) { articles -> newsAdapter.updateArticles(articles) }

viewModel.isLoading.observe(this) { isLoading -> binding.progressBar.visibility = if (isLoading) View.VISIBLE else View.GONE }

viewModel.error.observe(this) { error -> error?.let { Toast.makeText(this, it, Toast.LENGTHLONG).show() } } } } `

Activity Layout

Update file: app/src/main/res/layout/activitymain.xml

` <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layoutwidth="matchparent" android:layoutheight="matchparent">

<androidx.recyclerview.widget.RecyclerView android:id=”@+id/recyclerView” android:layoutwidth=”matchparent” android:layoutheight=”matchparent” />

<ProgressBar android:id=”@+id/progressBar” android:layoutwidth=”wrapcontent” android:layoutheight=”wrapcontent” android:layoutgravity=”center” android:visibility=”gone” />

</FrameLayout> `

Purpose

LinearLayoutManager arranges items vertically for optimal scroll performance.

LiveData observers update the UI automatically when data changes.

Step Eight: How Do You Handle Loading States and Error Messages?

Proper state handling keeps users informed during network requests and gracefully handles failures.

This improves user experience significantly.

Action

Update activitymain.xml with a complete state layout:

` <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layoutwidth="matchparent" android:layoutheight="matchparent">

<androidx.recyclerview.widget.RecyclerView android:id=”@+id/recyclerView” android:layoutwidth=”matchparent” android:layoutheight=”matchparent” />

<ProgressBar android:id=”@+id/progressBar” android:layoutwidth=”wrapcontent” android:layoutheight=”wrapcontent” android:layoutgravity=”center” android:visibility=”gone” />

<LinearLayout android:id=”@+id/errorLayout” android:layoutwidth=”matchparent” android:layoutheight=”wrapcontent” android:layoutgravity=”center” android:orientation=”vertical” android:padding=”32dp” android:visibility=”gone”>

<TextView android:id=”@+id/tvError” android:layoutwidth=”wrapcontent” android:layoutheight=”wrapcontent” android:layoutgravity=”center” android:textSize=”16sp” />

<Button android:id=”@+id/btnRetry” android:layoutwidth=”wrapcontent” android:layoutheight=”wrapcontent” android:layoutgravity=”center” android:layoutmarginTop=”16dp” android:text=”Retry” />

</LinearLayout>

</FrameLayout> `

Update Error Handling in MainActivity

` viewModel.error.observe(this) { error -> if (error != null) { binding.errorLayout.visibility = View.VISIBLE binding.tvError.text = error binding.recyclerView.visibility = View.GONE } else { binding.errorLayout.visibility = View.GONE binding.recyclerView.visibility = View.VISIBLE } }

binding.btnRetry.setOnClickListener { viewModel.fetchNews(APIKEY) } `

Purpose

Users see a loading indicator during fetch operations, error messages when requests fail, and a retry button for recovery.

Verification

Test your news feed to confirm everything works correctly.

Build and Run

Click Run > Run ‘app’ or press Shift+F10.

Learn how to use Android Studio emulator if you need to set up a virtual device.

Expected Results

  • Loading spinner appears briefly on launch
  • News articles populate the scrollable list
  • Thumbnail images load for each article
  • Tapping an article opens the URL in browser
  • Smooth scroll performance without lag

Logcat Verification

Filter Logcat by your package name to check for network responses and any exceptions.

Troubleshooting

Issue: RecyclerView Shows Empty Screen

Cause: Adapter not receiving data or layout manager not set.

Solution:

  1. Add Logcat statement in observeViewModel() to verify articles arrive
  2. Confirm layoutManager is set before adapter assignment
  3. Check that notifyDataSetChanged() is called in updateArticles()
  4. Verify RecyclerView has matchparent for width and height

Issue: API Returns 401 Unauthorized

Cause: Invalid or missing API key.

Solution:

  1. Verify API key is correct at newsapi.org dashboard
  2. Check key is passed in the @Query parameter
  3. Confirm key has not exceeded rate limits
  4. Test endpoint directly in browser or Postman first

Issue: Images Not Loading in Feed Items

Cause: Missing internet permission or Glide configuration issue.

Solution:

  1. Verify INTERNET permission in AndroidManifest.xml
  2. Check urlToImage field is not null in API response
  3. Add placeholder image: Glide.with().load().placeholder(R.drawable.placeholder)
  4. Confirm Glide dependency synced correctly

Issue: App Crashes on Screen Rotation

Cause: ViewModel not properly configured or data lost.

Solution:

  1. Use by viewModels() delegate for ViewModel instantiation
  2. Store data in ViewModel, not Activity
  3. Avoid fetching data in onCreate() without checking existing state
  4. Use SavedStateHandle for persistence across process death

Related Processes

After completing your news feed, consider these improvements.

Add Pull-to-Refresh

Wrap your RecyclerView in SwipeRefreshLayout and call viewModel.fetchNews() on refresh.

This lets users manually update the feed content.

Implement Pagination

Add page parameter to API calls and load more articles when the user scrolls near the bottom.

The Paging 3 library handles this efficiently.

Add Offline Caching

Use Room database to cache articles locally for offline access.

This improves user experience when network connectivity is poor.

Build APK for Testing

When ready to share your app, learn how to build APK in Android Studio for distribution.

You can also explore the differences between APK or AAB formats for Google Play publishing.

Connect to Version Control

Track your codebase changes with Git.

See how to join a project on Git on Android Studio for team collaboration.

Explore Further Development

Consider expanding your skills into cross-platform app development with Flutter or React Native.

For backend needs, look into Backend as a Service (BaaS)/) solutions like Firebase.

FAQ on How To Create News Feed In Android Studio

What is the best way to display a news feed in Android?

RecyclerView with a custom adapter is the standard approach. It recycles views efficiently during scrolling, handles large datasets without memory issues, and supports different layout managers for vertical, horizontal, or grid displays.

Which libraries do I need for a news feed app?

Retrofit handles network requests. Gson or Moshi parses JSON responses. Glide or Coil loads images. Add ViewModel and LiveData from Android SDK tools for proper architecture and data management.

How do I fetch news data from an API?

Create a Retrofit interface with suspend functions for your endpoints. Call the API from a ViewModel using Kotlin coroutines. Parse the JSON response into data classes and expose results through LiveData observables.

Why is my RecyclerView showing a blank screen?

Check three things: layout manager must be set before the adapter, adapter needs data passed via update method, and RecyclerView dimensions should be matchparent. Add Logcat statements to verify data arrives from the API.

How do I handle loading states in a news feed?

Use a Boolean LiveData for loading state. Show a ProgressBar when true, hide when false. The ViewModel toggles this value before and after API calls. Observe it in your Activity to update UI.

What causes images not to load in news items?

Missing INTERNET permission in AndroidManifest.xml is the most common cause. Also verify the image URL is not null, Glide dependency synced properly, and you added a placeholder for failed loads.

How do I make each news item clickable?

Pass a lambda function to your adapter constructor. In the ViewHolder bind method, set an OnClickListener on the root view. The lambda receives the clicked Article object, then open its URL with an Intent.

Should I use Java or Kotlin for Android news apps?

Kotlin is the recommended choice. It offers null safety, coroutines for async operations, and concise syntax. Google officially supports Kotlin as the preferred language for building Android apps with Kotlin.

How do I add pull-to-refresh functionality?

Wrap your RecyclerView in SwipeRefreshLayout. Set an OnRefreshListener that calls your ViewModel fetch method. After data loads, call setRefreshing(false) to hide the loading indicator. Takes about 10 minutes to implement.

How do I cache news articles for offline reading?

Use Room database as a local cache. Fetch from API, save to Room, then display from database. This pattern ensures content appears instantly on launch while fresh data loads in the background.

Conclusion

You now know how to create news feed in Android Studio from scratch using modern architecture patterns.

The combination of RecyclerView, Retrofit, and ViewModel gives you a solid foundation. Your feed handles network requests, displays articles with images, and manages loading states properly.

This same pattern applies to social media timelines, blog readers, and any content aggregation app.

Take it further. Add pagination for infinite scrolling. Implement Room for database storage on mobile apps. Include SwipeRefreshLayout for pull-to-refresh.

The MVVM architecture keeps your code testable and maintainable as the project grows.

Consider following mobile app best practices for production-ready apps. Run thorough unit testing on your ViewModel and repository layers.

Now build something users want to scroll.

50218a090dd169a5399b03ee399b27df17d94bb940d98ae3f8daff6c978743c5?s=250&d=mm&r=g How To Create A News Feed In Android Studio
Related Posts