The Open Event Android App has an About Fragment which displays all the info about the event like name, time, location etc. It also shows social media buttons for the event. The problem was that the implementation of showing the social media buttons was not generic. The implementation was working fine for current FOSSASIA sample. If we generate the app for other events it creates a problem. It shows static buttons without proper mapping from social media button to social media link which creates a problem like on clicking GitHub button it opens Facebook link (issue #1792).
One solution to this problem is to implement recyclerview with social media buttons. In this post I explain how I have made social links implementation generic using RecyclerView.
Add RecyclerView in layout
The first step to do is to add recyclerview in the layout xml file and to create a list item for recyclerview which holds the image for the social link button. Then in the About Fragment find recyclerview element added in the xml file using findFragmentById() method.
1. Add recyclerview in xml file
In the layout xml file of About Fragment add recyclerview element. Define id, width, height, and gravity of recyclerview. Then specify list item for recyclerview using listitem attribute.
2. Create item_social_link.xml
Now create a item_social_link.xml file and add a FrameLayout element. Inside the FrameLayout add an ImageView with appropriate id, width, height and padding.
Add and initialize RecyclerView
After adding recyclerview in xml file we need to add RecyclerView field in the About Fragment java file. Now add and initialize SocialLinksListAdapter which extends RecyclerView.Adapter and will be used for populating the recyclerview with the social links.
Here mSocialLinks is the list of social links which is fetched from the Event object.
Create ViewHolder for social link button
Now create SocialLinkViewHolder which extends RecyclerView.ViewHolder and holds one social link item defined in item_social_link.xml file. This file is where the magic happens. Add ImageView, FrameLayout, SocialLink and context fields in it.
The bindSocialLink(SocialLink socialLink) method is called in the onBindViewHolder() method of the SocialLinksListAdapter. In this method initialize socialLink field and set drawable for ImageView according to SocialLink name using setImageDrawable() method.
The setImageDrawable() method finds and sets appropriate image for social link button using the name of the social link. If the image for the social link is not found then it sets the visibility of the image view to GONE using showView(boolean show).
The showView(boolean show) method handles visibility of ImageView and ImageView’s parent FrameLayout using setVisibility() method.
Set onClickListener to ImageView
Now it’s time to set the onClickListener in the constructor of the SocialLinkViewHolder to define what to do when user clicks on the ImageView.
Here we are setting custom tab for the social link using the setUpCustomTab() util method which will open the link.
Now run the app on the device or emulator. Here’s how it looks like,
The SocialLink impementation using the RecyclerView gives the great user experience in the application.
- RecyclerView: https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html
- RecyclerView tutorial: https://www.androidhive.info/2016/01/android-working-with-recycler-view/
- Open Event Android PR: https://github.com/fossasia/open-event-android/pull/1809