HowTo: Rahmen (Border) unter Android designen

borderUnter Android gibt es keine richtigen Rahmen um View oder Viewgroup Elemente. Man kann Rahmen nur mittels Hintergrund realisieren. Um einen Rahmen anzuzeigen kann man ein dementsprechendes Bild als Hintergrund verwenden, von dieser Methode rate ich jedoch ab, da dies unnötigen Ballast darstellt und bei Änderungen sich nicht dynamisch anpasst. Der bessere Weg ist es den Hintergrund per xml zu definieren.

Den Hintergrund des Elements setzt man mit:

android:background="@xml/hintergrund"

Der erste Teil (xml) bezeichnet den Ordner in res in dem die xml Datei gespeichert ist, der zweite Teil (hintergrund) ist der Dateiname der xml Datei.

Aufbau der Hintergrund xml Datei

Als erstes werde ich auf das Erstellen eines kompletten Rahmens erklären, danach werde ich den Fall eines Rahmens zu bestimmten Seiten behandeln.

Für einen kompletten Rahmen benutzt man “shape” als oberstes Element. Mit dem Parameter “stroke” erstellt man einen Rahmen in stroke kann man Breite und Farbe des Rahmens festlegen. Für abgerundete Ecken  gibt es den “corners” Tag mit dem Attribut ”radius” kann man die Rundung der Ecke festlegen. In diesem Beispiel ist ein 5dip dicker, schwarzer Rahmen mit abgerundeten Ecken erstellt worden.

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android">    
    <stroke android:width="5dip" android:color="#FF000000" />  
    <corners android:radius="5dip">
</shape>

Um Abgrenzungen nur auf bestimmte Seiten anzuwenden kann man sich mehrerer Ebenen bedienen. Mit dem Tag “layer-list” kann man mehrere Ebenen verwenden, die einzelnen Ebenen sind als “item” in der layer-list. Die unterste Ebene ist die erste und die oberste, überlagernde Ebene ist das letzte item. Um eine Grenzlinie zu erstellen, verkleinert man die oberste Ebene. Dadurch wird die untere Ebene an der Stelle angezeigt. Die obere Ebene verkleinert man indem man beim item Tag die Attribute “top” für oben, “bottom” für unten, “left” für links oder “right” für rechts hinzufügt, je nachdem wo man eine Trennlinie haben will.

In diesem Beispiel ist der Hintergrund weiß und es gibt eine 5 dip dicke, schwarze Trennlinie rechts.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
     <item>
       <shape>
             <solid android:color="#FF000000" />
         </shape>
    </item>
    <item android:right="5dip">
        <shape>
             <solid android:color="#FFFFFFFF" />
         </shape>
      </item>
 </layer-list>

2 Antworten

  1. Tanja
    Veröffentlicht am 29. April 2012 um 00:25 | Permalink

    Vielen Dank für diesen Beitrag! Grüße, Tanja

  2. Veröffentlicht am 20. Oktober 2012 um 16:56 | Permalink

    Netter Beitrag – vielen Dank, Michael