Tag: constraintlayout

Android ConstraintLayout 2.0: ConstraintLayoutStates

Android ConstraintLayout 2.0: ConstraintLayoutStates

With the introduction of ConstraintLayout 2.0, there is an interesting new feature called ConstraintLayoutStates. ConstraintLayoutStates allow you to create a layout with different states and switch between them easily. Typically, most layouts contain a loading state, initial state, end state and error state. Using ConstraintLayoutStates, there is a clean way to switch between these different states.

How do you use this new feature? Glad you asked!

Step 1: Create your different states in separate XML files

Create the different state layout files that your layout needs. Each layout must include the same views, they can just have different properties such as their visibility, or their constraints.

ConstraintLayoutStates example layouts
3 layouts for the different layout states.

Step 2: Create a ConstraintLayoutStates XML file

In the xml resource folder, create an xml file containing your states. In this example, we will call it constraint_layout_states_example.xml. Inside this file place all the different representations of your layout. Give them meaningful ids such as startloading etc. and then link them to the relevant constraint files.

 

Step 3: Switch between the states

In your activity/fragment, you can now easily switch between these states based on different conditions. You will first need to load the state description using loadLayoutDescription() on your ConstraintLayout object. Once you have done that, you can call constraintLayout.setState() with any of the states that you have defined in the previous states file.

In the example below, we are setting the state to the loading state. Then after some time (in this example I am just posting a delayed runnable, but this could easily be a network call that returns at a later stage), we are setting it to the end state.

The above example running on a device:ConstraintLayoutStates example

That’s it! You should now be able to use ConstraintLayoutStates in your own apps. This example can be found on Github here.

Enjoyed this post? Let me know your thoughts on Twitter!

ConstraintLayout 2.0: ImageFilterView

ConstraintLayout 2.0: ImageFilterView

Whilst browsing through the various examples online with the new ConstraintLayout 2.0, I stumbled upon ImageFilterView. This got my attention immediately and I decided to investigate further.

An ImageFilterView allows you to perform some common image filtering techniques on an ImageView, including saturation, contrast, warmth and crossfade. 

If you have tried to implement these image filters before, you may have run into ColorMatrix. If you look at the source of ImageFilterView you will see that these methods have just been nicely wrapped up with simpler API usage.

For example, if you would like to adjust the warmth, contrast or saturation, all you need to do is set a property on the ImageFilterView:

You can also access this programmatically, so you could add a SeekBar to control these values.

There is also the ability to crossfade between two different images using the crossfade method defined on ImageFilterView. This allows you to merge two images together.

If you are looking for a quick way to add some basic image effects, ImageFilterView is definitely something to consider. It is fast to use and execute since it is backed by ColorMatrix which uses the GPU (and not the CPU) to process the resultant image.

Here is an example of ImageFilterView in action:

Realtime Image Processing with ImageFilterView
Realtime Image Processing with ImageFilterView

 

The downside to using this approach is that you are not in full control of the exact pixel values that are going to be used, which could be problematic if you are developing an image editing application.

Overall, I’m really excited about the ImageFilterView class! I hope it is the start of some awesome Image effects offered by the Android Team.

Check out the ConstraintLayout demo repository for the code used in the above example.

Follow me on Twitter for more.

 

Android ConstraintLayout — Build a layout from Scratch + Q&A — Sunday (26 Nov) 5PM GMT+2 [Live Stream]

Android ConstraintLayout — Build a layout from Scratch + Q&A — Sunday (26 Nov) 5PM GMT+2 [Live Stream]

I’ve seen quite a lot of misuse/misunderstanding of how to use ConstraintLayout practically. I was contemplating the best way to talk about these common “Don’ts” that I see people do.

I’ve decided to try do something a bit different than a blog post. I’ll be live streaming on Sunday, 26 November at 5PM GMT+2 (that is today 😄 ) on YouTube and Twitch.

Join me and ask questions whilst I code this layout below. I’ll also cover some common mistakes that I’ve seen people make when using ConstraintLayout.

Follow me on YouTubeTwitch and Twitter to get more updates!

Hope to see you there

ConstraintLayout Android Example
ConstraintLayout Android Example
ConstraintLayout 101 & the new Layout Builder in Android Studio

ConstraintLayout 101 & the new Layout Builder in Android Studio

What is ConstraintLayout?

ConstraintLayout  is a new type of layout that you can use in your Android App, it is compatible down to API level 9 and is part of the support library. Its aim is to reduce layout hierarchies (and improve performance of layouts) and it also reduces the complexity of trying to work with RelativeLayouts.  It is compatible with other layouts, so they can live in harmony together without having to choose one or the other.

Read More Read More