Chapter - 4 : Modern Android Architecture ‘Android Jetpack’ - Navigation library

      Navigation Architecture Component was introduced with Android Jetpack to facilitate the implementation of the navigation within your app and simultaneously enforce guidelines that will provide a consistent and predictable navigation to the end users.

Why it helps ?

• Aside from one-time setup, an app should have a fixed starting screen when started from the launcher.
• Android navigation stack should follow a LIFO structure. With the starting screen at bottom of the stack and the current on top.
• The up button should never exit your app.
• With the exception of the bottom element of the stack, the up button should function identically to the system back button.
• The navigation stack should be consistent even if it’s triggered from an outside source. This is a common mistake when using deep links to app content, where the system back button and up button have distinct destinations.

Key definitions

NavHost: Context or container that has all the information it needs to handle any navigation-related actions on its own.
NavController: Component used to perform navigation between destinations.
NavigationUI: Component that connects the navigation with some material design components (such as the BottomNavigationView and the DrawerLayout)

Implement Navigation

      The Navigation Architecture Component is designed to have a single activity with multiple Fragments. The Activity hosts a Navigation Graph. If your app has multiple activities each Activity hosts its own Navigation Graph.

Gradle Dependency

Add the following dependencies to your app or module build.gradle file

Navigation Graph XML

       This component handles navigation as a graph, where each node represents a screen. These nodes are called destinations and are bounded by each other through actions. The set of destinations and actions compose the navigation graph.

       Let’s start by the creation of our navigation graph. So, on your res directory go to New > Android resource file and select Navigation from the resource type list. On the newly created navigation directory, we can start writing our navigation graph.



android:name: Attribute that flags the fragment as a NavHost — A container for the navigation graph that allows destinations to be swapped as the user navigates through the app.
app:navGraph: Connects the NavHostFragment to the navigation graph resource.
app:defaultNavHost: When set to true, NavHostFragment is capable of intercepting the system’s back button presses.

Now you should be able to hop to the design editor of your navigation graph resource and see which resource holds your NavFragmentHost.

       Now going back to handling up and back navigation, how does it happen? Since the navigation graph is the single source of truth for all navigation within the app, the navigation component does the right thing when navigating back or up. Not only does it handle this, but it correctly takes care of things such as the back stack, transactions, pop behaviour and transition animations.



Now that the layouts are ready, let’s see how to navigate from one Fragment to the other via the actions. NavController manages app navigation within the NavHost.

public class FirstFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.navigation_first_fragment, container, false);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
final Bundle bundle = new Bundle();
bundle.putBoolean("test_boolean", true);
final NavController navController = Navigation.findNavController(getActivity(), R.id.my_nav_host_fragment);
Button button = view.findViewById(R.id.button_frag1);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
navController.navigate(R.id.action_firstFragment_to_secondFragment, bundle);
}
});
}
}

Trigger navigation

       So we have established a connection with a destination, the next move is to actually that transition, right? Now, each NavHost has a controller — NavController — that is capable of swapping destinations with one of these two methods:
navigate(): Pushes the specified action destination to the stack.
navigateUp(): Pops to the top destination on the stack. On this case, this method would trigger an app exit since fragment A is the last on the stack.

Overall Jetpack makes android development easy and it helps you to focus more on your app’s business logic rather than spending more time on framework specific implementations.

I have uploaded the latest source code in GitHub for your reference. Kindly raise your queries in the command section.

Reference

https://developer.android.com/topic/libraries/architecture/navigation/
https://proandroiddev.com/android-jetpack-navigation-to-the-rescue-fe588271d36
https://medium.com/deemaze-software/android-jetpack-navigation-architecture-component-b603c9a8100c

Happy coding!!!
Cheers!!!

Chapter -3 : Modern Android Architecture ‘Android Jetpack’ - Infinity feeds using Paging Library

       Android Paging library is a component of android jetpack which makes it easier to load data gradually in our app. The Paging library supports both large bounded list and unbounded lists, such as continuously updating feeds. For instance consider the Instagram App, it shows you a list of posts, and the app has too many posts, but it does not load all the post at once, it shows you some posts, as soon as you reaches the last item of the post list it loads more posts. This is called paging.

      This post provides an overview of how we can use the Paging Library to request and display data that users want to see while consuming system resources more economically and elegantly.

