• Stars
    star
    8,517
  • Rank 4,304 (Top 0.09 %)
  • Language
    Java
  • License
    Apache License 2.0
  • Created over 8 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Epoxy is an Android library for building complex screens in a RecyclerView

Build Status Maven Central GitHub license GitHub contributors

Epoxy

Epoxy is an Android library for building complex screens in a RecyclerView. Models are automatically generated from custom views or databinding layouts via annotation processing. These models are then used in an EpoxyController to declare what items to show in the RecyclerView.

This abstracts the boilerplate of view holders, diffing items and binding payload changes, item types, item ids, span counts, and more, in order to simplify building screens with multiple view types. Additionally, Epoxy adds support for saving view state and automatic diffing of item changes.

We developed Epoxy at Airbnb to simplify the process of working with RecyclerViews, and to add the missing functionality we needed. We now use Epoxy for most of the main screens in our app and it has improved our developer experience greatly.

Installation

Gradle is the only supported build configuration, so just add the dependency to your project build.gradle file:

dependencies {
  implementation "com.airbnb.android:epoxy:$epoxyVersion"
  // Add the annotation processor if you are using Epoxy's annotations (recommended)
  annotationProcessor "com.airbnb.android:epoxy-processor:$epoxyVersion"
}

Replace the variable $epoxyVersion with the latest version : Maven Central

See the releases page for up to date release versions and details

Kotlin

If you are using Kotlin you should also add

apply plugin: 'kotlin-kapt'

kapt {
    correctErrorTypes = true
}

so that AutoModel annotations work properly. More information here

Also, make sure to use kapt instead of annotationProcessor in your dependencies in the build.gradle file.

Library Projects

If you are using layout resources in Epoxy annotations then for library projects add Butterknife's gradle plugin to your buildscript.

buildscript {
  repositories {
    mavenCentral()
   }
  dependencies {
    classpath 'com.jakewharton:butterknife-gradle-plugin:10.1.0'
  }
}

and then apply it in your module:

apply plugin: 'com.android.library'
apply plugin: 'com.jakewharton.butterknife'

Now make sure you use R2 instead of R inside all Epoxy annotations.

@ModelView(defaultLayout = R2.layout.view_holder_header)
public class HeaderView extends LinearLayout {
   ....
}

This is not necessary if you don't use resources as annotation parameters, such as with custom view models.

Basic Usage

There are two main components of Epoxy:

  1. The EpoxyModels that describe how your views should be displayed in the RecyclerView.
  2. The EpoxyController where the models are used to describe what items to show and with what data.

Creating Models

Epoxy generates models for you based on your view or layout. Generated model classes are suffixed with an underscore (_) are used directly in your EpoxyController classes.

From Custom Views

Add the @ModelView annotation on a view class. Then, add a "prop" annotation on each setter method to mark it as a property for the model.

@ModelView(autoLayout = Size.MATCH_WIDTH_WRAP_HEIGHT)
public class HeaderView extends LinearLayout {

  ... // Initialization omitted

  @TextProp
  public void setTitle(CharSequence text) {
    titleView.setText(text);
  }
}

A HeaderViewModel_ is then generated in the same package.

More Details

From DataBinding

If you use Android DataBinding you can simply set up your xml layouts like normal:

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable name="title" type="String" />
    </data>

    <TextView
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:text="@{title}" />
</layout>

Then, create an interface or class in any package and add an EpoxyDataBindingLayouts annotation to declare your databinding layouts.

package com.airbnb.epoxy.sample;

import com.airbnb.epoxy.EpoxyDataBindingLayouts;

