Activity home fragment theme 1 background- differentiating grass, clouds animations, stars and moon in night background.

status bar color
navigation bar color

language setup

app/src/main/java/com/woka/home/HomeActivity.kt

@@ -1,6 +1,10 @@
 package com.woka.home
 
+import android.content.BroadcastReceiver
+import android.content.Context
 import android.content.Intent
+import android.content.IntentFilter
+import android.content.res.ColorStateList
 import android.graphics.Color
 import android.os.Bundle
 import android.util.Log
@@ -11,6 +15,7 @@ import androidx.activity.enableEdgeToEdge
 import androidx.core.content.ContextCompat
 import androidx.core.view.GravityCompat
 import androidx.core.view.ViewCompat
+import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.lifecycle.Observer
 import androidx.lifecycle.ViewModelProvider
@@ -41,6 +46,9 @@ class HomeActivity : WokaBaseActivity(),
 
     private lateinit var viewModel: HomeViewModel
 
+    private var minuteReceiver: BroadcastReceiver? = null
+    private var currentBackground: TimePeriod? = null
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
@@ -52,13 +60,26 @@ class HomeActivity : WokaBaseActivity(),
             insets
         }
 
-        window?.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
-        window?.statusBarColor = Color.parseColor("#55cffe")
+        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
+        window.statusBarColor = Color.TRANSPARENT
+        window.navigationBarColor = Color.WHITE
+        WindowCompat.getInsetsController(window, window.decorView).isAppearanceLightStatusBars = false
 
         viewModel = ViewModelProvider(this)[HomeViewModel::class.java]
 
         userPrefs?.userLiveData?.observe(this, this)
 
+        minuteReceiver = object : BroadcastReceiver(){
+            override fun onReceive(context: Context?, intent: Intent?) {
+                // this function is called every minute
+                if (intent?.action == Intent.ACTION_TIME_TICK){
+                    updateBackground()
+                }
+            }
+        }
+
+        registerReceiver(minuteReceiver, IntentFilter(Intent.ACTION_TIME_TICK))
+
         initViews()
 
         clickEvents()
@@ -72,6 +93,11 @@ class HomeActivity : WokaBaseActivity(),
         }
     }
 
+    override fun onDestroy() {
+        super.onDestroy()
+        unregisterReceiver(minuteReceiver)
+    }
+
     private fun initViews() {
         binding.apply {
             val versionName = "VER ${BuildConfig.VERSION_NAME}"
@@ -199,9 +225,42 @@ class HomeActivity : WokaBaseActivity(),
             }
         }
 
+        updateBackground()
         viewModel.selectedBottomTab = tab
     }
 
