firt init

app/src/main/java/com/sambath/sbc/adapter/FighterAdapter.kt

@@ -0,0 +1,53 @@
+package com.sambath.sbc.adapter
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.TextView
+import android.widget.ToggleButton
+import androidx.recyclerview.widget.RecyclerView
+import com.sambath.sbc.R
+
+class FighterAdapter (private val cardList: List<FighterCardItem>) : RecyclerView.Adapter<FighterAdapter.ViewHolder>()  {
+    class CardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FighterAdapter.ViewHolder {
+        val itemView = LayoutInflater.from(parent.context).inflate(R.layout.layout_fighter_card, parent, false)
+        return FighterAdapter.ViewHolder(itemView)
+    }
+
+    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
+        val currentItem = cardList[position]
+
+        holder.imageLeft.setImageResource(currentItem.imageLeft)
+        holder.imageLeftTitle.text = currentItem.imageLeftTitle
+        holder.imageRight.setImageResource(currentItem.imageRight)
+        holder.imageRightTitle.text = currentItem.imageRightTitle
+        holder.date.text = currentItem.date
+        holder.title.text = currentItem.title
+        holder.favorite.setOnCheckedChangeListener { buttonView, isChecked ->
+            if (currentItem.favorite) {
+                // Perform bookmarking action
+                buttonView.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_user, 0, 0)
+            } else {
+                // Perform unbookmarking action
+                buttonView.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_user, 0, 0)
+            }
+        }
+
+    }
+
+    override fun getItemCount() = cardList.size
+
+    // Holds the views for adding it to image and text
+    class ViewHolder(ItemView: View) : RecyclerView.ViewHolder(ItemView) {
+        val imageLeft: ImageView = itemView.findViewById(R.id.imageLeft)
+        val imageLeftTitle: TextView = itemView.findViewById(R.id.titleLeft)
+        val imageRight: ImageView = itemView.findViewById(R.id.imageRight)
+        val imageRightTitle: TextView = itemView.findViewById(R.id.titleRight)
+        val date: TextView = itemView.findViewById(R.id.tvDate)
+        val title: TextView = itemView.findViewById(R.id.titleMatch)
+        val favorite: ToggleButton = itemView.findViewById(R.id.bookmarkToggleButton)
+    }
+}

app/src/main/java/com/sambath/sbc/adapter/FighterCardItem.kt

@@ -0,0 +1,11 @@
+package com.sambath.sbc.adapter
+
+data class FighterCardItem(
+    val imageLeft: Int,
+    val imageLeftTitle: String,
+    val imageRight: Int,
+    val imageRightTitle: String,
+    val date: String,
+    val title: String,
+    val favorite: Boolean
+)

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

@@ -0,0 +1,36 @@
+package com.sambath.sbc.adapter
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.recyclerview.widget.RecyclerView
+import com.sambath.sbc.R
+
+class HighlightNewsAdapter (private val cardList: List<TopNewsCardItem>) : RecyclerView.Adapter<HighlightNewsAdapter.ViewHolder>() {
+    class CardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
+        val itemView = LayoutInflater.from(parent.context)
+            .inflate(R.layout.layout_highlight_item_card, parent, false)
+        return ViewHolder(itemView)
+    }
+
+    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
+        val currentItem = cardList[position]
+
+        holder.imageView.setImageResource(currentItem.imageResource)
+        holder.dateTextView.text = currentItem.date
+        holder.titleTextView.text = currentItem.title
+    }
+
+    override fun getItemCount() = cardList.size
+
+    // Holds the views for adding it to image and text
+    class ViewHolder(ItemView: View) : RecyclerView.ViewHolder(ItemView) {
+        val imageView: ImageView = itemView.findViewById(R.id.imageView)
+        val dateTextView: TextView = itemView.findViewById(R.id.dateTextView)
+        val titleTextView: TextView = itemView.findViewById(R.id.titleTextView)
+    }
+}

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

