1

I am trying to get two different color types for my EditText. One should be "primary" and other should be "accent" color.

I edited my styles.xml file to this:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorAccent">@android:color/white</item>

        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">@color/primaryDark</item>

        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">@color/primaryDark</item>
    </style>

</resources>

However I am only getting my edit handles, and cursorto be solid white, and highlighted selection background 50% white. Just the accent color. This is good it looks like this:

However I also need to get my highlight markers to be 50% of primary, and cursor to solid primary color, and edit handles to also primary color. As seen here, I cannot accomplish this, and the cursor, and edit handles are "white" so they are invisible:

Is there anyway to get two themed EditTexts?

Noitidart
  • 35,443
  • 37
  • 154
  • 323

1 Answers1

1

Using android:theme on your EditText:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/EditTextTheme1"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/EditTextTheme2"/>
</LinearLayout>

And your custom EditText theme:

  <style name="EditTextTheme1" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorPrimary">@color/cardview_dark_background</item>
    <item name="colorPrimaryDark">@color/colorPrimary</item>
    <item name="colorAccent">@color/colorAccent1</item>
  </style>

  <style name="EditTextTheme2" parent="ThemeOverlay.AppCompat.Dark">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorAccent</item>
    <item name="colorAccent">@color/colorAccent2</item>
  </style>
goodev
  • 624
  • 1
  • 5
  • 10
  • Thank you @goodev! I will test this out. I noticed your value of `parent` is `ThemeOverlay.AppCompat.Light` and `ThemeOverlay.AppCompat.Dark`, is this something special? Can I set this to anything I want? – Noitidart Mar 08 '18 at 14:16
  • Hi @goodev, excuse the follow up question please, but I am trying to set this theme attribute at runtime. I am actually making a pull request to react-native - https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L58 . May you please tell me how to modify the EditText theme property at run time. Is there a `setTheme` function? – Noitidart Mar 08 '18 at 14:59
  • 1
    About `ThemeOverlay ` please read this https://plus.google.com/+AndroidDevelopers/posts/JXHKyhsWHAH – goodev Mar 09 '18 at 00:55
  • 1
    At runtime, you can use `ContextThemeWrapper` as context to create your EditText: `new ContextThemeWrapper(this, R.style.EditTextTheme2)` – goodev Mar 09 '18 at 00:57