New details screen using Jetpack compose

app/build.gradle

@@ -58,6 +58,16 @@ android {
 
     buildFeatures {
         viewBinding true
+        compose true
+    }
+
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+
+    composeOptions {
+        kotlinCompilerVersion kotlinVersion
+        kotlinCompilerExtensionVersion composeVersion
     }
 }
 
@@ -106,13 +116,22 @@ dependencies {
 
     // Coil
     implementation "io.coil-kt:coil:$coilVersion"
+    implementation "dev.chrisbanes.accompanist:accompanist-coil:$accompanistCoilVersion"
 
     // Hilt + Dagger
     implementation "com.google.dagger:hilt-android:$hiltAndroidVersion"
     kapt "com.google.dagger:hilt-android-compiler:$hiltAndroidVersion"
     implementation "androidx.hilt:hilt-lifecycle-viewmodel:$hiltViewModelVersion"
     kapt "androidx.hilt:hilt-compiler:$hiltViewModelVersion"
 
+    // Jetpack Compose
+    implementation "androidx.compose.runtime:runtime:$composeVersion"
+    implementation "androidx.compose.ui:ui:$composeVersion"
+    implementation "androidx.ui:ui-tooling:$composeVersion"
+    implementation "androidx.compose.foundation:foundation:$composeVersion"
+    implementation "androidx.compose.material:material:$composeVersion"
+    implementation "androidx.compose.runtime:runtime-livedata:$composeVersion"
+
     // KTX
     implementation "androidx.core:core-ktx:$coreKtxVersion"
     implementation "androidx.fragment:fragment-ktx:$fragmentKtxVersion"
@@ -129,3 +148,15 @@ dependencies {
     // Debug
     implementation "com.jakewharton.timber:timber:$timberVersion"
 }
+
+tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
+    kotlinOptions {
+        freeCompilerArgs += '-Xopt-in=kotlin.RequiresOptIn'
+        // Enable experimental coroutines APIs, including Flow
+        freeCompilerArgs += '-Xopt-in=kotlin.Experimental'
+        freeCompilerArgs += '-Xallow-jvm-ir-dependencies'
+
+        // Set JVM target to 1.8
+        jvmTarget = "1.8"
+    }
+}

app/src/main/AndroidManifest.xml

@@ -20,6 +20,9 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
+        <activity
+            android:name=".news.ui.activity.NewsDetailsActivity"
+            android:theme="@style/AppTheme.NoActionBar"/>
     </application>
 
 </manifest>

app/src/main/java/com/akshay/newsapp/core/ui/compose/Color.kt

@@ -0,0 +1,7 @@
+package com.akshay.newsapp.core.ui.compose
+
+import androidx.compose.ui.graphics.Color
+
+val colorPrimary = Color(0xFF121258)
+val colorPrimaryDark = Color(0xFF0F0F4A)
+val colorAccent = Color(0xFFFFC039)

app/src/main/java/com/akshay/newsapp/core/ui/compose/Theme.kt

@@ -0,0 +1,35 @@
+package com.akshay.newsapp.core.ui.compose
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.MaterialTheme.shapes
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
+import androidx.compose.runtime.Composable
+
+private val DarkColorPalette = darkColors(
+        primary = colorPrimary,
+        primaryVariant = colorPrimaryDark,
+        secondary = colorAccent
+)
+
+private val LightColorPalette = lightColors(
+        primary = colorPrimary,
+        primaryVariant = colorPrimaryDark,
+        secondary = colorAccent
+)
+
+@Composable
+fun NewsTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
+    val colors = if (darkTheme) {
+        DarkColorPalette
+    } else {
+        LightColorPalette
+    }
+
+    MaterialTheme(
+            colors = colors,
+            shapes = shapes,
+            content = content
+    )
+}

app/src/main/java/com/akshay/newsapp/news/domain/NewsRepository.kt

@@ -27,6 +27,12 @@ import javax.inject.Singleton
  */
 interface NewsRepository {
 
+    /**
+     * Gets the particular article from database for
+     * the given [articleId]
+     */
+    fun getNewsArticle(articleId: Int): Flow<ViewState<NewsArticleDb>>
+
     /**
      * Gets tne cached news article from database and tries to get
      * fresh news articles from web and save into database
@@ -46,6 +52,15 @@ class DefaultNewsRepository @Inject constructor(
     private val newsService: NewsService
 ) : NewsRepository, NewsMapper {
 
+    override fun getNewsArticle(articleId: Int): Flow<ViewState<NewsArticleDb>> = flow {
+        // 1. Start with loading
+        emit(ViewState.loading())
+
+        // 2. Fetch the news article
+        val article = newsDao.getNewsArticle(articleId = articleId)
+        emitAll(article.map { ViewState.success(it) })
+    }.flowOn(Dispatchers.IO)
+
     override fun getNewsArticles(): Flow<ViewState<List<NewsArticleDb>>> = flow {
         // 1. Start with loading
         emit(ViewState.loading())

app/src/main/java/com/akshay/newsapp/news/storage/NewsArticlesDao.kt

@@ -4,6 +4,7 @@ import androidx.room.Dao
 import androidx.room.Insert
 import androidx.room.Query
 import androidx.room.Transaction
+import com.akshay.newsapp.news.storage.NewsDatabaseMigration.V2.NewsArticle
 import com.akshay.newsapp.news.storage.entity.NewsArticleDb
 import kotlinx.coroutines.flow.Flow
 
@@ -28,6 +29,12 @@ interface NewsArticlesDao {
         insertArticles(articles)
     }
 
+    /**
+     *  Get news article for the specified [articleId]
+     */
+    @Query("SELECT * FROM ${NewsArticle.tableName} WHERE id = :articleId")
+    fun getNewsArticle(articleId: Int): Flow<NewsArticleDb>
+
     /**
      * Get all the articles from table
      */

app/src/main/java/com/akshay/newsapp/news/ui/activity/NewsActivity.kt

@@ -1,5 +1,6 @@
 package com.akshay.newsapp.news.ui.activity
 
+import android.content.Intent
 import android.os.Bundle
 import androidx.activity.viewModels
 import androidx.recyclerview.widget.LinearLayoutManager
@@ -9,6 +10,7 @@ import com.akshay.newsapp.core.utils.observeNotNull
 import com.akshay.newsapp.core.utils.toast
 import com.akshay.newsapp.databinding.ActivityMainBinding
 import com.akshay.newsapp.news.ui.adapter.NewsArticlesAdapter
+import com.akshay.newsapp.news.ui.model.NewsAdapterEvent
 import com.akshay.newsapp.news.ui.viewmodel.NewsArticleViewModel
 
 
@@ -30,7 +32,15 @@ class NewsActivity : BaseActivity() {
         binding.newsList.setEmptyView(binding.emptyLayout.emptyView)
         binding.newsList.setProgressView(binding.progressLayout.progressView)
 
-        val adapter = NewsArticlesAdapter { toast("Clicked on item") }
+        val adapter = NewsArticlesAdapter {
+            when (it) {
+             is NewsAdapterEvent.ClickEvent -> {
+                 val intent = Intent(this, NewsDetailsActivity::class.java)
+                 intent.putExtra(NEWS_ARG_ARTICLE_ID, it.newsArticle.id)
+                 startActivity(intent)
+             }
+            }
+        }
         binding.newsList.adapter = adapter
         binding.newsList.layoutManager = LinearLayoutManager(this)
 

app/src/main/java/com/akshay/newsapp/news/ui/activity/NewsDetailsActivity.kt

@@ -0,0 +1,130 @@
+package com.akshay.newsapp.news.ui.activity
+
+import android.os.Bundle
+import androidx.activity.viewModels
+import androidx.compose.foundation.Icon
+import androidx.compose.foundation.ScrollableColumn
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.setContent
+import androidx.compose.ui.unit.dp
+import androidx.ui.tooling.preview.Preview
+import com.akshay.newsapp.R
+import com.akshay.newsapp.core.ui.ViewState
+import com.akshay.newsapp.core.ui.base.BaseActivity
+import com.akshay.newsapp.core.ui.compose.NewsTheme
+import com.akshay.newsapp.news.storage.entity.NewsArticleDb
+import com.akshay.newsapp.news.ui.viewmodel.NewsArticleViewModel
+import dev.chrisbanes.accompanist.coil.CoilImage
+
+const val NEWS_ARG_ARTICLE_ID = "articleId"
+
+class NewsDetailsActivity : BaseActivity() {
+
+    private val articleId: Int by lazy {
+        intent.getIntExtra(NEWS_ARG_ARTICLE_ID, -1)
+    }
+
+    private val newsArticleViewModel: NewsArticleViewModel by viewModels()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            NewsTheme {
+                Scaffold(topBar = {
+                    TopAppBar(
+                            title = {},
+                            backgroundColor = MaterialTheme.colors.primary,
+                            navigationIcon = { IconButton(onClick = { finish() }) {
+                                Icon(Icons.Filled.ArrowBack) }
+                            }
+                    )
+                }, bodyContent = {
+                        newsDetailsScreen(newsArticleViewModel = newsArticleViewModel, articleId)
+                })
+            }
+        }
+    }
+}
+
+@Composable
+fun newsDetailsScreen(newsArticleViewModel: NewsArticleViewModel, newsId: Int) {
+    val viewState by newsArticleViewModel.getNewsArticle(articleId = newsId).observeAsState(ViewState.loading())
+    when (viewState) {
+        is ViewState.Loading -> {
+            loadingIndicator()
+        }
+        is ViewState.Error -> {
+            errorView((viewState as ViewState.Error<NewsArticleDb>).message)
+        }
+        is ViewState.Success -> {
+            ScrollableColumn(modifier = Modifier.padding(horizontal = 16.dp)) {
+                with((viewState as ViewState.Success<NewsArticleDb>).data) {
+                    Spacer(modifier = Modifier.preferredHeight(8.dp))
+                    CoilImage(
+                            data = urlToImage ?: R.drawable.tools_placeholder,
+                            modifier = Modifier
+                                    .heightIn(min = 180.dp)
+                                    .fillMaxWidth()
+                                    .clip(shape = MaterialTheme.shapes.medium)
+                    )
+                    Spacer(Modifier.preferredHeight(16.dp))
+                    Text(
+                            text = title ?: "",
+                            style = MaterialTheme.typography.h6
+                    )
+                    Spacer(Modifier.preferredHeight(8.dp))
+                    Text(
+                            text = content ?: "",
+                            style = MaterialTheme.typography.body1
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun loadingIndicator() {
+    Column(
+            modifier = Modifier.fillMaxWidth().fillMaxHeight(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        CircularProgressIndicator(
+                color = MaterialTheme.colors.secondary,
+                strokeWidth = 6.dp,
+                modifier = Modifier.preferredSize(64.dp)
+        )
+    }
+}
+
+@Composable
+fun errorView(message: String) {
+    Column(
+            modifier = Modifier.fillMaxWidth().fillMaxHeight(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+                text = message,
+                style = MaterialTheme.typography.body1
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun errorViewPreview() {
+    errorView(message = "Something went wrong!")
+}

app/src/main/java/com/akshay/newsapp/news/ui/adapter/NewsArticlesAdapter.kt

@@ -5,7 +5,7 @@ import android.view.ViewGroup
 import androidx.recyclerview.widget.DiffUtil
 import androidx.recyclerview.widget.ListAdapter
 import androidx.recyclerview.widget.RecyclerView
-import coil.api.load
+import coil.load
 import com.akshay.newsapp.R
 import com.akshay.newsapp.core.utils.inflate
 import com.akshay.newsapp.databinding.RowNewsArticleBinding
@@ -49,7 +49,7 @@ class NewsArticlesAdapter(
                 placeholder(R.drawable.tools_placeholder)
                 error(R.drawable.tools_placeholder)
             }
-            setOnClickListener { listener(NewsAdapterEvent.ClickEvent) }
+            setOnClickListener { listener(NewsAdapterEvent.ClickEvent(newsArticle = newsArticle)) }
         }
     }
 

app/src/main/java/com/akshay/newsapp/news/ui/model/NewsAdapterEvent.kt

@@ -1,5 +1,6 @@
 package com.akshay.newsapp.news.ui.model
 
+import com.akshay.newsapp.news.storage.entity.NewsArticleDb
 import com.akshay.newsapp.news.ui.adapter.NewsArticlesAdapter
 
 /**
@@ -9,5 +10,5 @@ import com.akshay.newsapp.news.ui.adapter.NewsArticlesAdapter
 sealed class NewsAdapterEvent {
 
     /* Describes item click event  */
-    object ClickEvent : NewsAdapterEvent()
+    data class ClickEvent(val newsArticle: NewsArticleDb) : NewsAdapterEvent()
 }

app/src/main/java/com/akshay/newsapp/news/ui/viewmodel/NewsArticleViewModel.kt

@@ -12,7 +12,7 @@ import com.akshay.newsapp.news.storage.entity.NewsArticleDb
  * A container for [NewsArticleDb] related data to show on the UI.
  */
 class NewsArticleViewModel @ViewModelInject constructor(
-        newsRepository: NewsRepository
+        private val newsRepository: NewsRepository
 ) : ViewModel() {
 
     private val newsArticleDb: LiveData<ViewState<List<NewsArticleDb>>> = newsRepository.getNewsArticles().asLiveData()
@@ -21,4 +21,9 @@ class NewsArticleViewModel @ViewModelInject constructor(
      * Return news articles to observeNotNull on the UI.
      */
     fun getNewsArticles(): LiveData<ViewState<List<NewsArticleDb>>> = newsArticleDb
+
+    /**
+     * Return news article for given articleId
+     */
+    fun getNewsArticle(articleId: Int): LiveData<ViewState<NewsArticleDb>> = newsRepository.getNewsArticle(articleId).asLiveData()
 }

app/src/main/res/values/styles.xml

@@ -8,6 +8,14 @@
         <item name="colorAccent">@color/colorAccent</item>
     </style>
 
+    <!-- Base theme for Compose. -->
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
     <!-- Empty Layout -->
     <style name="EmptyLayoutTitle">
         <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>