Dev Ops, Docker, Infrastructure, Programming, Ruby Development

Ruby with Docker Compose as a Non-root User

3 Comments

EDIT 2021-04-01: When using ruby with docker compose, as noted by a commenter, bundle install should be run as the root user. I’d mistakenly set the user before running the bundle install layer. I’ve updated the code below to fix this. If you had problems before, try the updated examples.

I’ve recently begun experimenting with Docker and docker-compose in my Ruby development and am fairly pleased with the results. Building ruby with docker-compose keeps my environment clean while giving me a working rails tool set. I derived most of my workflow from this guide. While that served quite well as a starting place, one major annoyance cropped up again and again: my container ran as root.

The Problem at Hand

First, running as root in production creates an obvious security risk. Containers are supposed to isolate processes. However, history tells us that hackers find creative ways to “crash-out” of containers into the host operating system. If your process runs as root, hackers escalate to administrative privileges if they succeed.

Second, running code as root complicates your local development process. Rails creates temporary files. These files complicate cleanup on your local copy of the code. Further, you must specify special user parameters in order to run Rails commands, such as generators or migrations. These reasons alone motivated a change in process for me, regardless of security.

Goals

Let’s establish some goals going forward.

First, we will build a Dockerfile which can be shared between production and our development environment. This file will enforce consistency in how we build our production or development images, whether they run locally or in a production cluster.

Second, we will build an environment where containers envelope all of our Ruby and Rails tools. We will not install any Ruby or Rails tooling into our host operating system.

Third, we will run as a non-root user in both production and development. This measure limits our attack surface and helps us achieve our final goal.

Finally, we will set the user running on our local development instance as our own user that owns the checked out code. This process ensures that generated files remain consistent with the rest of our code files. Additionally, this user can run Rails generators, migrations, and other commands naively without specifying special UIDs. We’ll run our ruby with docker-compose to set up this development environment.

The Starting Point – An Imperfect Setup

Following the Docker guide on Rails applications lead to the creation of the following Dockerfile and docker-compose.yml files.

#Dockerfile
FROM ruby:2.6-alpine

LABEL maintainer="Aaron M. Bond"

ARG APP_PATH=/opt/myapp

RUN apk add --update --no-cache \
        bash \
        build-base \
        nodejs \
        sqlite-dev \
        tzdata \
        mysql-dev && \
      gem install bundler && \
      mkdir $APP_PATH 

COPY docker-entrypoint.sh /usr/bin

RUN chmod +x /usr/bin/docker-entrypoint.sh

WORKDIR $APP_PATH

COPY Gemfile* $APP_PATH/

RUN bundle install

COPY . $APP_PATH/

ENTRYPOINT ["docker-entrypoint.sh"]

EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

As a quick review, this file first pulls an image build for Ruby applications running the 2.6 family of Ruby versions. It then installs necessary operating system packages and creates an application folder.

Next it copies in an entrypoint script, which will be the default entry for any images created with docker run. (In my case, this command cleans up the Rails server pidfile and runs whatever command is passed.)

The build file then copies Gemfile* into the application folder and runs bundle install to install and compile necessary gems.

Finally, the file indicates its entrypoint, notes that port 3000 will be exposed, and sets up a default command argument to simply run rails server -b 0.0.0.0.

With no modifications, all of these steps will execute as root within the built image.

# docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      - MYSQL_ROOT_PASSWORD=somesecret
      - MYSQL_DATABASE=myapp
      - MYSQL_USER=myapp_user
      - MYSQL_PASSWORD=devtest
    volumes:
      - datavolume:/var/lib/mysql
  web:
    build:
      context: .
      dockerfile: Dockerfile
    command: bash -c "rm -f /tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/opt/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true

volumes:
  datavolume:

This docker-compose.yml file creates services for use in our development environment. (Another technology will handle production, such as a Kubernetes deployment.)

First, we define a db service (container), which utilizes the MySQL image from Docker Hub and passes some information specific to the image for database creation.

Second, we define a web service (container), which builds an image from our Dockerfile and mounts our local code directory over the top of the previous application directory. This should enable us to see simple changes instantaneously, without rebuilding the image.

The Cracks in the Facade

If you start here with your application and run docker-compose up, you’ll be able to see some of the issues that arise from root execution. The root process within the container will pollute your app’s tmp directory with root-owned files that make cleanup annoying.

