Change the background color below one guideline

Question

As a beginner in android development, I am trying to create a layout using ConstraintLayout. I have already created a bottom guideline and want to colorize the space between this guideline and the device bottom. Here is my code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://..."
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://..."
    android:orientation="horizontal"
    android:background="@android:color/holo_orange_light">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/bottom_guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8417" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

After that code, I obtained the following result:

I tried to colorize the space below the guideline (between the guideline and the device bottom), as the following code can show:

...
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/bottom_guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8417" 
        android:backgroundTint="@android:color/holo_green_light"/>

But it did not work. Does anyone know how can I do that?

score 1 · Accepted Answer · answered Oct 28 '22 at 14:06

Think of GuideLines as just either horizontal and vertical lines that are used to attach other widgets to. They really don't have an area to color like other views.

You can add color to the area below the GuideLine in a couple of ways:

First way: Add a View that fills the area below the GuideLine. Give that view the color you want. Although this is the easier way, it does involve an additional widget and will overwrite any background on the ConstraintLayout which is, in general, discouraged. (I don't think that really matters here.)

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/bottom_guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8417"/>

    <View
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_red_light"
        android:layout_marginBottom="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/bottom_guideline" />

</androidx.constraintlayout.widget.ConstraintLayout>

Second way: Define a drawable for the background. You would have to change its size values at runtime. This may be of some help to you.

Third way: Define a custom ConstraintLayout that draws the background the way you want. This is going to be the most challenging.

I think that the first way is the way to go unless you run into some constraint using it.

Change the background color below one guideline

1 Answers1