@@ -0,0 +1,35 @@
+package com.sambath.sbc.adapter
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.recyclerview.widget.RecyclerView
+import com.sambath.sbc.R
+
+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 {
+        val itemView = LayoutInflater.from(parent.context).inflate(R.layout.layout_top_news_item_card, parent, false)
+        return ViewHolder(itemView)
+    }
+
+    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
+        val currentItem = cardList[position]
+
+        holder.imageView.setImageResource(currentItem.imageResource)
+        holder.dateTextView.text = currentItem.date
+        holder.titleTextView.text = currentItem.title
+    }
+
+    override fun getItemCount() = cardList.size
+
+    // Holds the views for adding it to image and text
+    class ViewHolder(ItemView: View) : RecyclerView.ViewHolder(ItemView) {
+        val imageView: ImageView = itemView.findViewById(R.id.imageView)
+        val dateTextView: TextView = itemView.findViewById(R.id.dateTextView)
+        val titleTextView: TextView = itemView.findViewById(R.id.titleTextView)
+    }
+}

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

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

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

@@ -0,0 +1,37 @@
+package com.sambath.sbc.adapter
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.recyclerview.widget.RecyclerView
+import com.sambath.sbc.R
+
+class TopNewsHeaderAdapter(private val cardList: List<TopNewsCardItem>) :
+    RecyclerView.Adapter<TopNewsHeaderAdapter.ViewHolder>() {
+    class CardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
+        val itemView = LayoutInflater.from(parent.context)
+            .inflate(R.layout.layout_top_news_header_item_card, parent, false)
+        return ViewHolder(itemView)
+    }
+
+    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
+        val currentItem = cardList[position]
+
+        holder.imageView.setImageResource(currentItem.imageResource)
+        holder.dateTextView.text = currentItem.date
+        holder.titleTextView.text = currentItem.title
+    }
+
+    override fun getItemCount() = cardList.size
+
+    // Holds the views for adding it to image and text
+    class ViewHolder(ItemView: View) : RecyclerView.ViewHolder(ItemView) {
+        val imageView: ImageView = itemView.findViewById(R.id.imageView)
+        val dateTextView: TextView = itemView.findViewById(R.id.dateTextView)
+        val titleTextView: TextView = itemView.findViewById(R.id.titleTextView)
+    }
+}

app/src/main/java/com/sambath/sbc/screen/fighter/FighterFragment.kt

@@ -5,25 +5,79 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.fragment.app.Fragment
+import androidx.recyclerview.widget.LinearLayoutManager
+import com.google.android.material.tabs.TabLayout
 import com.sambath.sbc.R
+import com.sambath.sbc.adapter.FighterAdapter
+import com.sambath.sbc.adapter.FighterCardItem
+import kotlinx.android.synthetic.main.fragment_fighter.view.recyclerViewFighter
+import kotlinx.android.synthetic.main.fragment_fighter.view.selectedTabTextView
+import kotlinx.android.synthetic.main.fragment_fighter.view.tabLayout
 
-/**
- * A simple [Fragment] subclass.
- * Use the [FighterFragment.newInstance] factory method to
- * create an instance of this fragment.
- */
 class FighterFragment : Fragment() {
+    private var _root: View? = null
+
+    private val binding get() = _root!!
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-
     }
 
     override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        // Inflate the layout for this fragment
-        return inflater.inflate(R.layout.fragment_fighter, container, false)
+        _root = inflater.inflate(R.layout.fragment_fighter, container, false)
+
+        val tabTitles = listOf("Fri 18 Aug", "Yesterday", "Today", "Tomorrow", "Tue 22 Aug")
+
+        // Populate TabLayout with dynamic tabs
+        for (title in tabTitles) {
+            val tab = binding.tabLayout.newTab().setText(title)
+            binding.tabLayout.addTab(tab)
+        }
+
+        // Set tab click listener
+        binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
+            override fun onTabSelected(tab: TabLayout.Tab?) {
+                tab?.let {
+                    val selectedTitle = it.text.toString()
+                    binding.selectedTabTextView.text = "Selected Tab: $selectedTitle"
+                    setFighters()
+                }
+            }
+
+            override fun onTabUnselected(tab: TabLayout.Tab?) {
+                // No action needed
+            }
+
+            override fun onTabReselected(tab: TabLayout.Tab?) {
+                // No action needed
+            }
+        })
+
+        return binding
+    }
+
+    private fun setFighters() {
+        val recyclerView = binding.recyclerViewFighter
+        val cardList = createCardList() // Create your card data list here
+        val cardAdapter = FighterAdapter(cardList)
+
+        recyclerView.layoutManager =
+            LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
+        recyclerView.adapter = cardAdapter
+    }
+
+    private fun createCardList(): List<FighterCardItem> {
+        // Create and return your list of CardItems
+        return listOf(
+            FighterCardItem(R.drawable.ic_user_white, "Fighter A", R.drawable.ic_user_white, "Fighter B", "Title 1", "Khun Khmer Champion", true),
+            FighterCardItem(R.drawable.ic_user_white, "Fighter A", R.drawable.ic_user_white, "Fighter B", "Title 1", "Khun Khmer Champion", true),
+            FighterCardItem(R.drawable.ic_user_white, "Fighter A", R.drawable.ic_user_white, "Fighter B", "Title 1", "Khun Khmer Champion", true),
+            FighterCardItem(R.drawable.ic_user_white, "Fighter A", R.drawable.ic_user_white, "Fighter B", "Title 1", "Khun Khmer Champion", true),
+            FighterCardItem(R.drawable.ic_user_white, "Fighter A", R.drawable.ic_user_white, "Fighter B", "Title 1", "Khun Khmer Champion", true),
+            // Add more card items as needed
+        )
     }
 }

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

