Build Better Mobile Apps with FirebaseUI

August 27, 2015

Designed to help native mobile developers quickly and easily develop Firebase apps, FirebaseUI eliminates bloat in your application code by providing native bindings to common UI controls.

FirebaseUI adds support to quickly hook a Firebase database reference or query to a ListView, GridView, RecyclerView on Android or a UITableView or UICollectionView iOS.

Start by creating an Android Firebase project or iOS Firebase project then follow our Android or iOS quickstarts below.

Android Quickstart

On Android, add the latest version of FirebaseUI to your build.gradle:

compile 'com.firebase:firebase-ui:0.2.0'

Resync your project and you’re ready to continue.

More information, including a more in-depth installation walkthrough, can be found on the FirebaseUI-Android README.

Once we’ve installed FirebaseUI, create a FirebaseListAdapter which binds a Firebase database reference or query to a ListAdapter and provides developers an easy way to populate ListView views with developer specified model objects (more information on using Java Objects is available in the docs).

Firebase.setAndroidContext(this);
Firebase ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");

mAdapter = new FirebaseListAdapter<ChatMessage>(this, ChatMessage.class, android.R.layout.two_line_list_item, ref) {
    @Override
    protected void populateView(View view, ChatMessage object) {
        /* Populate view with contents of the model object */
    }
};

mListView.setListAdapter(mAdapter);

If you want more examples, check out the Android README, or see our Android chat app example. The Javadoc is available here.

iOS Quickstart

On iOS, add the latest version of FirebaseUI to your podfile:

pod 'FirebaseUI', '~> 0.2.0'

If you’re using Swift, make sure to add:

platform :ios, '8.0'
use_frameworks!

pod install, then open the generated .xcworkspace.

More information, including a more in-depth installation walkthrough, can be found on the FirebaseUI-iOS README.

Once we’ve installed FirebaseUI, create a FirebaseTableViewDataSource. This datasource will provide cells and the associated FDataSnapshots (or a custom model object, a feature in beta) to populate UITableViewCells, a custom subclass, or even a custom XIB.

Firebase *ref = [Firebase alloc] initWithUrl:@"https://<YOUR-FIREBASE-APP>.firebaseio.com/chat"];

self.dataSource = [[FirebaseTableViewDataSource alloc] initWithRef:ref
                                                        modelClass:[FDataSnapshot class]
                                                         cellClass:[UITableViewCell class]
                                               cellReuseIdentifier:@""
                                                              view:self.tableView];

[self.dataSource populateCellWithBlock:^void(UITableViewCell *__nonnull cell, FDataSnapshot *__nonnull snap) {
    /* Populate cell with contents of the snapshot */
  }
}];

self.tableView.dataSource = self.dataSource;

let ref = Firebase(url: "https://<YOUR-FIREBASE-APP>.firebaseio-demo.com")

self.dataSource = FirebaseTableViewDataSource(ref: ref,
                                       modelClass: FDataSnapshot.self,
                                        cellClass: UITableViewCell.self,
                              cellReuseIdentifier: "",
                                             view: self.tableView)

self.dataSource.populateCellWithBlock { (cell: UITableViewCell, obj: NSObject) -> Void in
    let snap = obj as! FDataSnapshot // Force cast to an FDataSnapshot
    /* Populate cell with contents of the snapshot */
}

self.tableView.dataSource = self.dataSource

FirebaseUI can also be used to back a UICollectionView using the FirebaseCollectionViewDataSource.

If you want more examples, check out the iOS README, or see our iOS chat app example. The Appledoc is available here.

We’re working on making mobile development as effortless as possible, so we’re always looking for ways to improve development speed and reduce complexity. One major area that we hear a lot of developers struggle is around mobile authentication, which typically requires installation of third party SDKs and understanding lots of additional docs.

While we have login demo apps on Android and iOS that explain these processes, FirebaseUI 0.3 will incorporate a set of login helper classes and standard views to make adding authentication to your mobile apps simple.

Our long term strategy involves adding support for pagination, infinite scroll, and client side filtering. We’d also love to hear feature requests from you.

Submit a Pull Request!

Do you want to see those features added faster? Are you excited about making Firebase apps easier to develop? Is writing quality code your passion?

We’d love to have your help building and maintaining these libraries. Please submit issues for bugs and feature requests on Android and iOS, and pull requests are always welcome.

Lastly, if you’ve built anything, don’t be shy! Share your apps with us on Twitter @Firebase or in our Google Group—we’re excited to see what you build.

The Firebase Blog