RxJava

the Baby Steps

Ian Munene
Curriculum Lead

Resources i've found valuable on RxJava:

  • Reactive Android Programming - Tadas Subonis

What is RxJava about?

Quiz Question

Which one among the following is an asynchronous data stream

  1. Click event
  2. Database access
  3. Server response
  4. All of the above

Why do we use rxjava?

Best way to learn?

  • Create an initial barebone for the app
  • Set up  RxJava and UI dependencies
  • Create initial UI that will show the stock quote updates
  • Initialize UI with mock data using RxJava to get a hello world screen

Create a Bare bone app

  • Give it a name
  • Select an Empty Activity to start
  • Open the 
    app/build.gradle file
  • Add rxjava 2.0 dependencies
...
implementation 'io.reactivex.rxjava2:rxandroid:2.0.2'
implementation 'io.reactivex.rxjava2:rxjava:2.1.9'
  • Add UI dependencies
...
implementation 'com.jakewharton:butterknife:8.4.0'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.4.0'
  • Include RxBinding
...
implementation 'com.jakewharton.rxbinding2:rxbinding:2.1.1'
implementation 'com.jakewharton.rxbinding2:rxbinding-recyclerview-v7:2.1.1'
  • Add recycler view and card view dependencies
...
implementation 'com.android.support:cardview-v7:27.0.2'
implementation 'com.android.support:recyclerview-v7:27.0.2'

 

activity_main.xml

 

...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="6dp"
    tools:context="com.ianmunene.rxjava.MainActivity">

    <TextView android:id="@+id/tv_hello"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="" />

</RelativeLayout>

MainActivity

package com.ianmunene.rxjava;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.TextView;

import io.reactivex.Observable;
import io.reactivex.functions.Consumer;

public class MainActivity extends AppCompatActivity {
    TextView helloText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        helloText = findViewById(R.id.tv_hello);

        Observable.just("Hello! Please use this app responsibly")
                .subscribe(new Consumer<String>() {
                    @Override
                    public void accept(String s) throws Exception {
                        helloText.setText(s);
                    }
                });
    }
}

Adding a RecyclerView

...

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_stock_updates"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tv_hello"/>

</RelativeLayout>

activity_main.xml

Adding a RecyclerView

...
    TextView helloText; 
    RecyclerView recyclerView;
    private LinearLayoutManager layoutManager;
    private StockDataAdapter stockDataAdapter;

MainActivity

initialize inside the onCreate

...
    TextView helloText; 
    RecyclerView recyclerView;
    private LinearLayoutManager layoutManager;
    private StockDataAdapter stockDataAdapter;

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ...

        recyclerView = findViewById(R.id.rv_stock_updates);

        recyclerView.setHasFixedSize(true);
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);

        stockDataAdapter = new StockDataAdapter();
        recyclerView.setAdapter(stockDataAdapter);

Adding a RecyclerView

initialize inside the onCreate

...
    TextView helloText; 
    RecyclerView recyclerView;
    private LinearLayoutManager layoutManager;
    private StockDataAdapter stockDataAdapter;

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ...

        recyclerView = findViewById(R.id.rv_stock_updates);

        recyclerView.setHasFixedSize(true);
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);

        stockDataAdapter = new StockDataAdapter();
        recyclerView.setAdapter(stockDataAdapter);

Adding a RecyclerView

Java class 'StockDataAdapter'

package com.ianmunene.rxjava;


import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

public class StockDataAdapter extends RecyclerView.Adapter<StockUpdateViewHolder> {
    private final List<String> data =  new ArrayList<>();
    @Override
    public StockUpdateViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.stock_update_item,
                parent, false);
        return new StockUpdateViewHolder(view);
    }

    @Override
    public void onBindViewHolder(StockUpdateViewHolder holder, int position) {
        holder.stockSymbol.setText(data.get(position));
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    public void add(String stockSymbol) {
        this.data.add(stockSymbol);
        notifyItemInserted(data.size() - 1);
    }
}

Adding a RecyclerView

Java class 'StockUpdateViewHolder'

package com.ianmunene.rxjava;


import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;

class StockUpdateViewHolder extends RecyclerView.ViewHolder {
    @BindView(R.id.tv_stock_item_symbol)
    TextView stockSymbol;

    public StockUpdateViewHolder(View itemView) {
        super(itemView);
        ButterKnife.bind(this, itemView);

    }
}

Adding a RecyclerView

Create layout file 'stock_update_item.xml'

...
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:layout_margin="3dp">

    <TextView android:id="@+id/tv_stock_item_symbol"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="20dp"/>

</android.support.v7.widget.CardView>

Adding a RecyclerView

populate our data in MainActivity

...
                Observable.just("APPL" ,"GOOGL", "TWTR")
                                .subscribe(new Consumer<String>() {
                                    @Override
                                    public void accept(String stockSymbol) throws Exception {
                        stockDataAdapter.add(stockSymbol);
                    }
                });
    }
}

Adding a RecyclerView

populate our data in MainActivity

...
                Observable.just("APPL" ,"GOOGL", "TWTR")
                                .subscribe(new Consumer<String>() {
                                    @Override
                                    public void accept(String stockSymbol) throws Exception {
                        stockDataAdapter.add(stockSymbol);
                    }
                });
    }
}

deck

By ian munene

Made with Slides.com

deck

  • 410

More from ian munene