Loklak Wok Android is a peer harvester that posts collected tweets to the Loklak Server. Along with that tweets can be searched using the app. This post describes how search API endpoint and TabLayout is used to implement the tweet searching feature.
Adding Dependencies to the project
This feature uses Retrofit2, Reactive extensions(RxJava2, RxAndroid and Retrofit RxJava adapter) and RetroLambda (for Java lambda support in Android).
In app/build.gradle:
apply plugin: 'com.android.application'
apply plugin: 'me.tatarka.retrolambda'
android {
...
packagingOptions {
exclude 'META-INF/rxjava.properties'
}
}
dependencies {
...
compile 'com.google.code.gson:gson:2.8.1'
compile 'com.squareup.retrofit2:retrofit:2.3.0'
compile 'com.squareup.retrofit2:converter-gson:2.3.0'
compile 'com.squareup.retrofit2:adapter-rxjava2:2.3.0'
compile 'io.reactivex.rxjava2:rxjava:2.0.5'
compile 'io.reactivex.rxjava2:rxandroid:2.0.1'
}
In build.gradle project level:
dependencies {
classpath 'com.android.tools.build:gradle:2.3.3'
classpath 'me.tatarka:gradle-retrolambda:3.2.0'
}
Implementation
The search API endpoint is defined in LoklakApi interface which would provide the tweet search result.
public interface LoklakApi {
@GET("api/search.json")
Observable<Search> getSearchedTweets(
@Query("q") String query,
@Query("filter") String filter,
@Query("count") int count);
}
The POJOs (Plain Old Java Objects) for the result of search API endpoint are obtained using jsonschema2pojo, Gson uses POJOs to convert JSON to Java objects and vice-versa.
The REST client is created by Retrofit2 and is implemented in RestClient class. The Gson converter and RxJava adapter for retrofit is added in the retrofit builder. create method is called to generate the API methods(retrofit implements LoklakApi Interface).
public class RestClient {
private RestClient() {
}
private static void createRestClient() {
sRetrofit = new Retrofit.Builder()
.baseUrl(BASE_URL)
// gson converter
.addConverterFactory(GsonConverterFactory.create(gson))
// retrofit adapter for rxjava
.addCallAdapterFactory(RxJava2CallAdapterFactory.create())
.build();
}
private static Retrofit getRetrofitInstance() {
if (sRetrofit == null) {
createRestClient();
}
return sRetrofit;
}
public static <T> T createApi(Class<T> apiInterface) {
// create method to generate API methods
return getRetrofitInstance().create(apiInterface);
}
}
As search API endpoint provides filter parameter which can be used to filter out tweets containing images and videos. So, the tweets are displayed in three categories i.e. latest, images and videos.
The tweets of different category are displayed using a ViewPager. The fragments in ViewPager are inflated by a class that extends FragmentPagerAdapter. SearchFragmentPagerAdapter extends FragmentPagerAdapter, at least two methods getItem and getCount needs to be overridden. Going by the name of methods, getItem provides ith fragment to the ViewPager and based on the value returned by getCount number of tabs are inflated in TabLayout, a ViewGroup to display fragments in ViewPager in an elegant way. For better UI, the names (here the category of tweets) are displayed, for which we override getPageTitle method.
public class SearchFragmentPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragmentList = new ArrayList<>();
private List<String> mFragmentNameList = new ArrayList<>();
public SearchFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentNameList.get(position);
}
public void addFragment(Fragment fragment, String pageTitle) {
mFragmentList.add(fragment);
mFragmentNameList.add(pageTitle);
}
}
For easy understanding an analogy with RecyclerView can be made. The TabLayout here functions as a RecyclerView, ViewPager does the work of LayoutManager and FragmentPagerAdapter is analogous to RecyclerView.Adapter.
Now, the fragments which contain the categorical tweets are inflated in the parent fragment. Firstly, the ViewPager of TabLayout is set. Then fragments and their names are added to the FragmentPagerAdapter using the addFragment method implemented in SearchFragmentAdapter class above and finally the created adapter is set as the adapter of ViewPager, which is implemented in setupWithViewPager method.
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View rootView = inflater.inflate(R.layout.fragment_search, container, false);
ButterKnife.bind(this, rootView);
...
tabLayout.setupWithViewPager(viewPager);
setupViewPager(viewPager);
return rootView;
}
private void setupViewPager(ViewPager viewPager) {
FragmentManager fragmentManager = getActivity().getSupportFragmentManager();
SearchFragmentPagerAdapter pagerAdapter = new SearchFragmentPagerAdapter(fragmentManager);
pagerAdapter.addFragment(SearchCategoryFragment.newInstance("", mQuery), "LATEST");
pagerAdapter.addFragment(SearchCategoryFragment.newInstance("image", mQuery), "PHOTOS");
pagerAdapter.addFragment(SearchCategoryFragment.newInstance("video", mQuery), "VIDEOS");
viewPager.setAdapter(pagerAdapter);
}
SearchCategoryFragment are child fragments displayed as tabs in TabLayout. These child fragments are created using newInstance method which takes two parameters, category of tweets and the tweet search query respectively, the reason a constructor with these parameters are not used is that during a orientation change only the default constructor i.e. with no parameters is restored by Android system. So, these parameters are stored in a data structure called Bundle, once the fragment object is created using the default parameter the arguments present in the bundle are passed to fragment using setArguments method. These parameter are retrieved in onCreate lifecycle callback method of fragment which are used to fetch search results.
public static SearchCategoryFragment newInstance(String category, String query) {
Bundle args = new Bundle();
// query and category stored in bundle
args.putString(Constants.TWEET_SEARCH_SUGGESTION_QUERY_KEY, query);
args.putString(TWEET_SEARCH_CATEGORY_KEY, category);
// fragment with default constructor created
SearchCategoryFragment fragment = new SearchCategoryFragment();
// arguments in bundle are passed to fragment
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle bundle = getArguments();
if (bundle != null) {
// arguments retrieved
mTweetSearchCategory = bundle.getString(TWEET_SEARCH_CATEGORY_KEY);
mSearchQuery = bundle.getString(Constants.TWEET_SEARCH_SUGGESTION_QUERY_KEY);
}
}
As we have search query and category we can now obtain the search result and pass the obtained result – a List of type Status – to the adapter of RecyclerView which shows the tweets beautifully inside a CardView. The adapter and LayoutManager of RecyclerView are instantiated and set in onCreateView lifecycle callback method. Finally, network request is sent by calling fetchSearchedTweets method to obtain the search results.
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_search_category, container, false);
ButterKnife.bind(this, view);
mSearchCategoryAdapter = new SearchCategoryAdapter(getActivity(), new ArrayList<>());
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
recyclerView.setAdapter(mSearchCategoryAdapter);
// request sent to obtain search result.
fetchSearchedTweets();
return view;
}
The LoklakApi interface is implemented using the created Rest client and then getSearchedTweets method is invoked which takes in search query, category of tweets and maximum number of results in the mentioned order. If the network request is successful then setSearchResultView is invoked else setNetworkErrorView.
private void fetchSearchedTweets() {
LoklakApi loklakApi = RestClient.createApi(LoklakApi.class);
loklakApi.getSearchedTweets(mSearchQuery, mTweetSearchCategory, 30)
.subscribeOn(Schedulers.io()) // network request sent in a background thread
.observeOn(AndroidSchedulers.mainThread())
.subscribe(this::setSearchResultView, this::setNetworkErrorView);
}
setSearchResultView displays the obtained result if any in RecyclerView else shows a message that there is no result for the search query.
private void setSearchResultView(Search search) {
List<Status> statusList = search.getStatuses();
networkErrorTextView.setVisibility(View.GONE);
if (statusList.size() == 0) { // request successful but no results
recyclerView.setVisibility(View.GONE);
Resources res = getResources();
String noSearchResultMessage = res.getString(R.string.no_search_match, mSearchQuery); // no result matched message
// no result message displayed
noSearchResultFoundTextView.setVisibility(View.VISIBLE);
noSearchResultFoundTextView.setText(noSearchResultMessage);
} else { // there are some results, so display them in RecyclerView
recyclerView.setVisibility(View.VISIBLE);
mSearchCategoryAdapter.setStatuses(statusList);
}
}
In case of a failed network request, a TextView is displayed asking the user to check the network connections and click on it to retry.
private void setNetworkErrorView(Throwable throwable) {
Log.e(LOG_TAG, throwable.toString());
recyclerView.setVisibility(View.GONE);
networkErrorTextView.setVisibility(View.VISIBLE);
}
When the TextView, networkErrorTextView, is clicked a network request is sent again and the visibility of networkErrorTextView is changed to GONE, as implemented in setOnClickNetworkErrorTextViewListner
@OnClick(R.id.network_error)
public void setOnClickNetworkErrorTextViewListener() {
networkErrorTextView.setVisibility(View.GONE);
fetchSearchedTweets();
}
References:
Resources
Prerequisites
You must be logged in to post a comment.