[메인][Common] 콘텐츠상세 리스티클 구현중

app/src/main/java/kr/co/zumo/app/lifeplus/view/custom/contents/CustomListicleImageView.java

@@ -0,0 +1,67 @@
+package kr.co.zumo.app.lifeplus.view.custom.contents;
+
+import android.content.Context;
+import android.support.constraint.ConstraintLayout;
+import android.support.v7.widget.LinearLayoutManager;
+import android.support.v7.widget.RecyclerView;
+import android.util.AttributeSet;
+import android.util.Log;
+import android.view.LayoutInflater;
+
+import java.util.List;
+
+import kr.co.zumo.app.R;
+import kr.co.zumo.app.lifeplus.bean.TextImageBean;
+import kr.co.zumo.app.lifeplus.view.IEventListener;
+
+/**
+ * CustomListicleImageView
+ * <pre>
+ * </pre>
+ *
+ * @author 하세미
+ * @version 1.0
+ * @history 하세미   [2018-11-27]   [최초 작성]
+ * @since 2018-11-27
+ */
+public class CustomListicleImageView extends ConstraintLayout {
+
+  private CustomListicleImageViewAdapter adpater;
+  private RecyclerView recyclerView;
+
+  public CustomListicleImageView(Context context) {
+    super(context);
+  }
+
+  public CustomListicleImageView(Context context, AttributeSet attrs) {
+    super(context, attrs);
+  }
+
+  public CustomListicleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
+    super(context, attrs, defStyleAttr);
+  }
+
+  public void init(Context context, List<TextImageBean> textImageBeanList, IEventListener listener) {
+    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
+    inflater.inflate(R.layout.custom_listicle_image_view, this);
+
+    // SnapHelper snapHelper = new Snapper(400);
+    recyclerView = findViewById(R.id.recycler_view_listicle_view);
+    recyclerView.setNestedScrollingEnabled(false);
+    recyclerView.setLayoutManager(new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false));
+
+    adpater= new CustomListicleImageViewAdapter(context, inflater, textImageBeanList, event -> {
+      Log.i("APP# MainBannerView | onEvent", "|" + event);
+      if (null != listener) {
+      }
+    });
+    recyclerView.setOnFlingListener(null);
+    recyclerView.setAdapter(adpater);
+
+
+  }
+
+  public void dispose(){
+
+  }
+}

app/src/main/java/kr/co/zumo/app/lifeplus/view/custom/contents/CustomListicleImageViewAdapter.java

@@ -0,0 +1,60 @@
+package kr.co.zumo.app.lifeplus.view.custom.contents;
+
+import android.content.Context;
+import android.support.annotation.NonNull;
+import android.support.v7.widget.RecyclerView;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+
+import java.util.List;
+
+import kr.co.zumo.app.R;
+import kr.co.zumo.app.lifeplus.bean.TextImageBean;
+import kr.co.zumo.app.lifeplus.view.IEventListener;
+
+/**
+ * CustomListicleImageViewAdpater
+ * <pre>
+ * </pre>
+ *
+ * @author 하세미
+ * @version 1.0
+ * @history 하세미   [2018-11-27]   [최초 작성]
+ * @since 2018-11-27
+ */
+public class CustomListicleImageViewAdapter extends RecyclerView.Adapter<CustomListicleImageViewHolder> {
+
+  private Context context;
+  private LayoutInflater inflater;
+  private List<TextImageBean> textImageBeanList;
+  private IEventListener listener;
+
+  public CustomListicleImageViewAdapter(Context context, LayoutInflater inflater, List<TextImageBean> textImageBeanList, IEventListener listener) {
+    this.context = context;
+    this.inflater = inflater;
+    this.textImageBeanList = textImageBeanList;
+    this.listener = listener;
+  }
+
+  @NonNull
+  @Override
+  public CustomListicleImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
+    View view = inflater.inflate(R.layout.custom_listicle_image_view_item, parent, false);
+    return new CustomListicleImageViewHolder(view);
+  }
+
+  @Override
+  public void onBindViewHolder(@NonNull CustomListicleImageViewHolder holder, int position) {
+    holder.bind(position, textImageBeanList.get(position), event -> {
+      if(null != listener) {
+        //listener.onEvent(event);
+      }
+    });
+  }
+
+  @Override
+  public int getItemCount() {
+    return textImageBeanList.size();
+  }
+}

