From 7cf314e65e24e8bd3521b69e04bf916844d86db2 Mon Sep 17 00:00:00 2001
From: Nishank Sanjeev Samant <nishanksamant@gmail.com>
Date: Tue, 24 Apr 2018 13:56:23 +0530
Subject: [PATCH] Re-designed the Stories Section

---
 .../res/drawable/all_stories_gradient.xml     |   9 +
 .../drawable/featured_stories_gradient.xml    |  11 +
 app/src/main/res/layout/fragment_stories.xml  |  10 +-
 .../main/res/layout/list_item_all_stories.xml | 192 +++++++++++-------
 .../res/layout/list_item_featured_stories.xml | 121 +++++------
 app/src/main/res/values/colors.xml            |  16 ++
 app/src/main/res/values/strings.xml           |  13 +-
 7 files changed, 237 insertions(+), 135 deletions(-)
 create mode 100644 app/src/main/res/drawable/all_stories_gradient.xml
 create mode 100644 app/src/main/res/drawable/featured_stories_gradient.xml

diff --git a/app/src/main/res/drawable/all_stories_gradient.xml b/app/src/main/res/drawable/all_stories_gradient.xml
new file mode 100644
index 0000000..abbf661
--- /dev/null
+++ b/app/src/main/res/drawable/all_stories_gradient.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
+    <gradient
+        android:type="linear"
+        android:startColor="@color/all_story_start_color"
+        android:centerColor="@color/all_story_center_color"
+        android:endColor="@color/all_story_end_color"
+        android:angle="270"/>
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/featured_stories_gradient.xml b/app/src/main/res/drawable/featured_stories_gradient.xml
new file mode 100644
index 0000000..397690b
--- /dev/null
+++ b/app/src/main/res/drawable/featured_stories_gradient.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"
+    >
+    <gradient
+        android:type="linear"
+        android:startColor="@color/featured_story_start_color"
+        android:centerColor="@color/featured_story_center_color"
+        android:endColor="@color/featured_story_end_color"
+        android:angle="45"/>
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_stories.xml b/app/src/main/res/layout/fragment_stories.xml
index 82bc1b9..67cf452 100644
--- a/app/src/main/res/layout/fragment_stories.xml
+++ b/app/src/main/res/layout/fragment_stories.xml
@@ -16,16 +16,18 @@
             android:id="@+id/tv_featured_stories"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_marginTop="7dp"
+            android:paddingLeft="10dp"
             android:text="Featured"
             android:textColor="@color/colorPrimaryDark"
-            android:paddingLeft="10dp"
             android:textStyle="bold"
-            android:paddingTop="10dp"
-            android:visibility="visible"/>
+            android:visibility="visible" />
+
         <android.support.v7.widget.RecyclerView
             android:id="@+id/rv_featured_stories"
             android:layout_width="match_parent"
-            android:layout_height="170dp" />
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="5dp" />
         <TextView
             android:id="@+id/tv_other_stories"
             android:layout_width="wrap_content"
diff --git a/app/src/main/res/layout/list_item_all_stories.xml b/app/src/main/res/layout/list_item_all_stories.xml
index 21a0047..b3269d9 100644
--- a/app/src/main/res/layout/list_item_all_stories.xml
+++ b/app/src/main/res/layout/list_item_all_stories.xml
@@ -1,104 +1,150 @@
 <?xml version="1.0" encoding="utf-8"?>
-<android.support.v7.widget.CardView
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="300dp"
-    android:elevation="5dp"
-    android:layout_marginBottom="4dp"
+    android:layout_marginBottom="5dp"
     android:layout_marginLeft="7dp"
     android:layout_marginRight="7dp"
-    android:layout_marginTop="3dp">
-    <LinearLayout
-        xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_marginTop="3dp"
+    app:cardCornerRadius="5dp"
+    app:cardElevation="5dp">
+
+    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:orientation="vertical"
-        android:layout_marginBottom="3dp">
-        <LinearLayout
+        android:layout_marginBottom="3dp"
+        android:orientation="vertical">
+
+        <RelativeLayout
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:padding="10dp">
+            android:layout_height="wrap_content">
 
             <ImageView
