1) Place the problem
Suppose the customer has a list of images and requests that this list be displayed on the screen and the center item is scaled more than the next item in the following manner:
2) Solution
There are many ways to do the above, in this article I will guide you to use RecyclerView to solve this problem.
As we can see, the item in the middle will be the largest (the center) and away from the center the item will be smaller.
Thus the size of the items will be inversely proportional to the distance between that item and the recyclerView’s center
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <span class="token keyword">class</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span> <span class="token keyword">extends</span> <span class="token class-name">LinearLayoutManager</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span> <span class="token punctuation">(</span> <span class="token class-name">Context</span> context <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> context <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span> <span class="token punctuation">(</span> <span class="token class-name">Context</span> context <span class="token punctuation">,</span> <span class="token keyword">int</span> orientation <span class="token punctuation">,</span> <span class="token keyword">boolean</span> reverseLayout <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> context <span class="token punctuation">,</span> orientation <span class="token punctuation">,</span> reverseLayout <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span> <span class="token punctuation">(</span> <span class="token class-name">Context</span> context <span class="token punctuation">,</span> <span class="token class-name">AttributeSet</span> attrs <span class="token punctuation">,</span> <span class="token keyword">int</span> defStyleAttr <span class="token punctuation">,</span> <span class="token keyword">int</span> defStyleRes <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> context <span class="token punctuation">,</span> attrs <span class="token punctuation">,</span> defStyleAttr <span class="token punctuation">,</span> defStyleRes <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">checkLayoutParams</span> <span class="token punctuation">(</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">LayoutParams</span> lp <span class="token punctuation">)</span> <span class="token punctuation">{</span> lp <span class="token punctuation">.</span> width <span class="token operator">=</span> <span class="token function">getWidth</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">3</span> <span class="token punctuation">;</span> <span class="token comment">//Độ rộng của mỗi item sẽ bằng 1/3 độ rộng của RecyclerView</span> <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onLayoutCompleted</span> <span class="token punctuation">(</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">State</span> state <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onLayoutCompleted</span> <span class="token punctuation">(</span> state <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">scaleMiddle</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">int</span> <span class="token function">scrollHorizontallyBy</span> <span class="token punctuation">(</span> <span class="token keyword">int</span> dx <span class="token punctuation">,</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">Recycler</span> recycler <span class="token punctuation">,</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">State</span> state <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">scaleMiddle</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">scrollHorizontallyBy</span> <span class="token punctuation">(</span> dx <span class="token punctuation">,</span> recycler <span class="token punctuation">,</span> state <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">scaleMiddle</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">float</span> midpoint <span class="token operator">=</span> <span class="token function">getWidth</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2.f</span> <span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token function">getChildCount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token class-name">View</span> child <span class="token operator">=</span> <span class="token function">getChildAt</span> <span class="token punctuation">(</span> i <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">float</span> childMidpoint <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token function">getDecoratedRight</span> <span class="token punctuation">(</span> child <span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">getDecoratedLeft</span> <span class="token punctuation">(</span> child <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2.f</span> <span class="token punctuation">;</span> <span class="token comment">// tính hoành độ của item</span> <span class="token keyword">float</span> d <span class="token operator">=</span> <span class="token class-name">Math</span> <span class="token punctuation">.</span> <span class="token function">abs</span> <span class="token punctuation">(</span> midpoint <span class="token operator">-</span> childMidpoint <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// khoảng cách giữa item và điểm trung tâm của recyclerView</span> <span class="token keyword">float</span> scale <span class="token operator">=</span> <span class="token number">1f</span> <span class="token operator">-</span> <span class="token number">0.35f</span> <span class="token operator">*</span> d <span class="token operator">/</span> midpoint <span class="token punctuation">;</span> <span class="token comment">//tính độ scale của item (0/35: Số này càng lớn thì các item 2 bên sẽ càng nhỏ</span> child <span class="token punctuation">.</span> <span class="token function">setScaleX</span> <span class="token punctuation">(</span> scale <span class="token punctuation">)</span> <span class="token punctuation">;</span> child <span class="token punctuation">.</span> <span class="token function">setScaleY</span> <span class="token punctuation">(</span> scale <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token prolog"><?xml version="1.0" encoding="utf-8"?></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> layout</span> <span class="token attr-name"><span class="token namespace">xmlns:</span> android</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.android.com/apk/res/android <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> app</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.android.com/apk/res-auto <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> tools</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.android.com/tools <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> androidx.constraintlayout.widget.ConstraintLayout</span> <span class="token attr-name"><span class="token namespace">android:</span> layout_width</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> match_parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> layout_height</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> wrap_content <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> TextView</span> <span class="token attr-name"><span class="token namespace">android:</span> id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> @+id/text_name <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> layout_width</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> match_parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> layout_height</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0dp <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintBottom_toBottomOf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintDimensionRatio</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 1:1 <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintEnd_toEndOf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintHorizontal_bias</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0.0 <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintStart_toStartOf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintTop_toTopOf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> parent <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> androidx.constraintlayout.widget.ConstraintLayout</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> layout</span> <span class="token punctuation">></span></span> |
item_empty.xml (Since we need a space at the beginning and end to display the first and last scale item)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token prolog"><?xml version="1.0" encoding="utf-8"?></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> layout</span> <span class="token attr-name"><span class="token namespace">xmlns:</span> android</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.android.com/apk/res/android <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> app</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.android.com/apk/res-auto <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> tools</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.android.com/tools <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> androidx.constraintlayout.widget.ConstraintLayout</span> <span class="token attr-name"><span class="token namespace">android:</span> layout_width</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> match_parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> layout_height</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> wrap_content <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> TextView</span> <span class="token attr-name"><span class="token namespace">android:</span> id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> @+id/text_name <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> layout_width</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> match_parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> layout_height</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0dp <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintBottom_toBottomOf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintDimensionRatio</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 1:1 <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintEnd_toEndOf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintHorizontal_bias</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0.0 <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintStart_toStartOf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span> layout_constraintTop_toTopOf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> parent <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> androidx.constraintlayout.widget.ConstraintLayout</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> layout</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <span class="token keyword">package</span> <span class="token namespace">com <span class="token punctuation">.</span> example <span class="token punctuation">.</span> recyclerviewzoomcenter</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">android <span class="token punctuation">.</span> view</span> <span class="token punctuation">.</span> <span class="token class-name">LayoutInflater</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">android <span class="token punctuation">.</span> view</span> <span class="token punctuation">.</span> <span class="token class-name">View</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">android <span class="token punctuation">.</span> view</span> <span class="token punctuation">.</span> <span class="token class-name">ViewGroup</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">androidx <span class="token punctuation">.</span> annotation</span> <span class="token punctuation">.</span> <span class="token class-name">IntDef</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">androidx <span class="token punctuation">.</span> annotation</span> <span class="token punctuation">.</span> <span class="token class-name">NonNull</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">androidx <span class="token punctuation">.</span> recyclerview <span class="token punctuation">.</span> widget</span> <span class="token punctuation">.</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">com <span class="token punctuation">.</span> example <span class="token punctuation">.</span> recyclerviewzoomcenter <span class="token punctuation">.</span> databinding</span> <span class="token punctuation">.</span> <span class="token class-name">ItemEmptyBinding</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">com <span class="token punctuation">.</span> example <span class="token punctuation">.</span> recyclerviewzoomcenter <span class="token punctuation">.</span> databinding</span> <span class="token punctuation">.</span> <span class="token class-name">ItemRecyclerBinding</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">java <span class="token punctuation">.</span> util</span> <span class="token punctuation">.</span> <span class="token class-name">List</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token keyword">static</span> <span class="token namespace">com <span class="token punctuation">.</span> example <span class="token punctuation">.</span> recyclerviewzoomcenter</span> <span class="token punctuation">.</span> <span class="token class-name">ItemAdapter</span> <span class="token punctuation">.</span> <span class="token class-name">ViewType</span> <span class="token punctuation">.</span> EMPTY <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token keyword">static</span> <span class="token namespace">com <span class="token punctuation">.</span> example <span class="token punctuation">.</span> recyclerviewzoomcenter</span> <span class="token punctuation">.</span> <span class="token class-name">ItemAdapter</span> <span class="token punctuation">.</span> <span class="token class-name">ViewType</span> <span class="token punctuation">.</span> NORMAL <span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">ItemAdapter</span> <span class="token keyword">extends</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">Adapter</span> <span class="token generics"><span class="token punctuation"><</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">ViewHolder</span> <span class="token punctuation">></span></span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token class-name">List</span> <span class="token generics"><span class="token punctuation"><</span> <span class="token class-name">Data</span> <span class="token punctuation">></span></span> dataList <span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token class-name">ItemAdapter</span> <span class="token punctuation">(</span> <span class="token class-name">List</span> <span class="token generics"><span class="token punctuation"><</span> <span class="token class-name">Data</span> <span class="token punctuation">></span></span> dataList <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> dataList <span class="token operator">=</span> dataList <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">int</span> <span class="token function">getItemViewType</span> <span class="token punctuation">(</span> <span class="token keyword">int</span> position <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> position <span class="token operator">==</span> <span class="token number">0</span> <span class="token operator">||</span> position <span class="token operator">==</span> dataList <span class="token punctuation">.</span> <span class="token function">size</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> EMPTY <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> NORMAL <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@NonNull</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">ViewHolder</span> <span class="token function">onCreateViewHolder</span> <span class="token punctuation">(</span> <span class="token annotation punctuation">@NonNull</span> <span class="token class-name">ViewGroup</span> parent <span class="token punctuation">,</span> <span class="token keyword">int</span> viewType <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> viewType <span class="token operator">==</span> EMPTY <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token class-name">ItemEmptyBinding</span> binding <span class="token operator">=</span> <span class="token class-name">ItemEmptyBinding</span> <span class="token punctuation">.</span> <span class="token function">inflate</span> <span class="token punctuation">(</span> <span class="token class-name">LayoutInflater</span> <span class="token punctuation">.</span> <span class="token function">from</span> <span class="token punctuation">(</span> parent <span class="token punctuation">.</span> <span class="token function">getContext</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> parent <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">EmptyViewHolder</span> <span class="token punctuation">(</span> binding <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token class-name">ItemRecyclerBinding</span> binding <span class="token operator">=</span> <span class="token class-name">ItemRecyclerBinding</span> <span class="token punctuation">.</span> <span class="token function">inflate</span> <span class="token punctuation">(</span> <span class="token class-name">LayoutInflater</span> <span class="token punctuation">.</span> <span class="token function">from</span> <span class="token punctuation">(</span> parent <span class="token punctuation">.</span> <span class="token function">getContext</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> parent <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">ItemViewHolder</span> <span class="token punctuation">(</span> binding <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onBindViewHolder</span> <span class="token punctuation">(</span> <span class="token annotation punctuation">@NonNull</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">ViewHolder</span> holder <span class="token punctuation">,</span> <span class="token keyword">int</span> position <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> holder <span class="token keyword">instanceof</span> <span class="token class-name">ItemViewHolder</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token class-name">ItemViewHolder</span> <span class="token punctuation">)</span> holder <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">bindData</span> <span class="token punctuation">(</span> dataList <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> holder <span class="token punctuation">.</span> <span class="token function">getAdapterPosition</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">int</span> <span class="token function">getItemCount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> dataList <span class="token punctuation">.</span> <span class="token function">size</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">static</span> <span class="token keyword">class</span> <span class="token class-name">ItemViewHolder</span> <span class="token keyword">extends</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">ViewHolder</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token class-name">ItemRecyclerBinding</span> binding <span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token class-name">ItemViewHolder</span> <span class="token punctuation">(</span> <span class="token annotation punctuation">@NonNull</span> <span class="token class-name">ItemRecyclerBinding</span> binding <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> binding <span class="token punctuation">.</span> <span class="token function">getRoot</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> binding <span class="token operator">=</span> binding <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">private</span> <span class="token keyword">void</span> <span class="token function">bindData</span> <span class="token punctuation">(</span> <span class="token class-name">Data</span> data <span class="token punctuation">)</span> <span class="token punctuation">{</span> binding <span class="token punctuation">.</span> imageView <span class="token punctuation">.</span> <span class="token function">setImageResource</span> <span class="token punctuation">(</span> data <span class="token punctuation">.</span> <span class="token function">getImageId</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> binding <span class="token punctuation">.</span> textName <span class="token punctuation">.</span> <span class="token function">setText</span> <span class="token punctuation">(</span> data <span class="token punctuation">.</span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">static</span> <span class="token keyword">class</span> <span class="token class-name">EmptyViewHolder</span> <span class="token keyword">extends</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">.</span> <span class="token class-name">ViewHolder</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token class-name">EmptyViewHolder</span> <span class="token punctuation">(</span> <span class="token annotation punctuation">@NonNull</span> <span class="token class-name">ItemEmptyBinding</span> binding <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> binding <span class="token punctuation">.</span> <span class="token function">getRoot</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@IntDef</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> EMPTY <span class="token punctuation">,</span> NORMAL <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">public</span> <span class="token annotation punctuation">@interface</span> <span class="token class-name">ViewType</span> <span class="token punctuation">{</span> <span class="token keyword">int</span> EMPTY <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> <span class="token keyword">int</span> NORMAL <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <span class="token keyword">package</span> <span class="token namespace">com <span class="token punctuation">.</span> example <span class="token punctuation">.</span> recyclerviewzoomcenter</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">androidx <span class="token punctuation">.</span> appcompat <span class="token punctuation">.</span> app</span> <span class="token punctuation">.</span> <span class="token class-name">AppCompatActivity</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">androidx <span class="token punctuation">.</span> recyclerview <span class="token punctuation">.</span> widget</span> <span class="token punctuation">.</span> <span class="token class-name">LinearLayoutManager</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">androidx <span class="token punctuation">.</span> recyclerview <span class="token punctuation">.</span> widget</span> <span class="token punctuation">.</span> <span class="token class-name">LinearSnapHelper</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">androidx <span class="token punctuation">.</span> recyclerview <span class="token punctuation">.</span> widget</span> <span class="token punctuation">.</span> <span class="token class-name">RecyclerView</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">android <span class="token punctuation">.</span> os</span> <span class="token punctuation">.</span> <span class="token class-name">Bundle</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">android <span class="token punctuation">.</span> view</span> <span class="token punctuation">.</span> <span class="token class-name">View</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">java <span class="token punctuation">.</span> util</span> <span class="token punctuation">.</span> <span class="token class-name">ArrayList</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">java <span class="token punctuation">.</span> util</span> <span class="token punctuation">.</span> <span class="token class-name">List</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token namespace">java <span class="token punctuation">.</span> util</span> <span class="token punctuation">.</span> <span class="token class-name">Random</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token keyword">static</span> <span class="token namespace">com <span class="token punctuation">.</span> example <span class="token punctuation">.</span> recyclerviewzoomcenter</span> <span class="token punctuation">.</span> <span class="token class-name">ItemAdapter</span> <span class="token punctuation">.</span> <span class="token class-name">ViewType</span> <span class="token punctuation">.</span> EMPTY <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token keyword">static</span> <span class="token namespace">com <span class="token punctuation">.</span> example <span class="token punctuation">.</span> recyclerviewzoomcenter</span> <span class="token punctuation">.</span> <span class="token class-name">ItemAdapter</span> <span class="token punctuation">.</span> <span class="token class-name">ViewType</span> <span class="token punctuation">.</span> NORMAL <span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">MainActivity</span> <span class="token keyword">extends</span> <span class="token class-name">AppCompatActivity</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token class-name">String</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> names <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">"A"</span> <span class="token punctuation">,</span> <span class="token string">"B"</span> <span class="token punctuation">,</span> <span class="token string">"C"</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token class-name">List</span> <span class="token generics"><span class="token punctuation"><</span> <span class="token class-name">Data</span> <span class="token punctuation">></span></span> dataList <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ArrayList</span> <span class="token generics"><span class="token punctuation"><</span> <span class="token punctuation">></span></span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onCreate</span> <span class="token punctuation">(</span> <span class="token class-name">Bundle</span> savedInstanceState <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onCreate</span> <span class="token punctuation">(</span> savedInstanceState <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">setContentView</span> <span class="token punctuation">(</span> <span class="token class-name">R</span> <span class="token punctuation">.</span> layout <span class="token punctuation">.</span> activity_main <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token class-name">RecyclerView</span> recyclerView <span class="token operator">=</span> <span class="token function">findViewById</span> <span class="token punctuation">(</span> <span class="token class-name">R</span> <span class="token punctuation">.</span> id <span class="token punctuation">.</span> recyclerView <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">10</span> <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token class-name">Random</span> random <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Random</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token class-name">Data</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Data</span> <span class="token punctuation">(</span> names <span class="token punctuation">[</span> random <span class="token punctuation">.</span> <span class="token function">nextInt</span> <span class="token punctuation">(</span> <span class="token number">3</span> <span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token class-name">R</span> <span class="token punctuation">.</span> drawable <span class="token punctuation">.</span> image_1 <span class="token punctuation">,</span> NORMAL <span class="token punctuation">)</span> <span class="token punctuation">;</span> dataList <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> dataList <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Data</span> <span class="token punctuation">(</span> <span class="token string">""</span> <span class="token punctuation">,</span> <span class="token number">0</span> <span class="token punctuation">,</span> EMPTY <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> dataList <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Data</span> <span class="token punctuation">(</span> <span class="token string">""</span> <span class="token punctuation">,</span> <span class="token number">0</span> <span class="token punctuation">,</span> EMPTY <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token class-name">ItemAdapter</span> adapter <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ItemAdapter</span> <span class="token punctuation">(</span> dataList <span class="token punctuation">)</span> <span class="token punctuation">;</span> recyclerView <span class="token punctuation">.</span> <span class="token function">setLayoutManager</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">ZoomCenterLinearLayoutManager</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">,</span> <span class="token class-name">LinearLayoutManager</span> <span class="token punctuation">.</span> HORIZONTAL <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> recyclerView <span class="token punctuation">.</span> <span class="token function">setAdapter</span> <span class="token punctuation">(</span> adapter <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token class-name">LinearSnapHelper</span> snapHelper <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">LinearSnapHelper</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Sử dụng SnapHelper để RecyclerView luôn focus vào 1 item (snap position)</span> snapHelper <span class="token punctuation">.</span> <span class="token function">attachToRecyclerView</span> <span class="token punctuation">(</span> recyclerView <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
So we have already solved the above problem ^^