New details screen using Jetpack compose

app/build.gradle

@@ -55,6 +55,20 @@ android {
         exclude "**.kotlin_builtins"
         exclude "**.kotlin_module"
     }
+
+    buildFeatures {
+        viewBinding true
+        compose true
+    }
+
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+
+    composeOptions {
+        kotlinCompilerVersion kotlinVersion
+        kotlinCompilerExtensionVersion composeVersion
+    }
 }
 
 kapt {
@@ -102,13 +116,22 @@ dependencies {
 
     // Coil
     implementation "io.coil-kt:coil:$coilVersion"
+    implementation "dev.chrisbanes.accompanist:accompanist-coil:0.3.1"
 
     // 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"
@@ -125,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,13 @@ import javax.inject.Singleton
  */
 interface NewsRepository {
 
+    /**
+     * Gets the particular article from database for
+     * the give articleId
+     * @param articleId id from NewsArticleDb
+     */
+    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 +53,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 and update state particular article from database
+        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

@@ -28,6 +28,12 @@ interface NewsArticlesDao {
         insertArticles(articles)
     }
 
+    /**
+     *  Get News article for given articleId
+     */
+    @Query("SELECT * FROM news_article 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,44 +1,54 @@
 package com.akshay.newsapp.news.ui.activity
 
+import android.content.Intent
 import android.os.Bundle
 import androidx.activity.viewModels
 import androidx.recyclerview.widget.LinearLayoutManager
-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.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
-import kotlinx.android.synthetic.main.activity_main.*
-import kotlinx.android.synthetic.main.empty_layout.*
-import kotlinx.android.synthetic.main.progress_layout.*
 
 
 class NewsActivity : BaseActivity() {
 
     private val newsArticleViewModel: NewsArticleViewModel by viewModels()
 
+    private lateinit var binding: ActivityMainBinding
+
     /**
      * Starting point of the activity
      */
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        setContentView(R.layout.activity_main)
+        binding = ActivityMainBinding.inflate(layoutInflater)
+        setContentView(binding.root)
 
         // Setting up RecyclerView and adapter
-        newsList.setEmptyView(empty_view)
-        newsList.setProgressView(progress_view)
-
-        val adapter = NewsArticlesAdapter { toast("Clicked on item") }
-        newsList.adapter = adapter
-        newsList.layoutManager = LinearLayoutManager(this)
+        binding.newsList.setEmptyView(binding.emptyLayout.emptyView)
+        binding.newsList.setProgressView(binding.progressLayout.progressView)
+
+        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)
 
         // Update the UI on state change
         newsArticleViewModel.getNewsArticles().observeNotNull(this) { state ->
             when (state) {
                 is ViewState.Success -> adapter.submitList(state.data)
-                is ViewState.Loading -> newsList.showLoading()
+                is ViewState.Loading -> binding.newsList.showLoading()
                 is ViewState.Error -> toast("Something went wrong ¯\\_(ツ)_/¯ => ${state.message}")
             }
         }

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

@@ -0,0 +1,116 @@
+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,12 +5,12 @@ 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
 import com.akshay.newsapp.news.storage.entity.NewsArticleDb
 import com.akshay.newsapp.news.ui.model.NewsAdapterEvent
-import kotlinx.android.synthetic.main.row_news_article.view.*
 
 /**
  * The News adapter to show the news in a list.
@@ -34,20 +34,22 @@ class NewsArticlesAdapter(
      */
     class NewsHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
 
+        private val binding = RowNewsArticleBinding.bind(itemView)
+
         /**
          * Binds the UI with the data and handles clicks
          */
         fun bind(newsArticle: NewsArticleDb, listener: (NewsAdapterEvent) -> Unit) = with(itemView) {
-            newsTitle.text = newsArticle.title
-            newsAuthor.text = newsArticle.author
+            binding.newsTitle.text = newsArticle.title
+            binding.newsAuthor.text = newsArticle.author
             //TODO: need to format date
             //tvListItemDateTime.text = getFormattedDate(newsArticle.publishedAt)
-            newsPublishedAt.text = newsArticle.publishedAt
-            newsImage.load(newsArticle.urlToImage) {
+            binding.newsPublishedAt.text = newsArticle.publishedAt
+            binding.newsImage.load(newsArticle.urlToImage) {
                 placeholder(R.drawable.tools_placeholder)
                 error(R.drawable.tools_placeholder)
             }
-            setOnClickListener { listener(NewsAdapterEvent.ClickEvent) }
+            setOnClickListener { listener(NewsAdapterEvent.ClickEvent(newsArticle = newsArticle)) }
         }
     }