-                android:id="@+id/iv_all_story_profile_pic"
-                android:layout_width="40dp"
-                android:layout_height="40dp"
-                android:src="@drawable/gis_logo"
-                android:layout_centerVertical="true"/>
+                android:id="@+id/iv_all_story_image"
+                android:layout_width="match_parent"
+                android:layout_height="200dp"
+                android:scaleType="centerCrop"
+                android:src="@drawable/ic_sample_story_bg_2" />
 
             <LinearLayout
-                android:layout_width="wrap_content"
-                android:layout_weight="1"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingLeft="10dp">
-                <TextView
-                    android:id="@+id/tv_all_story_profile_name"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="Akshit Jain"
-                    android:textColor="@color/black"
-                    android:maxLines="1"
-                    android:ellipsize="end"/>
-                <TextView
-                    android:id="@+id/iv_all_story_date"
-                    android:layout_width="wrap_content"
+                android:layout_width="match_parent"
+                android:layout_height="55dp"
+                android:background="@drawable/all_stories_gradient"
+                android:baselineAligned="false"
+                android:orientation="horizontal"
+                android:padding="5dp">
+
+                <ImageView
+                    android:id="@+id/iv_all_story_profile_pic"
+                    android:layout_width="40dp"
+                    android:layout_height="40dp"
+                    android:layout_margin="4dp"
+                    android:contentDescription="@string/story_profile_pic_desc"
+                    android:src="@drawable/gis_logo" />
+
+                <LinearLayout
+                    android:layout_width="0dp"
                     android:layout_height="wrap_content"
-                    android:text="19 April 2018"/>
+                    android:layout_marginStart="4dp"
+                    android:layout_marginTop="2dp"
+                    android:layout_weight="1"
+                    android:orientation="vertical">
+
+                    <TextView
+                        android:id="@+id/tv_all_story_profile_name"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:ellipsize="end"
+                        android:maxLines="1"
+                        android:text="@string/all_story_profile_name"
+                        android:textColor="@android:color/white"
+                        android:textSize="16sp"
+                        android:textStyle="bold" />
+
+                    <TextView
+                        android:id="@+id/iv_all_story_date"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/all_story_date"
+                        android:textColor="@android:color/white" />
+
+                </LinearLayout>
+
+                <ImageView
+                    android:id="@+id/iv_story_heart"
+                    android:layout_width="40dp"
+                    android:layout_height="35dp"
+                    android:layout_gravity="center_vertical|fill_vertical"
+                    android:contentDescription="@string/story_heart_image_desc"
+                    android:padding="4dp"
+                    android:src="@drawable/ic_heart_outline"
+                    android:tint="@android:color/white" />
 
             </LinearLayout>
-            <ImageView
-                android:layout_width="30dp"
-                android:layout_height="30dp"
-                android:layout_gravity="center_vertical"
-                android:src="@drawable/ic_heart_outline"
-                android:padding="4dp"
-                android:tint="@color/black"/>
+        </RelativeLayout>
 
-        </LinearLayout>
-        <ImageView
-            android:id="@+id/iv_all_story_image"
-            android:layout_width="match_parent"
-            android:layout_height="140dp"
-            android:src="@drawable/ic_sample_story_bg_2"
-            android:scaleType="centerCrop" />
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+            android:gravity="center"
             android:orientation="vertical"
-            android:padding="10dp"
-            android:gravity="center">
-            <TextView
-                android:id="@+id/tv_all_story_title"
+            android:padding="10dp">
+
+            <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:text="@string/featured_story_sample_description"
-                android:textColor="@color/black"
-                android:textStyle="bold"
-                android:textSize="16sp"
-                android:maxLines="2"
-                android:ellipsize="end"
-                android:visibility="visible"
-                android:layout_marginBottom="10dp"/>
+                android:layout_height="match_parent"
+                android:orientation="horizontal">
+
+                <TextView
+                    android:id="@+id/tv_all_story_title"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginBottom="10dp"
+                    android:layout_weight="1"
+                    android:ellipsize="end"
+                    android:maxLines="2"
+                    android:text="@string/all_story_title"
+                    android:textColor="@color/colorPrimaryDark"
+                    android:textSize="18sp"
+                    android:textStyle="bold"
+                    android:visibility="visible" />
+
+                <TextView
+                    android:id="@+id/tv_all_story_read_time"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:padding="2dp"
+                    android:text="@string/all_story_read_time"
+                    android:textSize="15sp" />
+
+            </LinearLayout>
+
+
             <TextView
