Merge branch 'feature/elements_detail' into developrelease/2.0

26 files changed, 1119 insertions, 136 deletions

diff --git a/app/build.gradle b/app/build.gradle
index 4a23638..d1d101c 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -45,11 +45,12 @@ dependencies {
     androidTestImplementation 'androidx.test.ext:junit:1.1.2'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
 
-    //Recycleview
+    //Recycleview for lists
     implementation "androidx.recyclerview:recyclerview:1.1.0"
-    //Retrofit
-    implementation 'com.squareup.retrofit2:retrofit:2.6.0'
-    implementation 'com.squareup.retrofit2:converter-gson:2.6.0'
+
+    //Retrofit for REST APIs
+    implementation 'com.squareup.retrofit2:retrofit:2.9.0'
+    implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
 
     // Required for local unit tests (JUnit 4 framework)
     testImplementation 'junit:junit:4.13.2'
@@ -58,5 +59,8 @@ dependencies {
     androidTestImplementation 'com.android.support:support-annotations:28.0.0'
     androidTestImplementation 'com.android.support.test:runner:1.0.2'
 
+    //Glide to display images properly
+    implementation 'com.github.bumptech.glide:glide:4.12.0'
+    annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
 
 }
\ No newline at end of file
diff --git a/app/src/androidTest/java/xyz/adjutor/aniki/ExampleInstrumentedTest.kt b/app/src/androidTest/java/xyz/adjutor/aniki/ExampleInstrumentedTest.kt
index 517647e..9100bf0 100644
--- a/app/src/androidTest/java/xyz/adjutor/aniki/ExampleInstrumentedTest.kt
+++ b/app/src/androidTest/java/xyz/adjutor/aniki/ExampleInstrumentedTest.kt
@@ -1,13 +1,11 @@
 package xyz.adjutor.aniki
 
-import androidx.test.platform.app.InstrumentationRegistry
 import androidx.test.ext.junit.runners.AndroidJUnit4
-
+import androidx.test.platform.app.InstrumentationRegistry
+import org.junit.Assert.assertEquals
 import org.junit.Test
 import org.junit.runner.RunWith
 
-import org.junit.Assert.*
-
 /**
  * Instrumented test, which will execute on an Android device.
  *
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 105fdfd..09802b7 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
     package="xyz.adjutor.aniki">
 
-    <uses-permission android:name="android.permission.INTERNET"/>
+    <uses-permission android:name="android.permission.INTERNET" />
 
     <application
         android:allowBackup="true"
@@ -10,7 +11,16 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
-        android:theme="@style/Theme.Aniki">
+        android:theme="@style/Theme.Aniki"
+        tools:ignore="AllowBackup">
+        <activity
+            android:name=".topmanga.DetailTopMangaActivity"
+            android:label="Details"
+            android:theme="@style/Theme.Aniki" />
+        <activity
+            android:name=".topanime.DetailTopAnimeActivity"
+            android:label="Details"
+            android:theme="@style/Theme.Aniki" />
         <activity
             android:name=".MainActivity"
             android:label="@string/app_name"
@@ -21,6 +31,7 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
+
         <meta-data
             android:name="preloaded_fonts"
             android:resource="@array/preloaded_fonts" />
diff --git a/app/src/main/java/xyz/adjutor/aniki/HomePage.kt b/app/src/main/java/xyz/adjutor/aniki/HomePage.kt
index 59d7c62..734e917 100644
--- a/app/src/main/java/xyz/adjutor/aniki/HomePage.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/HomePage.kt
@@ -1,11 +1,11 @@
 package xyz.adjutor.aniki
 
 import android.os.Bundle
-import androidx.fragment.app.Fragment
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.Button
+import androidx.fragment.app.Fragment
 import androidx.navigation.fragment.findNavController
 
 class HomePage : Fragment() {
diff --git a/app/src/main/java/xyz/adjutor/aniki/MainActivity.kt b/app/src/main/java/xyz/adjutor/aniki/MainActivity.kt
index 50cd24f..a195f97 100644
--- a/app/src/main/java/xyz/adjutor/aniki/MainActivity.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/MainActivity.kt
@@ -1,11 +1,9 @@
 package xyz.adjutor.aniki
 
 import android.os.Bundle
-import com.google.android.material.floatingactionbutton.FloatingActionButton
-import com.google.android.material.snackbar.Snackbar
-import androidx.appcompat.app.AppCompatActivity
 import android.view.Menu
 import android.view.MenuItem
+import androidx.appcompat.app.AppCompatActivity
 
 class MainActivity : AppCompatActivity() {
 
diff --git a/app/src/main/java/xyz/adjutor/aniki/anime/AnimeApi.kt b/app/src/main/java/xyz/adjutor/aniki/anime/AnimeApi.kt
new file mode 100644
index 0000000..028097a
--- /dev/null
+++ b/app/src/main/java/xyz/adjutor/aniki/anime/AnimeApi.kt
@@ -0,0 +1,12 @@
+package xyz.adjutor.aniki.anime
+
+import retrofit2.Call
+import retrofit2.http.GET
+import retrofit2.http.Path
+
+interface AnimeApi {
+
+    @GET("v3/anime/{id}")
+    fun getAnimeData(@Path("id") id: String): Call<RestAnimeResponse>
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/xyz/adjutor/aniki/anime/RestAnimeResponse.kt b/app/src/main/java/xyz/adjutor/aniki/anime/RestAnimeResponse.kt
new file mode 100644
index 0000000..aa15dfd
--- /dev/null
+++ b/app/src/main/java/xyz/adjutor/aniki/anime/RestAnimeResponse.kt
@@ -0,0 +1,11 @@
+package xyz.adjutor.aniki.anime
+
+import com.google.gson.annotations.SerializedName
+
+class RestAnimeResponse{ //only kept the infos I didn't have and that were interesting to me.
+
+    @SerializedName("mal_id")
+    var mal_id: Int? = null
+    @SerializedName("synopsis")
+    var synopsis: String? = null
+}
diff --git a/app/src/main/java/xyz/adjutor/aniki/manga/MangaApi.kt b/app/src/main/java/xyz/adjutor/aniki/manga/MangaApi.kt
new file mode 100644
index 0000000..419d510
--- /dev/null
+++ b/app/src/main/java/xyz/adjutor/aniki/manga/MangaApi.kt
@@ -0,0 +1,12 @@
+package xyz.adjutor.aniki.manga
+
+import retrofit2.Call
+import retrofit2.http.GET
+import retrofit2.http.Path
+
+interface MangaApi {
+
+    @GET("v3/manga/{id}")
+    fun getMangaData(@Path("id") id: String): Call<RestMangaResponse>
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/xyz/adjutor/aniki/manga/RestMangaResponse.kt b/app/src/main/java/xyz/adjutor/aniki/manga/RestMangaResponse.kt
new file mode 100644
index 0000000..00b0dce
--- /dev/null
+++ b/app/src/main/java/xyz/adjutor/aniki/manga/RestMangaResponse.kt
@@ -0,0 +1,16 @@
+package xyz.adjutor.aniki.manga
+
+import com.google.gson.annotations.SerializedName
+
+class RestMangaResponse{ //only kept the infos I didn't have and that were interesting to me.
+
+    @SerializedName("mal_id")
+    var mal_id: Int? = null
+    @SerializedName("chapters")
+    var chapters: Int? = null
+    @SerializedName("synopsis")
+    var synopsis: String? = null
+    @SerializedName("background")
+    var background: String? = null //a bit of background story about the manga
+
+}
diff --git a/app/src/main/java/xyz/adjutor/aniki/topanime/DetailTopAnimeActivity.kt b/app/src/main/java/xyz/adjutor/aniki/topanime/DetailTopAnimeActivity.kt
new file mode 100644
index 0000000..3f1d008
--- /dev/null
+++ b/app/src/main/java/xyz/adjutor/aniki/topanime/DetailTopAnimeActivity.kt
@@ -0,0 +1,172 @@
+package xyz.adjutor.aniki.topanime
+
+import android.content.Context
+import android.content.SharedPreferences
+import android.os.Bundle
+import android.widget.ImageView
+import android.widget.TextView
+import android.widget.Toast
+import androidx.appcompat.app.AppCompatActivity
+import com.bumptech.glide.Glide
+import com.bumptech.glide.request.RequestOptions
+import com.google.gson.GsonBuilder
+import com.google.gson.reflect.TypeToken
+import retrofit2.Call
+import retrofit2.Callback
+import retrofit2.Response
+import retrofit2.Retrofit
+import retrofit2.converter.gson.GsonConverterFactory
+import xyz.adjutor.aniki.R
+import xyz.adjutor.aniki.anime.AnimeApi
+import xyz.adjutor.aniki.anime.RestAnimeResponse
+import java.lang.reflect.Type
+
+class DetailTopAnimeActivity : AppCompatActivity() {
+
+    private var baseUrl = "https://api.jikan.moe/"
+    var sharedPreferences: SharedPreferences? = null
+    private val gson = GsonBuilder()
+            .setLenient()
+            .create()
+
+    private val intentAnimeId = "theanimeid"
+    private val intentAnimeTitle = "theanimetitle"
+    private val intentAnimeRank = "theanimerank"
+    private val intentAnimeScore = "theanimescore"
+    private val intentAnimeImageUrl = "theanimeimageurl"
+
+    private val intentAnimeEpisodes = "theanimeepisodes"
+    private val intentAnimeStartDate = "theanimestartdate"
+    private val intentAnimeEndDate = "theanimeenddate"
+    private val intentAnimeUrl = "theanimeurl"
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_detail_top_anime)
+
+        sharedPreferences = this.getSharedPreferences("sp_anime", Context.MODE_PRIVATE)
+
+        val animeId = intent.getStringExtra(intentAnimeId)
+        val animeTitle = intent.getStringExtra(intentAnimeTitle)
+        val animeRank = intent.getStringExtra(intentAnimeRank)
+        val animeScore = intent.getStringExtra(intentAnimeScore)
+        val animeImageUrl = intent.getStringExtra(intentAnimeImageUrl)
+
+        val animeEpisodes = intent.getStringExtra(intentAnimeEpisodes)
+        val animeStartDate = intent.getStringExtra(intentAnimeStartDate)
+        val animeEndDate = intent.getStringExtra(intentAnimeEndDate)
+        val animeUrl = intent.getStringExtra(intentAnimeUrl)
+
+        val tvId: TextView = findViewById(R.id.tv_detail_id)
+        val tvTitle: TextView = findViewById(R.id.tv_detail_title)
+        val tvRank: TextView = findViewById(R.id.tv_detail_rank)
+        val tvScore: TextView = findViewById(R.id.tv_detail_score)
+        val ivImage: ImageView = findViewById(R.id.iv_detail_image)
+
+        val tvEpisodes: TextView = findViewById(R.id.tv_episodes)
+        val tvStartDate: TextView = findViewById(R.id.tv_start_date)
+        val tvEndDate: TextView = findViewById(R.id.tv_end_date)
+        val tvUrl: TextView = findViewById(R.id.tv_url)
+
+        tvId.text = animeId
+        tvTitle.text = animeTitle
+        tvRank.text = animeRank
+        tvScore.text = animeScore
+        Glide
+            .with(this)
+            .load(animeImageUrl)
+            .apply(RequestOptions().override(400))
+            .into(ivImage)
+
+        //using null as a string because it has been converted to a string before
+        tvEpisodes.text = if (animeEpisodes != "null"){
+            animeEpisodes
+        } else {
+            fieldIsNull()
+        }
+
+        tvStartDate.text = animeStartDate
+
+        tvEndDate.text = if (animeEndDate != "null"){
+            animeEndDate
+        } else {
+            fieldIsNull()
+        }
+
+        tvUrl.text = animeUrl
+
+        val anime: RestAnimeResponse? = getDataFromCache(animeId.toString())
+        if(anime != null ){
+            showDetail(anime)
+        } else {
+            //taking the API's fields I want and displaying them
+            makeApiCall(baseUrl, animeId.toString())
+        }
+
+    }
+
+    private fun getDataFromCache(animeId: String): RestAnimeResponse? {
+        val jsonAnime: String?= sharedPreferences?.getString(animeId, null)
+
+        return if(jsonAnime == null) {
+            null
+        } else {
+            val type: Type = object : TypeToken<RestAnimeResponse>() {}.type
+            gson.fromJson(jsonAnime, type)
+        }
+    }
+
+    private fun makeApiCall(BASE_URL: String, animeId: String) {
+
+        val retrofit = Retrofit.Builder()
+                .baseUrl(BASE_URL)
+                .addConverterFactory(GsonConverterFactory.create(gson))
+                .build()
+
+        val service = retrofit.create(AnimeApi::class.java)
+        val call = service.getAnimeData(animeId) //based on the id
+
+        call.enqueue(object : Callback<RestAnimeResponse> {
+            override fun onResponse(call: Call<RestAnimeResponse>, response: Response<RestAnimeResponse>) {
+                if(response.isSuccessful && response.body() != null){ //if the code returned is >= 200 and < 300 AND the the body ain't empty
+
+                    val anime = response.body() //getting the RestAnimeResponse fields
+                    saveList(anime)
+                    showDetail(anime!!)
+
+                } else {
+                    showError("API ERROR : is not successful")
+                }
+            }
+
+            override fun onFailure(call: Call<RestAnimeResponse>, t: Throwable) {
+                showError("API ERROR : onFailure")
+            }
+
+        })
+    }
+
+    private fun showDetail(anime: RestAnimeResponse) {
+        //elements from RestAnimeResponse
+        val tvSynopsis: TextView = findViewById(R.id.tv_synopsis)
+
+        tvSynopsis.text = anime.synopsis.toString()
+
+    }
+
+    fun showError(text: String) {
+        Toast.makeText(this, text, Toast.LENGTH_LONG).show()
+    }
+    private fun fieldIsNull(): String{
+        return "Unknown"
+    }
+
+    fun saveList(anime: RestAnimeResponse?) {
+        val jsonString: String = gson.toJson(anime)
+
+        sharedPreferences
+                ?.edit()
+                ?.putString(anime?.mal_id.toString(), jsonString)
+                ?.apply()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/xyz/adjutor/aniki/topanime/RestTopAnimeResponse.kt b/app/src/main/java/xyz/adjutor/aniki/topanime/RestTopAnimeResponse.kt
index c711631..0bd1354 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topanime/RestTopAnimeResponse.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topanime/RestTopAnimeResponse.kt
@@ -4,12 +4,6 @@ import com.google.gson.annotations.SerializedName
 
 class RestTopAnimeResponse {
 
-    @SerializedName("request_hash")
-    var request_hash: String? = null
-    @SerializedName("request_cached")
-    var request_cached: Boolean? = null
-    @SerializedName("request_cached_expiry")
-    var request_cached_expiry: Int? = null
     @SerializedName("top")
     var top: List<TopAnime>? = null
 
diff --git a/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnime.kt b/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnime.kt
index a428841..1764878 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnime.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnime.kt
@@ -2,7 +2,7 @@ package xyz.adjutor.aniki.topanime
 
 import com.google.gson.annotations.SerializedName
 
-//Content of the top field from the api of top manga
+//Content of the top field from the api of top anime
 class TopAnime{
 
     @SerializedName("mal_id")
@@ -13,16 +13,12 @@ class TopAnime{
     var title: String? = null
     @SerializedName("url")
     var url: String? = null
-    @SerializedName("type")
-    var type: String? = null
     @SerializedName("episodes")
-    var volumes: Int? = null
+    var episodes: Int? = null
     @SerializedName("start_date")
     var start_date: String? = null
     @SerializedName("end_date")
     var end_date: String? = null
-    @SerializedName("members")
-    var members: Int? = null
     @SerializedName("score")
     var score: Float? = null
     @SerializedName("image_url")
diff --git a/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimeAdapter.kt b/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimeAdapter.kt
index 68a2c7b..e5a2bb5 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimeAdapter.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimeAdapter.kt
@@ -1,23 +1,18 @@
-@file:Suppress("DEPRECATION")
-
 package xyz.adjutor.aniki.topanime
 
-import android.annotation.SuppressLint
-import android.graphics.Bitmap
-import android.graphics.BitmapFactory
-import android.os.AsyncTask
-import android.util.Log
+import android.content.Intent
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
 import android.widget.TextView
+import androidx.cardview.widget.CardView
 import androidx.recyclerview.widget.RecyclerView
+import com.bumptech.glide.Glide
+import com.bumptech.glide.request.RequestOptions
 import xyz.adjutor.aniki.R
-import xyz.adjutor.aniki.topanime.TopAnime
-import xyz.adjutor.aniki.topanime.TopAnimeAdapter
 
-class TopAnimeAdapter(val animeList: List<TopAnime>) :
+class TopAnimeAdapter(private val animeList: List<TopAnime>) :
         RecyclerView.Adapter<TopAnimeAdapter.AnimeViewHolder>() {
 
     // Describes an item view and its place within the RecyclerView
@@ -26,7 +21,7 @@ class TopAnimeAdapter(val animeList: List<TopAnime>) :
         val animeRank: TextView = itemView.findViewById(R.id.tv_rank)
         val animeScore: TextView = itemView.findViewById(R.id.tv_score)
         val animeImage: ImageView = itemView.findViewById(R.id.iv_image)
-
+        val cardview: CardView = itemView.findViewById(R.id.cv_cardView)
     }
 
     // Returns a new ViewHolder
@@ -48,27 +43,37 @@ class TopAnimeAdapter(val animeList: List<TopAnime>) :
         holder.animeTitle.text = currentAnime.title
         holder.animeRank.text = currentAnime.rank.toString()
         holder.animeScore.text = currentAnime.score.toString()
-        DownloadImageFromInternet(holder.animeImage).execute(currentAnime.image_url)
-    }
+        val image: String = currentAnime.image_url.toString()
+        Glide
+                .with(holder.itemView.context)
+                .load(image)
+                .apply(RequestOptions().override(400))
+                .into(holder.animeImage)
 
-    @SuppressLint("StaticFieldLeak")
-    private inner class DownloadImageFromInternet(var imageView: ImageView) : AsyncTask<String, Void, Bitmap?>() {
-        override fun doInBackground(vararg urls: String): Bitmap? {
-            val imageURL = urls[0]
-            var image: Bitmap? = null
-            try {
-                val `in` = java.net.URL(imageURL).openStream()
-                image = BitmapFactory.decodeStream(`in`)
-            }
-            catch (e: Exception) {
-                Log.e("Error Message", e.message.toString())
-                e.printStackTrace()
+        //when you click on a selected cardview, some datas are sent to the other activity
+        holder.cardview.setOnClickListener {
+            val currentAnimeId = "theanimeid"
+            val currentAnimeTitle = "theanimetitle"
+            val currentAnimeRank = "theanimerank"
+            val currentAnimeScore = "theanimescore"
+            val currentAnimeImageUrl = "theanimeimageurl"
+            val currentAnimeEpisodes = "theanimeepisodes"
+            val currentAnimeStartDate = "theanimestartdate"
+            val currentAnimeEndDate = "theanimeenddate"
+            val currentAnimeUrl = "theanimeurl"
+
+            val intent: Intent = Intent(holder.itemView.context, DetailTopAnimeActivity::class.java).apply {
+                putExtra(currentAnimeId, currentAnime.mal_id.toString())
+                putExtra(currentAnimeTitle, currentAnime.title)
+                putExtra(currentAnimeRank, currentAnime.rank.toString())
+                putExtra(currentAnimeScore, currentAnime.score.toString())
+                putExtra(currentAnimeImageUrl, currentAnime.image_url.toString())
+                putExtra(currentAnimeEpisodes, currentAnime.episodes.toString())
+                putExtra(currentAnimeStartDate, currentAnime.start_date)
+                putExtra(currentAnimeEndDate, currentAnime.end_date.toString())
+                putExtra(currentAnimeUrl, currentAnime.url.toString())
             }
-            return image
-        }
-        override fun onPostExecute(result: Bitmap?) {
-            imageView.setImageBitmap(result)
+            holder.itemView.context.startActivity(intent)
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimeApi.kt b/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimeApi.kt
index 6d8669c..bea4c63 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimeApi.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimeApi.kt
@@ -1,7 +1,7 @@
 package xyz.adjutor.aniki.topanime
 
-import retrofit2.http.GET
 import retrofit2.Call
+import retrofit2.http.GET
 
 interface TopAnimeApi {
 
diff --git a/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimePage.kt b/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimePage.kt
index b1fe2e2..f2d5e4c 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimePage.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topanime/TopAnimePage.kt
@@ -20,7 +20,6 @@ import retrofit2.Response
 import retrofit2.Retrofit
 import retrofit2.converter.gson.GsonConverterFactory
 import xyz.adjutor.aniki.R
-import xyz.adjutor.aniki.topmanga.TopManga
 import java.lang.reflect.Type
 
 class TopAnimePage : Fragment() {
@@ -38,7 +37,7 @@ class TopAnimePage : Fragment() {
         // Inflate the layout for this fragment
         val view = inflater.inflate(R.layout.top_anime_page, container, false)
 
-        sharedPreferences = view.context.getSharedPreferences("app_aniki", Context.MODE_PRIVATE)
+        sharedPreferences = view.context.getSharedPreferences("sp_anime", Context.MODE_PRIVATE)
 
         val animeList: List<TopAnime>? = getDataFromCache()
         if(animeList != null ){
@@ -95,9 +94,9 @@ class TopAnimePage : Fragment() {
             override fun onResponse(call: Call<RestTopAnimeResponse>, response: Response<RestTopAnimeResponse>) {
                 if(response.isSuccessful && response.body() != null){ //if the code returned is >= 200 and < 300 AND the the body ain't empty
 
-                    val animeList = response.body()!!.getResults() //getting the "top" field containing our list of TopAnimes
+                    val animeList: List<TopAnime> = response.body()!!.getResults() //getting the "top" field containing our list of TopAnimes
                     saveList(animeList)
-                    showList(view, animeList) // calling the method in charge of displaying on the recyclerview
+                    showList(view, animeList) //calling the method in charge of displaying on the recyclerview
 
                 } else {
                     showError() //a snackbar
@@ -121,7 +120,7 @@ class TopAnimePage : Fragment() {
     }
 
     private fun showError() {
-        Snackbar.make(requireView(), "HA? YOU THOUGHT IT WAS AN API !? BUT IT WAS I, ERROR !", Snackbar.LENGTH_LONG)
+        Snackbar.make(requireView(), "API ERROR", Snackbar.LENGTH_LONG)
                 .setAction("Action", null).show()
     }
 
diff --git a/app/src/main/java/xyz/adjutor/aniki/topmanga/DetailTopMangaActivity.kt b/app/src/main/java/xyz/adjutor/aniki/topmanga/DetailTopMangaActivity.kt
new file mode 100644
index 0000000..2b1fac4
--- /dev/null
+++ b/app/src/main/java/xyz/adjutor/aniki/topmanga/DetailTopMangaActivity.kt
@@ -0,0 +1,186 @@
+package xyz.adjutor.aniki.topmanga
+
+import android.content.Context
+import android.content.SharedPreferences
+import android.os.Bundle
+import android.widget.ImageView
+import android.widget.TextView
+import android.widget.Toast
+import androidx.appcompat.app.AppCompatActivity
+import com.bumptech.glide.Glide
+import com.bumptech.glide.request.RequestOptions
+import com.google.gson.GsonBuilder
+import com.google.gson.reflect.TypeToken
+import retrofit2.Call
+import retrofit2.Callback
+import retrofit2.Response
+import retrofit2.Retrofit
+import retrofit2.converter.gson.GsonConverterFactory
+import xyz.adjutor.aniki.R
+import xyz.adjutor.aniki.manga.MangaApi
+import xyz.adjutor.aniki.manga.RestMangaResponse
+import java.lang.reflect.Type
+
+class DetailTopMangaActivity : AppCompatActivity() {
+
+    private var baseUrl = "https://api.jikan.moe/"
+    var sharedPreferences: SharedPreferences? = null
+    private val gson = GsonBuilder()
+            .setLenient()
+            .create()
+
+    private val intentMangaId = "themangaid"
+    private val intentMangaTitle = "themangatitle"
+    private val intentMangaRank = "themangarank"
+    private val intentMangaScore = "themangascore"
+    private val intentMangaImageUrl = "themangaimageurl"
+
+    private val intentMangaVolumes = "themangavolumes"
+    private val intentMangaStartDate = "themangastartdate"
+    private val intentMangaEndDate = "themangaenddate"
+    private val intentMangaUrl = "themangaurl"
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_detail_top_manga)
+
+        sharedPreferences = this.getSharedPreferences("sp_manga", Context.MODE_PRIVATE)
+
+        val mangaId = intent.getStringExtra(intentMangaId)
+        val mangaTitle = intent.getStringExtra(intentMangaTitle)
+        val mangaRank = intent.getStringExtra(intentMangaRank)
+        val mangaScore = intent.getStringExtra(intentMangaScore)
+        val mangaImageUrl = intent.getStringExtra(intentMangaImageUrl)
+
+        val mangaVolumes = intent.getStringExtra(intentMangaVolumes)
+        val mangaStartDate = intent.getStringExtra(intentMangaStartDate)
+        val mangaEndDate = intent.getStringExtra(intentMangaEndDate)
+        val mangaUrl = intent.getStringExtra(intentMangaUrl)
+
+        val tvId: TextView = findViewById(R.id.tv_detail_id)
+        val tvTitle: TextView = findViewById(R.id.tv_detail_title)
+        val tvRank: TextView = findViewById(R.id.tv_detail_rank)
+        val tvScore: TextView = findViewById(R.id.tv_detail_score)
+        val ivImage: ImageView = findViewById(R.id.iv_detail_image)
+
+        val tvVolumes: TextView = findViewById(R.id.tv_volumes)
+        val tvStartDate: TextView = findViewById(R.id.tv_start_date)
+        val tvEndDate: TextView = findViewById(R.id.tv_end_date)
+        val tvUrl: TextView = findViewById(R.id.tv_url)
+
+        tvId.text = mangaId
+        tvTitle.text = mangaTitle
+        tvRank.text = mangaRank
+        tvScore.text = mangaScore
+        Glide
+            .with(this)
+            .load(mangaImageUrl)
+            .apply(RequestOptions().override(400))
+            .into(ivImage)
+
+        //using null as a string because it has been converted to a string before
+        tvVolumes.text = if (mangaVolumes != "null"){
+            mangaVolumes
+        } else {
+            fieldIsNull()
+        }
+
+        tvStartDate.text = mangaStartDate
+
+        tvEndDate.text = if (mangaEndDate != "null"){
+            mangaEndDate
+        } else {
+            fieldIsNull()
+        }
+
+        tvUrl.text = mangaUrl
+
+        val manga: RestMangaResponse? = getDataFromCache(mangaId.toString())
+        if(manga != null ){
+            showDetail(manga)
+        } else {
+            //taking the API's fields I want and displaying them
+            makeApiCall(baseUrl, mangaId.toString())
+        }
+
+    }
+
+    private fun getDataFromCache(mangaId: String): RestMangaResponse? {
+        val jsonManga: String?= sharedPreferences?.getString(mangaId, null)
+
+        return if(jsonManga == null) {
+            null
+        } else {
+            val type: Type = object : TypeToken<RestMangaResponse>() {}.type
+            gson.fromJson(jsonManga, type)
+        }
+    }
+
+    private fun makeApiCall(BASE_URL: String, mangaId: String) {
+
+        val retrofit = Retrofit.Builder()
+                .baseUrl(BASE_URL)
+                .addConverterFactory(GsonConverterFactory.create(gson))
+                .build()
+
+        val service = retrofit.create(MangaApi::class.java)
+        val call = service.getMangaData(mangaId) //based on the id
+
+        call.enqueue(object : Callback<RestMangaResponse> {
+            override fun onResponse(call: Call<RestMangaResponse>, response: Response<RestMangaResponse>) {
+                if(response.isSuccessful && response.body() != null){ //if the code returned is >= 200 and < 300 AND the the body ain't empty
+
+                    val manga = response.body() //getting the RestMangaResponse fields
+                    saveList(manga)
+                    showDetail(manga!!)
+
+                } else {
+                    showError("API ERROR : is not successful")
+                }
+            }
+
+            override fun onFailure(call: Call<RestMangaResponse>, t: Throwable) {
+                showError("API ERROR : onFailure")
+            }
+
+        })
+    }
+
+    private fun showDetail(manga: RestMangaResponse) {
+        //elements from RestMangaResponse
+        val tvChapters: TextView = findViewById(R.id.tv_chapters)
+        val tvSynopsis: TextView = findViewById(R.id.tv_synopsis)
+        val tvBackground: TextView = findViewById(R.id.tv_background)
+
+        tvChapters.text = if (manga.chapters != null){
+            manga.chapters.toString()
+        } else {
+            fieldIsNull()
+        }
+
+        tvSynopsis.text = manga.synopsis.toString()
+
+        tvBackground.text = if (manga.background != null){
+            manga.background.toString()
+        } else {
+            fieldIsNull()
+        }
+
+    }
+
+    fun showError(text: String) {
+        Toast.makeText(this, text, Toast.LENGTH_LONG).show()
+    }
+    private fun fieldIsNull(): String{
+        return "Unknown"
+    }
+
+    fun saveList(manga: RestMangaResponse?) {
+        val jsonString: String = gson.toJson(manga)
+
+        sharedPreferences
+                ?.edit()
+                ?.putString(manga?.mal_id.toString(), jsonString)
+                ?.apply()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/xyz/adjutor/aniki/topmanga/RestTopMangaResponse.kt b/app/src/main/java/xyz/adjutor/aniki/topmanga/RestTopMangaResponse.kt
index 897e8a2..dc7827a 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topmanga/RestTopMangaResponse.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topmanga/RestTopMangaResponse.kt
@@ -4,12 +4,6 @@ import com.google.gson.annotations.SerializedName
 
 class RestTopMangaResponse {
 
-    @SerializedName("request_hash")
-    var request_hash: String? = null
-    @SerializedName("request_cached")
-    var request_cached: Boolean? = null
-    @SerializedName("request_cached_expiry")
-    var request_cached_expiry: Int? = null
     @SerializedName("top")
     var top: List<TopManga>? = null
 
diff --git a/app/src/main/java/xyz/adjutor/aniki/topmanga/TopManga.kt b/app/src/main/java/xyz/adjutor/aniki/topmanga/TopManga.kt
index edf561d..05f4692 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topmanga/TopManga.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topmanga/TopManga.kt
@@ -13,16 +13,12 @@ class TopManga{
     var title: String? = null
     @SerializedName("url")
     var url: String? = null
-    @SerializedName("type")
-    var type: String? = null
     @SerializedName("volumes")
     var volumes: Int? = null
     @SerializedName("start_date")
     var start_date: String? = null
     @SerializedName("end_date")
     var end_date: String? = null
-    @SerializedName("members")
-    var members: Int? = null
     @SerializedName("score")
     var score: Float? = null
     @SerializedName("image_url")
diff --git a/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaAdapter.kt b/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaAdapter.kt
index 22872b2..0396b3d 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaAdapter.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaAdapter.kt
@@ -1,21 +1,18 @@
-@file:Suppress("DEPRECATION")
-
 package xyz.adjutor.aniki.topmanga
 
-import android.annotation.SuppressLint
-import android.graphics.Bitmap
-import android.graphics.BitmapFactory
-import android.os.AsyncTask
-import android.util.Log
+import android.content.Intent
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
 import android.widget.TextView
+import androidx.cardview.widget.CardView
 import androidx.recyclerview.widget.RecyclerView
+import com.bumptech.glide.Glide
+import com.bumptech.glide.request.RequestOptions
 import xyz.adjutor.aniki.R
 
-class TopMangaAdapter(val mangaList: List<TopManga>) :
+class TopMangaAdapter(private val mangaList: List<TopManga>) :
         RecyclerView.Adapter<TopMangaAdapter.MangaViewHolder>() {
 
     // Describes an item view and its place within the RecyclerView
@@ -24,7 +21,7 @@ class TopMangaAdapter(val mangaList: List<TopManga>) :
         val mangaRank: TextView = itemView.findViewById(R.id.tv_rank)
         val mangaScore: TextView = itemView.findViewById(R.id.tv_score)
         val mangaImage: ImageView = itemView.findViewById(R.id.iv_image)
-
+        val cardview: CardView = itemView.findViewById(R.id.cv_cardView)
     }
 
     // Returns a new ViewHolder
@@ -46,27 +43,37 @@ class TopMangaAdapter(val mangaList: List<TopManga>) :
         holder.mangaTitle.text = currentManga.title
         holder.mangaRank.text = currentManga.rank.toString()
         holder.mangaScore.text = currentManga.score.toString()
-        DownloadImageFromInternet(holder.mangaImage).execute(currentManga.image_url)
-    }
+        val image: String = currentManga.image_url.toString()
+        Glide
+                .with(holder.itemView.context)
+                .load(image)
+                .apply(RequestOptions().override(400))
+                .into(holder.mangaImage)
 
-    @SuppressLint("StaticFieldLeak")
-    private inner class DownloadImageFromInternet(var imageView: ImageView) : AsyncTask<String, Void, Bitmap?>() {
-        override fun doInBackground(vararg urls: String): Bitmap? {
-            val imageURL = urls[0]
-            var image: Bitmap? = null
-            try {
-                val `in` = java.net.URL(imageURL).openStream()
-                image = BitmapFactory.decodeStream(`in`)
-            }
-            catch (e: Exception) {
-                Log.e("Error Message", e.message.toString())
-                e.printStackTrace()
+        //when you click on a selected cardview, some datas are sent to the other activity
+        holder.cardview.setOnClickListener {
+            val currentMangaId = "themangaid"
+            val currentMangaTitle = "themangatitle"
+            val currentMangaRank = "themangarank"
+            val currentMangaScore = "themangascore"
+            val currentMangaImageUrl = "themangaimageurl"
+            val currentMangaVolumes = "themangavolumes"
+            val currentMangaStartDate = "themangastartdate"
+            val currentMangaEndDate = "themangaenddate"
+            val currentMangaUrl = "themangaurl"
+
+            val intent: Intent = Intent(holder.itemView.context, DetailTopMangaActivity::class.java).apply {
+                putExtra(currentMangaId, currentManga.mal_id.toString())
+                putExtra(currentMangaTitle, currentManga.title)
+                putExtra(currentMangaRank, currentManga.rank.toString())
+                putExtra(currentMangaScore, currentManga.score.toString())
+                putExtra(currentMangaImageUrl, currentManga.image_url.toString())
+                putExtra(currentMangaVolumes, currentManga.volumes.toString())
+                putExtra(currentMangaStartDate, currentManga.start_date)
+                putExtra(currentMangaEndDate, currentManga.end_date.toString())
+                putExtra(currentMangaUrl, currentManga.url.toString())
             }
-            return image
-        }
-        override fun onPostExecute(result: Bitmap?) {
-            imageView.setImageBitmap(result)
+            holder.itemView.context.startActivity(intent)
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaApi.kt b/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaApi.kt
index 69c4cdd..e8231b0 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaApi.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaApi.kt
@@ -1,7 +1,7 @@
 package xyz.adjutor.aniki.topmanga
 
-import retrofit2.http.GET
 import retrofit2.Call
+import retrofit2.http.GET
 
 interface TopMangaApi {
 
diff --git a/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaPage.kt b/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaPage.kt
index 697ba6f..f99cd9a 100644
--- a/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaPage.kt
+++ b/app/src/main/java/xyz/adjutor/aniki/topmanga/TopMangaPage.kt
@@ -37,7 +37,7 @@ class TopMangaPage : Fragment() {
         // Inflate the layout for this fragment
         val view = inflater.inflate(R.layout.top_manga_page, container, false)
 
-        sharedPreferences = view.context.getSharedPreferences("app_aniki", Context.MODE_PRIVATE)
+        sharedPreferences = view.context.getSharedPreferences("sp_manga", Context.MODE_PRIVATE)
 
         val mangaList: List<TopManga>? = getDataFromCache()
         if(mangaList != null ){
@@ -96,7 +96,7 @@ class TopMangaPage : Fragment() {
 
                     val mangaList: List<TopManga> = response.body()!!.getResults() //getting the "top" field containing our list of TopMangas
                     saveList(mangaList)
-                    showList(view, mangaList) // calling the method in charge of displaying on the recyclerview
+                    showList(view, mangaList) //calling the method in charge of displaying on the recyclerview
 
                 } else {
                     showError() //a snackbar
@@ -120,7 +120,7 @@ class TopMangaPage : Fragment() {
     }
 
     private fun showError() {
-        Snackbar.make(requireView(), "HA? YOU THOUGHT IT WAS AN API !? BUT IT WAS I, ERROR !", Snackbar.LENGTH_LONG)
+        Snackbar.make(requireView(), "API ERROR", Snackbar.LENGTH_LONG)
                 .setAction("Action", null).show()
     }
 
diff --git a/app/src/main/res/layout/activity_detail_top_anime.xml b/app/src/main/res/layout/activity_detail_top_anime.xml
new file mode 100644
index 0000000..a982bdd
--- /dev/null
+++ b/app/src/main/res/layout/activity_detail_top_anime.xml
@@ -0,0 +1,252 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/very_dark_purple">
+<androidx.constraintlayout.widget.ConstraintLayout 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"
+    tools:context=".topanime.DetailTopAnimeActivity">
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cv_header"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black"
+        app:layout_constraintTop_toTopOf="parent">
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:padding="10dp">
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:text="@string/text_mal_id"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintEnd_toStartOf="@id/tv_detail_id" />
+    <TextView
+        android:id="@+id/tv_detail_id"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/id"
+        android:textColor="@color/slightly_desaturated_magenta"
+        android:textIsSelectable="true"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/iv_detail_image"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <ImageView
+        android:id="@+id/iv_detail_image"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:contentDescription="@string/image"
+        android:src="@mipmap/ic_launcher"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/tv_detail_title"
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:layout_marginHorizontal="10sp"
+        android:fontFamily="@font/bangers"
+        android:text="@string/title"
+        android:textAlignment="center"
+        android:textColor="@color/strong_pink"
+        android:textIsSelectable="true"
+        android:textSize="30sp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/iv_detail_image"
+        app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_rank"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_detail_rank"
+                app:layout_constraintEnd_toStartOf="@id/tv_detail_rank"
+                app:layout_constraintTop_toTopOf="@id/tv_detail_rank" />
+    <TextView
+        android:id="@+id/tv_detail_rank"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/rank"
+        android:textColor="@color/slightly_desaturated_magenta"
+        android:textSize="20sp"
+        app:layout_constraintBottom_toTopOf="@id/tv_detail_title"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_score"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_detail_score"
+                app:layout_constraintEnd_toStartOf="@id/tv_detail_score"
+                app:layout_constraintTop_toTopOf="@id/tv_detail_score" />
+    <TextView
+        android:id="@+id/tv_detail_score"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/score"
+        android:textColor="@color/slightly_desaturated_magenta"
+        android:textSize="20sp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/tv_detail_title" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.cardview.widget.CardView>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cv_more_infos"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black"
+        app:layout_constraintTop_toBottomOf="@id/cv_header">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:padding="10dp">
+
+            <TextView
+                android:id="@+id/tv_text_episodes"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_episodes"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_episodes"
+                app:layout_constraintEnd_toStartOf="@id/tv_episodes"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/tv_episodes" />
+
+            <TextView
+                android:id="@+id/tv_episodes"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/episodes"
+                android:textColor="@color/slightly_desaturated_magenta"
+                app:layout_constraintStart_toEndOf="@id/tv_text_episodes"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintBottom_toBottomOf="parent"/>
+
+            <TextView
+                android:id="@+id/tv_text_start_date"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_start_date"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_start_date"
+                app:layout_constraintEnd_toStartOf="@id/tv_start_date"
+                app:layout_constraintTop_toTopOf="@id/tv_start_date" />
+
+            <TextView
+                android:id="@+id/tv_start_date"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/start_date"
+                android:textColor="@color/slightly_desaturated_magenta"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:id="@+id/tv_text_end_date"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_end_date"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_end_date"
+                app:layout_constraintEnd_toStartOf="@id/tv_end_date"
+                app:layout_constraintTop_toTopOf="@id/tv_end_date" />
+
+            <TextView
+                android:id="@+id/tv_end_date"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/end_date"
+                android:textColor="@color/slightly_desaturated_magenta"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/tv_start_date" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.cardview.widget.CardView>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cv_synopsis"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black"
+        app:layout_constraintTop_toBottomOf="@id/cv_more_infos">
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:padding="10dp">
+
+            <TextView
+                android:id="@+id/tv_text_synopsis"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_synopsis"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+    <TextView
+        android:id="@+id/tv_synopsis"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/synopsis"
+        android:textColor="@color/slightly_desaturated_magenta"
+        android:textIsSelectable="true"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/tv_text_synopsis"
+        />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.cardview.widget.CardView>
+
+    <androidx.cardview.widget.CardView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black"
+        app:layout_constraintTop_toBottomOf="@id/cv_synopsis">
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:padding="10dp">
+
+
+            <TextView
+                android:id="@+id/tv_text_url"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_url"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:id="@+id/tv_url"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/url"
+                android:textColor="@color/slightly_desaturated_magenta"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/tv_text_url"
+                android:autoLink="all"
+                />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.cardview.widget.CardView>
+
+</androidx.constraintlayout.widget.ConstraintLayout>
+</ScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/activity_detail_top_manga.xml b/app/src/main/res/layout/activity_detail_top_manga.xml
new file mode 100644
index 0000000..6d069c9
--- /dev/null
+++ b/app/src/main/res/layout/activity_detail_top_manga.xml
@@ -0,0 +1,306 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/very_dark_purple">
+<androidx.constraintlayout.widget.ConstraintLayout 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"
+    tools:context=".topmanga.DetailTopMangaActivity">
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cv_header"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black"
+        app:layout_constraintTop_toTopOf="parent">
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:padding="10dp">
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:text="@string/text_mal_id"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintEnd_toStartOf="@id/tv_detail_id" />
+    <TextView
+        android:id="@+id/tv_detail_id"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/id"
+        android:textColor="@color/slightly_desaturated_magenta"
+        android:textIsSelectable="true"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/iv_detail_image"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <ImageView
+        android:id="@+id/iv_detail_image"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:contentDescription="@string/image"
+        android:src="@mipmap/ic_launcher"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/tv_detail_title"
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:layout_marginHorizontal="10sp"
+        android:fontFamily="@font/bangers"
+        android:text="@string/title"
+        android:textAlignment="center"
+        android:textColor="@color/strong_pink"
+        android:textIsSelectable="true"
+        android:textSize="30sp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/iv_detail_image"
+        app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_rank"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_detail_rank"
+                app:layout_constraintEnd_toStartOf="@id/tv_detail_rank"
+                app:layout_constraintTop_toTopOf="@id/tv_detail_rank" />
+    <TextView
+        android:id="@+id/tv_detail_rank"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/rank"
+        android:textColor="@color/slightly_desaturated_magenta"
+        android:textSize="20sp"
+        app:layout_constraintBottom_toTopOf="@id/tv_detail_title"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_score"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_detail_score"
+                app:layout_constraintEnd_toStartOf="@id/tv_detail_score"
+                app:layout_constraintTop_toTopOf="@id/tv_detail_score" />
+    <TextView
+        android:id="@+id/tv_detail_score"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/score"
+        android:textColor="@color/slightly_desaturated_magenta"
+        android:textSize="20sp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/tv_detail_title" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.cardview.widget.CardView>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cv_more_infos"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black"
+        app:layout_constraintTop_toBottomOf="@id/cv_header">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:padding="10dp">
+
+            <TextView
+                android:id="@+id/tv_text_volumes"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_volumes"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_volumes"
+                app:layout_constraintEnd_toStartOf="@id/tv_volumes"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@id/tv_volumes" />
+
+            <TextView
+                android:id="@+id/tv_volumes"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/volumes"
+                android:textColor="@color/slightly_desaturated_magenta"
+                app:layout_constraintStart_toEndOf="@id/tv_text_volumes"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:id="@+id/tv_text_chapters"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_chapters"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_chapters"
+                app:layout_constraintEnd_toStartOf="@id/tv_chapters"
+                app:layout_constraintTop_toTopOf="@id/tv_chapters" />
+
+            <TextView
+                android:id="@+id/tv_chapters"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/chapters"
+                android:textColor="@color/slightly_desaturated_magenta"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintStart_toEndOf="@id/tv_text_chapters"
+                app:layout_constraintTop_toBottomOf="@id/tv_volumes" />
+
+            <TextView
+                android:id="@+id/tv_text_start_date"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_start_date"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_start_date"
+                app:layout_constraintEnd_toStartOf="@id/tv_start_date"
+                app:layout_constraintTop_toTopOf="@id/tv_start_date" />
+
+            <TextView
+                android:id="@+id/tv_start_date"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/start_date"
+                android:textColor="@color/slightly_desaturated_magenta"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:id="@+id/tv_text_end_date"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_end_date"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintBottom_toBottomOf="@id/tv_end_date"
+                app:layout_constraintEnd_toStartOf="@id/tv_end_date"
+                app:layout_constraintTop_toTopOf="@id/tv_end_date" />
+
+            <TextView
+                android:id="@+id/tv_end_date"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/end_date"
+                android:textColor="@color/slightly_desaturated_magenta"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/tv_start_date" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.cardview.widget.CardView>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cv_synopsis"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black"
+        app:layout_constraintTop_toBottomOf="@id/cv_more_infos">
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:padding="10dp">
+
+            <TextView
+                android:id="@+id/tv_text_synopsis"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_synopsis"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+    <TextView
+        android:id="@+id/tv_synopsis"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/synopsis"
+        android:textColor="@color/slightly_desaturated_magenta"
+        android:textIsSelectable="true"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/tv_text_synopsis"
+        />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.cardview.widget.CardView>
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cv_background"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black"
+        app:layout_constraintTop_toBottomOf="@id/cv_synopsis">
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:padding="10dp">
+
+
+        <TextView
+            android:id="@+id/tv_text_background"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/text_background"
+            android:textColor="@color/strong_pink"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/tv_background"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/background"
+            android:textColor="@color/slightly_desaturated_magenta"
+            android:textIsSelectable="true"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/tv_text_background" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.cardview.widget.CardView>
+
+    <androidx.cardview.widget.CardView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black"
+        app:layout_constraintTop_toBottomOf="@id/cv_background">
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:padding="10dp">
+
+
+            <TextView
+                android:id="@+id/tv_text_url"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/text_url"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:id="@+id/tv_url"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/url"
+                android:textColor="@color/slightly_desaturated_magenta"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/tv_text_url"
+                android:autoLink="all"
+                />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.cardview.widget.CardView>
+
+</androidx.constraintlayout.widget.ConstraintLayout>
+</ScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_layout.xml b/app/src/main/res/layout/item_layout.xml
index 8d7a792..f904109 100644
--- a/app/src/main/res/layout/item_layout.xml
+++ b/app/src/main/res/layout/item_layout.xml
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.cardview.widget.CardView
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/cv_cardView"
     android:layout_width="match_parent"
@@ -9,64 +8,60 @@
     android:clickable="true"
     android:focusable="true"
     android:foreground="?selectableItemBackground"
-    app:cardCornerRadius="10dp"
     app:cardBackgroundColor="@color/black"
-    >
+    app:cardCornerRadius="13dp">
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:padding="10dp"
-        >
+        android:padding="10dp">
 
         <ImageView
             android:id="@+id/iv_image"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            app:layout_constraintTop_toTopOf="parent"
+            android:contentDescription="@string/image"
+            android:src="@mipmap/ic_launcher"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            android:src="@mipmap/ic_launcher"
-            android:contentDescription="@string/rv_image" />
+            app:layout_constraintTop_toTopOf="parent" />
 
         <TextView
             android:id="@+id/tv_title"
             android:layout_width="0dp"
             android:layout_height="match_parent"
+            android:layout_marginHorizontal="10sp"
             android:fontFamily="@font/bangers"
-            android:text="@string/rv_title"
+            android:text="@string/title"
             android:textAlignment="center"
             android:textColor="@color/strong_pink"
             android:textSize="30sp"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@id/iv_image"
-            app:layout_constraintTop_toTopOf="parent"
-            android:layout_marginHorizontal="10sp"/>
+            app:layout_constraintTop_toTopOf="parent" />
 
         <TextView
             android:id="@+id/tv_rank"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:background="@color/very_dark_purple"
-            android:text="@string/rv_rank"
+            android:text="@string/rank"
             android:textColor="@color/slightly_desaturated_magenta"
             android:textSize="20sp"
+            app:layout_constraintBottom_toTopOf="@id/tv_title"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintBottom_toTopOf="@id/tv_title"/>
+            app:layout_constraintTop_toTopOf="parent" />
 
         <TextView
             android:id="@+id/tv_score"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:background="@color/very_dark_purple"
-            android:text="@string/rv_score"
+            android:text="@string/score"
             android:textColor="@color/slightly_desaturated_magenta"
             android:textSize="20sp"
-            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/tv_title"/>
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/tv_title" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.cardview.widget.CardView>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 0a85246..bb9520a 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -3,17 +3,37 @@
     <string name="action_settings">Settings</string>
 
     <string name="top_manga">Top Manga</string>
+    <string name="top_anime">Top Anime</string>
     <string name="home">Home</string>
+
     <string name="home_page_label">Home Page</string>
-    <string name="news_page_label">News Page</string>
-    <string name="article_page_label">Article Page</string>
     <string name="top_manga_page_label">Top Manga Page</string>
-    <string name="rv_title">Title</string>
-    <string name="rv_rank">0</string>
-    <string name="rv_image">image</string>
-    <string name="manga_image_content_description">Image of manga</string>
     <string name="top_anime_page_label">Top Anime Page</string>
-    <string name="top_anime">Top Anime</string>
-    <string name="rv_score">00.00</string>
+
+    <string name="id">000000</string>
+    <string name="title">Title</string>
+    <string name="rank">0</string>
+    <string name="image">image</string>
+    <string name="score">00.00</string>
+    <string name="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</string>
+
+    <string name="text_mal_id">"MAL ID "</string>
+    <string name="text_rank">"Rank "</string>
+    <string name="text_score">"Score "</string>
+    <string name="volumes">000</string>
+    <string name="text_volumes">"Volumes "</string>
+    <string name="text_chapters">"Chapters "</string>
+    <string name="chapters">0000</string>
+    <string name="text_start_date">"Start date "</string>
+    <string name="text_end_date">"End date "</string>
+    <string name="start_date">Jan 0000</string>
+    <string name="end_date">Dec 0000</string>
+    <string name="background">Cras molestie turpis at lorem rutrum vehicula. Fusce rutrum, enim sed laoreet semper, tortor quam semper dui, id bibendum lacus quam vitae neque.</string>
+    <string name="text_synopsis">Synopsis</string>
+    <string name="text_background">Background</string>
+    <string name="text_url">"More info at"</string>
+    <string name="url">https://myanimelist.net/media/id/name</string>
+    <string name="text_episodes">"Episodes "</string>
+    <string name="episodes">0000</string>
 
 </resources>
\ No newline at end of file
diff --git a/app/src/test/java/xyz/adjutor/aniki/ExampleUnitTest.kt b/app/src/test/java/xyz/adjutor/aniki/ExampleUnitTest.kt
index 7aacf1c..6e6f0ae 100644
--- a/app/src/test/java/xyz/adjutor/aniki/ExampleUnitTest.kt
+++ b/app/src/test/java/xyz/adjutor/aniki/ExampleUnitTest.kt
@@ -1,9 +1,8 @@
 package xyz.adjutor.aniki
 
+import org.junit.Assert.assertEquals
 import org.junit.Test
 
-import org.junit.Assert.*
-
 /**
  * Example local unit test, which will execute on the development machine (host).
  *