Generators demonstrate a bigger problem. Assume we wanted to generate a new controller called Greetings with an action of hello (yes, I blatantly stole this example directly from the Ruby on Rails guide). The following command should create an ephemeral container with our image, run the rails generator, and remove the image (--rm) when complete.

docker-compose run --rm web bundle exec rails generate controller Greetings hello

This appears logical, but the command will result in a mess. The root user would now own all of the files generated by this command within our source code. We can solve this problem by adding a bit of a hack:

docker-compose run --rm --user $(id -u):$(id -g) web bundle exec rails generate controller Greetings hello

This offensive little command runs the id utility of Linux (twice) to get our UID and GID and passes that to the run command. Now, our generators will run using our own user identity. However, the ugliness of this command offends my delicate sensibilities.

Even after we complete our clunky development process, our local system administrator will definitely complain that our Rails server is running as root in our cluster.

Mitigation Step 1 – Adding an App-Specific User

To begin untangling ourselves from root, we must start by creating a non-root user within our image. This user should run our Rails server process and take over when the application-specific portions of the image are built. Take a look at the below, modified version of our Dockerfile to see how we add an app user.

#Dockerfile
FROM ruby:2.6-alpine

LABEL maintainer="Aaron M. Bond"

ARG APP_PATH=/opt/myapp
ARG APP_USER=appuser
ARG APP_GROUP=appgroup

RUN apk add --update --no-cache \
        bash \
        build-base \
        nodejs \
        sqlite-dev \
        tzdata \
        mysql-dev && \
      gem install bundler && \
      addgroup -S $APP_GROUP && \
      adduser -S -s /sbin/nologin -G $APP_GROUP $APP_USER && \
      mkdir $APP_PATH && \
      chown $APP_USER:$APP_GROUP $APP_PATH

COPY docker-entrypoint.sh /usr/bin

RUN chmod +x /usr/bin/docker-entrypoint.sh

WORKDIR $APP_PATH

COPY --chown=$APP_USER:$APP_GROUP Gemfile* $APP_PATH/

RUN bundle install

USER $APP_USER

COPY --chown=$APP_USER:$APP_GROUP . $APP_PATH/

ENTRYPOINT ["docker-entrypoint.sh"]

EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

Here, we’ve added some variables for an app user name and app group name under which we intend to run.

Our initial setup step, which still runs as root, uses addgroup and adduser to create the specified group and user. Additionally, after we’ve created our application path, we change the owner to said user and group.

Once we’ve completed other root tasks (such as pushing our entrypoint), the USER directive instructs Docker that all other RUN directives and the container execution itself should be run as our app user. We also add our app user and group as the --chown argument to the COPY directives which push our app into the container. If we built an image and ran this container right now, the app would execute as a new, non-root user.

While this is a fantastic first step and secures our application in production, we’ve missed the mark on making our development environment easier to use.

While appuser isn’t root, it’s still some random user within the container which doesn’t match our local machine’s user. Files are still going to be created as a non-matching user in the tmp directories and by any generator commands we run in containers.

Mitigation 2 – Making our App-Specific User Match the Development User

To relieve our development pain, we have to force our containers to act as our own host user when working with our source code. Fortunately for us, Linux sees users and groups only by their IDs.

In our images, we’ll have to explicitly set IDs for the UID and GID that the application (by default) will utilize. Then, in development, we’ll want to override that default with our own UID and GID.

Let’s start by adding more build arguments in the Dockerfile for our two ids and using those arguments in our addgroup and adduser commands.

#Dockerfile
FROM ruby:2.6-alpine

LABEL maintainer="Aaron M. Bond"

ARG APP_PATH=/opt/myapp
ARG APP_USER=appuser
ARG APP_GROUP=appgroup
ARG APP_USER_UID=7084
ARG APP_GROUP_GID=2001

RUN apk add --update --no-cache \
        bash \
        build-base \
        nodejs \
        sqlite-dev \
        tzdata \
        mysql-dev && \
      gem install bundler && \
      addgroup -g $APP_GROUP_GID -S $APP_GROUP && \
      adduser -S -s /sbin/nologin -u $APP_USER_UID -G $APP_GROUP $APP_USER && \
      mkdir $APP_PATH && \
      chown $APP_USER:$APP_GROUP $APP_PATH