app/src/main/java/kr/co/zumo/app/lifeplus/view/custom/contents/CustomListicleImageViewHolder.java

@@ -0,0 +1,53 @@
+package kr.co.zumo.app.lifeplus.view.custom.contents;
+
+import android.support.v7.widget.RecyclerView;
+import android.view.View;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import kr.co.zumo.app.R;
+import kr.co.zumo.app.lifeplus.bean.TextImageBean;
+import kr.co.zumo.app.lifeplus.view.IEventListener;
+
+/**
+ * CustomListicleImageViewHolder
+ * <pre>
+ * </pre>
+ *
+ * @author 하세미
+ * @version 1.0
+ * @history 하세미   [2018-11-27]   [최초 작성]
+ * @since 2018-11-27
+ */
+public class CustomListicleImageViewHolder extends RecyclerView.ViewHolder {
+
+  private ImageView imageViewBackground;
+  private TextView textViewTitleNumber;
+  private TextView textViewTitle;
+  private TextView textViewSubTitle;
+  private TextView textViewCurrentPage;
+  private TextView textViewTotalPage;
+
+
+  public CustomListicleImageViewHolder(View itemView) {
+    super(itemView);
+    imageViewBackground = itemView.findViewById(R.id.image_view_background);
+    textViewTitleNumber = itemView.findViewById(R.id.text_view_title_number);
+    textViewTitle = itemView.findViewById(R.id.text_view_title);
+    textViewSubTitle = itemView.findViewById(R.id.text_view_sub_title);
+    textViewCurrentPage = itemView.findViewById(R.id.text_view_current_page);
+    textViewTotalPage = itemView.findViewById(R.id.text_view_total_page);
+  }
+
+  public void bind(int index, TextImageBean bean, IEventListener listener) {
+    // TODO: 일단 dummy로 구현..
+
+    textViewTitleNumber.setText("05");
+    textViewTitle.setText("진주, 로스팅웨어");
+    textViewSubTitle.setText("대문샷을 부르는 감각적인 로스팅 팩토리");
+  }
+
+  public void dispose() {
+
+  }
+}

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

@@ -0,0 +1,6 @@
+<vector android:height="11dp" android:viewportHeight="43"
+    android:viewportWidth="43" android:width="11dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#00000000" android:fillType="evenOdd"
+        android:pathData="M21.757,36.514l14.85,-14.85 -14.85,-14.848"
+        android:strokeColor="#FFF" android:strokeWidth="3.478"/>
+</vector>

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

@@ -0,0 +1,6 @@
+<vector android:height="11dp" android:viewportHeight="43"
+    android:viewportWidth="42" android:width="11dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#00000000" android:fillType="evenOdd"
+        android:pathData="M18.757,36.514l-14.85,-14.85 14.85,-14.848"
+        android:strokeColor="#FFF" android:strokeWidth="3.478"/>
+</vector>

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

@@ -0,0 +1,6 @@
+<vector android:height="26dp" android:viewportHeight="102"
+    android:viewportWidth="102" android:width="26dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#00000000" android:fillType="evenOdd"
+        android:pathData="M53,91l39,-39 -39,-39"
+        android:strokeColor="#FFF" android:strokeWidth="6"/>
+</vector>

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

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+       android:shape="oval">
+  <stroke
+    android:width="2dp"
+    android:color="@color/CFFFFFF"/>
+</shape>

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