@@ -5,12 +5,17 @@ import androidx.fragment.app.Fragment
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.recyclerview.widget.LinearLayoutManager
+import com.google.android.material.tabs.TabLayout
 import com.sambath.sbc.R
-
-// TODO: Rename parameter arguments, choose names that match
-// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
-private const val ARG_PARAM1 = "param1"
-private const val ARG_PARAM2 = "param2"
+import com.sambath.sbc.adapter.HighlightNewsAdapter
+import com.sambath.sbc.adapter.TopNewsAdapter
+import com.sambath.sbc.adapter.TopNewsCardItem
+import com.sambath.sbc.adapter.TopNewsHeaderAdapter
+import kotlinx.android.synthetic.main.fragment_news.view.recyclerViewNews
+import kotlinx.android.synthetic.main.fragment_news.view.recyclerViewNewsHeader
+import kotlinx.android.synthetic.main.fragment_news.view.selectedTabTextView
+import kotlinx.android.synthetic.main.fragment_news.view.tabLayout
 
 /**
  * A simple [Fragment] subclass.
@@ -18,16 +23,11 @@ private const val ARG_PARAM2 = "param2"
  * create an instance of this fragment.
  */
 class NewsFragment : Fragment() {
-    // TODO: Rename and change types of parameters
-    private var param1: String? = null
-    private var param2: String? = null
+    private var _root: View? = null
+    private val binding get() = _root!!
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        arguments?.let {
-            param1 = it.getString(ARG_PARAM1)
-            param2 = it.getString(ARG_PARAM2)
-        }
     }
 
     override fun onCreateView(
@@ -35,26 +35,105 @@ class NewsFragment : Fragment() {
         savedInstanceState: Bundle?
     ): View? {
         // Inflate the layout for this fragment
-        return inflater.inflate(R.layout.fragment_news, container, false)
-    }
+        _root = inflater.inflate(R.layout.fragment_news, container, false)
+
+        val tabTitles = listOf("TOP NEWS", "POPULAR", "LAST", "HIGHLIGHT")
+
+        // Populate TabLayout with dynamic tabs
+        for (title in tabTitles) {
+            val tab = binding.tabLayout.newTab().setText(title)
+            binding.tabLayout.addTab(tab)
+        }
+
+        // Set tab click listener
+        binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
+            override fun onTabSelected(tab: TabLayout.Tab?) {
+                tab?.let {
+                    val selectedTitle = it.text.toString()
+                    binding.selectedTabTextView.text = "Selected Tab: $selectedTitle"
+                    val selectedIndex = it.position
+                    when (selectedIndex) {
+                        0 -> {
+                            //Top News
+                            setNewsHeaderFeed()
+                            setNewsFeed()
+                        }
 
-    companion object {
-        /**
-         * Use this factory method to create a new instance of
-         * this fragment using the provided parameters.
-         *
-         * @param param1 Parameter 1.
-         * @param param2 Parameter 2.
-         * @return A new instance of fragment NewsFragment.
-         */
-        // TODO: Rename and change types and number of parameters
-        @JvmStatic
-        fun newInstance(param1: String, param2: String) =
-            NewsFragment().apply {
-                arguments = Bundle().apply {
-                    putString(ARG_PARAM1, param1)
-                    putString(ARG_PARAM2, param2)
+                        1 -> {
+                            // Popular
+                        }
+
+                        2 -> {
+                            // Last
+                        }
+
+                        3 -> {
+                            // Highlight
+                            removeNewsHeaderFeed()
+                            setHighlight()
+                        }
+                        // Add more cases if needed
+                    }
                 }
             }
+
+            override fun onTabUnselected(tab: TabLayout.Tab?) {
+                // No action needed
+            }
+
+            override fun onTabReselected(tab: TabLayout.Tab?) {
+                // No action needed
+            }
+        })
+
+        return binding
+    }
+
+    private fun setNewsHeaderFeed() {
+        val recyclerView = binding.recyclerViewNewsHeader
+        val cardList = createCardList() // Create your card data list here
+        val cardAdapter = TopNewsHeaderAdapter(cardList)
+
+        recyclerView.layoutManager =
+            LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)
+        recyclerView.adapter = cardAdapter
+    }
+
+    private fun removeNewsHeaderFeed() {
+        val recyclerView = binding.recyclerViewNewsHeader
+        recyclerView.adapter = null
+    }
+
+
+    private fun setNewsFeed() {
+        val recyclerView = binding.recyclerViewNews
+        val cardList = createCardList() // Create your card data list here
+        val cardAdapter = TopNewsAdapter(cardList)
+
+        recyclerView.layoutManager =
+            LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
+        recyclerView.adapter = cardAdapter
+    }
+
+    private fun setHighlight() {
+        val recyclerView = binding.recyclerViewNews
+        val cardList = createCardList() // Create your card data list here
+        val cardAdapter = HighlightNewsAdapter(cardList)
+
+        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"),
+            // Add more card items as needed
+        )
     }
 }

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