COPY docker-entrypoint.sh /usr/bin

RUN chmod +x /usr/bin/docker-entrypoint.sh

WORKDIR $APP_PATH

COPY --chown=$APP_USER:$APP_GROUP Gemfile* $APP_PATH/

RUN bundle install

USER $APP_USER

COPY --chown=$APP_USER:$APP_GROUP . $APP_PATH/

ENTRYPOINT ["docker-entrypoint.sh"]

EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

Setting these IDs up as ARG directives with a default value opens the door to docker-compose.yml to override them. The numbers are not terribly important. You should pick IDs that are in the standard user and group id ranges. Also, by best practice, ensure your different apps have unique IDs from each other.

Next, we’ll add these arguments to the docker-compose.yml file.

# docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      - MYSQL_ROOT_PASSWORD=somesecret
      - MYSQL_DATABASE=myapp
      - MYSQL_USER=myapp_user
      - MYSQL_PASSWORD=devtest
    volumes:
      - datavolume:/var/lib/mysql
  web:
    build:
      context: .
      dockerfile: Dockerfile
      args:
        - APP_USER_UID=${APP_USER_UID}
        - APP_GROUP_GID=${APP_GROUP_GID}
    command: bash -c "rm -f /tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/opt/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true

volumes:
  datavolume:

Note that under the web service definition’s build key, we’ve added an args section referencing our two args. Here, we’re setting them as equal to environment variable values of the same name. Unfortunately, we can’t specify default environment variable values in the docker-compose.yml file; but, we can add a special file called .env that specifies these values.

#.env
APP_USER_UID=7084
APP_GROUP_GID=2001

As we’ve currently built everything, docker-compose up will still have the undesired behavior of running as a differing UID and GID; but, passing overriding values to those environment variables allows us to run as ourselves.

APP_USER_UID=$(id -u) APP_GROUP_GID=$(id -g) docker-compose up --build

After we’ve run the build a single time, our local development version of the image will execute as a user matching our UID and GID by default. Any docker-compose run commands we run after this step will execute properly.

However, I don’t want to have to remember this every time I rebuild this container image (or build any other container image). So, I will specify in my .bashrc file on my local machine that these two environment variables should always be set to myself.

#Added to the bottom of ~/.bashrc
export APP_USER_UID=$(id -u)
export APP_GROUP_GID=$(id -g)

So long as I am consistent in naming these variables in my Dockerfile and docker-compose.yml files of other projects, I will get a consistent environment for every project.

A Quick Aside

I want to highlight one problem that I ran into that, while specific to my environment, might bite someone else. Few people will see this issue, but for completeness, I’m noting it here.

When using the above setup, I ran into build failures when building my Docker image. Turns out, since my user on my development machine is an Active Directory user, the UID it utilizes is NOT within the sane range of Linux UIDs. The same was true of my group id.

abond@abondlintab01:~$ id -u
500000001
abond@abondlintab01:~$ id -g
500000003

Since Active Directory used such large IDs, I couldn’t utilize this user’s UID and GID for the container IDs. The build would fail on attempting to run addgroup.

$ APP_USER_UID=$(id -u) APP_GROUP_GID=$(id -g) docker-compose build
db uses an image, skipping
Building web
Step 1/18 : FROM ruby:2.6-alpine

...

Executing busybox-1.30.1-r2.trigger
OK: 268 MiB in 75 packages
Successfully installed bundler-2.1.0
1 gem installed
addgroup: number 500000003 is not in 0..256000 range
ERROR: Service 'web' failed to build: The command '/bin/sh -c apk add --update --no-cache         bash         build-base         nodejs         sqlite-dev         tzdata         mysql-dev         postgresql-dev &&       gem install bundler &&       addgroup -g $APP_GROUP_GID -S $APP_GROUP &&       adduser -S -u $APP_USER_UID -G $APP_GROUP $APP_USER &&       mkdir $APP_PATH &&       chown $APP_USER:$APP_GROUP $APP_PATH' returned a non-zero code: 1

I resolved this by creating another Linux user (not on the domain) with a sane UID which I use to develop Ruby apps. This shouldn’t be necessary for most users.

A Quick Review

Using Ruby with docker-compose can simplify your development processes and keep your environment slim.

