Monday, 23 May 2016

An implementation of Cassowary, a linear constraint based layout manager in Android.

Linear Layout is the most widely used layout manager in Android. Part of the reason is that the rendering of this layout is much faster than compared to a Relative Layout. This is because the Relative Layout manager always has to do two measure passes to align views properly. But the advantage of the Linear Layout is lessened while creating complex layout structures that often require multiple nested layout elements and nested weights (read as bad performance during rendering). As an attempt to solve this problem, we have introduced a LinearConstraintLayout manager that bases its roots on the Linear Layout manager, but the view elements can be rearranged by specifying constraints.

It is based on the JAVA implementation of Cassowary which can be found here

Constraints can be specified statically (or) dynamically. For view elements that need to be placed according to some constraint, they must be placed inside the ViewGroup called LinearConstraintLayout that is defined in this project.

Constraints can be with respect to three things:

Depending on the position of another view element.

Depending on the screen's width and height

The view elements width or height (Eg: 200 <= Height <= 400 )

LinearConstraintLayout is a sub-class of LinearLayout and thus the rules that apply for LinearLayout also apply for LinearConstraintLayout. Eg android:orientation attribute must be specified on the LinearConstraintLayout element.

Key terms

The basic building blocks of any constraint equation are as follows:

self in an constraint equation refers to the current view element object itself.

@id/{RESOURCE_ID} refers to a view element object by the name RESOURCE_ID.

screen refers to the screen object.

x attribute of an object that corresponds to its x-position on the screen (Eg: self.x refers to the current object's x-position)

y attribute of an object that corresponds to its y-position on the screen (Eg: self.y refers to the current object's y-position)

w attribute of an object that corresponds to its width on the screen (Eg: @id/TV_Name.w refers to the width of the view element object that can be identified by the name TV_Name)

h attribute of an object that corresponds to its height on the screen

LHS = RHS specifies an equality constraint

LHS LEQ RHS or LHS GEQ RHS specifies an in-equality constraint

Static Constraints

The view elements must be placed into the LinearConstraintLayout ViewGroup.

Constraint Satisfaction

In the case of constraints being specified for a view element, its best if the system is over-constrained to an extent. Consider the following constraint equation constraint:constraint_expr = "self.h LEQ 200dp" .

The above constraint would probably be solved by assigning the current view elements height to zero.

Cassowary is implemented such that the for a given set of constraints, the solution is a weighted sum better one. Thus the strength of the constraint plays an important role. In case the system is over-constrained, Cassowary will try to remove constraints one by one, the order of which is determined by the strength specified. By default, in our implementation, constraints such as constraint:fixX, constraint:fixY, constraint:fixWidth and constraint:fixHeight are strongconstraints.

Now, you'll be able to access the full color pallete from material design, either by XML, or programatically.

XML way

<!-- You can use it in any view or other XML resources --><!-- Access the resources by using @color/ or @dimen/ -->
<Viewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@color/mds_red_500"android:elevation="@dimen/mds_elevation_card_resting"/>

getColorsByName(String colorName) // Returns a List<Integer> of colors with the given name.// The methods below returns an Integer to use along your code.
getRandomColor()
getRandomNonAccentColor()
getRandomColorByLevel(String colorLevel)
getRandomColorByName(String colorName)
getRandomColorNonRepeating()
// And a few more!

To specify a color name or level, use the available static strings such as:

MaterialPalettes.REDMaterialPalettes.LEVEL_500

Please be aware that the Integer returned by the methods above is the Integer of the resource identifier, not the color itself. So, in order to give a TextView a random text color, it would be done like this: