Giter Site home page Giter Site logo

proteus's Introduction

: Android Layout Engine Build Status Build Status

Proteus is meant to be a drop-in replacement for Android’s LayoutInflater; but unlike the compiled XML layouts bundled in the APK, Proteus inflates layouts at runtime. With Proteus, you can control your Apps layout from the backend (no WebViews). Forget the boilerplate code to findViewById, cast it to a TextView, and then setText(). Proteus has runtime data bindings and formatters. Plugin in your own custom views and attributes and formatters.

Getting Started

gradle

// Add it in your root build.gradle at the end of repositories:
allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

// Add the dependency
dependencies {
        compile 'com.github.flipkart-incubator:proteus:4.2.0'
}

Include as a module

  • Clone the proteus in the project folder
git clone https://github.com/flipkart-incubator/proteus.git
  • Include the a project in you apps build.gradle file
dependencies {
  compile project('proteus:library')
}

How it works

Instead of writing layouts in XML, in proteus layouts are defined in JSON, which can be used to inflate native android UI at runtime. The JSON layouts can be hosted anywhere (on the device, on servers, etc.).

layout

{
  "type": "LinearLayout",
  "orientation": "vertical",
  "padding": "16dp",
  "children": [{
    "layout_width": "200dp",
    "gravity": "center",
    "type": "TextView",
    "text": "~{{user.profile.name}} ({{user.profile.experience}}$(number))"
  }, {
    "type": "HorizontalProgressBar",
    "layout_width": "200dp",
    "layout_marginTop": "8dp",
    "max": 6000,
    "progress": "$user.profile.experience"
  }]
}

data

{
  "user": {
    "profile": {
      "name": "John Doe",
      "experience": 4192
    }
  }
}

Java

ProteusView view = layoutBuilder.build(container, layout, data, 0, styles);
container.addView((View) view);

Get this

Setting up the Demo App

  • Install NodeJS here
  • open a terminal
  • cd into the project directory
  • run npm start
  • Start an AVD emulator
  • Install the Demo App

Ready to tinker

  • Tinker around with the layout and data
  • Hit the FAB to refresh the app.

Resources

Contributing

  1. Fork the repo
  2. Apply your changes
  3. Submit your pull request

License

Apache v2.0

Contributors

One click XML to JSON conversion plugin

Download this plugin for Android Studio. Once enabled, you can select any android XML resource file and go to Tools > Proteus > Convert XML to JSON

proteus's People

Contributors

adityasharat avatar thekirankumar avatar yasirmhd avatar kushalsharma avatar harpreetsinghflipkart avatar nikhil-fk avatar anirudhramanan avatar

Watchers

James Cloos avatar szn0212 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.