@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout
+  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"
+  android:layout_height="match_parent">
+
+  <ImageView
+    android:id="@+id/image_view_background"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:scaleType="centerCrop"
+    android:src="@color/CC4C4C4"
+    app:layout_constraintBottom_toBottomOf="parent"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent"
+    />
+
+  <View
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@drawable/rectangle_dim_c80cccccc"
+    app:layout_constraintBottom_toBottomOf="parent"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent"/>
+
+  <android.support.constraint.ConstraintLayout
+    android:id="@+id/layout_category"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginBottom="25dp"
+    app:layout_constraintBottom_toTopOf="@+id/text_view_sub_title"
+    app:layout_constraintStart_toStartOf="@+id/text_view_sub_title">
+
+    <TextView
+      android:id="@+id/text_view_category1"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:gravity="end"
+      android:lineSpacingExtra="4dp"
+      android:paddingEnd="5dp"
+      android:textColor="@color/CFFFFFF"
+      android:textSize="11sp"
+      app:layout_constraintEnd_toStartOf="@+id/view"
+      app:layout_constraintStart_toStartOf="parent"
+      tools:text="시리즈"/>
+
+    <view
+      android:id="@+id/view"
+      android:layout_width="1dp"
+      android:layout_height="9dp"
+      android:background="@color/CFFFFFF"
+      app:layout_constraintBottom_toBottomOf="@id/text_view_category1"
+      app:layout_constraintEnd_toStartOf="@+id/text_view_category2"
+      app:layout_constraintStart_toEndOf="@+id/text_view_category1"
+      app:layout_constraintTop_toTopOf="@id/text_view_category1"/>
+
+    <TextView
+      android:id="@+id/text_view_category2"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:lineSpacingExtra="4sp"
+      android:paddingStart="5dp"
+      android:textColor="@color/CFFFFFF"
+      android:textSize="11sp"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toEndOf="@+id/view"
+      tools:text="이색적인 카페 탐방기"/>
+
+  </android.support.constraint.ConstraintLayout>
+
+  <TextView
+    android:id="@+id/text_view_sub_title"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="30dp"
+    android:layout_marginBottom="6dp"
+    android:lineSpacingExtra="6dp"
+    android:textColor="@color/CFFFFFF"
+    android:textSize="15.5sp"
+    app:layout_constraintBottom_toTopOf="@+id/text_view_title"
+    app:layout_constraintStart_toStartOf="parent"
+    tools:text="입구부터 포토존"/>
+
+  <TextView
+    android:id="@+id/text_view_title"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="30dp"
+    android:layout_marginBottom="15dp"
+    android:lineSpacingExtra="11dp"
+    android:textColor="@color/CFFFFFF"
+    android:textSize="28sp"
+    app:layout_constraintBottom_toTopOf="@+id/text_view_tag1"
+    app:layout_constraintStart_toStartOf="parent"
+    tools:layout_editor_absoluteX="29dp"
+    tools:layout_editor_absoluteY="340dp"
+    tools:text="문을 여시오
+대문이 대문짝 5"/>
+
+  <TextView
+    android:id="@+id/text_view_tag1"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="30dp"
+    android:layout_marginBottom="49dp"
+    android:lineSpacingExtra="4dp"
+    android:textColor="@color/CFFFFFF"
+    android:textSize="12dp"
+    app:layout_constraintBottom_toBottomOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    tools:text="#카페"/>
+
+  <TextView
+    android:id="@+id/text_view_tag2"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="16dp"
+    android:layout_marginBottom="8dp"
+    android:lineSpacingExtra="2dp"
+    android:textColor="@color/CFFFFFF"
+    android:textSize="12sp"
+    app:layout_constraintStart_toEndOf="@+id/text_view_tag1"
+    app:layout_constraintTop_toTopOf="@+id/text_view_tag1"
+    tools:layout_editor_absoluteX="89dp"
+    tools:text="#인생샷"/>
+
+  <ImageView
+    android:id="@+id/image_view_contents_arrow"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginEnd="15dp"
+    android:padding="10dp"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintTop_toTopOf="@+id/text_view_title"
+    app:srcCompat="@drawable/icon_contents_arrow"
+    />
+</android.support.constraint.ConstraintLayout>

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

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout
+  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"
+  android:layout_height="match_parent">
+
+  <kr.co.zumo.app.lifeplus.view.custom.contents.CustomListicleImageView
+    android:id="@+id/custom_listicle_image_view"
+    android:layout_width="match_parent"
+    android:layout_height="320dp"
+    app:layout_constraintBottom_toTopOf="@+id/scroll_view"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent"/>
+
+  <ScrollView
+    android:id="@+id/scroll_view"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="25dp"
+    android:layout_marginTop="25dp"
+    android:layout_marginEnd="25dp"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toBottomOf="@+id/custom_listicle_image_view">
+
+    <android.support.constraint.ConstraintLayout
+      android:layout_width="match_parent"
+      android:layout_height="0dp">
+
+      <android.support.constraint.ConstraintLayout
+        android:id="@+id/layout_first"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent">
+
+        <TextView
+          android:id="@+id/text_view_number1"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:lineSpacingExtra="5.5sp"
+          android:textColor="@color/CD0D0D0"
+          android:textSize="14sp"
+          tools:text="1."
+          />
+
+        <TextView
+          android:id="@+id/text_view_detail1"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:letterSpacing="-0.05"
+          android:lineSpacingExtra="9sp"
+          android:paddingEnd="30dp"
+          android:textColor="@color/C666666"
+          android:textSize="13sp"
+          app:layout_constraintStart_toEndOf="@+id/text_view_number1"
+          tools:text="대표적인 아트마켓이자 세계 주요 컬렉터들과 미술 관계자들이 한자리에 모이는 미술축제"
+          />
+
+      </android.support.constraint.ConstraintLayout>
+
+      <android.support.constraint.ConstraintLayout
+        android:id="@+id/layout_second"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="14dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/layout_first">
+
+        <TextView
+          android:id="@+id/text_view_number2"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:lineSpacingExtra="6sp"
+          android:textColor="@color/CD0D0D0"
+          android:textSize="14sp"
+          tools:text="1."
+          />
+
+        <TextView
+          android:id="@+id/text_view_detail2"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:letterSpacing="-0.05"
+          android:lineSpacingExtra="9dp"
+          android:paddingEnd="30dp"
+          android:textColor="@color/C666666"
+          android:textSize="13sp"
+          app:layout_constraintStart_toEndOf="@+id/text_view_number2"
+          tools:text="대표적인 아트마켓이자 세계 주요 컬렉터들과 미술 관계자들이 한자리에 모이는 미술축제"
+          />
+
+      </android.support.constraint.ConstraintLayout>
+
+
+    </android.support.constraint.ConstraintLayout>
+
+  </ScrollView>
+
+
+</android.support.constraint.ConstraintLayout>

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

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout
+  xmlns:android="http://schemas.android.com/apk/res/android"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent">
+
+  <android.support.v7.widget.RecyclerView
+    android:id="@+id/recycler_view_listicle_view"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+  </android.support.v7.widget.RecyclerView>
+</android.support.constraint.ConstraintLayout>

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