@@ -1,15 +1,32 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:orientation="vertical"
     tools:context=".screen.fighter.FighterFragment">
 
-    <!-- TODO: Update blank fragment layout -->
+    <com.google.android.material.tabs.TabLayout
+        android:id="@+id/tabLayout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:tabGravity="fill"
+        app:tabMode="scrollable" />
+
     <TextView
+        android:id="@+id/selectedTabTextView"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_horizontal"
+        android:padding="16dp"
+        android:text="Selected Tab: "
+        android:textSize="18sp" />
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/recyclerViewFighter"
         android:layout_width="match_parent"
-        android:gravity="center"
-        android:layout_height="match_parent"
-        android:text="@string/hello_blank_fragment" />
+        android:layout_height="wrap_content"
+        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
 
-</FrameLayout>
+</LinearLayout>

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

@@ -1,14 +1,38 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:orientation="vertical"
     tools:context=".screen.news.NewsFragment">
 
-    <!-- TODO: Update blank fragment layout -->
+    <com.google.android.material.tabs.TabLayout
+        android:id="@+id/tabLayout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:tabGravity="fill"
+        app:tabMode="scrollable" />
+
     <TextView
+        android:id="@+id/selectedTabTextView"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_horizontal"
+        android:padding="16dp"
+        android:text="Selected Tab: "
+        android:textSize="18sp" />
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/recyclerViewNewsHeader"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/recyclerViewNews"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:text="@string/hello_blank_fragment" />
+        android:layout_height="wrap_content"
+        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
 
-</FrameLayout>
+</LinearLayout>

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

