Android’s new Declarative UI Pattern

Google recently has received a lot of complaints about Android’s UI Kit(TextView, Button .. etc), Probably you made one of them, this UI Kit has been built since Sept 2008, we are talking about 11 years here so imagine how legacy and complicated this code has become.

Such a code will have a lot of regrets of course, for example, Have you ever thought before on how much lines View.java can be? well, it will be more than you have in your mind right now. that’s only one simple thing, of course, there’s more so they had to come up with a solution and fortunately, they did! ??

Google’s I/O’19 had a great presentation about the declarative paradigm of UI programming used by Jetpack Compose, an in-development API for Android UI programming. the declarative paradigm itself is not a new concept, It has been used for many years and by frameworks like Vue.js, React .. etc, even google has adopted this pattern in Flutter.

In my opinion one of the best features of this component that it is Unbundled! the UI toolkit before was bundled with the support library so in order to have a small bug fix, we have to wait until the next API release. Jetpack Compose will have its own artifact so you won’t have to wait many years to get your simple fix.

So How does this work?

Well, now how we can right Hello world app with this? Let’s see

in order to implement something like that your activity should look like this

class MainActivity : Activity() {
	

	    override fun onCreate(savedInstanceState: Bundle?) {
	        super.onCreate(savedInstanceState)
	

	        setContent{
	            Greeting("Abadyy!")
	        }
	

	    }
	

	    @Composable
	    fun Greeting(name : String){
	        Text("Hello $name")
	    }


	}

So that’s it, no XMLs and related things, Text is class which will provide all functionalities you need from TextView you can add padding, margin, change and play with text .. etc.

So, What is Compose?

It’s a new fully compatible Jetpack widgets build entirely on Kotlin, They aren’t Views, It’s something smaller and more modular and easier to work with. It is currently in an early-exploration, pre-alpha stage. Its API surfaces are not yet finalized and it should not be used for production. as the documentation says.

With Compose you will eliminate the problem of Views having its own state, you can now have one source of truth and The owner is the only one changing it.

This comes with a lot of capabilities like there will be a composer for recycler view adapters, Let’s see an example of that:

class MainActivity : Activity() {
	

	    /**
	     * T is your UIModel to be bound to each item
	     *
	     * the body is the Composable of each item with passing each item to be inflated with corresponding data
	     * there's a lot of internal code handling the rest for process for us
	     *
	     */
	    fun <T> ScrollingList(
	        val data: List<T>,
	        body: @Composable() (T) -> Unit
	    ) {
	        // ??
	        body(item)
	        // ??
	    }
	

	    // Example showing how to return List of greetings
	    
	    @Composable
	    fun GreetingList(names: List<String>) {
	        ScrollingList(names) { name ->
	            greeting(name)
	        }
	    }
	

	    // do you remember Greeting from the previous example?
	    
	    @Composable
	    fun greeting(name: String) {
	        Text("Hello $name")
	    }
	    
	    // Then we can use it like the previous example 
	    
	    override fun onCreate(savedInstanceState: Bundle?) {
	        super.onCreate(savedInstanceState)
	

	        setContent {
	            GreetingList(listOf("Abady!" , "Android" , "Google"))
	        }
	

	    }
	

}

No more code for Recyclerview Adapters, Just one single line of code and your recycler view is ready for you! ??

There’s more and more available here and that’s the README of the open-source project Check it out, play with it and you can even contribute to it. Remember it’s still under development so avoid using it in production.

Check out this story by Chet Haase to see all the new stuff related to android introduced in Google I/O’19.

Thanks for reading! Be sure to like below and recommend this article if you liked it.

Reach me out on Twitter , Medium