Merits of using Paging

• We only load a small chunk from your large data set, it will consume less bandwidth.
• The app will use less resources resulting in a smooth app and nice user experience.

Pre-Requisites

• Before moving ahead, you should go through these tutorials first, as we are going to use these things. Using Retrofit in Android: Complete Retrofit Playlist from Scratch.
• We will use the Retrofit Library to fetch the data from backend API. The above tutorial discusses about Retrofit and Building API from scratch. So you can check the series. 
• RecyclerView: RecyclerView Tutorial.
• We will load the items in a RecyclerView after fetching it from server.
• Android ViewModel: Android ViewModel Tutorial
• This is another component from Android Jetpack. It helps us to store UI related data in a more efficient way.

In this tutorial I am going to use a readymade News API. In the above API URL we are passing the below parameters.

page: The number of page that we want to fetch.
pagesize: The total number of items that we want in the page.

The above URL will give the following response.

The data is coming from NewsAPI, and it has a very large data set, so you will get may be an infinite number of pages.

Now our task is to fetch from the page 1 and load the next page as soon as the user reaches the end of the list. And to do this we will use the Android Paging Library. Please find folder structure of sample application,

Step 1: Add the Paging library to the app

Go to app level build.gradle file and add the following dependencies.

After adding all the above required dependencies sync your project and you are good to go. Here we have added a lot of dependencies these are:

Retrofit and Gson - For fetching and parsing JSON from URL.
ViewModel - Android architecture component for storing data.
Paging - The paging library.
RecyclerView and CardView - For building the List.
Picasso - For loading image from URL.

Step 2 : Creating Model Class

Now we will create a model class in our project. We need this class to parse the JSON response automatically. Please refer above a really complex nested JSON in the response. So we need many classes to bind the response into respective java class automatically.
Create a file named Post.java and write the following code in it.

Step 3 : Creating Retrofit Singleton Class

Each time when we want to fetch data from a new page, we need the Retrofit object. So creating a singleton instance of Retrofit is a good idea. For the singleton instance I will create a new class named RetrofitFactory.

We have to create RetrofitApi interface to fetch news feed.

Step 4 : Creating Item Data Source

Now here comes the very important thing, the data source of our item from where we will fetch the actual data. And you know that we are using the News API.

For creating a Data Source we have many options, like ItemKeyedDataSource, PageKeyedDataSource, PositionalDataSource. For this tutorial we are going to use PageKeyedDataSource, as in our API we need to pass the page number for each page that we want to fetch. So here the page number becomes the Key of our page.

In this scenario, we would be using a PageKeyedDataSource. The following code shows how we can create PageKeyedDataSource for our NewsFeedDataSource class.

public class NewsFeedDataSource extends PageKeyedDataSource<Long, Post> implements Constants {
private static final String TAG = NewsFeedDataSource.class.getSimpleName();
private InfinityFeedApp appController;
private MutableLiveData networkState;
private MutableLiveData initialLoading;

public NewsFeedDataSource(InfinityFeedApp appController) {
this.appController = appController;
networkState = new MutableLiveData();
initialLoading = new MutableLiveData();
}

public MutableLiveData getNetworkState() {
return networkState;
}

public MutableLiveData getInitialLoading() {
return initialLoading;
}

@Override
public void loadInitial(@NonNull LoadInitialParams<Long> params,
@NonNull final LoadInitialCallback<Long, Post> callback) {
initialLoading.postValue(NetworkState.LOADING);
networkState.postValue(NetworkState.LOADING);
appController.getRetrofitApi().getFeeds(QUERY, API_KEY, 1, params.requestedLoadSize)
.enqueue(new Callback<NewsFeed>() {


@Override
public void onResponse(Call<NewsFeed> call, Response<NewsFeed> response) {
if (response.isSuccessful()) {
callback.onResult(response.body().getPosts(), null, 2l);
initialLoading.postValue(NetworkState.LOADED);
networkState.postValue(NetworkState.LOADED);
} else {
initialLoading.postValue(new NetworkState(NetworkState.Status.FAILED, response.message()));
networkState.postValue(new NetworkState(NetworkState.Status.FAILED, response.message()));
}
}

@Override
public void onFailure(Call<NewsFeed> call, Throwable t) {
String errorMessage = t == null ? "unknown error" : t.getMessage();
networkState.postValue(new NetworkState(NetworkState.Status.FAILED, errorMessage));
}
});
}

@Override
public void loadBefore(@NonNull LoadParams<Long> params,
@NonNull LoadCallback<Long, Post> callback) {
}

@Override
public void loadAfter(@NonNull final LoadParams<Long> params,
@NonNull final LoadCallback<Long, Post> callback) {
Log.i(TAG, "Loading Rang " + params.key + " Count " + params.requestedLoadSize);
networkState.postValue(NetworkState.LOADING);
appController.getRetrofitApi().getFeeds(QUERY, API_KEY, params.key, params.requestedLoadSize).enqueue(new Callback<NewsFeed>() {

@Override
public void onResponse(Call<NewsFeed> call, Response<NewsFeed> response) {
if (response.isSuccessful()) {
long nextKey = (params.key == response.body().getTotalResults()) ? null : params.key + 1;
callback.onResult(response.body().getPosts(), nextKey);
networkState.postValue(NetworkState.LOADED);
} else
networkState.postValue(new NetworkState(NetworkState.Status.FAILED, response.message()));
}

@Override
public void onFailure(Call<NewsFeed> call, Throwable t) {
String errorMessage = t == null ? "unknown error" : t.getMessage();
networkState.postValue(new NetworkState(NetworkState.Status.FAILED, errorMessage));
}
});
}
}

Note: I’m using LiveData to push the network updates to the UI. This is because it’s lifecycle aware and will handle the subscription for us.

• We extended PageKeyedDataSource<Integer, Item> in the above class. Integer here defines the page key. Every time we want a new page from the API we need to pass the page number that we want which is an integer. Item is the Post model class that we will get from the API or that we want to get. 
• Then we defined the size of a page which is 21, the initial page number which is 1. You are free to change these values if you want.

Then we have 3 overridden methods.

• loadInitials(): This method will load the initial data. Or you can say it will be called once to load the initial data, or first page according to this post.
• loadBefore(): This method will load the previous page.
• loadAfter(): This method will load the next page.

Step 5 : Creating Item Data Source Factory

DataSourceFactory is responsible for retrieving the data using the DataSource and PagedList configuration. We are going to use MutableLiveData<> to store our PageKeyedDataSource and for this we have to create NewsFeedDataFactory class by extending DataSource.Factory.

Step 6 : Setup the ViewModel

The view model will be responsible for creating the PagedList along with its configurations and send it to the activity so it can observe the data changes and pass it to the adapter.

PagedList is a wrapper list that holds your data items (in our case the list of news we need to display) and invokes the DataSource to load the elements. It typically consists of a background executor (which fetches the data) and the foreground executor (which updates the UI with the data).

For instance, let’s say we have some data that we add to the DataSource in the background thread. The DataSource invalidates the PagedList and updates its value. Then on the main thread, the PagedList notifies its observers of the new value. Now the PagedListAdapter knows about the new value.

PagedList.Config pagedListConfig =
(new PagedList.Config.Builder())
.setEnablePlaceholders(false)
.setInitialLoadSizeHint(10)
.setPrefetchDistance(10)
.setPageSize(20).build();

1. setEnablePlaceholders(boolean enablePlaceholders) - Enabling placeholders mean we can see placeholders instead of the image since it is not fully loaded. 
2. setInitialLoadSizeHint(int initialLoadSizeHint) - The number of items to load initially. 
3. setPageSize(int pageSize) - The number of items to load in the PagedList. 
4. setPrefetchDistance(int prefetchDistance) — The number of preloads that occur. For instance, if we set this to 10, it will fetch the first 10 pages initially when the screen loads.

Now create a class named ItemViewModel and write the following code.

public class NewsFeedViewModel extends ViewModel {
private Executor executor;
private LiveData<NetworkState> networkState;
private LiveData<PagedList<Post>> feedsLiveData;
private InfinityFeedApp infinityFeedApp;

public NewsFeedViewModel(@NonNull InfinityFeedApp infinityFeedApp) {
this.infinityFeedApp = infinityFeedApp;
init();
}

private void init() {
executor = Executors.newFixedThreadPool(5);
NewsFeedDataFactory newsFeedDataFactory = new NewsFeedDataFactory(infinityFeedApp);
networkState = Transformations.switchMap(newsFeedDataFactory.getFeedDataSourceMutableLiveData(),
dataSource -> dataSource.getNetworkState());

PagedList.Config pagedListConfig =
(new PagedList.Config.Builder())
.setEnablePlaceholders(false)
.setInitialLoadSizeHint(10)
.setPrefetchDistance(10)
.setPageSize(20).build();

feedsLiveData = (new LivePagedListBuilder(newsFeedDataFactory, pagedListConfig))
.setFetchExecutor(executor)
.build();

}

public LiveData<NetworkState> getNetworkState() {
return networkState;
}

public LiveData<PagedList<Post>> getFeedsLiveData() {
return feedsLiveData;
}
}

Step 7 : Creating the PagedListAdapter

PagedListAdapter is an implementation of RecyclerView.Adapter that presents data from a PagedList. It uses DiffUtil as a parameter to calculate data differences and do all the updates for you.

public static DiffUtil.ItemCallback<Post> DIFF_CALLBACK = new DiffUtil.ItemCallback<Post>() {
@Override
public boolean areItemsTheSame(@NonNull Post oldItem, @NonNull Post newItem) {
return oldItem.id == newItem.id;
}
@Override
public boolean areContentsTheSame(@NonNull Post oldItem, @NonNull Post newItem) {
return oldItem.equals(newItem);
}
};

FeedListAdapter class extends PageListAdapter and does not override the usual getItemCount() as this is provided by the PageList object. If we do need to override this method, we need to add super.getItemCount() to the method. 

public class FeedListAdapter extends PagedListAdapter<Post, RecyclerView.ViewHolder> {
private static final int TYPE_PROGRESS = 0;
private static final int TYPE_ITEM = 1;

private Context context;
private NetworkState networkState;

public FeedListAdapter(Context context) {
super(Post.DIFF_CALLBACK);
this.context = context;
}

@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
if(viewType == TYPE_PROGRESS) {
NetworkItemBinding headerBinding = NetworkItemBinding.inflate(layoutInflater, parent, false);
NetworkStateItemViewHolder viewHolder = new NetworkStateItemViewHolder(headerBinding);
return viewHolder;
} else {
FeedItemBinding itemBinding = FeedItemBinding.inflate(layoutInflater, parent, false);
ArticleItemViewHolder viewHolder = new ArticleItemViewHolder(itemBinding);
return viewHolder;
}
}

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
if(holder instanceof ArticleItemViewHolder) {
((ArticleItemViewHolder)holder).bindTo(getItem(position));
} else {
((NetworkStateItemViewHolder) holder).bindView(networkState);
}
}

private boolean hasExtraRow() {
if (networkState != null && networkState != NetworkState.LOADED) {
return true;
} else {
return false;
}
}

@Override
public int getItemViewType(int position) {
if (hasExtraRow() && position == getItemCount() - 1) {
return TYPE_PROGRESS;
} else {
return TYPE_ITEM;
}
}

public void setNetworkState(NetworkState newNetworkState) {
NetworkState previousState = this.networkState;
boolean previousExtraRow = hasExtraRow();
this.networkState = newNetworkState;
boolean newExtraRow = hasExtraRow();
if (previousExtraRow != newExtraRow) {
if (previousExtraRow) {
notifyItemRemoved(getItemCount());
} else {
notifyItemInserted(getItemCount());
}
} else if (newExtraRow && previousState != newNetworkState) {
notifyItemChanged(getItemCount() - 1);
}
}

public class ArticleItemViewHolder extends RecyclerView.ViewHolder {
private FeedItemBinding binding;
public ArticleItemViewHolder(FeedItemBinding binding) {
super(binding.getRoot());
this.binding = binding;
}

public void bindTo(Post post) {
binding.itemImage.setVisibility(View.VISIBLE);
binding.itemDesc.setVisibility(View.VISIBLE);
String author = post.getAuthor() == null || post.getAuthor().isEmpty() ? context.getString(R.string.author_name) : post.getAuthor();
String titleString = String.format(context.getString(R.string.item_title), author, post.getTitle());
SpannableString spannableString = new SpannableString(titleString);
spannableString.setSpan(new ForegroundColorSpan(ContextCompat.getColor(context.getApplicationContext(), R.color.secondary_text)),
titleString.lastIndexOf(author) + author.length() + 1, titleString.lastIndexOf(post.getTitle()) - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
binding.itemTitle.setText(spannableString);
binding.itemTime.setText(String.format(context.getString(R.string.item_date), Utility.getDate(post.getPublishedAt()), Utility.getTime(post.getPublishedAt()))); binding.itemDesc.setText(post.getDescription());
Picasso.get().load(post.getUrlToImage()).resize(250, 200).into(binding.itemImage);
}
}

public class NetworkStateItemViewHolder extends RecyclerView.ViewHolder {
private NetworkItemBinding binding;
public NetworkStateItemViewHolder(NetworkItemBinding binding) {
super(binding.getRoot());
this.binding = binding;
}

public void bindView(NetworkState networkState) {
if (networkState != null && networkState.getStatus() == NetworkState.Status.RUNNING) {
binding.progressBar.setVisibility(View.VISIBLE);
} else {
binding.progressBar.setVisibility(View.GONE); 

}


if (networkState != null && networkState.getStatus() == NetworkState.Status.FAILED) {
binding.errorMsg.setVisibility(View.VISIBLE);
binding.errorMsg.setText(networkState.getMsg());
} else {
binding.errorMsg.setVisibility(View.GONE);
}
}
}
}

Step 8 : Displaying the Paged List at Activity

The last step is to set up our Activity class with the ViewModel, RecyclerView, PagedListAdapter:





Now you are done and you can try running your application. If everything is fine you will see the below output.

I have uploaded the latest source code in GitHub for your reference. Kindly raise your queries in the command section.

References :

Paging library overview
https://developer.android.com/topic/libraries/architecture/paging/

Paging library UI components and considerations
https://developer.android.com/topic/libraries/architecture/paging/ui

Paging library data components and considerations
https://developer.android.com/topic/libraries/architecture/paging/data

https://proandroiddev.com/8-steps-to-implement-paging-library-in-android-d02500f7fffe
https://www.simplifiedcoding.net/android-paging-library-tutorial/



Happy coding!!!
Cheers!!!

Chapter -2 : Modern Android Architecture ‘Android Jetpack’ - Working with DataBinding

       The Data Binding Library i.e. support library enables us to bind UI components in our layouts to data sources in your app using a declarative format rather than programmatically. In Simple words, Data binding enables a way to combine the UI with business logic allowing the UI values to update automatically without manual intervention.

Benefits

• Reduces lot of boilerplate code in our business logic while sync up the UI when new data is available. 
• Making them simpler and easier to maintain. 
• Improve the app's performance 
• Help prevent memory leaks and null pointer exceptions.

How to use ?

To get started with DataBinding, open the build.gradle located under app and enable dataBinding under android module. Once enabled, Sync the project

Adding Data Binding element to Layout file

The expression language allows us to write expressions that connect variables to the views in the layout. The next step in converting the layout file to a data binding layout file is to add the data element. To enable DataBinding in a layout, the root element should start with <layout> tag. Along with it, <data> and <variable> tags are used.



<layout> – Indicate the compiler that this layout has data binding in it so generate the binding class for this layout.
<import> – Similar to how we interpret imports in normal classes. Import a class in this layout.
<variable> – similar to how we interpret variables in normal classes. Declare a variable 'name' and it’s type for the layout to use.
<data> – Parent tag for <import> and <variable> tags for the “data” that we are going to bind for this layout.

Access data in layout through Layout Expressions

It’s structured like a normal class where our imports and most of our variables are declared at the top and we use them at the bottom. The user variable declared within data describes a property that may be used within this layout. Also, if you want to use expressions inside your layout, you can call attribute properties using the “@{}" syntax.

Project structure for Binding Data

The Data Binding Library provides classes and methods to easily observe data for changes. You don't have to worry about refreshing the UI when the underlying data source changes. You can make your variables or their properties observable. The library allows you to make objects, fields, or collections observable.

public class User extends BaseObservable {
String username;
String email;
String userImage;
String info;
public ObservableField<Long> numberOfFriends = new ObservableField<>();
public ObservableField<Long> numberOfArticles = new ObservableField<>();
public ObservableField<Long> numberOfFavourite = new ObservableField<>();
public User() {
}

@Bindable
public String getUsername() {
return username; 

}

public void setUsername(String username) {
this.username = username;
notifyPropertyChanged(BR.username);
}
@BindingAdapter({"profileImage"})
public static void loadImage(ImageView view, String imageUrl) {
Glide.with(view.getContext())
.load(imageUrl)
.apply(RequestOptions.circleCropTransform())
.into(view);
}
@Bindable
public String getUserImage() {
return userImage;
}
public void setUserImage(String userImage) {
this.userImage = userImage;
notifyPropertyChanged(BR.userImage);
}
@Bindable
public String getInfo() {
return info;
}
public void setInfo(String info) {
this.info = info;
notifyPropertyChanged(BR.info);
}
public ObservableField<Long> getNumberOfFriends() {
return numberOfFriends;
}
public ObservableField<Long> getNumberOfArticles() {
return numberOfArticles;
}
public ObservableField<Long> getNumberOfFavourite() {
return numberOfFavourite;
}
}

• To make User pojo class Observable, extend the class from BaseObservable. For demonstration, both Observable and ObservableField are used in the same class.
• For variables username, email, userImage and info., @Bindable annotation is used and notifyPropertyChanged is called upon setting new data if needed.
• Variables numberOfArticless, numberOfFriends, numberOfFavourites are declared as ObservableFields.
• @BindingAdapter is used to bind profileImage to ImageView in order to load the image from URL using Glide library.

Generating binding class

When you set the root tag of your layout to <layout>, a binding class is generated by the Data Binding library. For instance, activity_main.xml will have a binding class called ActivityMainBinding.
Note : This class holds all the bindings from the layout properties to the layout’s views and knows how to assign values for the binding expressions.



If you are using data binding items in a Fragment, ListView, or RecyclerView adapter, use the inflate() methods of the binding classes or the DataBindingUtil class:




In this chapter, we will make a very simple app that loads images in RecyclerView using data binding library.

DataBinding in RecyclerView

Binding a RecyclerView layout is similar to normal binding except few changes in onCreateViewHolder and onBindViewHolder methods. Create layout named article_row_item.xml. This layout contains an ImageView to render the image in RecyclerView. In this layout, data binding is enabled by keeping the root element as <layout>. The Post model in bound to this layout using <variable> tag.

Generating adapter binding class

Create a class named ArticleAdapter.java under view package. As the layout name is article_row_item.xml, the generated binding class will be ArticleRowItemBinding. In onCreateViewHolder() method, article_row_item layout is inflated with the help of ArticleRowItemBinding class. articleViewHolder.rowItemBinding.setArticle() binds the Post model to each row.

public class ArticleAdapter extends RecyclerView.Adapter<ArticleAdapter.ArticleViewHolder> {
private List<Article> articleList;
private LayoutInflater layoutInflater;
private ArticlesAdapterListener listener;
public ArticleAdapter(List<Article> articleList, ArticlesAdapterListener listener) {
this.articleList = articleList;
this.listener = listener;
}
@NonNull
@Override
public ArticleViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
if (null == layoutInflater) {
layoutInflater = LayoutInflater.from(viewGroup.getContext());
}
ArticleRowItemBinding articleRowItemBinding = DataBindingUtil.inflate(layoutInflater, R.layout.article_row_item, viewGroup, false);
return new ArticleViewHolder(articleRowItemBinding);
}
@Override
public void onBindViewHolder(@NonNull ArticleViewHolder articleViewHolder, final int i) {
articleViewHolder.rowItemBinding.setArticle(articleList.get(i));
articleViewHolder.rowItemBinding.thumbnail.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (listener != null) {
listener.onArticleClicked(articleList.get(i));
}
}
});
}
@Override
public int getItemCount() {
return articleList.size();
}
public class ArticleViewHolder extends RecyclerView.ViewHolder {
private ArticleRowItemBinding rowItemBinding;
public ArticleViewHolder(final ArticleRowItemBinding binding) {
super(binding.getRoot());
this.rowItemBinding = binding;
}
}
public interface ArticlesAdapterListener {
void onArticleClicked(Article post);

}
}

