Summary:
This article should be useful to people who want to customize the default UI EditText as well as TextView on the Android platform. Mostly, I mean the Orange skin that appears to be hard to change. No matter how many color properties I attempted, I failed. Then, after inspecting the Android source code, picking apart how they wrote the TextView control (which EditText extends), I realized it was just a skin of NinePatchdrawables set in the background of the underlying View class. I’ll take you through the steps.
Some background on how it works:
First lets look at the art that Android uses, and how they reference it. This provides a better understanding of what we need to do on our own.
Look in the <android_sdk>\platforms\android-x.x\data\res\drawable
directory. In this directory, you will notice this file, edit_text.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/textfield_default" /> <item android:state_window_focused="false" android:state_enabled="false" android:drawable="@drawable/textfield_disabled" /> <item android:state_pressed="true" android:drawable="@drawable/textfield_pressed" /> <item android:state_enabled="true" android:state_focused="true" android:drawable="@drawable/textfield_selected" /> <item android:state_enabled="true" android:drawable="@drawable/textfield_default" /> <item android:state_focused="true" android:drawable="@drawable/textfield_disabled_selected" /> <item android:drawable="@drawable/textfield_disabled" /> </selector>
This is the ColorStateList that is default for the EditText background. This file points to various background resources in each state. So, from inspection, it appears that we need to create NinePatch art for the following drawable files:
textfield_default.9.png, textfield_disabled.9.png, textfield_pressed.9.png, textfield_selected.9.png, textfield_disabled_selected.9.png, etc…
So, this is where and how Android’s default EditText gets the Orange look!
Create your own NinePatch skins:
So change the look to your requirements (using gimp, photoshop, or Android’s recommended Draw9Patch tool), in my case I just did a red version of these files. Place these new png’s in your res/drawable directory. Now they can be referenced by your very own ColorStateList.
Name them .9.png
Create your new ColorStateList
Using the example provided by the default Android edit_text.xml above, create your own version of it, pointing to your own NinePatch files. This file should live in your res/drawable directory also. Now you have a valid ColorStateList visible to styles and widgets.
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/textfield_default" /> <item android:state_window_focused="false" android:state_enabled="false" android:drawable="@drawable/textfield_disabled_red" /> <item android:state_pressed="true" android:drawable="@drawable/textfield_pressed_red" /> <item android:state_enabled="true" android:state_focused="true" android:drawable="@drawable/textfield_selected_red" /> <item android:state_enabled="true" android:drawable="@drawable/textfield_default" /> <item android:state_focused="true" android:drawable="@drawable/textfield_disabled_selected_red" /> <item android:drawable="@drawable/textfield_disabled_red" /> </selector>
Save it as red_edit_text.xml and place in your res/drawable directory.
Point you EditText background to the ColorStateList
In my case, decided to use a theme and style approach to override all EditText boxes in my Application.
From my AndroidManifest.xml application element, set the theme
android:theme="@style/mytheme"
From my theme.xml
<resources> <style name="mytheme" parent="@android:style/Theme" > <item name="android:editTextStyle">@style/red_edittext</item> </style> </resources>
From my styles.xml
<resources>
<style name="red_edittext" parent="@android:style/Widget.EditText">
<item name="android:focusable">true</item>
<item name="android:focusableInTouchMode">true</item>
<item name="android:clickable">true</item>
<item name="android:background">@drawable/red_edit_text</item>
<item name="android:textColor">@color/state_list</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textColorHint">@color/default_text_color</item>
<item name="android:textColorHighlight">@color/transparent_red</item>
</style>
<style name="droiddate_btn" parent="@android:style/Widget.Button">
<item name="android:background">@drawable/btn_default_red</item>
</style>
</resources>
Results:
So now all EditText boxes should have my new red color instead of the default Orange. Although this might not be your end goal, just to change an EditText box from orange to red, it allows you to see how Android NinePatch, ColorStateList , Styles, and Themes can all work together to override and skin any control in Android. It could obviously be much more dramatic than my example below. Good luck, here is the result:
Please feel free to comment,
Marcus Williford
mwilliford@androidworks.com
Tags: Android, Android UI, ColorStateList, EditText, Style, Theme
相关推荐
通过自定义style改变framework原生AlertDialog样式,包括背景图片、按扭图片、标题样式、标题栏下方分割线颜色、按扭图片、按钮间分隔线等等。好多天的沤血作品,请大家勿喷。
主要通过代码实例说明了ExtJS如何自定义主题(theme)样式,希望对大家有帮助
利用Theme自定义Activity间的切换动画
绿色活动栏,纯黑代码背景更加护眼,绿色高亮关键字,错误提醒黄色波浪线更加醒目和护眼 加压后,将压缩包内的文件夹拷贝到vscode安装目录-->resources-->app-->extensions内,在vscode中设置-->...
android自定义主题
NULL 博文链接:https://only81.iteye.com/blog/487500
POC-Flutter自定义主题主要目标是创建一个支持深色/浅色模式的自定义主题。怎么做的它是使用创建的。 GlobalAppTheme是存储黑暗模式的继承小部件。 MTheme是另一个继承主题的继承控件。 嵌套主题可以有多个级别。 ...
安装所需的系统依赖项 克隆存储库 git clone https://github.com/minheq/antd-theme-editor.git 安装项目的程序包依赖项 yarn ...您就准备好了! 用法 运行命令 yarn storybook 访问localhost:6006以查看故事书 定制...
使用过TileList的朋友可能知道,该组件没有Item与Item之间的间距设置。而且theme也没有办法象linkbar那样设置样式corner-radius改变形状。
WPF.Themes.ThemeManager.ApplyTheme(Application.Current, Properties.Settings.Default.Themes);//读取设置界面主题配置信息 即可使所有常用的控件主题变成所选择的主题,无需在每个窗体里修改样式。 减少了很...
cu-theme:适用于Drupal网站的基于Bootstrap的自定义子主题
tomorrow-theme-master 是VS的代码字体的样式!看着感觉不错
Android系统中自带样式分享,需要的朋友可以参考下
在我们的日常项目中很多地方会用到对话框,但是Android系统为我们提供的对话框样子和我们精心设计的界面很不协调,在这种情况下我们想很自由的定义对话框,或者有的时候我们的对话框是一个图片,没有标题和按钮,...
Win7 64位和更高版本的windows系统需要使用原版的uxtheme.dll、themeservice.dll、themeui.dll三个文件替换 C:\Windows\System32\uxtheme.dll C:\Windows\System32\themeservice.dll C:\Windows\System32\themeui....
Android提高篇之自定义dialog实现...1、使用imageview、textview自定义dialog 2、使用Animation实现图片旋转动画效果 3、通过自定义theme去掉dialog的title。 没有使用progressdialog,使用起来更加灵活,请大家参考。
Android提高篇之自定义dialog实现...1、使用imageview、textview自定义dialog 2、使用Animation实现图片旋转动画效果 3、通过自定义theme去掉dialog的title。 没有使用progressdialog,使用起来更加灵活,请大家参考。
主要介绍了Android使用Theme自定义Activity进入退出动画的方法,涉及Android的Activity属性设置与资源操作技巧,需要的朋友可以参考下
1.增加Theme主题 new DatePickerDialog(this, AlertDialog.THEME_HOLO_LIGHT,null).show(); 效果: 4.0以上的版本才可使用此Theme,注意对版本的判断。 若低版本的则主题设置为以下 android:theme=”@android:...