Im Rahmen einer App, die ich nebenher am entwickeln bin, stellte sich mir die Frage wie man das Aussehen (besonders den Rahmen) eines EditText Elementes ändern kann.
Das möchte ich euch nicht vorenthalten, daher dieses Tutorial.

Zuerst stelle ich euch kurz das Draw 9 Patch Tool vor und gehe dann näher auf die Implementierung und den eigentlichen Sinn einer NinePatch Grafik ein.

Draw 9 Patch Tool
Das Draw 9 Patch Tool ist im Android SDK Ordner unter Tools zu finden. Mit Hilfe dieses Tools können wir uns unsere eigenen NinePatch Grafiken erstellen.
Link zur Dokumentation von Draw 9

Was ist eine NinePatch Grafik
mehr nach dem Break

Eine NinePatch Grafik ist ein vergößerbares Image, dass die Größe automatisch an den Inhalt, der angezeigt werden soll, anpasst.
Zum Beispiel ein Textfeld bei Android (EditText). Wenn man in einem solchen Feld einen Zeilenumbruch einfügt, soll sich die Eingabebox dynamisch nach unten vergrößern.
Im Grunde besteht eine solche Grafik aus einem Standard PNG-Image, dass einen zusätzlich 1 Pixel breiten Rand enthält.
Zudem wird das Image mit der Erweiterung <Imagename>.9.png gespeichert.

Gespeichert werden diese Images im Drawable Verzeichnis eures Projekts.

Wer weiter Infos zu den Nine Patch Grafiken benötigt hier ein Link.

Einen eigenen NinePatch Skin erstellen
Hier ein Beispiel der Standard Android EditText NinePatch Grafiken.

 

 

 

Die Verschiedenen States die ein Element annehmen kann.

• Default: Wenn das Element nicht fokussiert ist
• Disabled: Wie der Name schon sagt, das Element ist nicht aktiviert
• Disabled Selected: Es ist zwar Disabled, jedoch trotzdem selektiert
• Pressed: Ein kurzer Moment in dem ihr auf das Element gedrückt habt
• Selected: Der Zeitraum nach dem State Presses bis das Element nicht mehr fokussiert ist

Diese kennt bestimmt jeder von seinem eigenen Android Handy. Bei HTC sind diese jedoch nicht Orange sondern Grün.
Genau darum dreht es sich jetzt da diese erstellt werden müssen. Ihr müsst natürlich nicht für jedes State eine eigene NinePatch Grafik erstellen.
Es ist jedoch nur von Vorteil, denn so bekommt der User jederzeit über seine aktuelle Aktion Feedback. Und es ist ja letztlich auch nicht von Nachteil, erfordert jedoch ein bisschen mehr Arbeit.
Jetzt erstellen wir unsere eigenen NinePatch Grafiken.

Ich gehe immer folgendermaßen vor: zuerst erstelle ich in einem Grafikprogramm GIMP, Photoshop, Expression Blend oder ein anderes, die benötigten Grafiken.
Diese könnt ihr nach Belieben erstellen. Ich orientiere mich jedoch an den Standard Grafiken (Höhe und die Ähnlichkeit der States).

Nachdem ihr diese erstellt habt, müsst ihr sie mit dem Draw 9 Patch Tool öffnen und die Scalable Pixel einfügen. Hier könnt ihr euch auch an den original Grafiken orientieren.
Danach abspeichern und schon habt ihr eure Custom NinePatch Grafiken.

Natürlich müsst ihr diese noch zu eurem Projekt hinzufügen.

ColorStateList erstellen
Jetzt müssen wir die ColorStateListe erstellen. Diese gehört in euer drawable/ Verzeichnis euerer Anwendung.
Fügt eine neue XML Datei hinzu und nennt diese z.B. drawable/edit_text_custom.xml
Diese beschreibt die veschiedenen States die unser EditText Elements annehmen kann.

<?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>

Alle EditText Elemente mit diesem Style überschreiben
Um die Einheitlichkeit der App zu gewährleisten, empfehle ich den Style bei allen EditText Elementen gleich zu wählen.

Zuerst müssen wir unser Theme in der AndroidManifest Datei definieren, tragt dies

android:theme="@style/mytheme"

bei application ein.

Danach müssen wir noch unseren Style als resources definieren, dazu ist der folgende Teil notwendig

<resources>
	<style name="Theme.myTheme" parent="@android:style/Theme" >
		<item name="android:editTextStyle">@style/red_edittext_custom_style</item>
	</style>
</resources>

Dies trägt ihr in euere styles.xml Datei den nachfolgenden Code ein. Falls diese noch nicht existiert, könnt ihr sie erstellen.
Hier definieren wir unseren Android Theme Style welcher auf dem nachfolgendne Custom Style für die EditText Elemente basiert

<resources>
<style name="red_edittext_custom_style" 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/edit_text_custom</item>
 	<item name="android:textColor">@color/edit_text_font_color</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>
 </resources></pre>

Ich erkläre hier noch die Relevanten Teile des XML Codes

<style name="red_edittext_custom_style" parent="@android:style/Widget.EditText">

Hier sagen wir, dass unser Custom Style allen EditText Elemente zugeordnet werden soll.

<item name="android:background">@drawable/edit_text_custom</item>

Dieser Teil verweist auf euere edit_text_custom.xml Datei, in der wir das Aussehen bzw den Background definiert haben.

<item name="android:textColor">@color/edit_text_font_color</item>

Um die Farbe des Textes zu ändern könnt ihr in der colors.xml noch eine Farbe festlegen, welche als Itemname den Namen  edit_text_font_color besitzt.

<color name="edit_text_font_color">#414141</color>

Farbdefinition in der values/colors.xml

<item name="android:textColorHighlight">@color/transparent_red</item>

Wenn ihr den Text in dem EditText Element markiert habt kommt diese Variable zum Einsatz es ist der Hintergrund der Markierung.

Danach haben alle eure EditText Elemente das gleiche neue Aussehen.
Ich hoffe ich konnte euch helfen.
Bei Fragen oder Feedback könnt ihr natürlich die Kommentare nutzen.