@EpoxyDataBindingLayouts({R.layout.header_view, ... // other layouts })
interface EpoxyConfig {}

From this layout name Epoxy generates a HeaderViewBindingModel_.

More Details

From ViewHolders

If you use xml layouts without databinding you can create a model class to do the binding.

@EpoxyModelClass(layout = R.layout.header_view)
public abstract class HeaderModel extends EpoxyModelWithHolder<Holder> {
  @EpoxyAttribute String title;

  @Override
  public void bind(Holder holder) {
    holder.header.setText(title);
  }

  static class Holder extends BaseEpoxyHolder {
    @BindView(R.id.text) TextView header;
  }
}

A HeaderModel_ class is generated that subclasses HeaderModel and implements the model details.

More Details

Using your models in a controller

A controller defines what items should be shown in the RecyclerView, by adding the corresponding models in the desired order.

The controller's buildModels method declares which items to show. You are responsible for calling requestModelBuild whenever your data changes, which triggers buildModels to run again. Epoxy tracks changes in the models and automatically binds and updates views.

As an example, our PhotoController shows a header, a list of photos, and a loader (if more photos are being loaded). The controller's setData(photos, loadingMore) method is called whenever photos are loaded, which triggers a call to buildModels so models representing the state of the new data can be built.

public class PhotoController extends Typed2EpoxyController<List<Photo>, Boolean> {
    @AutoModel HeaderModel_ headerModel;
    @AutoModel LoaderModel_ loaderModel;

    @Override
    protected void buildModels(List<Photo> photos, Boolean loadingMore) {
      headerModel
          .title("My Photos")
          .description("My album description!")
          .addTo(this);

      for (Photo photo : photos) {
        new PhotoModel()
           .id(photo.id())
           .url(photo.url())
           .addTo(this);
      }

      loaderModel
          .addIf(loadingMore, this);
    }
  }

Or with Kotlin

An extension function is generated for each model so we can write this:

class PhotoController : Typed2EpoxyController<List<Photo>, Boolean>() {

    override fun buildModels(photos: List<Photo>, loadingMore: Boolean) {
        header {
            id("header")
            title("My Photos")
            description("My album description!")
        }

        photos.forEach {
            photoView {
                id(it.id())
                url(it.url())
            }
        }

        if (loadingMore) loaderView { id("loader") }
    }
}

Integrating with RecyclerView

Get the backing adapter off the EpoxyController to set up your RecyclerView:

MyController controller = new MyController();
recyclerView.setAdapter(controller.getAdapter());

// Request a model build whenever your data changes
controller.requestModelBuild();

// Or if you are using a TypedEpoxyController
controller.setData(myData);

If you are using the EpoxyRecyclerView integration is easier.

epoxyRecyclerView.setControllerAndBuildModels(new MyController());

// Request a model build on the recyclerview when data changes
epoxyRecyclerView.requestModelBuild();

Kotlin

Or use Kotlin Extensions to simplify further and remove the need for a controller class.

epoxyRecyclerView.withModels {
        header {
            id("header")
            title("My Photos")
            description("My album description!")
        }

        photos.forEach {
            photoView {
                id(it.id())
                url(it.url())
            }
        }

        if (loadingMore) loaderView { id("loader") }
    }
}

More Reading

And that's it! The controller's declarative style makes it very easy to visualize what the RecyclerView will look like, even when many different view types or items are used. Epoxy handles everything else. If a view only partially changes, such as the description, only that new value is set on the view, so the system is very efficient

Epoxy handles much more than these basics, and is highly configurable. See the wiki for in depth documentation.

Documentation

See examples and browse complete documentation at the Epoxy Wiki

If you still have questions, feel free to create a new issue.

Min SDK

We support a minimum SDK of 14. However, Epoxy is based on the v7 support libraries so it should work with lower versions if you care to override the min sdk level in the manifest.

Contributing

Pull requests are welcome! We'd love help improving this library. Feel free to browse through open issues to look for things that need work. If you have a feature request or bug, please open a new issue so we can track it.

License

Copyright 2016 Airbnb, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

More Repositories

1

javascript

JavaScript Style Guide
JavaScript
145,177
star
2

lottie-android

Render After Effects animations natively on Android and iOS, Web, and React Native
Java
35,010
star
3

lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
JavaScript
30,535
star
4

lottie-ios

An iOS library to natively render After Effects vector animations
Swift
25,760
star
5

visx

🐯 visx | visualization components
TypeScript
19,315
star
6

react-sketchapp

render React components to Sketch ⚛️💎
TypeScript
14,939
star
7

react-dates

An easily internationalizable, mobile-friendly datepicker library for the web
JavaScript
11,630
star
8

css

A mostly reasonable approach to CSS and Sass.
6,937
star
9

mavericks

Mavericks: Android on Autopilot
Kotlin
5,829
star
10

hypernova

A service for server-side rendering your JavaScript views
JavaScript
5,821
star
11

knowledge-repo

A next-generation curated knowledge sharing platform for data scientists and other technical professions.
Python
5,478
star
12

ts-migrate

A tool to help migrate JavaScript code quickly and conveniently to TypeScript
TypeScript
5,405
star
13

aerosolve

A machine learning package built for humans.
Scala
4,795
star
14

lottie

Lottie documentation for http://airbnb.io/lottie.
HTML
4,457
star
15

DeepLinkDispatch

A simple, annotation-based library for making deep link handling better on Android
Java
4,380
star
16

ruby

Ruby Style Guide
Ruby
3,711
star
17

polyglot.js

Give your JavaScript the ability to speak many languages.
JavaScript
3,706
star
18

MagazineLayout

A collection view layout capable of laying out views in vertically scrolling grids and lists.
Swift
3,296
star
19

native-navigation

Native navigation library for React Native applications
Java
3,128
star
20

streamalert

StreamAlert is a serverless, realtime data analysis framework which empowers you to ingest, analyze, and alert on data from any environment, using datasources and alerting logic you define.
Python
2,847
star
21

infinity

UITableViews for the web (DEPRECATED)
JavaScript
2,802
star
22

HorizonCalendar

A declarative, performant, iOS calendar UI component that supports use cases ranging from simple date pickers all the way up to fully-featured calendar apps.
Swift
2,772
star
23

airpal

Web UI for PrestoDB.
Java
2,757
star
24

swift

Airbnb's Swift Style Guide
Markdown
2,407
star
25

Showkase

🔦 Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements
Kotlin
2,093
star
26

synapse

A transparent service discovery framework for connecting an SOA
Ruby
2,072
star
27

paris

Define and apply styles to Android views programmatically
Kotlin
1,907
star
28

AirMapView

A view abstraction to provide a map user interface with various underlying map providers
Java
1,870
star
29

react-with-styles

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation
JavaScript
1,704
star
30

rheostat

Rheostat is a www, mobile, and accessible slider component built with React
JavaScript
1,692
star
31

binaryalert

BinaryAlert: Serverless, Real-time & Retroactive Malware Detection.
Python
1,405
star
32

epoxy-ios

Epoxy is a suite of declarative UI APIs for building UIKit applications in Swift
Swift
1,201
star
33

nerve

A service registration daemon that performs health checks; companion to airbnb/synapse
Ruby
942
star
34

okreplay

📼 Record and replay OkHttp network interaction in your tests.
Groovy
782
star
35

chronon

Chronon is a data platform for serving for AI/ML applications.
Scala
731
star
36

RxGroups

Easily group RxJava Observables together and tie them to your Android Activity lifecycle
Java
694
star
37

react-outside-click-handler

OutsideClickHandler component for React.
JavaScript
612
star
38

ResilientDecoding

This package makes your Decodable types resilient to decoding errors and allows you to inspect those errors.
Swift
595
star
39

babel-plugin-dynamic-import-node

Babel plugin to transpile import() to a deferred require(), for node
JavaScript
575
star
40

kafkat

KafkaT-ool
Ruby
503
star
41

babel-plugin-dynamic-import-webpack

Babel plugin to transpile import() to require.ensure, for Webpack
JavaScript
499
star
42

babel-plugin-inline-react-svg

A babel plugin that optimizes and inlines SVGs for your React Components.
JavaScript
473
star
43

BuckSample

An example app showing how Buck can be used to build a simple iOS app.
Objective-C
461
star
44

lunar

🌗 React toolkit and design language for Airbnb open source and internal projects.
TypeScript
461
star
45

SpinalTap

Change Data Capture (CDC) service
Java
430
star
46

artificial-adversary

🗣️ Tool to generate adversarial text examples and test machine learning models against them
Python
394
star
47

dynein

Airbnb's Open-source Distributed Delayed Job Queueing System
Java
383
star
48

hammerspace

Off-heap large object storage
Ruby
369
star
49

trebuchet

Trebuchet launches features at people
Ruby
312
star
50

reair

ReAir is a collection of easy-to-use tools for replicating tables and partitions between Hive data warehouses.
Java
279
star
51

zonify

a command line tool for generating DNS records from EC2 instances
Ruby
270
star
52

ottr

Serverless Public Key Infrastructure Framework
Python
270
star
53

omniduct

A toolkit providing a uniform interface for connecting to and extracting data from a wide variety of (potentially remote) data stores (including HDFS, Hive, Presto, MySQL, etc).
Python
254
star
54

hypernova-react

React bindings for Hypernova.
JavaScript
248
star
55

smartstack-cookbook

The chef recipes for running and testing Airbnb's SmartStack
Ruby
245
star
56

interferon

Signaling you about infrastructure or application issues
Ruby
239
star
57

babel-preset-airbnb

A babel preset for transforming your JavaScript for Airbnb
JavaScript
227
star
58

backpack

A pack of UI components for Backbone projects. Grab your backpack and enjoy the Views.
HTML
223
star
59

goji-js

React ❤️ Mini Program
TypeScript
218
star
60

react-with-direction

Components to provide and consume RTL or LTR direction in React
JavaScript
191
star
61

stemcell

Airbnb's EC2 instance creation and bootstrapping tool
Ruby
185
star
62

hypernova-ruby

Ruby client for Hypernova.
Ruby
141
star
63

kafka-statsd-metrics2

Send Kafka Metrics to StatsD.
Java
135
star
64

optica

A tool for keeping track of nodes in your infrastructure
Ruby
133
star
65

sparsam

Fast Thrift Bindings for Ruby
C++
124
star
66

js-shims

JS language shims used by Airbnb.
JavaScript
123
star
67

lottie-spm

Swift Package Manager support for Lottie, an iOS library to natively render After Effects vector animations
Ruby
122
star
68

bossbat

Stupid simple distributed job scheduling in node, backed by redis.
JavaScript
118
star
69

nimbus

Centralized CLI for JavaScript and TypeScript developer tools.
TypeScript
118
star
70

browser-shims

Browser and JS shims used by Airbnb.
JavaScript
117
star
71

twitter-commons-sample

A sample REST service based on Twitter Commons
Java
103
star
72

is-touch-device

Is the current JS environment a touch device?
JavaScript
90
star
73

rudolph

A serverless sync server for Santa, built on AWS
Go
79
star
74

hypernova-node

node.js client for Hypernova
JavaScript
73
star
75

plog

Fire-and-forget UDP logging service with custom Netty pipelines & extensive monitoring
Java
72
star
76

react-create-hoc

Create a React Higher-Order Component (HOC) following best practices.
JavaScript
67
star
77

vulnture

Python
67
star
78

cloud-maker

Building castles in the sky
Ruby
67
star
79

deline

An ES6 template tag that strips unwanted newlines from strings.
JavaScript
64
star
80

react-with-styles-interface-react-native

Interface to use react-with-styles with React Native
JavaScript
63
star
81

sputnik

Scala
63
star
82

mocha-wrap

Fluent pluggable interface for easily wrapping `describe` and `it` blocks in Mocha tests.
JavaScript
54
star
83

react-with-styles-interface-aphrodite

Interface to use react-with-styles with Aphrodite
JavaScript
54
star
84

eslint-plugin-react-with-styles

ESLint plugin for react-with-styles
JavaScript
49
star
85

sssp

Software distribution by way of S3 signed URLs
Haskell
47
star
86

alerts

An example alerts repo, for use with airbnb/interferon.
Ruby
46
star
87

apple-tv-auth

Example application to demonstrate how to build Apple TV style authentication.
Ruby
44
star
88

airbnb-spark-thrift

A library for loadling Thrift data into Spark SQL
Scala
42
star
89

jest-wrap

Fluent pluggable interface for easily wrapping `describe` and `it` blocks in Jest tests.
JavaScript
40
star
90

billow

Query AWS data without API credentials. Don't wait for a response.
Java
38
star
91

gosal

A Sal client written in Go
Go
35
star
92

backbone.baseview

DEPRECATED: A simple base view class for Backbone.View
JavaScript
34
star
93

anotherlens

News Deeply X Airbnb.Design - Another Lens
HTML
33
star
94

eslint-plugin-miniprogram

TypeScript
33
star
95

react-component-variations

JavaScript
33
star
96

react-with-styles-interface-css

📃 CSS interface for react-with-styles
JavaScript
32
star
97

transformpy

transformpy is a Python 2/3 module for doing transforms on "streams" of data
Python
29
star
98

appear

reveal terminal programs in the gui
Ruby
29
star
99

puppet-munki

Puppet
28
star
100

pool-hall

JavaScript
26
star