Loading RecyclerView in MainActivity

As the main activity layout name is activity_main, the generated binding class will be ActivityMainBinding. loadUserData() renders the user information such as username, , articles, friends and favourite count. init() initialize the RecyclerView with sample images data. AppClickHandlers handles the click events of UI elements. Here, all the binding of click events is done via xml layout only. We don’t explicitly assign anything from activity code.

public class MainActivity extends AppCompatActivity implements ArticleAdapter.ArticlesAdapterListener {
private User user;
private ActivityMainBinding binding;
private AppClickHandlers handler;
private RecyclerView recyclerView;
private ArticleAdapter articleAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
handler = new AppClickHandlers(this);
loadUserData();
init();
}

private void loadUserData() {
user = new User();
user.setUsername("Mr. Sherlock Holmes");
user.setUserImage("https://tse4.mm.bing.net/th?id=OIP.gHhJlg-RAvR-XosdERsIMQHaEo&pid=Api&w=1440&h=900&rs=1&p=0");
// updating ObservableField
user.numberOfArticles.set(1500L);
user.numberOfFriends.set(205090L);
user.numberOfFavourite.set(10L);
// display user
binding.setUser(user);
// assign click handlers
binding.setHandlers(handler);
}

private void init() {
recyclerView = binding.recyclerView;
recyclerView.setLayoutManager(new GridLayoutManager(this, 3));
recyclerView.addItemDecoration(new GridItemDecoration(3, ImageUtil.dpToPx(MainActivity.this, 4), true));
recyclerView.setItemAnimator(new DefaultItemAnimator());
recyclerView.setNestedScrollingEnabled(false);
articleAdapter = new ArticleAdapter(getArticles(), this);
recyclerView.setAdapter(articleAdapter);
}

private ArrayList<Article> getArticles() {
ArrayList<Article> articles = new ArrayList<>();
for (int i = 1; i < 10; i++) {
Article article = new Article();
article.setImageUrl("https://tse3.mm.bing.net/th?id=OIP.f1bDVK_DN6xiTaYAM79ucgHaEK&pid=Api");
articles.add(article);
}
return articles;
}

@Override
public void onArticleClicked(Article article) {
Toast.makeText(getApplicationContext(), "Article clicked! " + article.getImageUrl(), Toast.LENGTH_SHORT).show();
}

public class AppClickHandlers {
Context context;
public AppClickHandlers(Context context) {
this.context = context;
}
public void onFriendsClicked(View view) {
Toast.makeText(context, "Friends is clicked!", Toast.LENGTH_SHORT).show();
}
public void onFavouriteClicked(View view) {
Toast.makeText(context, "Favourite is clicked!", Toast.LENGTH_SHORT).show();
}
public void onArticlesClicked(View view) {
Toast.makeText(context, "Article is clicked!", Toast.LENGTH_SHORT).show();
}
}
}

Run and test the app once. Make sure the device is having internet connection as images will be downloaded from network.
I have uploaded the latest source code in GitHub for your reference. Kindly raise your queries in the command section.

References :

https://developer.android.com/topic/libraries/data-binding/
https://www.androidhive.info/android-working-with-databinding/
http://imakeanapp.com/android-jetpack-data-binding/

Happy coding!!!
Cheers!!!

Chapter 0 : Modern Android Architecture ‘Android Jetpack’ - Lifecycle

       Jetpack is “the next generation of components to accelerate app development”. It’s a set of libraries, tools and architectural guidelines to help making building great Android apps quick and easy. It provides common infrastructure code so you can focus on what makes your app unique.