+    // updating background
+    private fun updateBackground(){
+        when(binding.bottomNav.getSelectedTab()){
+            HOME -> {
+                if (userPrefs?.appTheme == Theme.THEME_ONE){
+                    val timePeriod = TimePeriod.getCurrentTimePeriod()
+                    if (currentBackground != timePeriod){
+                        // time period has changed
+                        binding.root.background = when(timePeriod){
+                            TimePeriod.MORNING -> {
+                                ContextCompat.getDrawable(this, R.drawable.grad_morning)
+                            }
+                            TimePeriod.AFTERNOON -> {
+                                ContextCompat.getDrawable(this, R.drawable.grad_afternoon)
+                            }
+                            TimePeriod.EVENING -> {
+                                ContextCompat.getDrawable(this, R.drawable.grad_evening)
+                            }
+                            TimePeriod.NIGHT -> {
+                                ContextCompat.getDrawable(this, R.drawable.grad_night)
+                            }
+                        }
+
+                        currentBackground = timePeriod
+                    }
+                }else{
+                    binding.root.backgroundTintList = ColorStateList.valueOf(getColor(R.color.color_primary))
+                }
+            }
+        }
+    }
+
     // observer for userdata changes
     override fun onChanged(value: ApiResult<UserDataResponse>) {
         when(value){

app/src/main/java/com/woka/home/TimePeriod.kt

@@ -0,0 +1,24 @@
+package com.woka.home
+
+import java.util.Calendar
+
+enum class TimePeriod{
+    MORNING,
+    AFTERNOON,
+    EVENING,
+    NIGHT;
+
+    companion object{
+        fun getCurrentTimePeriod(): TimePeriod{
+            val cal = Calendar.getInstance()
+            val hrs = cal.get(Calendar.HOUR_OF_DAY)
+
+            return when (hrs) {
+                in 6..10 -> MORNING
+                in 11..15 -> AFTERNOON
+                in 16..19 -> EVENING
+                else -> NIGHT
+            }
+        }
+    }
+}

app/src/main/java/com/woka/home/fragments/Home1Fragment.kt

@@ -11,63 +11,59 @@ import android.os.Bundle
 import android.util.DisplayMetrics
 import android.view.LayoutInflater
 import android.view.View
+import android.view.View.GONE
+import android.view.View.VISIBLE
 import android.view.ViewGroup
 import androidx.core.content.ContextCompat
 import androidx.fragment.app.Fragment
+import androidx.lifecycle.ViewModelProvider
 import com.woka.R
+import com.woka.WokaApp.Companion.userPrefs
 import com.woka.databinding.FragmentHome1Binding
-import com.woka.utils.toast
-import java.util.Calendar
+import com.woka.home.HomeViewModel
+import com.woka.home.TimePeriod
+import com.woka.mvvm.userDataModels.UserData
+import com.woka.mvvm.userDataModels.UserDataResponse
+import com.woka.networking.ApiResult
+import com.woka.utils.UserType
 
 class Home1Fragment : Fragment() {
 
-    enum class TimePeriod{
-        MORNING,
-        AFTERNOON,
-        EVENING,
-        NIGHT;
-
-        companion object{
-            fun getCurrentTimePeriod(): TimePeriod{
-                val cal = Calendar.getInstance()
-                val hrs = cal.get(Calendar.HOUR_OF_DAY)
-
-                return when (hrs) {
-                    in 6..10 -> MORNING
-                    in 11..15 -> AFTERNOON
-                    in 16..19 -> EVENING
-                    else -> NIGHT
-                }
-            }
-        }
-    }
-
     private lateinit var binding: FragmentHome1Binding
+    private lateinit var viewModel: HomeViewModel
 
     private var currentBackground: TimePeriod? = null
     private var minuteReceiver: BroadcastReceiver? = null
 
-    private var valueAnimator: ValueAnimator? = null
+    private var tvAnimator: ValueAnimator? = null
+    private var cloud1Animator: ValueAnimator? = null
+    private var cloud2Animator: ValueAnimator? = null
+    private var star1Animator: ValueAnimator? = null
+    private var star2Animator: ValueAnimator? = null
 
     override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
         binding = FragmentHome1Binding.inflate(inflater, container, false)
+        activity?.let {
+            viewModel = ViewModelProvider(it)[HomeViewModel::class.java]
+        }
 
         updateBackground()
 
-        minuteReceiver = object : BroadcastReceiver(){
+        minuteReceiver = object : BroadcastReceiver() {
             override fun onReceive(context: Context?, intent: Intent?) {
                 // this function is called every minute
-                if (intent?.action == ACTION_TIME_TICK){
+                if (intent?.action == ACTION_TIME_TICK) {
                     updateBackground()
                 }
             }
         }
-
         activity?.registerReceiver(minuteReceiver, IntentFilter(ACTION_TIME_TICK))
 
+        setObservers()
+
         clickEvents()
 
         return binding.root
@@ -75,24 +71,40 @@ class Home1Fragment : Fragment() {
 
     override fun onResume() {
         super.onResume()
-        if (valueAnimator == null) {
-            binding.tvView.post {
-                val endMargin: Float = 25f * (resources.displayMetrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT)
-                valueAnimator = ObjectAnimator.ofFloat(binding.tvView, "translationX", resources.displayMetrics.widthPixels - binding.tvView.width - (2 * endMargin)).apply {
-                    duration = 12000
-                    repeatCount = ValueAnimator.INFINITE
-                    repeatMode = ValueAnimator.REVERSE
-                    start()
-                }
-            }
-        } else {
-            valueAnimator?.resume()
-        }
+        handleAnimations()
     }
 
     override fun onPause() {
         super.onPause()
-        valueAnimator?.pause()
+        tvAnimator?.pause()
+        cloud1Animator?.pause()
+        cloud2Animator?.pause()
+        star1Animator?.pause()
+        star2Animator?.pause()
+    }
+
+    private fun setObservers() {
+        userPrefs?.userLiveData?.observe(viewLifecycleOwner) {
+            if (it is ApiResult.Success) {
+                updateUserData(it.data)
+            }
+        }
+
+        viewModel.localeChangeLiveData.observe(viewLifecycleOwner) {
+            binding.apply {
+                helloTxt.text = getString(R.string.hello)
+                welcomeText.text = getString(R.string.welcome_to_wokaland)
+
+                webSeriesTxt.text = getString(R.string.web_series)
+                liveTvTxt.text = getString(R.string.live_tv)
+                shopTxt.text = getString(R.string.shop)
+                karaokeTxt.text = getString(R.string.karaoke)
+                audioBooksTxt.text = getString(R.string.audio_books)
+                playTxt.text = getString(R.string.play)
+
+                moreTxt.text = getString(R.string.more)
+            }
+        }
     }
 
     private fun clickEvents() {
@@ -106,32 +118,190 @@ class Home1Fragment : Fragment() {
         activity?.unregisterReceiver(minuteReceiver)
     }
 
-    private fun updateBackground(){
-        toast("Background updated")
+    private fun updateUserData(data: UserDataResponse?) {
+        binding.apply {
+            val name = if (userPrefs?.userType == UserType.GUEST) userPrefs?.guestUserName
+            else data?.result?.fullname
+            val text = ", $name"
+
+            userName.text = text
+        }
+    }
+
+    private fun handleAnimations() {
+        if (tvAnimator == null) {
+            binding.tvView.post {
+                val endMargin: Float =
+                    25f * (resources.displayMetrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT)
+                tvAnimator = ObjectAnimator.ofFloat(
+                    binding.tvView,
+                    "translationX",
+                    resources.displayMetrics.widthPixels - binding.tvView.width - (2 * endMargin)
+                ).apply {
+                    duration = 12000
+                    repeatCount = ValueAnimator.INFINITE
+                    repeatMode = ValueAnimator.REVERSE
+                    start()
+                }
+            }
+        } else {
+            tvAnimator?.resume()
+        }
+
+        if (cloud1Animator == null) {
+            binding.cloud1.post {
+                val cloud1Width: Float =
+                    900f * (resources.displayMetrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT)
+                cloud1Animator = ObjectAnimator.ofFloat(
+                    binding.cloud1,
+                    "translationX",
+                    -cloud1Width + resources.displayMetrics.widthPixels
+                ).apply {
+                    duration = 120_000
+                    repeatCount = ValueAnimator.INFINITE
+                    repeatMode = ValueAnimator.REVERSE
+                    start()
+                }
+            }
+        } else {
+            cloud1Animator?.resume()
+        }
+
+        if (cloud2Animator == null) {
+            binding.cloud2.post {
+                val cloud2Width: Float =
+                    900f * (resources.displayMetrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT)
+                cloud2Animator = ObjectAnimator.ofFloat(
+                    binding.cloud2,
+                    "translationX",
+                    cloud2Width - resources.displayMetrics.widthPixels
+                ).apply {
+                    duration = 120_000
+                    repeatCount = ValueAnimator.INFINITE
+                    repeatMode = ValueAnimator.REVERSE
+                    start()
+                }
+            }
+        } else {
+            cloud2Animator?.resume()
+        }
+
+        if (currentBackground == TimePeriod.NIGHT && star1Animator == null) {
+            binding.star1.post {
+                star1Animator = ObjectAnimator.ofFloat(binding.star1, "alpha", 0.3f, 1f).apply {
+                    duration = 3000
+                    repeatCount = ValueAnimator.INFINITE
+                    repeatMode = ValueAnimator.REVERSE
+                    start()
+                }
+            }
+        } else {
+            star1Animator?.resume()
+        }
+
+        if (currentBackground == TimePeriod.NIGHT && star2Animator == null) {
+            binding.star2.post {
+                star2Animator = ObjectAnimator.ofFloat(binding.star2, "alpha", 0.3f, 1f).apply {
+                    duration = 3000
+                    repeatCount = ValueAnimator.INFINITE
+                    repeatMode = ValueAnimator.REVERSE
+                    start()
+                }
+            }
+        } else {
+            star2Animator?.resume()
+        }
+    }
+
+    private fun updateBackground() {
         val timePeriod = TimePeriod.getCurrentTimePeriod()
-        if (currentBackground != timePeriod){
+        if (currentBackground != timePeriod) {
             // time period has changed
             activity?.let {
-                binding.root.background = when(timePeriod){
+                when (timePeriod) {
                     TimePeriod.MORNING -> {
-                        it.window.statusBarColor = ContextCompat.getColor(it, R.color.morning_status)
-                        ContextCompat.getDrawable(it, R.drawable.morning_bg)
+                        // text colors
+                        binding.userName.setTextColor(
+                            ContextCompat.getColor(
+                                it,
+                                R.color.color_primary
+                            )
+                        )
+                        binding.welcomeText.setTextColor(
+                            ContextCompat.getColor(
+                                it,
+                                R.color.color_primary
+                            )
+                        )
+                        binding.helloTxt.setTextColor(
+                            ContextCompat.getColor(
+                                it,
+                                R.color.color_primary
+                            )
+                        )
+
+                        binding.star1.visibility = GONE
+                        binding.star2.visibility = GONE
+                        binding.moon.visibility = GONE
+
+                        binding.grass.setImageResource(R.drawable.img_grass_d)
                     }
+
                     TimePeriod.AFTERNOON -> {
-                        it.window.statusBarColor = ContextCompat.getColor(it, R.color.afternoon_status)
-                        ContextCompat.getDrawable(it, R.drawable.afternoon_bg)
+                        // text colors
+                        binding.userName.setTextColor(
+                            ContextCompat.getColor(
+                                it,
+                                R.color.color_primary
+                            )
+                        )
+                        binding.welcomeText.setTextColor(
+                            ContextCompat.getColor(
+                                it,
+                                R.color.color_primary
+                            )
+                        )
+                        binding.helloTxt.setTextColor(
+                            ContextCompat.getColor(
+                                it,
+                                R.color.color_primary
+                            )
+                        )
+
+                        binding.star1.visibility = GONE
+                        binding.star2.visibility = GONE
+                        binding.moon.visibility = GONE
+
+                        binding.grass.setImageResource(R.drawable.img_grass_d)
                     }
+
                     TimePeriod.EVENING -> {
-                        it.window.statusBarColor = ContextCompat.getColor(it, R.color.evening_status)
-                        ContextCompat.getDrawable(it, R.drawable.evening_bg)
+                        // text colors
+                        binding.userName.setTextColor(ContextCompat.getColor(it, R.color.white))
+                        binding.welcomeText.setTextColor(ContextCompat.getColor(it, R.color.white))
+                        binding.helloTxt.setTextColor(ContextCompat.getColor(it, R.color.white))
+
+                        binding.star1.visibility = GONE
+                        binding.star2.visibility = GONE
+                        binding.moon.visibility = GONE
+
+                        binding.grass.setImageResource(R.drawable.img_grass_d)
                     }
+
                     TimePeriod.NIGHT -> {
                         // text colors
                         binding.userName.setTextColor(ContextCompat.getColor(it, R.color.white))
                         binding.welcomeText.setTextColor(ContextCompat.getColor(it, R.color.white))
+                        binding.helloTxt.setTextColor(ContextCompat.getColor(it, R.color.white))
 
-                        it.window.statusBarColor = ContextCompat.getColor(it, R.color.night_status)
-                        ContextCompat.getDrawable(it, R.drawable.night_bg)
+                        binding.star1.visibility = VISIBLE
+                        binding.star2.visibility = VISIBLE
+                        binding.moon.visibility = VISIBLE
+
+                        currentBackground = timePeriod
+                        handleAnimations()
+
+                        binding.grass.setImageResource(R.drawable.img_grass_n)
                     }
                 }
             }

app/src/main/res/drawable/grad_afternoon.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <gradient android:startColor="#22BAFE"
+        android:centerColor="#97E8FE"
+        android:endColor="#97E8FE"
+        android:angle="270"
+        />
+
+</shape>

app/src/main/res/drawable/grad_evening.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <gradient android:startColor="#D15578"
+        android:centerColor="#FFC666"
+        android:endColor="#FFC666"
+        android:angle="270"
+        />
+
+</shape>

app/src/main/res/drawable/grad_morning.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <gradient android:startColor="#A6E2D1"
+        android:centerColor="#F3FBB6"
+        android:endColor="#F3FBB6"
+        android:angle="270"
+        />
+
+</shape>

app/src/main/res/drawable/grad_night.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <gradient android:startColor="#453784"
+        android:centerColor="#6061C8"
+        android:endColor="#6061C8"
+        android:angle="270"
+        />
+
+</shape>

app/src/main/res/drawable/primary_bg.xml

@@ -0,0 +1,21 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="428dp"
+    android:height="776dp"
+    android:viewportWidth="428"
+    android:viewportHeight="776">
+  <path
+      android:pathData="M230.1,49.03C95.62,-4.79 44.81,8.51 0,24.52V776H430V0C408.85,40.03 292.5,74 230.1,49.03Z">
+    <aapt:attr name="android:fillColor">
+      <gradient 
+          android:startX="215"
+          android:startY="-0"
+          android:endX="215"
+          android:endY="776"
+          android:type="linear">
+        <item android:offset="0" android:color="#60FFFFFF"/>
+        <item android:offset="1" android:color="#00FFFFFF"/>
+      </gradient>
+    </aapt:attr>
+  </path>
+</vector>

app/src/main/res/drawable/top_round_15_white.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <corners
+        android:topLeftRadius="15dp"
+        android:topRightRadius="15dp"/>
+
+    <solid android:color="@color/white"/>
+
+</shape>

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

@@ -6,6 +6,8 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
 
+    android:background="@drawable/grad_morning"
+
     tools:openDrawer="end"
     tools:context=".home.HomeActivity">
 

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

@@ -1,17 +1,31 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@android:color/black"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+
+    android:background="@color/color_primary"
     tools:context=".home.fragments.Home1Fragment">
 
-    <TextView
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/g1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:text="Home"
-        android:textColor="@color/white"
-        android:layout_centerInParent="true"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.5"
         />
 
-</RelativeLayout>
+    <ImageView
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:contentDescription="@string/image"
+        android:src="@drawable/primary_bg"
+        android:scaleType="fitXY"
+
+        app:layout_constraintTop_toBottomOf="@id/g1"
+        app:layout_constraintBottom_toBottomOf="parent"
+
+        />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -4,11 +4,11 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@drawable/morning_bg"
+    tools:background="@drawable/grad_evening"
     tools:context=".home.fragments.Home1Fragment">
 
     <com.woka.home.PressableImageView
-        android:id="@+id/pressableImageView"
+        android:id="@+id/fm_button"
         android:layout_width="@dimen/_70sdp"
         android:layout_height="@dimen/_70sdp"
         android:layout_margin="10dp"
@@ -36,24 +36,48 @@
 
         />
 
-    <TextView
-        android:id="@+id/user_name"
+    <LinearLayout
+        android:id="@+id/user_name_LL"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
 
-        android:layout_marginTop="3dp"
-        android:fontFamily="@font/exo_2_bold"
-        android:text="Hello, Aditya"
-        android:textAlignment="center"
-        android:textColor="@color/color_primary"
-
-        android:textSize="@dimen/_14ssp"
-
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/profile_image"
 
-        />
+        android:orientation="horizontal">
+
+        <TextView
+            android:id="@+id/hello_txt"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+
+            android:text="@string/hello"
+            android:layout_marginTop="3dp"
+            android:fontFamily="@font/exo_2_bold"
+            android:textAlignment="center"
+            android:textColor="@color/color_primary"
+
+            android:textSize="@dimen/_14ssp"
+
+            />
+
+        <TextView
+            android:id="@+id/user_name"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+
+            tools:text=", Aditya"
+            android:layout_marginTop="3dp"
+            android:fontFamily="@font/exo_2_bold"
+            android:textAlignment="center"
+            android:textColor="@color/color_primary"
+
+            android:textSize="@dimen/_14ssp"
+
+            />
+
+    </LinearLayout>
 
     <TextView
         android:id="@+id/welcome_text"
@@ -69,14 +93,67 @@
         app:layout_constraintBottom_toTopOf="@id/tv_view"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/user_name"
+        app:layout_constraintTop_toBottomOf="@id/user_name_LL"
 
         app:layout_constraintVertical_bias="0" />
 
+    <ImageView
+        android:id="@+id/star1"
+        android:layout_width="@dimen/_25sdp"
+        android:layout_height="@dimen/_25sdp"
+        android:visibility="gone"
+
+        android:contentDescription="@string/image"
+        android:src="@drawable/img_star"
+
+        app:layout_constraintStart_toEndOf="@id/fm_button"
+        app:layout_constraintTop_toTopOf="parent"
+
+        android:layout_margin="@dimen/_15sdp"
+
+        />
+
+    <ImageView
+        android:id="@+id/star2"
+        android:layout_width="@dimen/_15sdp"
+        android:layout_height="@dimen/_15sdp"
+        android:visibility="gone"
+
+        android:contentDescription="@string/image"
+        android:src="@drawable/img_star"
+
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/fm_button"
+
+        android:layout_marginTop="@dimen/_30sdp"
+        android:layout_marginStart="@dimen/_15sdp"
+
+        />
+
+    <ImageView
+        android:id="@+id/moon"
+        android:layout_width="@dimen/_50sdp"
+        android:layout_height="@dimen/_50sdp"
+
+        android:visibility="gone"
+
+        android:src="@drawable/img_moon"
+        android:contentDescription="@string/image"
+
+        android:layout_marginHorizontal="@dimen/_20sdp"
+        android:layout_marginTop="@dimen/_15sdp"
+
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/welcome_text"
+
+        />
+
     <RelativeLayout
         android:id="@+id/tv_view"
-        android:layout_width="@dimen/_170sdp"
-        android:layout_height="@dimen/_140sdp"
+        android:layout_width="232dp"
+        android:layout_height="162dp"
+
+        android:translationZ="3dp"
 
         android:layout_marginStart="25dp"
         android:orientation="vertical"
@@ -89,9 +166,10 @@
 
         <ImageView
             android:id="@+id/balloon"
-            android:layout_width="@dimen/_70sdp"
-            android:layout_height="@dimen/_40sdp"
+            android:layout_width="@dimen/_50sdp"
+            android:layout_height="@dimen/_30sdp"
             android:layout_centerHorizontal="true"
+            android:layout_marginTop="@dimen/_2sdp"
             android:contentDescription="@string/live_tv"
             android:scaleType="fitXY"
             android:src="@drawable/img_live_tv_balloon" />
@@ -110,8 +188,8 @@
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_marginHorizontal="@dimen/_28sdp"
-            android:layout_marginTop="@dimen/_50sdp"
-            android:layout_marginBottom="@dimen/_14sdp"
+            android:layout_marginTop="@dimen/_44sdp"
+            android:layout_marginBottom="@dimen/_10sdp"
 
             android:background="@color/white"
             android:contentDescription="@string/image"
@@ -125,12 +203,71 @@
 
     </RelativeLayout>
 
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/g1"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintGuide_percent="0.45"
+        android:orientation="horizontal"/>
+
+    <ImageView
+        android:id="@+id/cloud_1"
+        android:layout_width="900dp"
+        android:layout_height="0dp"
+
+        android:contentDescription="@string/image"
+        android:src="@drawable/img_cloud_1"
+        android:scaleType="fitXY"
+
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="@id/g1"
+        app:layout_constraintBottom_toTopOf="@id/karaoke_ll"
+
+        />
+
+    <ImageView
+        android:id="@+id/cloud_2"
+        android:layout_width="900dp"
+        android:layout_height="0dp"
+
+        android:contentDescription="@string/image"
+        android:src="@drawable/img_cloud_2"
+        android:scaleType="fitXY"
+
+        android:layout_marginTop="@dimen/_45sdp"
+
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="@id/g1"
+        app:layout_constraintBottom_toTopOf="@id/karaoke_ll"
+
+        />
+
+    <ImageView
+        android:id="@+id/grass"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+
+        android:translationZ="1dp"
+
+        android:layout_marginTop="@dimen/_25sdp"
+
+        android:contentDescription="@string/image"
+        android:src="@drawable/img_grass_d"
+        android:scaleType="fitXY"
+
+        app:layout_constraintTop_toTopOf="@id/g1"
+        app:layout_constraintBottom_toBottomOf="parent"
+
+        />
+
     <LinearLayout
         android:id="@+id/linearLayout"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:gravity="center_horizontal"
 
+        android:translationZ="2dp"
+
         android:orientation="vertical"
         android:visibility="visible"
 
@@ -139,18 +276,19 @@
         app:layout_constraintHorizontal_bias="0"
         app:layout_constraintStart_toStartOf="parent"
 
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="0.63">
+        app:layout_constraintTop_toTopOf="@id/g1"
+        app:layout_constraintVertical_bias="0.25">
 
         <com.woka.home.PressableImageView
             android:id="@+id/web_series"
-            android:layout_width="@dimen/_85sdp"
-            android:layout_height="@dimen/_70sdp"
+            android:layout_width="@dimen/_75sdp"
+            android:layout_height="@dimen/_62sdp"
             android:contentDescription="@string/web_series"
             android:scaleType="fitXY"
             android:src="@drawable/img_web_series_t1" />
 
         <TextView
+            android:id="@+id/web_series_txt"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
 
@@ -168,6 +306,8 @@
         android:layout_height="wrap_content"
         android:gravity="center_horizontal"
 
+        android:translationZ="2dp"
+
         android:orientation="vertical"
         android:visibility="visible"
 
@@ -176,18 +316,20 @@
         app:layout_constraintHorizontal_bias="0.5"
         app:layout_constraintStart_toStartOf="parent"
 
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="0.59">
+        app:layout_constraintTop_toTopOf="@id/g1"
+        app:layout_constraintVertical_bias="0.2">
 
         <com.woka.home.PressableImageView
             android:id="@+id/live_tv"
-            android:layout_width="@dimen/_85sdp"
-            android:layout_height="@dimen/_70sdp"
+            android:layout_width="@dimen/_75sdp"
+            android:layout_height="@dimen/_62sdp"
+            android:translationZ="3dp"
             android:contentDescription="@string/live_tv"
             android:scaleType="fitXY"
             android:src="@drawable/img_live_tv_t1" />
 
         <TextView
+            android:id="@+id/live_tv_txt"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
 
@@ -205,6 +347,8 @@
         android:layout_height="wrap_content"
         android:gravity="center_horizontal"
 
+        android:translationZ="2dp"
+
         android:orientation="vertical"
         android:visibility="visible"
 
@@ -213,18 +357,20 @@
         app:layout_constraintHorizontal_bias="1"
         app:layout_constraintStart_toStartOf="parent"
 
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="0.51">
+        app:layout_constraintTop_toTopOf="@id/g1"
+        app:layout_constraintVertical_bias="0.05">
 
         <com.woka.home.PressableImageView
             android:id="@+id/shop"
-            android:layout_width="@dimen/_85sdp"
-            android:layout_height="@dimen/_70sdp"
+            android:layout_width="@dimen/_75sdp"
+            android:layout_height="@dimen/_62sdp"
+            android:translationZ="3dp"
             android:contentDescription="@string/shop"
             android:scaleType="fitXY"
             android:src="@drawable/img_shop_t1" />
 
         <TextView
+            android:id="@+id/shop_txt"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
 
@@ -237,11 +383,13 @@
     </LinearLayout>
 
     <LinearLayout
-        android:id="@+id/linearLayout4"
+        android:id="@+id/karaoke_ll"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:gravity="center_horizontal"
 
+        android:translationZ="2dp"
+
         android:orientation="vertical"
         android:visibility="visible"
 
@@ -250,18 +398,20 @@
         app:layout_constraintHorizontal_bias="0.05"
         app:layout_constraintStart_toStartOf="parent"
 
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="0.82">
+        app:layout_constraintTop_toTopOf="@id/g1"
+        app:layout_constraintVertical_bias="0.59">
 
         <com.woka.home.PressableImageView
             android:id="@+id/karaoke"
-            android:layout_width="@dimen/_85sdp"
-            android:layout_height="@dimen/_70sdp"
+            android:layout_width="@dimen/_75sdp"
+            android:layout_height="@dimen/_62sdp"
+            android:translationZ="3dp"
             android:contentDescription="@string/karaoke"
             android:scaleType="fitXY"
             android:src="@drawable/img_karaoke_t1" />
 
         <TextView
+            android:id="@+id/karaoke_txt"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
 
@@ -279,6 +429,8 @@
         android:layout_height="wrap_content"
         android:gravity="center_horizontal"
 
+        android:translationZ="2dp"
+
         android:orientation="vertical"
         android:visibility="visible"
 
@@ -287,18 +439,20 @@
         app:layout_constraintHorizontal_bias="0.52"
         app:layout_constraintStart_toStartOf="parent"
 
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="0.83">
+        app:layout_constraintTop_toTopOf="@id/g1"
+        app:layout_constraintVertical_bias="0.6">
 
         <com.woka.home.PressableImageView
             android:id="@+id/audio_books"
-            android:layout_width="@dimen/_85sdp"
-            android:layout_height="@dimen/_70sdp"
+            android:layout_width="@dimen/_75sdp"
+            android:layout_height="@dimen/_62sdp"
+            android:translationZ="3dp"
             android:contentDescription="@string/audio_books"
             android:scaleType="fitXY"
             android:src="@drawable/img_listen_t1" />
 
         <TextView
+            android:id="@+id/audio_books_txt"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
 
@@ -311,11 +465,13 @@
     </LinearLayout>
 
     <LinearLayout
-        android:id="@+id/linearLayout6"
+        android:id="@+id/play_ll"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:gravity="center_horizontal"
 
+        android:translationZ="2dp"
+
         android:orientation="vertical"
         android:visibility="visible"
 
@@ -324,18 +480,20 @@
         app:layout_constraintHorizontal_bias="0.98"
         app:layout_constraintStart_toStartOf="parent"
 
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="0.72">
+        app:layout_constraintTop_toTopOf="@id/g1"
+        app:layout_constraintVertical_bias="0.39">
 
         <com.woka.home.PressableImageView
             android:id="@+id/play"
-            android:layout_width="@dimen/_85sdp"
-            android:layout_height="@dimen/_70sdp"
+            android:layout_width="@dimen/_75sdp"
+            android:layout_height="@dimen/_62sdp"
+            android:translationZ="3dp"
             android:contentDescription="@string/play"
             android:scaleType="fitXY"
             android:src="@drawable/img_play_t1" />
 
         <TextView
+            android:id="@+id/play_txt"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
 
@@ -351,6 +509,9 @@
         android:id="@+id/linearLayout7"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+
+        android:translationZ="2dp"
+
         android:layout_marginBottom="@dimen/_20sdp"
 
         android:gravity="center_horizontal"
@@ -362,12 +523,13 @@
 
         <com.woka.home.PressableImageView
             android:layout_width="25dp"
-            android:layout_height="25dp"
+            android:layout_height="wrap_content"
             android:contentDescription="@string/more"
             android:scaleType="fitXY"
             android:src="@drawable/ic_more_down" />
 
         <TextView
+            android:id="@+id/more_txt"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
 

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

@@ -3,7 +3,7 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:background="@color/white"
+    android:background="@drawable/top_round_15_white"
     android:orientation="vertical">
 
     <View

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

@@ -99,4 +99,13 @@
     <string name="home">घर</string>
     <string name="explore_woka">वोका का अन्वेषण करें</string>
     <string name="my_list">मेरी सूची</string>
+    <string name="hello">नमस्ते</string>
+    <string name="web_series">वेब सीरीज</string>
+    <string name="audio_books">ऑडियो-किताबें</string>
+    <string name="play">खेल</string>
+    <string name="karaoke">कराओके</string>
+    <string name="shop">दुकान</string>
+    <string name="more">और</string>
+    <string name="live_tv">लाइव टीवी</string>
+    <string name="welcome_to_wokaland">वोकलैंड में आपका स्वागत है</string>
 </resources>

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

@@ -118,6 +118,7 @@
     <string name="privacy_policy" translatable="false"><![CDATA[Privacy & Policy]]></string>
     <string name="disclaimer" translatable="false">Disclaimer</string>
     <string name="woka_creations_private_ltd" translatable="false">WOKA CREATIONS PVT LTD</string>
+    <string name="hello">Hello</string>
     <string name="web_series">WEB SERIES</string>
     <string name="audio_books">AUDIO-BOOKS</string>
     <string name="play">PLAY</string>