However, running containers as root is a bad security practice. The default instructions given by Docker for Rails app development provide a functional setup, but ignore the security of root privileges. Further, running as root in dev complicates your workflow and your environment.

By creating a default app user and group with a specific UID and GID, you eliminate root processes in your container and make your production sysadmins happy.

To take it a step further, you can override that UID and GID on your machine to mach YOUR user and simplify your development workflow.

Docker and containers are great tools for development; but, finding environment settings and patterns can be difficult. Hopefully, this pattern helps someone out there as new running ruby with docker compose as I was when I started.

Continue Reading

Android Development, Programming

Android RecyclerViews – Advanced UI Interaction

No Comments

The Road Thus Far

So, previously I covered that the RecyclerView is a replacement for the ListView in Android that increases efficiency by “recycling” the view objects that are currently visible. While that’s great for efficiency, usability becomes more of a challenge as RecyclerViews are more divorced from the data they represent than ListViews were. Further, I demonstrated the ItemViewHolder pattern, which creates a data structure in which your view is contained and modified as data is swapped in and out while the user scrolls.

Android’s RecyclerView and Showing Data Changes

I demonstrated some extremely simple CRUD functionality with a button which allows us to add to our RecyclerView and update the view to display all contained items. However, what happens when one wants to do the other CRUD functionality? What if someone wants to update or delete a record and reflect that in the RecyclerView in real time? One can always modify the underlying dataset and reset the adapter on your RecyclerView. This leads to a bad user experience, though, since the view will reset back up to the top. Additionally, how do we interact by touching individual items? Since we don’t have an onItemClickListener (which makes sense, since the “item” in play may change every time the view is recycled), there doesn’t seem to be a convenient way to get the item out to work on it.

For updating, the ViewHolder has all of the access we need; but, deleting requires that we update the view of the whole set, not the one individual item. The solution to this issue is to flip the problem on its head and use an interface to inform some other object that data has changed and the RecyclerView must be updated to reflect it. This other object must have the scope to call methods on the RecyclerView. Our Activity is a good candidate to be the arbiter of this activity.

Updating Using ViewHolder as a Click Listener

For updates, it makes sense that the tapped view’s ViewHolder could handle the the click event. Is has access to redraw the view based on new data and could access the data to update it. Let’s implement the onClickListener interface to perform updates on a clicked view’s data from the ViewHolder.

public class SomeModelRecyclerViewAdapter
        extends RecyclerView.Adapter<SomeModelRecyclerViewAdapter.ViewHolder>{

    private List<SomeModel> data;

    public SomeModelRecyclerViewAdapter(List<SomeModel> data) {
        this.data = data;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.model_item, parent, false);
        ViewHolder holder = new ViewHolder(view);
        view.setOnClickListener(holder);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.someModel = data.get(position);
        holder.bindData();
    }

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

    public static class ViewHolder extends RecyclerView.ViewHolder
    implements View.OnClickListener {

        private static final SimpleDateFormat dateFormat =
                new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");

        SomeModel someModel;

        TextView modelNameLabel;
        TextView modelDateLabel;

        public SomeModel getSomeModel() {
            return someModel;
        }

        public void setSomeModel(SomeModel someModel) {
            this.someModel = someModel;
        }

        public ViewHolder(View itemView) {
            super(itemView);
        }

        public void bindData() {
            if (modelNameLabel == null) {
                modelNameLabel = (TextView) itemView.findViewById(R.id.modelNameLabel);
            }
            if (modelDateLabel == null) {
                modelDateLabel = (TextView) itemView.findViewById(R.id.modelDateLabel);
            }
            modelNameLabel.setText(someModel.name);
            modelDateLabel.setText(dateFormat.format(someModel.addedDate));
        }

        @Override
        public void onClick(View v) {
            someModel.addedDate = new Date();
            someModel.save();
            bindData();
        }
    }
}

So, here’s what has changed. The ViewHolder now implements View.OnClickListener. The implementation updates the record by changing the date to right now, saving the updated data, and re-binding the view.

    public static class ViewHolder extends RecyclerView.ViewHolder
    implements View.OnClickListener {

        ...

        @Override
        public void onClick(View v) {
            someModel.addedDate = new Date();
            someModel.save();
            bindData();
        }
    }

In addition, the RecyclerViewAdapter now sets the ViewHolder as the View‘s OnClickListener after it creates the ViewHolder instance.