Activity/Fragment - Depend only on a view model.
View model - Provides the data for fragment or activity, and contains data-handling business logic to communicate with the model.
Repository - Depends on a persistent data model and a remote backend data source and handle data operations.
Room - An object-mapping library that provides local data persistence with minimal boilerplate code.
Retrofit library - To access our backend through REST API.

Lifecycle-manageable components such as activities and fragments perform actions in response to a change in another Android component. The lifecycle methods of activities and fragments leads to a poor organization of the code and to the proliferation of errors in most of the cases.
The lifecycle-aware component helps to move the code of dependent components out of the lifecycle methods of activity & fragments and into the components themselves.

Dependencies

AndroidX

dependencies {
def lifecycle_version = "2.0.0"

// Lifecycles only (no ViewModel or LiveData)
implementation "androidx.lifecycle:lifecycle-runtime:$lifecycle_version"
annotationProcessor "androidx.lifecycle:lifecycle-compiler:$lifecycle_version" // use kapt for Kotlin
// alternately - if using Java8, use the following instead of lifecycle-compiler
implementation "androidx.lifecycle:lifecycle-common-java8:$lifecycle_version"
}

Pre-AndroidX

dependencies {
def lifecycle_version = "1.1.1"
// Lifecycles only (no ViewModel or LiveData)
implementation "android.arch.lifecycle:runtime:$lifecycle_version"
annotationProcessor "android.arch.lifecycle:compiler:$lifecycle_version" // use kapt for Kotlin
// alternately - if using Java8, use the following instead of compiler
implementation "android.arch.lifecycle:common-java8:$lifecycle_version"
}

Refer here for updated Dependencies.

The android.arch.lifecycle package can automatically adjust their behavior based on the current lifecycle state of an activity or fragment that has three main classes that we’ll deal with:

• LifeCycle
• LifeCycleOwner
• LifeCycleObserver

Lifecycle

Lifecycle class holds the information about the component (like an activity or a fragment) lifecycle state where allows other objects to observe this state.

The lifecycle events (i.e. Lifecycle.Event.ON_CREATE, Lifecycle.Event.ON_RESUME, Lifecycle.Event.ON_PAUSE and etc) & lifecycle states (INITIALIZED, CREATED, RESUMED and etc) are used to track the lifecycle status for its associated component.




A single state can span multiple lifecycle owner events, so for an activity it’s considered in the CREATED state once it’s created and just before it’s paused, and in the same time the duration between the activity’s onStart() and just before onPause() it’s considered also in the STARTED state.

Since multiple states can interleave for a given point of time, if we want to check for a specific state, we always use the isAtLeast method:

if (lifeCycle.currentState.isAtLeast(Lifecycle.State.STARTED)) { //...}

LifecycleOwner and Lifecycle Observers

If we're trying to manage the lifecycle of activity or Fragment, we must implement LifecycleOwner interface to the activity. The lifecycle of a whole application process is managed by ProcessLifecycleOwner. Fragments and Activities in Support Library 26.1.0 and later already implement the LifecycleOwner interface.

If we have a custom class that we would like to make a LifecycleOwner, we can use the LifecycleRegistry class, but we need to forward events into that class.

LifecycleOwners such as Activity & Fragments are objects with lifecycle like Activity and Fragments. LifecycleObserver (e.g. LiveData) observes LifecycleOwners and are notified of lifecycle changes.

class SampleObserver implements LifecycleObserver{

@OnLifecycleEvent(ON_CREATE)
void startUp(LifecycleOwner source) {
}

@OnLifecycleEvent(ON_ANY)
void onAny(LifecycleOwner source, Event event) {
}

@OnLifecycleEvent(ON_STOP)
void cleanUp(LifecycleOwner source) {
}
}

The best way to handle lifecycle-aware components (activities and fragments) as lean as possible. They should not try to acquire their own data; instead, use a ViewModel to do that, and observe a LiveData object to reflect the changes back to the views.
So, Android Lifecycle-aware components are tracked and managed by Room, LiveData and ViewModel in the next episode.

References:

https://developer.android.com/topic/libraries/architecture/lifecycle
https://medium.com/@MinaSamy/android-architecture-components-lifecycle-433ace1ec05d



Happy Coding !!!