first init

app/src/main/java/com/sambath/kunkhmer/adapter/HighlightNewsAdapter.kt

@@ -7,6 +7,7 @@ import android.widget.ImageView
 import android.widget.TextView
 import androidx.recyclerview.widget.RecyclerView
 import com.sambath.kunkhmer.R
+import com.squareup.picasso.Picasso
 
 class HighlightNewsAdapter (private val cardList: List<TopNewsCardItem>) : RecyclerView.Adapter<HighlightNewsAdapter.ViewHolder>() {
     class CardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
@@ -20,9 +21,9 @@ class HighlightNewsAdapter (private val cardList: List<TopNewsCardItem>) : Recyc
     override fun onBindViewHolder(holder: ViewHolder, position: Int) {
         val currentItem = cardList[position]
 
-        holder.imageView.setImageResource(currentItem.imageResource)
+        Picasso.get().load(currentItem.imageResource).into(holder.imageView)
         holder.dateTextView.text = currentItem.date
-        holder.titleTextView.text = currentItem.title
+        holder.titleTextView.text = currentItem.subTitle
     }
 
     override fun getItemCount() = cardList.size

app/src/main/java/com/sambath/kunkhmer/adapter/TopNewsAdapter.kt

@@ -7,8 +7,9 @@ import android.widget.ImageView
 import android.widget.TextView
 import androidx.recyclerview.widget.RecyclerView
 import com.sambath.kunkhmer.R
+import com.squareup.picasso.Picasso
 
-class TopNewsAdapter (private val cardList: List<TopNewsCardItem>) : RecyclerView.Adapter<TopNewsAdapter.ViewHolder>() {
+class TopNewsAdapter(private val cardList: List<TopNewsCardItem>) : RecyclerView.Adapter<TopNewsAdapter.ViewHolder>() {
     class CardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
 
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
@@ -19,9 +20,10 @@ class TopNewsAdapter (private val cardList: List<TopNewsCardItem>) : RecyclerVie
     override fun onBindViewHolder(holder: ViewHolder, position: Int) {
         val currentItem = cardList[position]
 
-        holder.imageView.setImageResource(currentItem.imageResource)
+        Picasso.get().load(currentItem.imageResource).into(holder.imageView)
         holder.dateTextView.text = currentItem.date
         holder.titleTextView.text = currentItem.title
+        holder.subTextView.text = currentItem.subTitle
     }
 
     override fun getItemCount() = cardList.size
@@ -31,5 +33,6 @@ class TopNewsAdapter (private val cardList: List<TopNewsCardItem>) : RecyclerVie
         val imageView: ImageView = itemView.findViewById(R.id.imageView)
         val dateTextView: TextView = itemView.findViewById(R.id.dateTextView)
         val titleTextView: TextView = itemView.findViewById(R.id.titleTextView)
+        val subTextView: TextView = itemView.findViewById(R.id.descTextView)
     }
 }

app/src/main/java/com/sambath/kunkhmer/adapter/TopNewsCardItem.kt

@@ -1,3 +1,3 @@
 package com.sambath.kunkhmer.adapter
 
-data class TopNewsCardItem(val imageResource: Int, val date: String, val title: String)
+data class TopNewsCardItem(val imageResource: String, val title: String, val subTitle: String, val date: String)

app/src/main/java/com/sambath/kunkhmer/adapter/TopNewsHeaderAdapter.kt

@@ -7,6 +7,7 @@ import android.widget.ImageView
 import android.widget.TextView
 import androidx.recyclerview.widget.RecyclerView
 import com.sambath.kunkhmer.R
+import com.squareup.picasso.Picasso
 
 class TopNewsHeaderAdapter(private val cardList: List<TopNewsCardItem>) :
     RecyclerView.Adapter<TopNewsHeaderAdapter.ViewHolder>() {
@@ -21,9 +22,10 @@ class TopNewsHeaderAdapter(private val cardList: List<TopNewsCardItem>) :
     override fun onBindViewHolder(holder: ViewHolder, position: Int) {
         val currentItem = cardList[position]
 
-        holder.imageView.setImageResource(currentItem.imageResource)
+        Picasso.get().load(currentItem.imageResource).into(holder.imageView)
         holder.dateTextView.text = currentItem.date
         holder.titleTextView.text = currentItem.title
+        holder.subTextView.text = currentItem.subTitle
     }
 
     override fun getItemCount() = cardList.size
@@ -33,5 +35,6 @@ class TopNewsHeaderAdapter(private val cardList: List<TopNewsCardItem>) :
         val imageView: ImageView = itemView.findViewById(R.id.imageView)
         val dateTextView: TextView = itemView.findViewById(R.id.dateTextView)
         val titleTextView: TextView = itemView.findViewById(R.id.titleTextView)
+        val subTextView: TextView = itemView.findViewById(R.id.subTitleTextView)
     }
 }

