Hallo zusammen,
Ich möchte einen Toggle Button so stylen, dass er ungefähr wie folgt aussieht:
[Blockierte Grafik: http://douglas-media.de/stackoverflow_1.png]
Leider sieht er aber so aus (also viel kleiner und die Schrift ist nicht so toll):
[Blockierte Grafik: http://douglas-media.de/stackoverflow_2.png]
Hierzu habe ich mich an diesem Projekt orientiert und den Code weitgehend übernommen und angepasst: https://github.com/pellucide/Android-Switch-Demo-pre-4.0/
Die Layot-Datei sieht wie folgt aus:
Code
<xx.xxxxxxxxx.xxxxxxxx.helper.widgets.MySwitch
android:id="@+id/switch1"
style="@style/SwitchButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginBottom="2dp"
android:layout_marginRight="4dp"
android:layout_marginTop="4dp"
android:layout_marginLeft="9dp"
android:gravity="center"
mySwitch:textOff="@string/btn_alarm_toggle"
mySwitch:textOn="@string/btn_info_toggle"/>Die Styles habe ich wie folgt angepasst:
Code
<style name="SwitchButtonStyle">
<item name="track">@drawable/toggle_switch_background</item>
<item name="thumb">@drawable/toggle_switch_item</item>
<item name="switchTextAppearanceAttrib">@style/SwitchTextAppearance</item>
<item name="textOn">ON</item>
<item name="textOff">OFF</item>
<item name="pushStyle">false</item>
<item name="textOnThumb">true</item>
<item name="thumbExtraMovement">0dp</item>
<item name="thumbTextPadding">6dp</item>
<item name="trackTextPadding">6dp</item>
<item name="switchMinWidth">69dp</item>
<item name="switchMinHeight">36dp</item>
<item name="switchPadding">6dp</item>
</style>
<style name="SwitchTextAppearance">
<item name="android:textColor">@android:color/white</item>
<item name="android:textColorHighlight">@android:color/black</item>
<item name="textColorHint">@android:color/white</item>
<item name="textColorLink">@android:color/white</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>Die Drawables sehen so aus:
Code
<!-- toggle_switch_background.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="5dip"/>
<stroke android:width="1dip" android:color="@android:color/white"/>
<gradient android:angle="-45" android:startColor="@color/applicationBackgroundColor"
android:endColor="@color/applicationBackgroundColor"/>
</shape>
</item>
</layer-list>
<!-- toggle_switch_item.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="5dip"/>
<stroke android:width="1dip" android:color="@android:color/white"/>
<gradient android:angle="-45" android:startColor="@android:color/white"
android:endColor="@android:color/white"/>
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:radius="10dip"/>
<stroke android:width="1dip" android:color="@android:color/white"/>
<solid android:color="@android:color/white"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="5dip"/>
<stroke android:width="1dip" android:color="@android:color/white"/>
<gradient android:angle="-45" android:startColor="@android:color/white"
android:endColor="@android:color/white"/>
</shape>
</item>
</layer-list>Wichtig ist eben, dass das Widget über die gesamte Bildschirmbreite geht (was es trotz fill_parent nicht tut) und dass die Schriftfarbe sich beim Zustandswechsel ändert. Wie kann ich das erreichen? Vielen Dank für eure Hilfe!
Grüße,
hotspot2000