Realm Mobile Platform: Offline-first TaskManager app – Intro

Here is the preview of the app that we are going to develop during the series.

1. Technology stack

Realm Mobile Platform

A flexible platform for creating offline-first, reactive mobile apps effortlessly.

This platform integrates two technologies we are going to use:

Realm Object Server
Realm Object Server (released around September 2016) is basically a backend responsible for realtime data synchronization, resolving conflicts in data changes, handling various events and authentication. In can be deployed on servers or in the cloud.

Realm Mobile Database
Realm Mobile Database is a cross-platform database, supporting both iOS and Android and it’s open source. For those who are familiar with SQLite database (default choice of persistence in Android) or ORM libraries like ORMLite/ActiveAndroid/GreenDao, you should know that in Realm gives no SQLite at all. Realm Mobile Database is a Zero-copy object store. Sounds familiar? Probably not (I had not known that before attending the Droidcon NYC 2015 – Realm: Building a mobile database).

In this article we are going to use the Developer Edition of RPM.

Ubuntu 16.04. hosted on Amazon EC2

The instance of our Realm Object Server backend will be available through the Ubuntu instance.

2. Useful links

• Realm.io
• Realm on GitHub
• Realm documentation
• Droidcon NYC 2015 – Realm: Building a mobile database
• A Look Inside Realm’s Core DB Engine

3. TaskManager UI

Before getting to the “cool” stuff, we are going to prepare some basic UI for the app. However, if you are impatient (like I am), you can just checkout to commit 09adf4d in the TaskManager github repository and start from there.

3.1 Gradle

Core dependencies for UI.

compile 'com.android.support:appcompat-v7:25.0.1'
compile "com.android.support:support-annotations:25.0.1"
compile "com.android.support:support-v13:25.0.1"
compile "com.android.support:design:25.0.1"
compile "com.android.support:recyclerview-v7:25.0.1"
compile "com.android.support:cardview-v7:25.0.1"
compile "com.jakewharton:butterknife:7.0.1"
compile 'com.gordonwong:material-sheet-fab:1.2.1' //Library containing the fab button

3.2 Main screen UI

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

        </FrameLayout>

        <include layout="@layout/toolbar" />

        <include layout="@layout/fab" />

    </android.support.design.widget.CoordinatorLayout>

    <include layout="@layout/sheet" />

</RelativeLayout>

toolbar.xml
Basic toolbar with a title.

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/title"
                    android:text="TaskManager"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#fff"
                    android:textStyle="bold"
                    android:textSize="16sp"
                    android:singleLine="true" />


            </FrameLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
</merge>

fab.xml
Custom implementation of fab button (copied from this sample)

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <pl.adriankremski.realmtaskmanager.views.Fab
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_create_white_24dp"
        app:layout_anchor="@id/recycler"
        app:layout_anchorGravity="bottom|right|end"/>
</merge>

Fab.java

public class Fab extends FloatingActionButton implements AnimatedFab {

    private static final int FAB_ANIM_DURATION = 200;

    public Fab(Context context) {
        super(context);
    }

    public Fab(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public Fab(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     * Shows the FAB.
     */
    @Override
    public void show() {
        show(0, 0);
    }

    /**
     * Shows the FAB and sets the FAB's translation.
     *
     * @param translationX translation X value
     * @param translationY translation Y value
     */
    @Override
    public void show(float translationX, float translationY) {
        // Set FAB's translation
        setTranslation(translationX, translationY);

        // Only use scale animation if FAB is hidden
        if (getVisibility() != View.VISIBLE) {
            // Pivots indicate where the animation begins from
            float pivotX = getPivotX() + translationX;
            float pivotY = getPivotY() + translationY;

            ScaleAnimation anim;
            // If pivots are 0, that means the FAB hasn't been drawn yet so just use the
            // center of the FAB
            if (pivotX == 0 || pivotY == 0) {
                anim = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f,
                        Animation.RELATIVE_TO_SELF, 0.5f);
            } else {
                anim = new ScaleAnimation(0, 1, 0, 1, pivotX, pivotY);
            }

            // Animate FAB expanding
            anim.setDuration(FAB_ANIM_DURATION);
            anim.setInterpolator(getInterpolator());
            startAnimation(anim);
        }
        setVisibility(View.VISIBLE);
    }

    /**
     * Hides the FAB.
     */
    @Override
    public void hide() {
        // Only use scale animation if FAB is visible
        if (getVisibility() == View.VISIBLE) {
            // Pivots indicate where the animation begins from
            float pivotX = getPivotX() + getTranslationX();
            float pivotY = getPivotY() + getTranslationY();

            // Animate FAB shrinking
            ScaleAnimation anim = new ScaleAnimation(1, 0, 1, 0, pivotX, pivotY);
            anim.setDuration(FAB_ANIM_DURATION);
            anim.setInterpolator(getInterpolator());
            startAnimation(anim);
        }
        setVisibility(View.INVISIBLE);
    }

    private void setTranslation(float translationX, float translationY) {
        animate().setInterpolator(getInterpolator()).setDuration(FAB_ANIM_DURATION)
                .translationX(translationX).translationY(translationY);
    }

    private Interpolator getInterpolator() {
        return AnimationUtils.loadInterpolator(getContext(), R.interpolator.msf_interpolator);
    }
}

sheet.xml
Sheet for adding new tasks in our application.

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!-- Overlay that dims the screen -->
    <com.gordonwong.materialsheetfab.DimOverlayFrameLayout
        android:id="@+id/overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Circular reveal container for the sheet -->
    <io.codetail.widget.RevealLinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="end|bottom"
        android:orientation="vertical">