@@ -0,0 +1,136 @@
+<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_margin="10dp"
+    android:alpha="0.8"
+    app:cardBackgroundColor="@color/text_black"
+    app:cardElevation="4dp">
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        app:cardCornerRadius="0dp">
+
+        <ToggleButton
+            android:id="@+id/bookmarkToggleButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_centerInParent="true"
+            android:background="@android:color/transparent"
+            android:drawableStart="@drawable/ic_user"
+            android:drawablePadding="8dp"
+            android:textOff=""
+            android:textOn="" />
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            android:padding="10dp">
+
+            <!-- Left Section -->
+            <LinearLayout
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:orientation="vertical">
+
+                <ImageView
+                    android:id="@+id/imageLeft"
+                    android:layout_width="100dp"
+                    android:layout_height="100dp"
+                    android:layout_gravity="center"
+                    android:scaleType="centerCrop"
+                    android:src="@drawable/ic_user_white" />
+
+                <TextView
+                    android:id="@+id/titleLeft"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:paddingTop="5dp"
+                    android:paddingBottom="5dp"
+                    android:text="@string/title_fighters"
+                    android:textAlignment="center"
+                    android:textColor="@color/color_white"
+                    android:textSize="12sp" />
+
+            </LinearLayout>
+
+            <!-- Middle Section -->
+            <LinearLayout
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:orientation="vertical">
+
+                <TextView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:paddingTop="5dp"
+                    android:paddingBottom="5dp"
+                    android:text="@string/title_vs"
+                    android:textAlignment="center"
+                    android:textColor="@color/color_white"
+                    android:textSize="12sp" />
+
+                <TextView
+                    android:id="@+id/tvDate"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:paddingTop="5dp"
+                    android:paddingBottom="5dp"
+                    android:text="@string/title_date"
+                    android:textAlignment="center"
+                    android:textColor="@color/color_white"
+                    android:textSize="12sp" />
+
+            </LinearLayout>
+
+            <!-- Right Section -->
+            <LinearLayout
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:orientation="vertical">
+
+                <ImageView
+                    android:id="@+id/imageRight"
+                    android:layout_width="100dp"
+                    android:layout_height="100dp"
+                    android:layout_gravity="center"
+                    android:scaleType="centerCrop"
+                    android:src="@drawable/ic_user_white" />
+
+                <TextView
+                    android:id="@+id/titleRight"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:paddingTop="5dp"
+                    android:paddingBottom="5dp"
+                    android:text="@string/title_fighters"
+                    android:textAlignment="center"
+                    android:textColor="@color/color_white"
+                    android:textSize="12sp" />
+            </LinearLayout>
+        </LinearLayout>
+
+        <View
+            android:layout_width="match_parent"
+            android:layout_height="1dp"
+            android:background="@android:color/darker_gray" />
+
+        <TextView
+            android:id="@+id/titleMatch"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:paddingTop="5dp"
+            android:paddingBottom="5dp"
+            android:text="@string/title_fighters"
+            android:textAlignment="center"
+            android:textColor="@color/color_white"
+            android:textSize="12sp" />
+    </LinearLayout>
+</androidx.cardview.widget.CardView>

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

@@ -0,0 +1,53 @@
+<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_margin="5dp"
+    app:cardCornerRadius="5dp"
+    app:cardElevation="4dp">
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical">
+
+        <ImageView
+            android:id="@+id/imageView"
+            android:layout_width="match_parent"
+            android:layout_height="200dp"
+            android:background="@color/color_green_800"
+            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" />
+
+            <TextView
+                android:id="@+id/dateTextView"
+                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" />
+
+        </LinearLayout>
+
+    </LinearLayout>
+</androidx.cardview.widget.CardView>

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

@@ -0,0 +1,38 @@
+<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_margin="5dp"
+    app:cardCornerRadius="5dp"
+    app:cardElevation="4dp">
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        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" />
+
+        <TextView
+            android:id="@+id/dateTextView"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="Your Date"
+            android:textSize="12sp" />
+
+        <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>
+</androidx.cardview.widget.CardView>

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

@@ -0,0 +1,53 @@
+<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_margin="5dp"
+    app:cardCornerRadius="0dp"
+    app:cardElevation="4dp">
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="horizontal">
+
+        <ImageView
+            android:id="@+id/imageView"
+            android:layout_width="150dp"
+            android:layout_height="120dp"
+            android:scaleType="centerCrop"
+            android:src="@drawable/bg_action_bar" />
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:orientation="vertical"
+            android:paddingLeft="5dp">
+
+            <TextView
+                android:id="@+id/titleTextView"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:text="Your Title"
+                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" />
+
+        </LinearLayout>
+
+    </LinearLayout>
+</androidx.cardview.widget.CardView>

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

@@ -2,5 +2,6 @@
     <dimen name="fab_margin">16dp</dimen>
     <dimen name="login_edit_text_corner">8dp</dimen>
     <dimen name="result_circle_size">38dp</dimen>
+    <dimen name="nav_header_height">176dp</dimen>
 
 </resources>

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

@@ -76,4 +76,6 @@
     <string name="title_live">Lives</string>
     <!-- TODO: Remove or change this placeholder text -->
     <string name="hello_blank_fragment">Hello blank fragment</string>
+    <string name="title_vs">Vs</string>
+    <string name="title_date">Date</string>
 </resources>