Making activity_detail_top_manga.xml beautiful!

2 files changed, 204 insertions, 25 deletions

diff --git a/app/src/main/res/layout/activity_detail_top_manga.xml b/app/src/main/res/layout/activity_detail_top_manga.xml
index 42018ef..b9a5dd7 100644
--- a/app/src/main/res/layout/activity_detail_top_manga.xml
+++ b/app/src/main/res/layout/activity_detail_top_manga.xml
@@ -6,7 +6,24 @@
     android:layout_height="match_parent"
     tools:context=".topmanga.DetailTopMangaActivity"
     android:background="@color/very_dark_purple">
+    <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"
+                app:layout_constraintEnd_toStartOf="@id/tv_detail_id"
+                android:text="@string/text_mal_id"
+                android:textColor="@color/strong_pink"/>
     <TextView
         android:id="@+id/tv_detail_id"
         android:layout_width="wrap_content"
@@ -14,7 +31,7 @@
         android:text="@string/id"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintStart_toEndOf="@id/iv_detail_image"
         android:textColor="@color/slightly_desaturated_magenta"/>
 
     <ImageView
@@ -25,52 +42,202 @@
         android:src="@mipmap/ic_launcher"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toStartOf="@id/tv_detail_title"
         app:layout_constraintTop_toTopOf="parent" />
 
     <TextView
         android:id="@+id/tv_detail_title"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:layout_marginHorizontal="10sp"
+        android:fontFamily="@font/bangers"
         android:text="@string/title"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintEnd_toStartOf="@id/tv_detail_rank"
+        android:textAlignment="center"
+        android:textColor="@color/strong_pink"
+        android:textSize="40sp"
         app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@id/iv_detail_image"
-        android:textColor="@color/slightly_desaturated_magenta"/>
+        app:layout_constraintTop_toTopOf="parent" />
 
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:textColor="@color/strong_pink"
+                app:layout_constraintEnd_toStartOf="@id/tv_detail_rank"
+                app:layout_constraintTop_toTopOf="@id/tv_detail_rank"
+                app:layout_constraintBottom_toBottomOf="@id/tv_detail_rank"
+                android:text="@string/text_rank"/>
     <TextView
         android:id="@+id/tv_detail_rank"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/rank"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintEnd_toStartOf="@id/tv_detail_score"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@id/tv_detail_title"
-        android:textColor="@color/slightly_desaturated_magenta"/>
+        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_constraintTop_toTopOf="@id/tv_detail_score"
+                app:layout_constraintEnd_toStartOf="@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"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
+        android:textColor="@color/slightly_desaturated_magenta"
+        android:textSize="20sp"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@id/tv_detail_rank"
-        android:textColor="@color/slightly_desaturated_magenta"/>
+        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"
+        app:layout_constraintTop_toBottomOf="@id/cv_header"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black">
+        <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_constraintTop_toTopOf="@id/tv_volumes"
+                app:layout_constraintStart_toStartOf="parent"/>
+            <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"
+        app:layout_constraintTop_toBottomOf="@id/cv_more_infos"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black">
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:padding="10dp">
 
     <TextView
-        android:id="@+id/tv_detail_synopsis"
+        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"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        android:textColor="@color/slightly_desaturated_magenta"/>
+        app:layout_constraintTop_toTopOf="parent"/>
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.cardview.widget.CardView>
+
+    <androidx.cardview.widget.CardView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toBottomOf="@id/cv_synopsis"
+        android:layout_margin="4sp"
+        app:cardBackgroundColor="@color/black">
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:padding="10dp">
 
+        <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"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"/>
 
+    </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.cardview.widget.CardView>
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 03d4a0e..100335d 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -3,19 +3,31 @@
     <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="top_anime_page_label">Top Anime Page</string>
+
+    <string name="id">000000</string>
     <string name="title">Title</string>
     <string name="rank">0</string>
     <string name="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="score">00.00</string>
-    <string name="id">000000</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>
+
 </resources>
\ No newline at end of file