public class SomeModelRecyclerViewAdapter
        extends RecyclerView.Adapter<SomeModelRecyclerViewAdapter.ViewHolder>{

    ...

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.model_item, parent, false);
        ViewHolder holder = new ViewHolder(view);
        view.setOnClickListener(holder);
        return holder;
    }

    ...

}

Dynamically Showing Deletions in Android’s RecyclerView

Reflecting the update of a single data item wasn’t quite as easy as adding one to the dataset; but, deleting an item presents new challenges still. We don’t want to delete the item and reset the whole UI, forcing the user to start at the top of what might be a very large list. Instead, we need an outside control structure with scope access to our RecyclerView to handle a deletion event and inform the UI to update.

To handle the messaging when an item is deleted, we’ll create a new interface called the SomeModelDeletedListener. This interface will enforce a single method: onSomeModelDeleted, which takes the model that has been deleted and the position in the RecyclerView that it currently occupies (and, hence, must vacate). It will be the responsibility of the assigned instance of the SomeModelDeletedListener to update the UI to reflect the data change.

public interface SomeModelDeletedListener {
    void onSomeModelDeleted(SomeModel model, int position);
}

Since our Android Activity handles our RecyclerView and other UI, it might make sense to delegate this responsibility to it. (Note, if you are using asynchronous calls via AsyncTask or thread handlers, the activity may no longer be the proper place to handle this event. This is just the simplest demonstration possible.) When the Android Activity receives a call that lets us know our item has been deleted, it should update the RecyclerView to illustrate this data change.

To tie it all together, we’ll add an onLongClickListener to allow our users to long press to delete data. The ViewHolder can handle the deletion from the database and notify the SomeModelDeletedListener that it had made that change.

Whoo, that’s a lot. Let’s put it into practice.

Let’s start at the long-press, which we’ll again handle in the RecyclerViewAdapter.ViewHolder. Here’s what we add to the class:

   public static class ViewHolder extends RecyclerView.ViewHolder
    implements View.OnClickListener, View.OnLongClickListener {

        ...

        SomeModelDeletedListener someModelDeletedListener;
        public SomeModelDeletedListener getSomeModelDeletedListener() {
            return someModelDeletedListener;
        }
        public void setSomeModelDeletedListener(SomeModelDeletedListener someModelDeletedListener) {
            this.someModelDeletedListener = someModelDeletedListener;
        }

        ...

        public ViewHolder(View itemView) {
            this(itemView, null);
        }

        public ViewHolder(View itemView, SomeModelDeletedListener someModelDeletedListener) {
            super(itemView);
            this.someModelDeletedListener = someModelDeletedListener;
        }

        ...

        @Override
        public boolean onLongClick(View view) {
            if (someModel != null) {
                // Deletion from the database
                someModel.delete();
                if (someModelDeletedListener != null) {
                    someModelDeletedListener.onSomeModelDeleted(someModel, getAdapterPosition());
                }
            }
            return true;
        }
   }

We’ve added an instance of our SomeModelDeletedListener to the class to handle deletions and a getter and setter for convenience. We’ve also added a constructor which takes both a View and a SomeModelDeletedListener to initialize. The other constructor we’ve modified to take the new one into effect. Lastly, we’ve implemented the View.OnLongClick method and added delete logic (including informing listener, if present) to occur when the user long-presses on the item.

We’ll also have to make some changes to the enclosing adapter to make sure all this get wired and passed through. Here are those changes:

public class SomeModelRecyclerViewAdapter
        extends RecyclerView.Adapter<SomeModelRecyclerViewAdapter.ViewHolder>{

    ...

    private SomeModelDeletedListener someModelDeletedListener;
    public SomeModelDeletedListener getSomeModelDeletedListener() {
        return someModelDeletedListener;
    }
    public void setSomeModelDeletedListener(SomeModelDeletedListener someModelDeletedListener) {
        this.someModelDeletedListener = someModelDeletedListener;
    }

    ...

    public SomeModelRecyclerViewAdapter(List<SomeModel> data) {
        this(data, null);
    }
    public SomeModelRecyclerViewAdapter(List<SomeModel> data,
                                        SomeModelDeletedListener someModelDeletedListener) {
        this.data = data;
        this.someModelDeletedListener = someModelDeletedListener;
    }

    ...

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.model_item, parent, false);
        ViewHolder holder = new ViewHolder(view, someModelDeletedListener);
        view.setOnClickListener(holder);
        view.setOnLongClickListener(holder);
        return holder;
    }

    ...
}