        <!-- Sheet that contains your items -->
        <android.support.v7.widget.CardView
            android:id="@+id/fab_sheet"
            android:layout_width="350dp"
            android:layout_height="200dp"
            android:layout_gravity="center_horizontal">

            <EditText
                android:id="@+id/text"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_gravity="top"
                android:gravity="top|left"
                android:inputType="textMultiLine"
                android:lines="4"
                android:maxLines="6"
                android:minLines="4"
                android:singleLine="false" />

            <Button
                android:id="@+id/add_task"
                android:background="@drawable/ripple"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="bottom"
                android:textColor="#fff"
                android:textStyle="bold"
                android:text="Add task"
                android:textAllCaps="true" />

        </android.support.v7.widget.CardView>
    </io.codetail.widget.RevealLinearLayout>
</merge>

3.3 MainActivity

Finally, let’s connect everything in our MainActivity.

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.recycler)
    RecyclerView recyclerView;

    @Bind(R.id.fab)
    Fab fab;

    @Bind(R.id.fab_sheet)
    View sheetView;

    @Bind(R.id.overlay)
    View overlayView;

    @Bind(R.id.text)
    TextView textInputField;

    private MaterialSheetFab materialSheetFab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        Toolbar toolbar = ButterKnife.findById(this, R.id.toolbar);
        fab.setBackgroundTintList(ContextCompat.getColorStateList(this, R.color.colorPrimary));
        setSupportActionBar(toolbar);
        setupMaterialSheetFab();
    }

    private void setupMaterialSheetFab() {
        int sheetColor = ContextCompat.getColor(this, R.color.background_light);
        int fabColor = ContextCompat.getColor(this, R.color.colorPrimary);

        materialSheetFab = new MaterialSheetFab(fab, sheetView, overlayView,
                sheetColor, fabColor);

        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) sheetView.getLayoutParams();
        Point size = new Point();
        getWindowManager().getDefaultDisplay().getSize(size);
        params.width = (int) (size.x * 0.9); // we don't want our sheet to cover whole width of the screen
        sheetView.setLayoutParams(params);
    }

    @OnClick(R.id.add_task)
    public void addTask() {
        if (materialSheetFab.isSheetVisible()) {
            materialSheetFab.hideSheet();
        }
    }

    @Override
    public void onBackPressed() {
        if (materialSheetFab.isSheetVisible()) {
            materialSheetFab.hideSheet();
        } else {
            super.onBackPressed();
        }
    }
}

Result

3.4 Managing tasks

Since our basic UI of the main screen is done, we can now proceed to implement one of our main functionalities. To do that, we are going to define the Task model, corresponding TaskRowHolder, and finally the TaskAdapter. These classes are very simple, so I guess that no explanation is needed.

Task

public class Task {

    private boolean completed;
    private String text;

    public Task(String text) {
        this.text = text;
    }

    public boolean isCompleted() {
        return completed;
    }

    public void setCompleted(boolean completed) {
        this.completed = completed;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }
}

TaskRowHolder

public class TaskRowHolder extends RecyclerView.ViewHolder {

    @Bind(R.id.task_name)
    TextView taskNameLabel;

    @Bind(R.id.checkbox)
    CheckBox checkBox;

    private Task task;

