How I solved layout issues in dynamically gone widgets using ConstraintLayout

Filipe Bezerra — Sat, 31 Oct 2020 21:02:33 +0000

This post is about how to deal with GONE widgets using ConstraintLayout in native Android development.

The study case

I have a screen which displays details of each sandwich selected from the list, backed by a sandwich object in my Activity.

This screen is written with ConstraintLayout and shows informations like:

Also known as
Ingredients,
Place of origin
Description

Here's the layout with only the important parts:



...
<layout ...
    >
    <ScrollView ...
        >
        <androidx.constraintlayout.widget.ConstraintLayout ...
            >

            <ImageView
                ...
                android:id="@+id/sandwich_image"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                ...
                />

            <TextView
                ...
                android:id="@+id/also_know_as_label"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/sandwich_image"
                />

            <TextView
                ...
                android:id="@+id/also_know_as_text"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/also_know_as_label"
                app:layout_constraintStart_toStartOf="@+id/also_know_as_label"
                app:layout_constraintTop_toBottomOf="@+id/also_know_as_label"
                ...
                />

            <TextView
                ...
                android:id="@+id/ingredients_label"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/also_know_as_text"
                app:layout_constraintStart_toStartOf="@+id/also_know_as_text"
                app:layout_constraintTop_toBottomOf="@+id/also_know_as_text"
                />

            <TextView
                ...
                android:id="@+id/ingredients_text"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/also_know_as_label"
                app:layout_constraintStart_toStartOf="@+id/also_know_as_label"
                app:layout_constraintTop_toBottomOf="@+id/ingredients_label"
                ...
                />

            <TextView
                ...
                android:id="@+id/origin_label"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/also_know_as_label"
                app:layout_constraintStart_toStartOf="@+id/also_know_as_label"
                app:layout_constraintTop_toBottomOf="@+id/ingredients_text"
                />

            <TextView
                ...
                android:id="@+id/origin_text"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/also_know_as_label"
                app:layout_constraintStart_toStartOf="@+id/also_know_as_label"
                app:layout_constraintTop_toBottomOf="@+id/origin_label"
                ...
                />

            <TextView
                ...
                android:id="@+id/description_label"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/also_know_as_label"
                app:layout_constraintStart_toStartOf="@+id/also_know_as_label"
                app:layout_constraintTop_toBottomOf="@+id/origin_text"
                />

            <TextView
                ...
                android:id="@+id/description_text"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/also_know_as_label"
                app:layout_constraintStart_toStartOf="@+id/also_know_as_label"
                app:layout_constraintTop_toBottomOf="@+id/description_label"
                ...
                />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</layout>

Here's the representation of the layout above in design mode:

After running the application in my physical device I got the desired result:

The problem

Some sandwich objects lack data from some of their attributes, a common solution is to set View's visibility to View.GONE.

The result was unexpected:

In ConstraintLayout we have View's constrained to each other, so I ended up with a problem.

The solution

I looked for a straightforward solution and the answer was ConstraintLayout Barrier.

From the docs:

A Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side. For example, a left barrier will align to the left of all the referenced views.

In fact there's a recommendation on how to handle GONE widgets.

I'm not going to go deeper about Barrier, you can check out this awesome explanation with good examples.

Here's the final layout with only the important parts:



...
<layout ...
    >
    <ScrollView ...
        >
        <androidx.constraintlayout.widget.ConstraintLayout ...
            >
            <ImageView
                ...
                android:id="@+id/sandwich_image"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                ...
                />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/start_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_begin="@dimen/margin_normal"
                />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/end_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_end="@dimen/margin_normal"
                />

            <TextView
                ...
                android:id="@+id/also_known_as_label"
                android:layout_width="0dp"
                app:layout_constraintEnd_toStartOf="@+id/end_guideline"
                app:layout_constraintStart_toStartOf="@+id/start_guideline"
                app:layout_constraintTop_toBottomOf="@+id/sandwich_image"
                />

            <TextView
                ...
                android:id="@+id/also_known_as_text"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/also_known_as_label"
                app:layout_constraintStart_toStartOf="@+id/also_known_as_label"
                app:layout_constraintTop_toBottomOf="@+id/also_known_as_label"
                ...
                />

            <androidx.constraintlayout.widget.Barrier
                android:id="@+id/also_known_as_barrier"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:barrierDirection="bottom"
                app:constraint_referenced_ids="also_known_as_label,also_known_as_text"
                />

            <TextView
                ...
                android:id="@+id/ingredients_label"
                android:layout_width="0dp"
                app:layout_constraintEnd_toStartOf="@+id/end_guideline"
                app:layout_constraintStart_toStartOf="@+id/start_guideline"
                app:layout_constraintTop_toBottomOf="@+id/also_known_as_barrier"
                />

            <TextView
                ...
                android:id="@+id/ingredients_text"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/ingredients_label"
                app:layout_constraintStart_toStartOf="@+id/ingredients_label"
                app:layout_constraintTop_toBottomOf="@+id/ingredients_label"
                ...
                />

            <androidx.constraintlayout.widget.Barrier
                android:id="@+id/ingredients_barrier"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:barrierDirection="bottom"
                app:constraint_referenced_ids="ingredients_label,ingredients_text"
                />

            <TextView
                ...
                android:id="@+id/origin_label"
                android:layout_width="0dp"
                app:layout_constraintEnd_toStartOf="@+id/end_guideline"
                app:layout_constraintStart_toStartOf="@+id/start_guideline"
                app:layout_constraintTop_toBottomOf="@+id/ingredients_barrier"
                />

            <TextView
                ...
                android:id="@+id/origin_text"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/origin_label"
                app:layout_constraintStart_toStartOf="@+id/origin_label"
                app:layout_constraintTop_toBottomOf="@+id/origin_label"
                ...
                />

            <androidx.constraintlayout.widget.Barrier
                android:id="@+id/origin_barrier"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:barrierDirection="bottom"
                app:constraint_referenced_ids="origin_label,origin_text"
                />

            <TextView
                ...
                android:id="@+id/description_label"
                android:layout_width="0dp"
                app:layout_constraintEnd_toStartOf="@+id/end_guideline"
                app:layout_constraintStart_toStartOf="@+id/start_guideline"
                app:layout_constraintTop_toBottomOf="@+id/origin_barrier"
                />

            <TextView
                ...
                android:id="@+id/description_text"
                android:layout_width="0dp"
                app:layout_constraintEnd_toEndOf="@+id/description_label"
                app:layout_constraintStart_toStartOf="@+id/description_label"
                app:layout_constraintTop_toBottomOf="@+id/description_label"
                ...
                />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</layout>

The source code is available on GitHub.

How did I solve Split Strings coding challenge

Filipe Bezerra — Sun, 25 Oct 2020 15:41:01 +0000

This is the first post of a series about online solving coding challenges and it's about how I solved the "Split Strings" coding challenge.

One of my daily activities is to practice and solve coding challenges and after a time doing it I decided to write about how I solve each of them.

This code challenge is hosted at codewars.com and here it's instructions:

Complete the solution so that it splits the string into pairs of two characters. If the string contains an odd number of characters then it should replace the missing second character of the final pair with an underscore ('_').

Examples:
solution('abc') # should return ['ab', 'c_']
solution('abcdef') # should return ['ab', 'cd', 'ef']

When solving problems the first thing that I like to do is to divide and conquer, so I break down the whole problem in small problems and start from that.

My first solution was using a declarative programming model so that I can freely express my thoughts, here's the solution that I found:

def solution(s):
    list_of_pairs = []
    pair = ''
    for char in s:
        pair += char
        if len(pair) == 2:
            list_of_pairs.append(pair)
            pair = ''
    if pair:
        list_of_pairs.append(pair + '_')
    return list_of_pairs

There's no complexity with this solution but it's a little verbose and totally declarative.

The first thing it was to declare the data structures that'll store the final result, the list of pairs and the string pair accumulator used inside the for loop.

Inside the for loop I increase the accumulator then checks if it's time to populate the list with the pair and reset the accumulator.

As soon as the for loop is completed, before returning the result, I need to check if there's something left in the accumulator and append it to the list, appending the underscore to the end of the pair following the challenge rules.

All tests passed.

This was a very straightforward and not optimized solution.

Next step was to refactor the solution and find a efficient solution writing in imperative way, here's the solution that I found:

def solution(s):
    return [s[i]+'_' if len(s[i:]) == 1 else s[i:i+2] 
            for i in range(0, len(s), 2)]

The first thing it was to split up the string in a range using 2 steps between each item.

With that range I can iterate using a list comprehension so that I can extract what I need, pairs of 2 characters.

This second final solution was written in a imperative programming model and used advanced features of Python like list comprehension and slicing.

One thing that we should keep in mind, we can find another way to get the same result, perhaps more effiecient than this one, this is the beauty within software development, with that we can conclude this solution coud be improved. What do you think?

DEV Community: Filipe Bezerra

How I solved layout issues in dynamically gone widgets using ConstraintLayout

The study case

The problem

The solution

How did I solve Split Strings coding challenge