Similarly to the ViewHolder, we’ve added an instance of the SomeModelDeletedListener with getters, setters and proper constructors to handle it. Additionally, we’ve added the SomeModelDeletedListener to our constructor call for the ViewHolder. Finally, we’ve also set the ViewHolder as the LongClickListener for the View.

Lastly, we need to change our Activity into a proper SomeModelDeletedListener. Here are those changes:

public class MainActivity extends AppCompatActivity implements SomeModelDeletedListener{

    ...

    @Override
    public void onSomeModelDeleted(SomeModel model, int position) {
        if (modelList != null) {
            SomeModelRecyclerViewAdapter adapter =
                    (SomeModelRecyclerViewAdapter) modelList.getAdapter();
            adapter.notifyItemRemoved(position);
        }
    }
}

Here, we simply implement the interface and override the onSomeModelDeleted method. This method will update the UI by notifying it’s adapter to remove the specific item.

Extra Credit – Updating the In-Memory Data When Deleting

If you made all of the changes above, everything should work properly most of the time. However, if your Android ever redraws your app without attempting to go back to the database and re-fetch, your deleted item will suddenly reappear in the list. What gives?

Remember that your RecyclerViewAdapter has a List of SomeModel objects that it uses to draw. If you never update that list but redraw with the same data, your deleted items will magically reappear. The solution is to write a method which removes the item from the in-memory dataset and call it from your SomeModelDeletedListener. (A hint here: our SomeModelDeletedListener represents something that reacts to data being deleted from the database, not any of the in-memory structures.) Here’s the custom method example:

public class SomeModelRecyclerViewAdapter
        extends RecyclerView.Adapter<SomeModelRecyclerViewAdapter.ViewHolder>{

    ...

    private List<SomeModel> data;

    ...

    public void removeItemAt(int position) {
        data.remove(position);
    }

}

Now, to implement the behavior in the Android Activity, we modify our onSomeModelDeleted implementation:

public class MainActivity extends AppCompatActivity implements SomeModelDeletedListener{
    
    ...

    @Override
    public void onSomeModelDeleted(SomeModel model, int position) {
        if (modelList != null) {
            SomeModelRecyclerViewAdapter adapter =
                    (SomeModelRecyclerViewAdapter) modelList.getAdapter();
            adapter.removeItemAt(position);
            adapter.notifyItemRemoved(position);
        }
    }
}

While all of this code seems like a lot of work, it makes for an efficient handling of your views and a clean responsive UI, reflecting what the user expects to see with each action. The additional time is worth the cost, both because of the added efficiency of RecyclerView and because the old ListView method is considered deprecated by Android.

Continue Reading

Android Development

Android RecyclerView, ListView Replacement

No Comments

Android ListView, Inefficient but Convenient

When I first began using Android, back in the Jellybean days, displaying lists of data from a data source had a lovely widget that you could easily use called ListView. This widget was exceedingly convenient, as it provided an onItemClickListener for easy data interaction. onItemClickListener came back with the View that was tapped and the position in the data the view represented, allowing you to easily modify both.

The ListView has a major drawback: for every data item in your list, a View is generated. This won’t be an immediately obvious problem if you either have very few pieces of data or your views are light-weight. However, if you have a very large dataset or if you start to use heavier widgets (such as ImageViews), you can easily create a massive and sluggish UI that eats your memory and slows your device while not even being visible on the screen. Luckily, there’s a better way, the RecyclerView.

RecyclerView – The Efficient Alternative

The RecyclerView widget takes a much more practical approach: it will only inflate enough View objects to fill the screen (plus or minus a couple for smooth scrolling). As you slide up and down in the list, views are recycled as they exit the screen, reinflated with new data, and pushed back into the other end of the widget where you’ll see them. This solves the problem of mass data sets and heavy widgets crashing your app or making it slow to a crawl; however, this efficiency comes with a price: there’s now a disconnect between the View and the single piece of data (or datum) that it represents. Because of this disconnect, you have to write your own RecyclerViewAdapter to handle the data (instead of relying on the more generic ArrayAdapter, which worked very conveniently with ListView).