app/src/main/java/com/sambath/kunkhmer/screen/news/NewsFragment.kt

@@ -100,8 +100,7 @@ class NewsFragment : Fragment() {
         val cardList = createCardList() // Create your card data list here
         val cardAdapter = TopNewsHeaderAdapter(cardList)
 
-        recyclerView.layoutManager =
-            LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)
+        recyclerView.layoutManager = LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)
         recyclerView.adapter = cardAdapter
     }
 
@@ -116,8 +115,7 @@ class NewsFragment : Fragment() {
         val cardList = createCardList() // Create your card data list here
         val cardAdapter = TopNewsAdapter(cardList)
 
-        recyclerView.layoutManager =
-            LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
+        recyclerView.layoutManager = LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
         recyclerView.adapter = cardAdapter
     }
 
@@ -126,19 +124,25 @@ class NewsFragment : Fragment() {
         val cardList = createCardList() // Create your card data list here
         val cardAdapter = HighlightNewsAdapter(cardList)
 
-        recyclerView.layoutManager =
-            LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
+        recyclerView.layoutManager = LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
         recyclerView.adapter = cardAdapter
     }
 
     private fun createCardList(): List<TopNewsCardItem> {
         // Create and return your list of CardItems
         return listOf(
-            TopNewsCardItem(R.drawable.ic_bg_dashboard, "Date 1", "Title 1"),
-            TopNewsCardItem(R.drawable.ic_bg_dashboard, "Date 2", "Title 2"),
-            TopNewsCardItem(R.drawable.ic_bg_dashboard, "Date 3", "Title 3"),
-            TopNewsCardItem(R.drawable.ic_bg_dashboard, "Date 4", "Title 4"),
-            TopNewsCardItem(R.drawable.ic_bg_dashboard, "Date 5", "Title 5"),
+            TopNewsCardItem(
+                "https://i.ytimg.com/vi/Lh5O00zo_pc/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCEQ100buCWUuyBKWe_96UbevbIEA",
+                "ច្បាស់ការ គូពិសេសដែលបងប្អូនរង់ចាំ",
+                "ជំនួបរវាង ដាវ លីឌុក និងព្រំសំណាងនឹងធ្វើឡើងនៅថ្ងៃអាទិត្យ ទី០៥ ខែសីហាខាងមុខនេះ...!! ជាលក្ខណៈ MAS FIGHT ១ទឹក ៩នាទីនឹងដោយវាយការរំអំបោះឆៅលក្ខណៈគុនខ្មែរ",
+                "10mn ago"
+            ),
+            TopNewsCardItem(
+                "https://i.ytimg.com/vi/Lh5O00zo_pc/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCEQ100buCWUuyBKWe_96UbevbIEA", "ច្បាស់ការ គូពិសេសដែលបងប្អូនរង់ចាំ", "ជំនួបរវាង ដាវ លីឌុក និងព្រំសំណាងនឹងធ្វើឡើងនៅថ្ងៃអាទិត្យ ទី០៥ ខែសីហាខាងមុខនេះ...!!", "10mn ago"
+            ),
+            TopNewsCardItem(
+                "https://i.ytimg.com/vi/Lh5O00zo_pc/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCEQ100buCWUuyBKWe_96UbevbIEA", "ច្បាស់ការ គូពិសេសដែលបងប្អូនរង់ចាំ", "ជំនួបរវាង ដាវ លីឌុក និងព្រំសំណាងនឹងធ្វើឡើងនៅថ្ងៃអាទិត្យ ទី០៥ ខែសីហាខាងមុខនេះ...!!", "10mn ago"
+            ),
             // Add more card items as needed
         )
     }

app/src/main/res/layout/layout_highlight_item_card.xml

@@ -10,43 +10,51 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="@color/color_black"
         android:orientation="vertical">
 
         <ImageView
             android:id="@+id/imageView"
             android:layout_width="match_parent"
             android:layout_height="200dp"
-            android:background="@color/color_green_800"
+            android:background="@color/color_gray_600"
             android:scaleType="centerCrop" />
 
-        <TextView
-            android:id="@+id/titleTextView"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="Your Title"
-            android:textSize="16sp"
-            android:textStyle="bold" />
-
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginBottom="5dp"
-            android:orientation="horizontal">
-
-            <ImageView
-                android:layout_width="15dp"
-                android:layout_height="15dp"
-                android:src="@drawable/ic_help" />
+            android:orientation="vertical"
+            android:padding="5dp">
 
             <TextView
