Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Color of TextView shows as white on a real device with ConstraintLayout

Tags:

android

android-layout

android-constraintlayout

I have been trying my hands on ConstraintLayout and so far I have liked it a lot except now I have run into a peculiar problem. The same layout, if I design using a RelativeLayout displays the color of the contained TextViews as the default text color(greyish) but with ConstraintLayout, it shows white.

This happens on both a real device as well as an emulator with Android 5.0 but not on emulator(7.0). Does anyone know, why might this be happening?

Also, the obvious solution seems to be manually styling the color of the TextView in the layout to what it should be but that seems like a hack than a solution. I would be interested in knowing, why this is happening in the first place and if this hack is the only solution? (I prefer not fixing it by forcing a color on TextView as the behavior is correct on Android 7.0)

EDIT: Forgot to mention that the Layout Editor shows them both as black/greyish so that is also a cue that the actual color should not be white.

For your reference, here are the 2 layouts that are more or less same(there is a Button in one of them and TextView instead of Button in the other) in which one is faulty.

The layout that shows it white(issue in focus):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="4dp"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:background="@color/lightGrey">


    <android.support.constraint.ConstraintLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:paddingBottom="10dp"
        android:elevation="2dp"
        android:id="@+id/constraintLayout">


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/guideline"
            android:layout_marginRight="8dp"
            android:layout_marginEnd="8dp"
            app:layout_constraintHorizontal_bias="0.0"
            android:id="@+id/linearLayout"
            tools:layout_editor_absoluteY="16dp">

            <TextView
                android:text="@string/tutor_name"
                android:textStyle="bold"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tutor_name"/>

            <TextView
                android:text="@string/tutor_skill_set"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/skill_set"/>

            <TextView
                android:text="@string/tutor_types"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/tutor_types" />

            <TextView
                android:text="@string/tutor_location"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/location"
                android:layout_marginTop="12dp" />

        </LinearLayout>


        <ImageView
            android:id="@+id/display_pic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginEnd="16dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="16dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:color/holo_red_light" />

        <com.iarcuschin.simpleratingbar.SimpleRatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tutor_rating"
            android:layout_below="@+id/display_pic"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            app:srb_starSize="13dp"
            app:srb_numberOfStars="5"
            app:srb_borderColor="@color/colorAccent"
            app:srb_fillColor="@color/colorPrimary"
            app:srb_starBorderWidth="1"
            app:srb_isIndicator="true"
            app:layout_constraintRight_toRightOf="@+id/display_pic"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/display_pic"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            app:layout_constraintHorizontal_bias="1.0" />

        <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.6796875" />


    </android.support.constraint.ConstraintLayout>


    <TextView
        android:id="@+id/tutor_requested_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        android:text="Requested time"
        android:textStyle="italic"
        android:layout_marginStart="32dp"
        android:layout_marginBottom="8dp"
        android:layout_below="@+id/constraintLayout" />


</RelativeLayout>

The layout that shows it black/greyish(default as it should be)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginEnd="10dp"
    android:background="@color/lightGrey"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="10dp"
    android:elevation="2dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:paddingBottom="10dp"
        android:paddingEnd="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingStart="10dp"
        android:paddingTop="10dp">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="1"
            android:layout_toLeftOf="@+id/display_pic"
            android:layout_toStartOf="@+id/display_pic"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            android:id="@+id/linearLayout2">

            <TextView
                android:text="@string/tutor_name"
                android:textStyle="bold"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tutor_name"/>

            <TextView
                android:text="@string/tutor_skill_set"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/skill_set"/>

            <TextView
                android:text="@string/tutor_types"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/tutor_types" />

            <TextView
                android:text="@string/tutor_location"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/location"
                android:layout_marginTop="12dp" />

        </LinearLayout>


        <ImageView
            android:id="@+id/display_pic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/holo_red_light" />

        <com.iarcuschin.simpleratingbar.SimpleRatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tutor_rating"
            android:layout_below="@+id/display_pic"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            app:srb_starSize="13dp"
            app:srb_numberOfStars="5"
            app:srb_borderColor="@color/colorAccent"
            app:srb_fillColor="@color/colorPrimary"
            app:srb_starBorderWidth="1"
            app:srb_isIndicator="true"
            android:layout_marginTop="2dp" />

        <Button
            android:id="@+id/request_tutor"
            style="@android:style/Widget.Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/linearLayout2"
            android:layout_marginTop="14dp"
            android:background="@color/lighterGrey"
            android:minHeight="25dp"
            android:minWidth="80dp"
            android:text="Request"
            android:textAppearance="@style/TextAppearance.AppCompat" />

    </RelativeLayout>

</FrameLayout>

(Note: Although I tried using a Barrier below, it is in ConstraintLayout 1.1.0 beta and I would strictly refrain from using a beta version for production in this case)

