Viewpager added onto the products page for images

app/build.gradle

@@ -85,5 +85,7 @@ dependencies {
 
     implementation 'com.miguelcatalan:materialsearchview:1.4.0'
 
+    implementation 'me.relex:circleindicator:1.2.2@aar'
+
 
 }

app/src/main/java/me/gilo/wc/MainActivity.kt

@@ -14,6 +14,12 @@ class MainActivity : AppCompatActivity() {
         setContentView(R.layout.activity_main)
 
         startActivity(Intent(baseContext, HomeActivity::class.java))
+
+//        val intent = Intent(baseContext, ProductActivity::class.java)
+//        intent.putExtra("productId", 63)
+//
+//        startActivity(intent)
+
         finish()
 
     }

app/src/main/java/me/gilo/wc/adapter/ImagePagerAdapter.kt

@@ -0,0 +1,48 @@
+package me.gilo.wc.adapter
+
+
+import android.content.Context
+import android.support.v4.view.PagerAdapter
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import com.squareup.picasso.Picasso
+import me.gilo.wc.R
+import me.gilo.woodroid.models.Image
+
+
+class ImagePagerAdapter(val context: Context, private val images: List<Image>) : PagerAdapter() {
+
+
+    override fun instantiateItem(collection: ViewGroup, position: Int): View {
+        val inflater = LayoutInflater.from(context)
+
+        val layout = inflater.inflate(R.layout.single_product_image, collection, false)
+        val ivImage = layout.findViewById<ImageView>(R.id.ivImage)
+
+        val image = images[position]
+        if (image != null) {
+            Picasso
+                .with(context)
+                .load(image!!.src)
+                .into(ivImage)
+        }
+
+        collection.addView(layout)
+        return layout
+    }
+
+    override fun destroyItem(container: ViewGroup, position: Int, view: Any) {
+        container.removeView(view as View)
+    }
+
+    override fun getCount(): Int {
+        return this.images.size
+    }
+
+    override fun isViewFromObject(view: View, obj: Any): Boolean {
+        return view == obj
+    }
+
+}

app/src/main/java/me/gilo/wc/ui/product/ProductActivity.kt

@@ -3,10 +3,10 @@ package me.gilo.wc.ui.product
 import android.os.Bundle
 import android.text.Html
 import android.view.View
-import com.squareup.picasso.Picasso
 import kotlinx.android.synthetic.main.activity_product.*
 import kotlinx.android.synthetic.main.content_product.*
 import me.gilo.wc.R
+import me.gilo.wc.adapter.ImagePagerAdapter
 import me.gilo.wc.common.BaseActivity
 import me.gilo.wc.common.Status
 import me.gilo.wc.ui.state.ProgressDialogFragment
