Search code examples
androidstylesmaterial-designandroid-5.0-lollipopandroid-theme

textColor override textColorPrimary and textColorPrimaryDark


I have applied a theme to my app but when I use textColor properties it override all other properties like textColorPrimary.

<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowBackground">@color/windowBackground</item>
    <item name="android:textColorPrimary">#FF4081</item>
    <item name="android:textColorSecondary">#186925</item>

    <item name="colorControlActivated">#FF0000</item> <!-- for check box when checked -->
    <item name="colorControlNormal">#bbc40c</item> <!-- for check box when normal -->
    <item name="colorButtonNormal">#325289</item>
    <!--<item name="android:textColor">#084fe9</item>-->
    <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>

    <!--<item name="android:windowActivityTransitions">true</item>
    <item name="android:windowEnterTransition">@android:transition/slide_right</item>
    <item name="android:windowExitTransition">@android:transition/slide_left</item>-->
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
</style>
<style name="HeaderText" parent="@android:style/TextAppearance.Large">
    <item name="android:textColor">#ffffffff</item>
    <item name="android:textSize">12dp</item>
</style>
<style name="WindowAnimationTransition">
    <item name="android:windowEnterAnimation">@android:anim/fade_in</item>
    <item name="android:windowExitAnimation">@android:anim/fade_out</item>
</style>

my Layout file

 <?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/questionNumberTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/scoreTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="17dp"
        android:layout_marginEnd="16dp"
        android:text="Score : 20"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iconIv"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toStartOf="@+id/scoreTv"
        app:layout_constraintStart_toEndOf="@+id/questionNumberTv"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars[11]" />

    <TextView
        android:id="@+id/questionTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="8dp"
        android:text="TextView"
        android:textAlignment="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iconIv" />

    <Button
        android:id="@+id/fiftyfiftyBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup2" />

    <RadioGroup
        android:id="@+id/radioGroup2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/questionTitle">

        <RadioButton
            android:id="@+id/option1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RadioButton" />

        <RadioButton
            android:id="@+id/option2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RadioButton" />

        <RadioButton
            android:id="@+id/option3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RadioButton" />

        <RadioButton
            android:id="@+id/option4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RadioButton" />
    </RadioGroup>

    <TextView
        android:id="@+id/votesTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="10dp"
        android:drawableLeft="@drawable/ic_expand_less_green_24dp"
        android:text="20"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/fiftyfiftyBtn" />

    <TextView
        android:id="@+id/commentCountTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:drawableLeft="@drawable/ic_expand_less_green_24dp"
        android:text="35"
        android:textSize="16sp"
        app:layout_constraintStart_toEndOf="@+id/votesTv"
        app:layout_constraintTop_toBottomOf="@+id/fiftyfiftyBtn" />

</android.support.constraint.ConstraintLayout>

when I Uncomment android:textColor , android:textColorPrimary color is override by android:textColor. I want my title/large text to use textColorPrimary and for medium and small I wanna use textColorPrimaryDark as said in their documentation.

before that the button text color is set by the textColorPrimary.

How could I use two text Color scheme for whole my app. using textColorPrimary and textColorPrimaryDark.

Or I have to create two textStyle and set them to each View. Is there a better approach to achieve what I want.

enter image description here


Solution

  • You need to define two styles and set your desired attributes there. It is cleaner to read and understandable. And also good behaviour to set your own style in textview.

    Here is a sample you should do:

    <style name="textStyle1" parent="android:TextAppearance">
                <item name="android:textColor">@color/textColorPrimary</item>
                <item name="android:textStyle">bold</item>
                <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
                <item name="android:gravity">start</item>
                <item name="android:textSize">22sp</item>
            </style>
    
            <style name="textStyle2" parent="android:TextAppearance">
                <item name="android:textColor">@color/textColorPrimaryDark</item>
                <item name="android:textStyle">normal</item>
                <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
                <item name="android:gravity">start</item>
                <item name="android:textSize">18sp</item>
            </style>
    

    Then use this style on your expected textview like this:

    <TextView
                android:id="@+id/tv_name"
                style="@style/textStyleMedium"
               ........ />
    

    Remove the below tags on your app theme:

    <item name="android:textColorPrimary">#FF4081</item>
            <item name="android:textColorSecondary">#186925</item>
            <!-- <item name="android:textColor">#084fe9</item> -->
    

    Purpose of different color:

    TextColor is just the xml attribute to set a color to the text of any given view.

    TextColorPrimary is the default text color for enabled buttons and Large Textviews.

    TextColorSecondary is the default text color for Medium and Small Textviews.

    colorPrimaryDark is the color of the status bar.

    In order to achieve this you should remove textColor that override other colors.

    android:textAppearance="@style/TextAppearance.AppCompat.Medium" 
    

    inside your textView in xml . Then it will apply it to all your View. In this manner you don't have to set style to all ..