Additionally, the framework now enforces a pattern called the ViewHolder Pattern. In this pattern, a special class is generated that maintains the state of the View that displays a single piece of data. The ViewHolder class a static inner class, meaning that it’s memory light (the “static” portion of that is very important). The ViewHolder can also serve as a utility class, helping you handle interactions that affect pieces of data in the list.

Writing Your Custom RecyclerViewAdapter and ViewHolder Classes

The RecyclerViewAdapter is what provides data to a RecyclerView. Because of the strong adherence to the ViewHolder Pattern, there is a built in abstract class you must override as a static inner class to your adapter as your ViewHolder: RecyclerView.ViewHolder. Take a look at the following code:

public class SomeModelRecyclerViewAdapter
        extends RecyclerView.Adapter<SomeModelRecyclerViewAdapter.ViewHolder>{
 
    /**
     * A list of data that the recyclerview will display
     */
    private List<SomeModel> data;
 
    /***
     * Constructor to build the adapter
     * @param data the data to be displayed by the views
     */
    public SomeModelRecyclerViewAdapter(List<SomeModel> data) {
        this.data = data;
    }
 
    /***
     * Creating the view holder (only called the first time the view is generated)
     *
     * @param parent
     * @param viewType
     * @return
     */
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.model_item, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }
 
    /***
     * "Binding" the data to the view holder
     *
     * This function is what informs a holder that it's data has changed (ie, every)
     * time the view is recycled
     *
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.someModel = data.get(position);
        holder.bindData();
    }
 
    /***
     * Returns the size of our data list as the item count for the adapter
     *
     * @return
     */
    @Override
    public int getItemCount() {
        return data.size();
    }
 
    /***
     * The ViewHolder is our "Presenter"- it links the View and the data to display
     * and handles how to draw the visual presentation of the data on the View
     */
    public static class ViewHolder extends RecyclerView.ViewHolder{
 
        /***
         * A formatter to make our date readable
         */
        private static final SimpleDateFormat dateFormat =
                new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
 
        /***
         * The model (datum) CURRENTLY to be displayed by the view
         *
         * Note that this should be expected to change and the view will need to update to reflect
         * changed data.
         */
        SomeModel someModel;
 
        /***
         * A label from the view to display some info about the datum
         */
        TextView modelNameLabel;
        /***
         * Another label from the view
         */
        TextView modelDateLabel;
 
        /***
         * Getter for the datum.
         *
         * @return
         */
        public SomeModel getSomeModel() {
            return someModel;
        }
 
        /***
         * Setter for the datum
         *
         * @param someModel
         */
        public void setSomeModel(SomeModel someModel) {
            this.someModel = someModel;
        }
 
        /***
         * ViewHolder constructor takes a view that will be used to display a single datum
         * @param itemView
         */
        public ViewHolder(View itemView) {
            super(itemView);
        }
 
        /***
         * This is a function that takes the piece of data currently stored in someModel
         * and displays it using this ViewHolder's view.
         *
         * This will be called by the onBindViewHolder method of the adapter every time
         * a view is recycled
         */
        public void bindData() {
            if (modelNameLabel == null) {
                modelNameLabel = (TextView) itemView.findViewById(R.id.modelNameLabel);
            }
            if (modelDateLabel == null) {
                modelDateLabel = (TextView) itemView.findViewById(R.id.modelDateLabel);
            }
            modelNameLabel.setText(someModel.name);
            modelDateLabel.setText(dateFormat.format(someModel.addedDate));
        }
    }
}

Here are few things to notice about this sample. SomeModel is a piece of data (by “model” in this name, I’m referring to a data model as present in the Model, View, Controller pattern). The adapter I’ve created takes a list of these records as the data. In my examples, I’m using SugarOrm behind the scenes, but that shouldn’t be relevant to this demonstration.

R.layout.model_item refers to an XML layout. This layout represents a single listing of a SomeModel record within the RecyclerView.

I’ve also created a ViewHolder (extending RecyclerViewAdapter.ViewHolder). It takes a View in it’s constructor that it will use to display some data and has a SomeModel property (note the getters and setters) for a piece of data that will be displayed on the View. Note that I don’t take in the data as part of the constructor- this is to reinforce how the RecyclerView works: the View on the ViewHolder will never change; but, as the user scrolls, a new SomeModel instance may be passed as the data to display on the view.