@@ -93,7 +93,10 @@ class ProductActivity : BaseActivity() {
         tvDescription.text = Html.fromHtml(product.description)
 
         if (product.images != null && product.images.isNotEmpty()){
-            Picasso.with(baseContext).load(product.images[0].src).into(ivImage)
+            vpImages.offscreenPageLimit = product.images.size
+            vpImages.adapter = ImagePagerAdapter(baseContext, product.images)
+
+            indicator.setViewPager(vpImages)
         }
 
         if (product.isOn_sale) {
@@ -101,7 +104,7 @@ class ProductActivity : BaseActivity() {
 
             tvOnSale.visibility = View.VISIBLE
         }else{
-            tvCallToAction.text = Html.fromHtml(product.price_html)
+            tvCallToAction.text = Html.fromHtml(product.price_html).trim()
             tvOnSale.visibility = View.GONE
         }
     }

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

@@ -1,104 +1,109 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<android.support.v4.widget.NestedScrollView
-			  xmlns:tools="http://schemas.android.com/tools"
+  xmlns:android="http://schemas.android.com/apk/res/android"
-			  xmlns:app="http://schemas.android.com/apk/res-auto"
+  xmlns:tools="http://schemas.android.com/tools"
-			  android:layout_width="match_parent"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
-			  android:layout_height="match_parent"
+  android:layout_width="match_parent"
-			  android:padding="16dp"
+  android:layout_height="match_parent"
-			  android:background="@color/bg"
+  android:background="@color/bg"
-			  android:elevation="2dp"
+  android:elevation="2dp"
-			  android:orientation="vertical"
+  android:orientation="vertical"
-			  tools:ignore="MissingPrefix"
+  tools:ignore="MissingPrefix"
-			  app:layout_behavior="@string/appbar_scrolling_view_behavior"
+  app:layout_behavior="@string/appbar_scrolling_view_behavior"
   >
 
-  <android.support.v4.widget.NestedScrollView
+  <LinearLayout
 	android:layout_width="match_parent"
-	android:layout_height="wrap_content"
+	android:layout_height="match_parent"
-	>
+	android:orientation="vertical">
+
+	<FrameLayout
+	  android:layout_width="match_parent"
+	  android:layout_height="320dp"
+	  android:layout_marginBottom="16dp"
+
+	  >
+
+	  <android.support.v4.view.ViewPager
+		android:id="@+id/vpImages"
+		android:layout_width="match_parent"
+		android:layout_height="match_parent"/>
+
+	  <me.relex.circleindicator.CircleIndicator
+		android:id="@+id/indicator"
+		android:layout_width="wrap_content"
+		android:layout_height="8dp"
+		android:layout_margin="16dp"
+		app:ci_height="4dp"
+		app:ci_width="4dp"
+		android:layout_gravity="bottom|center"
+		/>
+
+	  <TextView
+		android:id="@+id/tvOnSale"
+		android:layout_width="wrap_content"
+		android:layout_height="wrap_content"
+		android:layout_gravity="top|left"
+		android:background="@color/colorPrimary"
+		android:textColor="#ffffff"
+		android:text="SALE!"
+		fontPath="@string/font_medium"
+		android:padding="8dp"
+		/>
+
+	</FrameLayout>
+
 
 	<LinearLayout
 	  android:layout_width="match_parent"
-	  android:layout_height="match_parent"
+	  android:layout_margin="16dp"
-	  android:orientation="vertical">
+	  android:layout_height="wrap_content"
+	  android:background="@drawable/rect_white"
+	  android:elevation="2dp"
+	  android:orientation="vertical"
+	  tools:ignore="MissingPrefix">
 
-	  <LinearLayout
-		android:layout_width="match_parent"
 
+	  <TextView
+		android:id="@+id/tvTitle"
+		fontPath="@string/font_medium"
+		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
-		android:background="@drawable/rect_white"
+		android:layout_marginLeft="16dp"
-		android:elevation="2dp"
+		android:layout_marginTop="16dp"
-		android:orientation="vertical"
+		android:layout_marginRight="16dp"
-		tools:ignore="MissingPrefix">
+		android:gravity="left"
+		android:textColor="@color/text"
+		android:textSize="18sp"/>
 
-		<FrameLayout
+	  <TextView
-		  android:layout_width="match_parent"
+		android:id="@+id/tvDescription"
-		  android:layout_height="200dp">
+		fontPath="@string/font_regular"
+		android:layout_width="wrap_content"
+		android:layout_height="wrap_content"
+		android:layout_marginLeft="16dp"
+		android:layout_marginTop="8dp"
+		android:layout_marginRight="16dp"
+		android:gravity="left"
+		android:lineSpacingMultiplier="1.2"
+		android:textColor="@color/text_black_5"
+		android:textSize="16sp"/>
 
-		  <ImageView
+	  <TextView
-			android:id="@+id/ivImage"
+		android:id="@+id/tvCallToAction"
-			android:layout_width="match_parent"
+		fontPath="@string/font_regular"
-			android:layout_height="match_parent"
+		android:layout_width="wrap_content"
-			android:scaleType="centerCrop"
+		android:layout_height="wrap_content"
-			/>
+		android:layout_gravity="right"
-
+		android:layout_marginRight="0dp"
-		  <TextView
+		android:layout_marginBottom="0dp"
-			android:id="@+id/tvOnSale"
+		android:gravity="left"
-			android:layout_width="wrap_content"
+		android:padding="16dp"
-			android:layout_height="wrap_content"
+		android:textColor="#1c5c9a"
-			android:layout_gravity="top|left"
+		android:textSize="14sp"/>
-			android:background="@color/colorPrimary"
-			android:textColor="#ffffff"
-			android:text="SALE!"
-			fontPath="@string/font_medium"
-			android:padding="8dp"
-			/>
-
-		</FrameLayout>
-
-		<TextView
-		  android:id="@+id/tvTitle"
-		  fontPath="@string/font_medium"
-		  android:layout_width="wrap_content"
-		  android:layout_height="wrap_content"
-		  android:layout_marginLeft="16dp"
-		  android:layout_marginTop="16dp"
-		  android:layout_marginRight="16dp"
-		  android:gravity="left"
-		  android:textColor="@color/text"
-		  android:textSize="18sp"/>
-
-		<TextView
-		  android:id="@+id/tvDescription"
-		  fontPath="@string/font_regular"
-		  android:layout_width="wrap_content"
-		  android:layout_height="wrap_content"
-		  android:layout_marginLeft="16dp"
-		  android:layout_marginTop="8dp"
-		  android:layout_marginRight="16dp"
-		  android:gravity="left"
-		  android:maxLines="2"
-		  android:lineSpacingMultiplier="1.2"
-		  android:textColor="@color/text_black_5"
-		  android:textSize="14sp"/>
-
-		<TextView
-		  android:id="@+id/tvCallToAction"
-		  fontPath="@string/font_regular"
-		  android:layout_width="wrap_content"
-		  android:layout_height="wrap_content"
-		  android:layout_gravity="right"
-		  android:layout_marginRight="0dp"
-		  android:layout_marginBottom="0dp"
-		  android:gravity="left"
-		  android:padding="16dp"
-		  android:textColor="#1c5c9a"
-		  android:textSize="14sp"/>
 
 
-	  </LinearLayout>
 	</LinearLayout>
-  </android.support.v4.widget.NestedScrollView>
+  </LinearLayout>
-</LinearLayout>
+</android.support.v4.widget.NestedScrollView>
-
 

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

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ImageView
+  xmlns:android="http://schemas.android.com/apk/res/android"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:id="@+id/ivImage"
+  android:scaleType="centerCrop"/>

woodroid/build.gradle

@@ -52,4 +52,5 @@ dependencies {
 
     implementation 'com.squareup.okhttp3:okhttp-urlconnection:3.0.0-RC1'
 
+
 }