Skip to content

Commit 7008ce0

Browse files
atm1504mariobehling
atm1504
authored and
mariobehling
committed
Shimmer effect in groupwise skills (#2223)
1 parent feb2054 commit 7008ce0

File tree

4 files changed

+133
-11
lines changed

4 files changed

+133
-11
lines changed

‎app/src/main/java/org/fossasia/susi/ai/skills/groupwiseskills/GroupWiseSkillsFragment.kt‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import android.view.KeyEvent
1111
import android.view.LayoutInflater
1212
import android.view.View
1313
import android.view.ViewGroup
14+
import com.facebook.shimmer.ShimmerFrameLayout
1415
import android.widget.Toast
1516
import kotlinx.android.synthetic.main.fragment_group_wise_skill_listing.*
1617
import org.fossasia.susi.ai.R
@@ -36,6 +37,7 @@ class GroupWiseSkillsFragment : Fragment(), IGroupWiseSkillsView, SwipeRefreshLa
3637
private var skills = GroupWiseSkills("", ArrayList())
3738
private lateinit var skillsAdapter: SkillsListAdapter
3839
private lateinit var skillCallback: SkillFragmentCallback
40+
private lateinit var shimmerContainer: ShimmerFrameLayout
3941
private var isSearching: Boolean = false
4042

4143
companion object {
@@ -54,7 +56,11 @@ class GroupWiseSkillsFragment : Fragment(), IGroupWiseSkillsView, SwipeRefreshLa
5456
if (argument != null) {
5557
this.skills.group = argument.getString("group")
5658
}
57-
return inflater.inflate(R.layout.fragment_group_wise_skill_listing, container, false)
59+
val rootView: View = inflater.inflate(R.layout.fragment_group_wise_skill_listing, container, false)
60+
shimmerContainer = rootView.findViewById(R.id.groupWiseSkillsShimmerContainer)
61+
shimmerContainer.visibility = View.VISIBLE
62+
shimmerContainer.startShimmer()
63+
return rootView
5864
}
5965

6066
@NonNull
@@ -86,7 +92,13 @@ class GroupWiseSkillsFragment : Fragment(), IGroupWiseSkillsView, SwipeRefreshLa
8692
}
8793

8894
override fun visibilityProgressBar(boolean: Boolean) {
89-
progressSkillWait.visibility = if (boolean) View.VISIBLE else View.GONE
95+
if (boolean) {
96+
shimmerContainer.visibility = View.VISIBLE
97+
shimmerContainer.startShimmer()
98+
} else {
99+
shimmerContainer.stopShimmer()
100+
shimmerContainer.visibility = View.GONE
101+
}
90102
}
91103

92104
fun handleSearchAction() {

‎app/src/main/java/org/fossasia/susi/ai/skills/skillSearch/SearchSkillFragment.kt‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,20 @@ class SearchSkillFragment : Fragment(), IGroupWiseSkillsView, SwipeRefreshLayout
7979
groupWiseSkills.adapter = skillsAdapter
8080
groupWiseSkills.onFlingListener = null
8181
skillAdapterSnapHelper.attachToRecyclerView(groupWiseSkills)
82-
progressSkillWait.visibility = View.GONE
82+
if (groupWiseSkillsShimmerContainer.isShimmerStarted) {
83+
groupWiseSkillsShimmerContainer.stopShimmer()
84+
groupWiseSkillsShimmerContainer.visibility = View.GONE
85+
}
8386
}
8487

8588
override fun visibilityProgressBar(boolean: Boolean) {
86-
progressSkillWait.visibility = if (boolean) View.VISIBLE else View.GONE
89+
if (boolean) {
90+
groupWiseSkillsShimmerContainer.visibility = View.VISIBLE
91+
groupWiseSkillsShimmerContainer.startShimmer()
92+
} else {
93+
groupWiseSkillsShimmerContainer.visibility = View.GONE
94+
groupWiseSkillsShimmerContainer.stopShimmer()
95+
}
8796
}
8897

8998
override fun showEmptySkillsListMessage() {
@@ -108,7 +117,10 @@ class SearchSkillFragment : Fragment(), IGroupWiseSkillsView, SwipeRefreshLayout
108117
errorSkillFetch.visibility = View.GONE
109118
}
110119
groupWiseSkills.visibility = View.VISIBLE
111-
progressSkillWait.visibility = View.GONE
120+
if (groupWiseSkillsShimmerContainer.isShimmerStarted) {
121+
groupWiseSkillsShimmerContainer.visibility = View.GONE
122+
groupWiseSkillsShimmerContainer.stopShimmer()
123+
}
112124

113125
groupWiseSkills.addItemDecoration(SimpleDividerItemDecoration(requireContext(), this.skills.skillsList.size))
114126
}

‎app/src/main/res/layout/fragment_group_wise_skill_listing.xml‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,35 @@
1818
android:layout_height="match_parent"
1919
android:scrollbars="vertical" />
2020