-                android:id="@+id/tv_all_description"
+                android:id="@+id/tv_all_story_desc"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:text="READ"
-                android:textColor="@color/colorPrimaryDark"
-                android:textStyle="bold"
-                android:textSize="14sp"
-                android:maxLines="1"
                 android:ellipsize="end"
-                android:gravity="end"
-                android:visibility="visible"/>
-
-        </LinearLayout>
-
+                android:text="@string/all_story_description"
+                android:textColor="@color/darkGray"
+                android:textStyle="normal"
+                android:visibility="visible" />
 
+            <!--<TextView-->
+            <!--android:id="@+id/tv_all_description"-->
+            <!--android:layout_width="match_parent"-->
+            <!--android:layout_height="wrap_content"-->
+            <!--android:ellipsize="end"-->
+            <!--android:gravity="end"-->
+            <!--android:maxLines="1"-->
+            <!--android:text="READ"-->
+            <!--android:textColor="@color/colorPrimaryDark"-->
+            <!--android:textSize="14sp"-->
+            <!--android:textStyle="bold"-->
+            <!--android:visibility="visible" />-->
 
+        </LinearLayout>
 
 
     </LinearLayout>
diff --git a/app/src/main/res/layout/list_item_featured_stories.xml b/app/src/main/res/layout/list_item_featured_stories.xml
index d662924..95c4c39 100644
--- a/app/src/main/res/layout/list_item_featured_stories.xml
+++ b/app/src/main/res/layout/list_item_featured_stories.xml
@@ -1,88 +1,95 @@
 <?xml version="1.0" encoding="utf-8"?>
-<android.support.v7.widget.CardView
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="300dp"
-    android:layout_height="150dp"
+    android:layout_height="wrap_content"
+    android:layout_margin="10dp"
     app:cardCornerRadius="5dp"
-    android:elevation="5dp"
-    android:layout_margin="10dp">
+    app:cardElevation="10dp">
 
     <FrameLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
-        <ImageView
-            android:id="@+id/iv_featured_story_image"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:src="@drawable/bg_gradient"
-            android:scaleType="centerCrop"
-            />
+        android:layout_height="wrap_content"
+        android:background="@drawable/featured_stories_gradient">
+
         <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/transparentBlack"
             android:orientation="vertical">
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="horizontal"
-                android:padding="5dp">
 
+            <RelativeLayout
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:orientation="horizontal">
 
+                <TextView
+                    android:id="@+id/tv_featured_story_read_time"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_alignParentStart="true"
+                    android:layout_alignParentTop="true"
+                    android:layout_gravity="start"
+                    android:layout_margin="10dp"
+                    android:shadowColor="@android:color/white"
+                    android:text="@string/featured_story_read_time"
+                    android:textColor="@android:color/white"
+                    android:textStyle="bold" />
 
                 <ImageView
-                    android:id="@+id/iv_featured_story_profile_pic"
+                    android:id="@+id/iv_featured_story_heart"
                     android:layout_width="40dp"
                     android:layout_height="40dp"
-                    android:src="@drawable/gis_logo"
-                    android:layout_centerVertical="true"/>
+                    android:layout_alignParentEnd="true"
+                    android:layout_alignParentTop="true"
+                    android:layout_gravity="end"
+                    android:contentDescription="@string/story_heart_image_desc"
+                    android:padding="7dp"
+                    android:src="@drawable/ic_heart_outline"
+                    android:tint="@android:color/white" />
+            </RelativeLayout>
+
+            <ImageView
+                android:id="@+id/iv_featured_story_profile_pic"
+                android:layout_width="60dp"
+                android:layout_height="60dp"
+                android:layout_gravity="center_horizontal"
+                android:contentDescription="@string/story_profile_pic_desc"
+                android:src="@drawable/gis_logo" />
+
+            <TextView
+                android:id="@+id/tv_featured_story_profile_name"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_horizontal"
+                android:ellipsize="end"
+                android:maxLines="1"
+                android:padding="5dp"
+                android:text="@string/featured_story_profile_name"
+                android:textColor="@color/white"
+                android:textSize="16sp"
+                android:textStyle="bold" />
 
-                <TextView
-                    android:id="@+id/tv_featured_story_profile_name"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="Akshit"
-                    android:textColor="@color/white"
-                    android:maxLines="1"
-                    android:ellipsize="end"
-                    android:layout_gravity="center_vertical"
-                    android:paddingLeft="10dp"/>
-            </LinearLayout>
             <TextView
                 android:id="@+id/tv_featured_story_title"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
+                android:layout_height="0dp"
+                android:layout_marginBottom="5dp"
+                android:layout_weight="1"
+                android:ellipsize="end"
                 android:gravity="center"
+                android:maxLines="2"
+                android:padding="7dp"
                 android:text="@string/featured_story_sample_description"
                 android:textColor="@color/white"
+                android:textSize="14sp"
                 android:textStyle="bold"
-                android:textSize="15sp"
-                android:maxLines="2"
-                android:ellipsize="end"
-                android:visibility="visible"
-                android:padding="10dp"
-                android:layout_weight="1"/>
-            <TextView
-                android:id="@+id/iv_featured_story_date"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="READ"
-                android:textStyle="bold"
-                android:textColor="@color/white"
-                android:layout_gravity="end"
-                android:padding="8dp"/>
-        </LinearLayout>
+                android:visibility="visible" />
 
+        </LinearLayout>
 
 
     </FrameLayout>
 
 
-
-
-
-
-
-
-
 </android.support.v7.widget.CardView>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 2d420fe..c46623c 100755
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -7,5 +7,21 @@
     <color name="darkGray">#616161</color>
     <color name="black">#000000</color>
     <color name="white">#FFFFFF</color>
+    <color name="lightGray">#9ce7e7e7</color>
+    <color name="lightblack">#90000000</color>
+    <color name="transparentBlack">#2e000000</color>
+
+    <!-- Featured stories gradient -->
+    <color name="featured_story_start_color">#0297cf</color>
+    <color name="featured_story_center_color">#00678e</color>
+    <color name="featured_story_end_color">#002c3d</color>
+    <!-- Featured stories gradient -->
+
+    <!-- All stories gradient -->
+    <color name="all_story_start_color">#000000</color>
+    <color name="all_story_center_color">#e3191919</color>
+    <color name="all_story_end_color">#0f191919</color>
+    <!-- All stories gradient -->
+
 
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index eb3f5c8..9e5b4cb 100755
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -34,6 +34,17 @@
     <string name="forgot_your_password">Forgot your password?</string>
     <string name="reset_here">Reset here.</string>
 
-    <string name="featured_story_sample_description">"25 Android libraries you definitely want to try out in early 2017"</string>
+    <!-- Stories section strings -->
+    <string name="all_story_profile_name">Akshit Jain</string>
+    <string name="all_story_date">19 april 2018</string>
+    <string name="all_story_title">My Story Name</string>
+    <string name="all_story_description">This story tells us about my experience as a google scholar</string>
+    <string name="all_story_read_time">3 min</string>
 
+    <string name="featured_story_read_time">3 min</string>
+    <string name="featured_story_profile_name">Akshit Jain</string>
+    <string name="featured_story_sample_description">"25 Android libraries you definitely want to try out in early 2017"</string>
+    <string name="story_heart_image_desc">Heart Icon</string>
+    <string name="story_profile_pic_desc">Profile Pic</string>
+    <!-- Stories section strings -->
 </resources>