People that are implementing UI as a set of custom components / widgets (aka Design System from Airb...

# android-architecture

[ghedeon]

People that are implementing UI as a set of custom components / widgets (aka Design System from Airbnb, Spotify), how does it look like? Custom views? Wrappers that return views? How does the widget interface looks like?

[Mikael Alfredsson]

I guess that differs from implementation to implementation. Were I work we use the wrapper technique and all components are splitted up into 3 items.
1. xml file to inflate
2. presenter (using databinding to update the view)
3. component (used to setup the view, bind the presenter and handle events)
The reason for the component is to be able to reuse views, so it acts as a ViewHolder if the component is used in a RecyclerView while the presenter has all the data and can be switched out when the view is recycled (i.e. onBindViewHolder)

[ghedeon]

interesting! And in case you want to drop it into another xml layout? It's not a custom view, so it's not possible directly. With <include>?

[Mikael Alfredsson]

do you mean combine components with each other, or add them to another fixed layout?

[ursus]

@Mikael Alfredsson how do you put such component into the screen layout? it seems you inflate it in code - you need to add it somewhere right?

[Mikael Alfredsson]

The base of a screen is almost always a recyclerview, and we have a factory class that can create components and wrap them into a ViewHolder

[Mikael Alfredsson]

if it isnt, then the screen has to provide a “child-area” where the factory can just “addView” on all component created views.

[Mikael Alfredsson]

the same goes for the components actually. A component can expose a “child-area” and put sub-components in there. The layout is decided by the child area View, so if the child-area its a LinearLayout, it will stack the child components Horiontally or Vertically.

[ghedeon]

yes, I was thinking what if want to add it to a fixed layout, or combine with another one. But you already answered that it's done programmaticaly, similar to fragment containers. Two things:
1. How do you style such thing? Let say ToolbarComponent, where title needs to be customizable.
2. If it's not a tall ask, when you have time, do you mind to put up a minimal gist with one such Presenter + Component? Much appreciated.

[Mikael Alfredsson]

So, our system is quite extensive at this point, but as a simple example of one component (in json)

{
  "identifier": "rating",
  "type": "average_rating",
  "data": {
    "value": 0.8
  }
}

[Mikael Alfredsson]

that is a rating component and the “data” structure is known by the “average_rating” component. We show stars right now, but that is up to the client implementation to decide

[Mikael Alfredsson]

https://github.com/MazyNoc/beholder-lib/tree/master/example/src/main/java/nu/annat/example -> look at DualLineComponent and DualLineData (the presenter)

[Mikael Alfredsson]

not connected to the json data 🙂

[Mikael Alfredsson]

if you look at the card component you will see that it exposes the “getChildArea” that allows it to host other views (components)