21+
<com.facebook.shimmer.ShimmerFrameLayout
22+
android:id="@+id/groupWiseSkillsShimmerContainer"
23+
android:layout_width="wrap_content"
24+
android:layout_height="wrap_content"
25+
android:orientation="vertical">
26+
27+
<LinearLayout
28+
android:layout_width="match_parent"
29+
android:layout_height="wrap_content"
30+
android:orientation="vertical">
31+
<!-- & rows of shimmer added-->
32+
<include layout="@layout/groupwise_skill_listing_placeholder" />
33+
34+
<include layout="@layout/groupwise_skill_listing_placeholder" />
35+
36+
<include layout="@layout/groupwise_skill_listing_placeholder" />
37+
38+
<include layout="@layout/groupwise_skill_listing_placeholder" />
39+
40+
<include layout="@layout/groupwise_skill_listing_placeholder" />
41+
42+
<include layout="@layout/groupwise_skill_listing_placeholder" />
43+
44+
<include layout="@layout/groupwise_skill_listing_placeholder" />
45+
46+
</LinearLayout>
47+
48+
</com.facebook.shimmer.ShimmerFrameLayout>
49+
2150
<android.support.design.widget.FloatingActionButton
2251
android:id="@+id/searchSkillGroupWise"
2352
android:layout_width="wrap_content"
@@ -42,12 +71,6 @@
4271
android:visibility="gone"
4372
android:id="@+id/skillWiseSearchEdit" />
4473

45-
<ProgressBar
46-
android:id="@+id/progressSkillWait"
47-
android:layout_width="@dimen/progress_bar_size"
48-
android:layout_height="@dimen/progress_bar_size"
49-
android:layout_gravity="center" />
50-
5174
<TextView
5275
android:id="@+id/errorSkillFetch"
5376
android:layout_width="wrap_content"

‎app/src/main/res/layout/groupwise_skill_listing_placeholder.xml‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:layout_width="match_parent"
4+
android:layout_height="wrap_content"
5+
xmlns:app="http://schemas.android.com/apk/res-auto">
6+
<android.support.v7.widget.CardView
7+
android:layout_width="match_parent"
8+
android:foreground="?attr/selectableItemBackground"
9+
app:cardBackgroundColor="@color/susi_message_bg"
10+
android:layout_height="wrap_content">
11+
12+
<LinearLayout
13+
android:layout_width="match_parent"
14+
android:layout_height="wrap_content"
15+
android:background="@color/md_white_1000"
16+
android:orientation="horizontal">
17+
<View
18+
android:layout_width="@dimen/skill_image_size"
19+
android:layout_height="@dimen/skill_image_size"
20+
android:layout_gravity="center"
21+
android:layout_marginLeft="@dimen/margin_medium"
22+
android:padding="@dimen/padding_moderate"
23+
android:adjustViewBounds="true"
24+
android:background="@color/shimmer_background"
25+
/>
26+
27+
<LinearLayout
28+
android:layout_width="match_parent"
29+
android:layout_height="wrap_content"
30+
android:background="@color/md_white_1000"
31+
android:orientation="vertical"
32+
android:paddingBottom="@dimen/cmv_padding"
33+
android:paddingEnd="@dimen/cmv_padding"
34+
android:paddingRight="@dimen/cmv_padding"
35+
android:paddingTop="@dimen/cmv_padding">
36+
37+
<View
38+
android:layout_width="match_parent"
39+
android:paddingLeft="@dimen/cmv_padding"
40+
android:layout_marginLeft="@dimen/margin_large"
41+
android:paddingStart="@dimen/cmv_padding"
42+
android:layout_height="@dimen/text_size_moderate"
43+
android:background="@color/shimmer_background" />
44+
45+
<View
46+
android:layout_width="match_parent"
47+
android:paddingLeft="@dimen/cmv_padding"
48+
android:paddingStart="@dimen/cmv_padding"
49+
android:layout_marginLeft="@dimen/margin_large"
50+
android:layout_marginTop="@dimen/margin_medium"
51+
android:layout_height="@dimen/text_size_moderate"
52+
android:background="@color/shimmer_background" />
53+
<View
54+
android:layout_width="match_parent"
55+
android:paddingLeft="@dimen/cmv_padding"
56+
android:paddingStart="@dimen/cmv_padding"
57+
android:layout_marginLeft="@dimen/margin_large"
58+
android:layout_marginTop="@dimen/margin_medium"
59+
android:layout_height="@dimen/text_size_moderate"
60+
android:background="@color/shimmer_background" />
61+
<View
62+
android:layout_width="match_parent"
63+
android:paddingLeft="@dimen/cmv_padding"
64+
android:paddingStart="@dimen/cmv_padding"
65+
android:layout_marginLeft="@dimen/margin_large"
66+
android:layout_marginTop="@dimen/margin_medium"
67+
android:layout_height="@dimen/text_size_moderate"
68+
android:background="@color/shimmer_background" />
69+
70+
</LinearLayout>
71+
72+
</LinearLayout>
73+
</android.support.v7.widget.CardView>
74+
75+
</LinearLayout>

0 commit comments

Comments
 (0)