-                android:id="@+id/dateTextView"
+                android:id="@+id/titleTextView"
                 android:layout_width="wrap_content"
-                android:layout_height="match_parent"
-                android:layout_marginLeft="5dp"
-                android:gravity="center_vertical"
-                android:text="Your Date"
-                android:textSize="12sp" />
-
+                android:layout_height="wrap_content"
+                android:text="Your Title"
+                android:textColor="@color/color_white"
+                android:textSize="16sp"
+                android:textStyle="bold" />
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal">
+
+                <ImageView
+                    android:layout_width="25dp"
+                    android:layout_height="25dp"
+                    android:src="@drawable/ic_alarm_clock_64" />
+
+                <TextView
+                    android:id="@+id/dateTextView"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_vertical"
+                    android:gravity="center_vertical"
+                    android:text="Your Date"
+                    android:textColor="@color/color_gray_400"
+                    android:textSize="12sp" />
+            </LinearLayout>
         </LinearLayout>
 
     </LinearLayout>

app/src/main/res/layout/layout_top_news_header_item_card.xml

@@ -10,29 +10,61 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="@color/color_black"
         android:orientation="vertical">
 
         <ImageView
             android:id="@+id/imageView"
             android:layout_width="match_parent"
             android:layout_height="200dp"
-            android:scaleType="centerCrop"
-            android:background="@color/color_gray_800" />
+            android:background="@color/color_gray_800"
+            android:scaleType="centerCrop" />
 
-        <TextView
-            android:id="@+id/dateTextView"
-            android:layout_width="wrap_content"
+        <LinearLayout
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="Your Date"
-            android:textSize="12sp" />
+            android:orientation="vertical"
+            android:padding="5dp">
 
-        <TextView
-            android:id="@+id/titleTextView"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="Your Title"
-            android:textSize="16sp"
-            android:textStyle="bold" />
+            <TextView
+                android:id="@+id/titleTextView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="Your Title"
+                android:textColor="@color/color_white"
+                android:textSize="16sp"
+                android:textStyle="bold" />
+
+            <TextView
+                android:id="@+id/subTitleTextView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="Your Title"
+                android:textColor="@color/color_white"
+                android:textSize="14sp" />
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal">
+
+                <ImageView
+                    android:layout_width="25dp"
+                    android:layout_height="25dp"
+                    android:src="@drawable/ic_alarm_clock_64" />
+
+                <TextView
+                    android:id="@+id/dateTextView"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_vertical"
+                    android:gravity="center_vertical"
+                    android:text="Your Date"
+                    android:textColor="@color/color_gray_400"
+                    android:textSize="12sp" />
+            </LinearLayout>
+
+        </LinearLayout>
 
     </LinearLayout>
 </androidx.cardview.widget.CardView>

app/src/main/res/layout/layout_top_news_item_card.xml

@@ -10,6 +10,7 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
+        android:background="@color/color_black"
         android:orientation="horizontal">
 
         <ImageView
@@ -17,7 +18,7 @@
             android:layout_width="150dp"
             android:layout_height="120dp"
             android:scaleType="centerCrop"
-            android:src="@drawable/bg_action_bar" />
+            android:src="@color/color_gray_600" />
 
         <LinearLayout
             android:layout_width="match_parent"
@@ -30,22 +31,38 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="Your Title"
+                android:textColor="@color/color_white"
                 android:textSize="16sp"
                 android:textStyle="bold" />
 
-            <TextView
-                android:id="@+id/dateTextView"
-                android:layout_width="@dimen/nav_header_height"
-                android:layout_height="wrap_content"
-                android:text="Your Date"
-                android:textSize="10sp" />
-
             <TextView
                 android:id="@+id/descTextView"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="Description......................................................"
-                android:textSize="12sp" />
+                android:textColor="@color/color_white"
+                android:textSize="14sp" />
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal">
+
+                <ImageView
+                    android:layout_width="25dp"
+                    android:layout_height="25dp"
+                    android:src="@drawable/ic_alarm_clock_64" />
+
+                <TextView
+                    android:id="@+id/dateTextView"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_vertical"
+                    android:gravity="center_vertical"
+                    android:text="Your Date"
+                    android:textColor="@color/color_gray_400"
+                    android:textSize="12sp" />
+            </LinearLayout>
 
         </LinearLayout>
 

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

@@ -30,6 +30,7 @@
     <color name="color_brown_800">#4E342E</color>
     <color name="color_gray_100">#F5F5F5</color>
     <color name="color_gray_300">#E0E0E0</color>
+    <color name="color_gray_400">#C6C9CA</color>
     <color name="color_gray_600">#757575</color>
     <color name="color_gray_800">#424242</color>
     <color name="color_green_600">#43A047</color>