So, what’s happening here?

When you create an instance of this adapter, pass some data and apply the adapter to a RecyclerView, the following happens: the RecyclerView starts generating enough Views to fill the available space on the screen. For each of these, it also calls the adapter’s onCreateViewHolder method to instantiate a ViewHolder. The function inflates the view using the given XML layout in preparation for some data and creates a ViewHolder to wrap the View. Note that the ViewHolder DOES NOT apply the data to the view here.

Next, the RecyclerView iterates through the data (using the getItemCount method to determine the end of the list) and displays the items currently visible by calling onBindViewHolder. In my example, I decided to be slightly less efficient and store the data item itself within the ViewHolder. Another way to handle this could have been to expose the TextView widgets that I wanted to use from the ViewHolder and set the text directly in the onBindViewHolder, rather than within the ViewHolder code itself. This code takes the data from our SomeModel instance and uses the View within the ViewHolder to represent this record visually.

As the user scrolls, Views that are pushed off screen are returned re-initialized with new data via the onBindViewHolder method and placed back into the RecyclerView on the opposite side.

Using the RecyclerViewAdapter in a RecyclerView

To use our newly minted adapter, we just need to create some data, instantiate our adapter, and apply it to a RecyclerView that is set up in our activity layouts. See the below code for an example:

public class MainActivity extends AppCompatActivity {

    EditText modelName;
    Button addModelButton;
    RecyclerView modelList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        modelName = (EditText) findViewById(R.id.modelName);
        addModelButton = (Button) findViewById(R.id.addModelButton);
        modelList = (RecyclerView) findViewById(R.id.modelList);
        addModelButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                SomeModel newRecord = new SomeModel();
                newRecord.name = modelName.getText().toString();
                newRecord.save();
                setupRecyclerView();
            }
        });
        setupRecyclerView();
    }

    private void setupRecyclerView() {
        List<SomeModel> allModels = SomeModel.listAll(SomeModel.class);
        SomeModelRecyclerViewAdapter adapter = new SomeModelRecyclerViewAdapter(allModels);
        modelList.setHasFixedSize(true);
        modelList.setLayoutManager(new LinearLayoutManager(this));
        modelList.setAdapter(adapter);
    }
}

In the above code, when our activity is created we pull the RecyclerView from the layout with findViewById into the modelList variable. Then, on the setupRecyclerView method call, we grab a list of SomeModels, instantiate an adapter with them and apply that the adapter to the modelList object.

Note that we have to inform the RecyclerView whether it has a fixed-size and we have to give it a layout manager. Layout managers are a bit beyond the scope of this post; but, a time you might want something other than a LinearLayoutManager is when you want to display your data as a grid. See the Creating Lists and Cards Android documentation for more information on Layout Managers.

You’ll notice that I also set up an EditText widget and Button to create new instance of SomeModel and then update the RecyclerView. This is the most basic and obvious way to update a RecyclerView- by setting up a new adapter instance and applying it to the view.

The result looks a lot like a ListView; but, it will perform better and affords more customization long term:

For completeness, here’s my model class SomeModel:

public class SomeModel extends SugarRecord{
    @Column(name="Name")
    public String name;
    @Column(name="AddedDate")
    public Date addedDate = new Date();
}

Additionally, here are my layouts for both the MainActivity and model_view:

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.aaronmbond.recyclerviewdilemaexample.MainActivity">

    <EditText
        android:id="@+id/modelName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        />

    <Button
        android:id="@+id/addModelButton"
        android:layout_alignParentStart="true"
        android:layout_below="@id/modelName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/addModelButtonText"
        />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/modelList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/addModelButton"
        android:layout_alignParentStart="true"
        />

</RelativeLayout>

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

    <TextView
        android:id="@+id/modelNameLabel"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <TextView
        android:id="@+id/modelDateLabel"
        android:layout_alignParentStart="true"
        android:layout_below="@id/modelNameLabel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</RelativeLayout>

Conclusion

While the Android ListView widget provided a lot of convenience when displaying a set of data, it did so at great cost to efficiency. The Android RecyclerView solves many of these problems, but requires a bit more care and feeding out of the box.

In my next post, I’ll cover more than just display. I’ll be covering how to update the RecyclerView to the latest data and how to handle users touching individual items within the list.

Continue Reading