An Android layout class that uses the Cassowary incremental constraint solving algorithm
Java
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
gradle/wrapper
library
screenshots
.gitignore
LICENSE
README.md
build.gradle
gradle.properties
gradlew
gradlew.bat
settings.gradle

README.md

Cassowary Layout for Android

Demo video

Watch video on YouTube

Quickstart

Add the jCenter repo to the build.gradle in the root of your project

repositories {
    jcenter()
}

Add the "Cassowary Layout for Android" and Cassowary dependencies to the build.gradle for your app or library.

dependencies {
    // your other dependencies
    compile 'no.agens:cassowary-layout:0.0.2@aar'
    compile 'org.pybee:cassowary:0.0.1'
}

#Examples

The example app included in this repo contains a variety of different usage examples.

Hello World

###Layout

The layout will be familiar to users of RelativeLayout and LinearLayout. The cassowary layout defined in activity_xml_layout_demo.xml in the example app has four children, each assigned ids and colors. Constraints are used to describe the position of the children. The constraints are specified by the cassowary:constraints attribute.

<?xml version="1.0" encoding="utf-8"?>
<no.agens.cassowarylayout.CassowaryLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cassowary="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="no.agens.cassowarylayoutdemo.XmlLayoutDemo"
    cassowary:constraints="@array/xml_demo">

    <TextView
        android:id="@+id/blue"
        android:background="#FF0000FF"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cassowary"
        android:textColor="#FFF"/>

    <TextView
        android:id="@+id/green"
        android:background="#FF00FF00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Layout"
        android:textColor="#FF0"/>

    <TextView
        android:id="@+id/red"
        android:background="#FFFF0000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:textColor="#FFF"/>

    <TextView
        android:id="@+id/purple"
        android:background="#FFFF00FF"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World"
        android:textColor="#FFF"/>

</no.agens.cassowarylayout.CassowaryLayout>

Constraints

In the demo app, the constraints are defined in values/constraints.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="xml_demo">
        <item>blue.left == container.width / 10</item>
        <item>blue.top == container.height / 10</item>
        <item>blue.width == (container.width + container.height) / 10</item>
        <item>blue.height == blue.width</item>

        <item>green.right == container.width - (container.width / 10)</item>
        <item>green.top == container.height / 10</item>
        <item>green.width == blue.width</item>
        <item>green.height == blue.height</item>

        <item>red.left == container.width / 10</item>
        <item>red.bottom == container.height - (container.height / 10)</item>
        <item>red.width == blue.width</item>
        <item>red.height == blue.width</item>

        <item>purple.right == container.width - (container.width / 10)</item>
        <item>purple.bottom == container.height - (container.height / 10)</item>
        <item>purple.width == blue.width</item>
        <item>purple.height == blue.width</item>

    </string-array>
</resources>

We can see that the positions of the views are functions of the container width and height. For example, blue.left is defined as 1/10 of the container width.

Note that the view width and height are functions of the container width and height too. blue.width == (container.width + container.height) / 10 (The bigger the screen, the bigger the child views)

How it looks: xml demo

Contact

You can reach me on twitter as @alexbirkett.

Dependencies

###Cassowary This project depends on the pybee cassowary fork.

Who's behind this?

Agens.no a company situated in Oslo, Norway.

Agens | Digital craftsmanship