@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout
+  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"
+  android:layout_height="match_parent">
+
+  <ImageView
+    android:id="@+id/image_view_background"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:src="@color/C666666"/>
+
+  <TextView
+    android:id="@+id/text_view_title_number"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="25dp"
+    android:layout_marginBottom="110dp"
+    android:gravity="center_horizontal"
+    android:lineSpacingExtra="7dp"
+    android:textColor="@color/CFFFFFF"
+    android:textSize="26dp"
+    app:layout_constraintBottom_toBottomOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    tools:text="05"/>
+
+  <ImageView
+    android:id="@+id/oval"
+    android:layout_width="7dp"
+    android:layout_height="7dp"
+    android:layout_marginStart="4dp"
+    android:layout_marginTop="13dp"
+    android:src="@drawable/oval_cffffff"
+    app:layout_constraintBottom_toBottomOf="@id/text_view_title_number"
+    app:layout_constraintStart_toEndOf="@+id/text_view_title_number"
+    app:layout_constraintTop_toTopOf="@id/text_view_title_number"/>
+
+  <TextView
+    android:id="@+id/text_view_title"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="17dp"
+    android:lineSpacingExtra="7dp"
+    android:textColor="@color/CFFFFFF"
+    android:textSize="18dp"
+    app:layout_constraintStart_toStartOf="@+id/text_view_title_number"
+    app:layout_constraintTop_toBottomOf="@+id/text_view_title_number"
+    tools:text="진주, 로스팅웨어"/>
+
+  <TextView
+    android:id="@+id/text_view_sub_title"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="4dp"
+    android:lineSpacingExtra="4dp"
+    android:textColor="@color/CFFFFFF"
+    android:textSize="12sp"
+    app:layout_constraintStart_toStartOf="@+id/text_view_title"
+    app:layout_constraintTop_toBottomOf="@+id/text_view_title"
+    tools:text="대문샷을 부르는 감각적인 로스팅 팩토리"/>
+
+  <android.support.constraint.ConstraintLayout
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="25dp"
+    android:layout_marginTop="19dp"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toBottomOf="@+id/text_view_sub_title">
+
+    <ImageView
+      android:id="@+id/image_view_pre_page"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:paddingEnd="7dp"
+      app:layout_constraintBottom_toBottomOf="@id/text_view_current_page"
+      app:layout_constraintEnd_toStartOf="@+id/text_view_current_page"
+      app:layout_constraintHorizontal_bias="0.5"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="@+id/text_view_current_page"
+      app:srcCompat="@drawable/ic_page_prev"/>
+
+    <TextView
+      android:id="@+id/text_view_current_page"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:lineSpacingExtra="4dp"
+      android:textColor="@color/CFFFFFF"
+      android:textSize="12dp"
+      app:layout_constraintEnd_toStartOf="@+id/slash"
+      app:layout_constraintHorizontal_bias="0.5"
+      app:layout_constraintStart_toEndOf="@+id/image_view_pre_page"
+      tools:text="1"/>
+
+    <TextView
+      android:id="@+id/slash"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:lineSpacingExtra="4dp"
+      android:textColor="@color/CFFFFFF"
+      android:textSize="12dp"
+      app:layout_constraintEnd_toStartOf="@+id/text_view_total_page"
+      app:layout_constraintHorizontal_bias="0.5"
+      app:layout_constraintStart_toEndOf="@+id/text_view_current_page"
+      tools:text=" / "/>
+
+    <TextView
+      android:id="@+id/text_view_total_page"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:lineSpacingExtra="4dp"
+      android:textColor="@color/CFFFFFF"
+      android:textSize="12dp"
+      app:layout_constraintEnd_toStartOf="@+id/image_view_next_page"
+      app:layout_constraintHorizontal_bias="0.5"
+      app:layout_constraintStart_toEndOf="@+id/slash"
+      tools:text="1"/>
+
+    <ImageView
+      android:id="@+id/image_view_next_page"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:paddingStart="7dp"
+      app:layout_constraintBottom_toBottomOf="@+id/text_view_total_page"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toEndOf="@+id/text_view_total_page"
+      app:layout_constraintTop_toTopOf="@+id/text_view_total_page"
+      app:srcCompat="@drawable/ic_page_next"/>
+  </android.support.constraint.ConstraintLayout>
+</android.support.constraint.ConstraintLayout>

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

@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
   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"
   android:layout_height="match_parent">