EDIT 2: Following @rami-jemli 's advice, here is the ConstraintLayout with a barrier with the problem still persisting.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="4dp"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:background="@color/lightGrey"
    android:id="@+id/constraintLayout">


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintHorizontal_bias="0.0"
        android:id="@+id/linearLayout">

        <TextView
            android:text="@string/tutor_name"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tutor_name"/>

        <TextView
            android:text="@string/tutor_skill_set"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:id="@+id/skill_set"/>

        <TextView
            android:text="@string/tutor_types"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:id="@+id/tutor_types" />

        <TextView
            android:text="@string/tutor_location"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/location"
            android:layout_marginTop="12dp" />

    </LinearLayout>


    <ImageView
        android:id="@+id/display_pic"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:adjustViewBounds="false"
        android:scaleType="centerCrop"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@android:color/holo_red_light" />

    <com.iarcuschin.simpleratingbar.SimpleRatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tutor_rating"
        android:layout_below="@+id/display_pic"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        app:srb_starSize="13dp"
        app:srb_numberOfStars="5"
        app:srb_borderColor="@color/colorAccent"
        app:srb_fillColor="@color/colorPrimary"
        app:srb_starBorderWidth="1"
        app:srb_isIndicator="true"
        app:layout_constraintRight_toRightOf="@+id/display_pic"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/display_pic"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintHorizontal_bias="1.0" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.6796875"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="250dp" />

    <TextView
        android:id="@+id/tutor_requested_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Requested time"
        android:textStyle="italic"
        android:layout_below="@+id/constraintLayout"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="@+id/barrier"
        app:layout_constraintStart_toStartOf="@+id/linearLayout"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="tutor_rating,linearLayout"
        tools:layout_editor_absoluteY="126dp" />


</android.support.constraint.ConstraintLayout>

Output:(Dummy data)

enter image description here

like image 346
Manish Kumar Sharma Avatar asked Jun 30 '17 13:06

Manish Kumar Sharma

People also ask

How to set the color of a textview span in Android?

This example demonstrates how do I set the color of a textView span in android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main.xml. Let's try to run your application.

How to set textcolor attribute for textview using different color formats?

You can provide the color as hex value in one of the four formats: rgb, argb, rrggbb, or aarrggbb. The syntax to set textColor attribute for TextView using different color formats is ... ... ... ... Let us create an Android application with Kotlin support in Android Studio and change the text color of TextView in XML layout file.

What is the background color of textview activity screen?

TextView background color is by default set as invisible means there are no background color specified so textview display its activity screen background color as its own.

What are the colors of the textview widgets?

The four TextView widgets have the color value in rgb, argb, rrggbb, and aarrggbb formats respectively. Also, their dimensions are modified so that we understand which area of the TextView is being painted with the background color.

1 Answers

I cannot believe this! I found the answer.

From the question, it is not possible to pinpoint what could be wrong because problem is not with the layout, RecyclerView, AppCompat or ConstraintLayout. The problem is with something called the Themed Context. I have been passing around application context in almost all cases but it turns out where the layout is concerned, it is recommended to pass in Activity instance itself(which is a Themed context because it extends ContextThemeWrapper --more on this a bit later).

So, for example, when we are instantiating a LayoutManager for a RecyclerView, we would pass in Activity instance. When we are inflating a layout item for a RecyclerView, we would again use the Activity.

Talking in this context, ContextThemeWrapper takes conceptual precedence as stated here and Activity subclasses it.

Also mentioned is,

ContextThemeWrapper will apply your application theme

The snippet of code I've shared above does not make this immediately clear, however, you can write your own tests to verify this. The best way I can think of doing this is to create a simple app with a ListView that uses android.R.layout.simple_list_item_1 to display items. Make your apps theme Light by default and then initialize your ArrayAdapter using getApplicationContext(). You’ll notice that the text is either not visible or barely visible because it will be white by default whereas your theme should call for default text to be black. Change the code, so that your code initializes the array adapter with “this” (i.e the Activity) or simply getContext() and you’ll see the text turns black.

And,

Do not use getApplicationContext() with LayoutInflater, unless you really do want to ignore your theme.

Hats off to @sockeqwe for his answer on SwitchCompat that gave me this idea.

Note: Previously, I had mentioned that this might be a bug in ConstraintLayout. I take that back and apologies to the folks working on ConstraintLayout(which I have found totally awesome!)

Lastly, thanks to all the folks who gave their precious time reading my question and churning their brainpower for answer.

like image 177
Manish Kumar Sharma Avatar answered Oct 30 '22 23:10

Manish Kumar Sharma
Sign in to Comment

Related questions

Custom textview with rotate, zoom in,zoom out and move on touch in android?
Exporting Objects from the Android Studio debugger
During Installation Cordova (PhoneGap) I am getting warning like "npm WARN engine Cordova-js@3. 8.0: wanted:..."
How to use findViewById() in robolectric
How to generate findbugs reports using gradle script?
Beautiful Stroked Text in Android
Is it safe to start a new thread in a BroadcastReceiver?
How to prevent Play Store testing from affecting Firebase Analytics
Android studio suddenly shows full folder names, how to change
Android: How to check email at a specific time with AlarmManager?
Can I submit an app for pre-launch test with Admob enabled
Nested Action Bar Tabs(with ViewPager)
Equivalent of ComputeIfAbsent in Java 7
Generate signed APK with jks React Native
Extra padding/margin added to DatePicker on Android 7.1.1
TextView works wrong with breakStrategy="balanced" and layout_width="wrap_content"
Dagger 2 reinit singleton
Not getting response in socket connection
What should I use in place of getWidth() and getHeight() to know when width is greater and when height is greater [duplicate]

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!