    public TaskRowHolder(View itemView) {
        super(itemView);
        ButterKnife.bind(this, itemView);
        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                task.setCompleted(isChecked);
            }
        });
    }

    public void setTask(Task task) {
        this.task = task;
        taskNameLabel.setText(task.getText());
        checkBox.setChecked(task.isCompleted());
    }
}

TaskAdapter

public class TaskAdapter extends RecyclerView.Adapter<TaskRowHolder> {

    private List<Task> tasks = new LinkedList<>();

    public void addTask(Task task) {
        tasks.add(0, task);
        notifyItemInserted(0);
    }

    @Override
    public TaskRowHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_task_row, parent, false);
        return new TaskRowHolder(itemView);
    }

    @Override
    public void onBindViewHolder(TaskRowHolder holder, int position) {
        holder.setTask(tasks.get(position));
    }

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

    public void removeTask(int position) {
        tasks.remove(position);
        notifyItemRemoved(position);
    }
}

view_task_row.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="4dp"
    card_view:cardCornerRadius="4dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:orientation="horizontal"
        android:padding="8dp">

        <TextView
            android:id="@+id/task_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="8dp"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@id/checkbox"
            android:fontFamily="sans-serif-light"
            android:textSize="18sp" />

        <CheckBox
            android:id="@+id/checkbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="8dp" />

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

Now we need to connect our code to MainActivity.

public class MainActivity extends AppCompatActivity {

    ...

    private TaskAdapter taskAdapter = new TaskAdapter();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...

        recyclerView.setAdapter(taskAdapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(getBaseContext()));
    }

    ...

    @OnClick(R.id.add_task)
    public void addTask() {
        ...

        Task newTask = new Task(textInputField.getText().toString());
        textInputField.setText("");
        taskAdapter.addTask(newTask);
    }
}

Result

3.5 Login screen UI

We need some kind of authentication since our data will be connected to particular users. Therefore, in one of the incoming posts we are going to implement the auth logic using Realm (yes, Realm provides this feature :)).
However, we will also need the UI part of login to collect the user data.

A pretty simple layout of the login screen. It will have two fields (username + password) and two actions (register + login).

login_activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <TextView
        android:id="@+id/title"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:paddingTop="10dp"
        android:gravity="center"
        android:textStyle="bold"
        android:textColor="@color/colorAccent"
        android:text="TaskManager"/>

    <LinearLayout
        android:layout_below="@id/title"
        android:id="@+id/form"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:orientation="vertical"
        android:paddingBottom="10dp"
        android:paddingTop="16dp">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <AutoCompleteTextView
                android:id="@+id/username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="test@gmail.com"
                android:hint="Login"
                android:inputType="textAutoComplete"
                android:maxLines="1"
                android:singleLine="true" />

        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="test"
                android:hint="Password"
                android:imeActionId="@+id/log_in"
                android:imeActionLabel=""
                android:imeOptions="actionUnspecified"
                android:inputType="textPassword"
                android:maxLines="1"
                android:singleLine="true" />

        </android.support.design.widget.TextInputLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginTop="16dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/register"
                style="?android:textAppearanceSmall"
                android:layout_weight="0.5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Register"
                android:textStyle="bold" />

            <Button
                android:id="@+id/login"
                style="?android:textAppearanceSmall"
                android:layout_weight="0.5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Login"
                android:textStyle="bold" />
        </LinearLayout>

    </LinearLayout>

    <ProgressBar
        android:layout_below="@id/form"
        android:id="@+id/progress"
        android:layout_centerHorizontal="true"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:visibility="gone"
        tools:visibility="visible" />
</RelativeLayout>

Out Login Screen implementation is also really basic, but we will come back to it later.

LoginActivity

public class LoginActivity extends AppCompatActivity {

    @Bind(R.id.username)
    TextView usernameLabel;

    @Bind(R.id.password)
    TextView passwordLabel;

    @Bind(R.id.progress)
    View progressView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login_activity);
        ButterKnife.bind(this);
    }

    @OnClick(R.id.login)
    public void login() {
        showMainScreen();
    }

    private void showMainScreen() {
        Intent intent = new Intent(this, MainActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
        startActivity(intent);
    }

    @OnClick(R.id.register)
    public void register() {
    }
}

Don’t forget to update AndroidManifest!

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="pl.adriankremski.taskmanager">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".LoginActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        ...

    </application>

</manifest>

Result

Thanks for reading!

The next part of the series is already available!
Part 2: REALM MOBILE PLATFORM: OFFLINE-FIRST TASKMANAGER APP – BASICS OF REALM