Ich habe eine Textansicht und ich möchte am oberen und unteren Rand einen schwarzen Rand hinzufügen. Ich habe versucht, Android:drawableTop
und Android:drawableBottom
zur TextView hinzuzufügen, was jedoch nur dazu führte, dass die gesamte Ansicht schwarz wurde.
<TextView
Android:background="@Android:color/green"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:drawableTop="@Android:color/black"
Android:drawableBottom="@Android:color/black"
Android:text="la la la" />
Gibt es eine Möglichkeit, einer Ansicht (insbesondere einer Textansicht) in Android auf einfache Weise einen oberen und einen unteren Rand hinzuzufügen?
In Android 2.2 können Sie Folgendes tun.
Erstellen Sie ein XML-Zeichenelement wie /res/drawable/textlines.xml und weisen Sie es als Hintergrundeigenschaft eines TextView-Objekts zu.
<TextView
Android:text="My text with lines above and below"
Android:background="@drawable/textlines"
/>
/res/drawable/textlines.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
<shape
Android:shape="rectangle">
<stroke Android:width="1dp" Android:color="#FF000000" />
<solid Android:color="#FFDDDDDD" />
</shape>
</item>
<item Android:top="1dp" Android:bottom="1dp">
<shape
Android:shape="rectangle">
<stroke Android:width="1dp" Android:color="#FFDDDDDD" />
<solid Android:color="#00000000" />
</shape>
</item>
</layer-list>
Der Nachteil ist, dass Sie eine undurchsichtige Hintergrundfarbe angeben müssen, da Transparenzen nicht funktionieren. (Zumindest dachte ich, dass sie es taten, aber ich habe mich geirrt). Im obigen Beispiel können Sie sehen, dass die einfarbige Farbe der ersten Form #FFdddddd in der Strichfarbe der zweiten Form kopiert wird.
Ich habe einen Trick verwendet, damit der Rand außerhalb des Containers angezeigt wird. Bei diesem Trick wird nur eine Linie gezeichnet, sodass der Hintergrund der darunter liegenden Ansicht angezeigt wird.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item
Android:bottom="1dp"
Android:left="-2dp"
Android:right="-2dp"
Android:top="-2dp">
<shape Android:shape="rectangle" >
<stroke
Android:width="1dp"
Android:color="#FF000000" />
<solid Android:color="#00FFFFFF" />
<padding Android:left="10dp"
Android:right="10dp"
Android:top="10dp"
Android:bottom="10dp" />
</shape>
</item>
</layer-list>
Dies ist die einfachste Option, wenn Sie ein Layout oder eine Ansicht umrahmen möchten, in der Sie den Hintergrund festlegen können. Erstellen Sie im Ordner drawable
eine XML-Datei, die etwa wie folgt aussieht:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle" >
<solid Android:color="#8fff93" />
<stroke
Android:width="1px"
Android:color="#000" />
</shape>
Sie können die solid
entfernen, wenn Sie keine Füllung wünschen. Der Satz background="@drawable/your_shape_drawable"
in Ihrem Layout/Ihrer Ansicht.
Hier ist ein kleiner Trick, den ich in einer RelativeLayout
verwendet habe. Grundsätzlich haben Sie ein schwarzes Quadrat unter der Ansicht, der Sie einen Rahmen geben möchten, und geben Sie dieser Ansicht dann eine Auffüllung (nicht Rand!), Damit das schwarze Quadrat an den Rändern durchscheint.
Offensichtlich funktioniert das nur richtig, wenn die Ansicht keine transparenten Bereiche hat. In diesem Fall würde ich empfehlen, dass Sie eine benutzerdefinierte BorderView
schreiben, die nur den Rand zeichnet - es sollte nur ein paar Dutzend Codezeilen geben.
<View
Android:id="@+id/border"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_alignBottom="@+id/image"
Android:layout_alignLeft="@+id/image"
Android:layout_alignRight="@+id/image"
Android:layout_alignTop="@+id/main_image"
Android:background="#000" />
<ImageView
Android:id="@+id/image"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_...
Android:padding="1px"
Android:src="@drawable/..." />
Wenn Sie sich fragen, arbeitet funktioniert mit adjustViewBounds=true
. Es funktioniert jedoch nicht, wenn Sie einen Hintergrund in einer gesamten RelativeLayout
haben möchten, da ein Fehler vorliegt, der Sie dazu bringt, eine RelativeLayout
mit einer View
zu füllen. In diesem Fall würde ich die Variable Shape
empfehlen.
Eine letzte Option ist die Verwendung eines 9-Patches, der wie folgt gezeichnet werden kann:
Sie können es in jeder Ansicht verwenden, in der Sie Android:background="@drawable/..."
einstellen können. Und ja, es muss 6x6 sein - ich habe 5x5 versucht und es hat nicht funktioniert.
Der Nachteil dieser Methode ist, dass Sie die Farben nicht sehr einfach ändern können. Wenn Sie jedoch ausgefallene Ränder wünschen (z. B. nur einen Rand oben und unten, wie in dieser Frage), können Sie sie möglicherweise nicht mit der Variable Shape
ausführen. gezeichnet, was nicht sehr mächtig ist.
Ich habe vergessen, diese wirklich einfache Option zu erwähnen, wenn Sie nur Grenzen oberhalb und unterhalb Ihrer Ansicht wünschen. Sie können Ihre Ansicht in eine vertikale LinearLayout
setzen (falls noch nicht geschehen) und dann leere View
s darüber und darunter hinzufügen:
<View Android:background="#000" Android:layout_width="match_parent" Android:layout_height="1px"/>
Um nur einen 1dp
-weißen Rand unten hinzuzufügen und einen transparenten Hintergrund zu erhalten, können Sie Folgendes verwenden, was einfacher ist als die meisten Antworten.
Für die TextView
oder andere Ansicht fügen Sie hinzu:
Android:background="@drawable/borderbottom"
Fügen Sie im Verzeichnis drawable
die folgende XML-Datei mit dem Namen borderbottom.xml
hinzu.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:top="-2dp" Android:left="-2dp" Android:right="-2dp">
<shape Android:shape="rectangle">
<stroke Android:width="1dp" Android:color="#ffffffff" />
<solid Android:color="#00000000" />
</shape>
</item>
</layer-list>
Wenn Sie einen Rand oben wünschen, ändern Sie den Android:top="-2dp"
in Android:bottom="-2dp"
.
Die Farbe muss nicht weiß sein und der Hintergrund muss auch nicht transparent sein.
Das solid
-Element ist möglicherweise nicht erforderlich. Dies hängt von Ihrem Design ab (danke V. Kalyuzhnyu).
Grundsätzlich erstellt dieses XML einen Rahmen mit der Rechteckform, schiebt jedoch die obere, rechte und linke Seite über den Renderbereich für die Form hinaus. So bleibt nur der untere Rand sichtbar.
Also wollte ich etwas anderes machen: NUR einen Rand, um einen ListView-Teiler zu simulieren. Ich habe die Antwort von Piet Delport modifiziert und Folgendes erhalten:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
<shape
Android:shape="rectangle">
<solid Android:color="@color/background_trans_light" />
</shape>
</item>
<!-- this mess is what we have to do to get a bottom border only. -->
<item Android:top="-2dp"
Android:left="-2dp"
Android:right="-2dp"
Android:bottom="1px">
<shape
Android:shape="rectangle">
<stroke Android:width="1dp" Android:color="@color/background_trans_mid" />
<solid Android:color="@null" />
</shape>
</item>
</layer-list>
Beachten Sie die Verwendung von px anstelle von dp, um genau 1 Pixel-Teiler zu erhalten (einige DPIs des Telefons lassen eine 1dp-Linie verschwinden).
Die aktuell akzeptierte Antwort funktioniert nicht. Durch das Anti-Aliasing werden auf der linken und rechten Seite der Ansicht dünne vertikale Ränder erstellt.
Diese Version funktioniert einwandfrei. Außerdem können Sie die Rahmenbreiten unabhängig voneinander einstellen. Außerdem können Sie auf der linken/rechten Seite Rahmen hinzufügen, wenn Sie möchten. Der einzige Nachteil ist, dass es KEINE Transparenz unterstützt.
Erstellen Sie eine XML-Zeichendatei mit dem Namen /res/drawable/top_bottom_borders.xml
mit dem folgenden Code und weisen Sie sie als Hintergrundeigenschaft von TextView zu.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
<shape Android:shape="rectangle">
<solid Android:color="#DDDD00" /> <!-- border color -->
</shape>
</item>
<item
Android:bottom="1dp"
Android:top="1dp"> <!-- adjust borders width here -->
<shape Android:shape="rectangle">
<solid Android:color="#FFFFFF" /> <!-- background color -->
</shape>
</item>
</layer-list>
Getestet auf Android KitKat durch Marshmallow
Genau wie @Nic Hubbard gesagt hat, gibt es eine sehr einfache Möglichkeit, eine Grenzlinie hinzuzufügen.
<View
Android:layout_width="match_parent"
Android:layout_height="2dp"
Android:background="#000000" >
</View>
Sie können die Höhe und Hintergrundfarbe beliebig ändern.
Meine Antworten basieren auf der @Emile-Version, ich verwende jedoch transparente Farbe anstelle von Vollton.
In diesem Beispiel wird eine untere Grenze von 2 dB gezeichnet.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
<shape Android:shape="rectangle" >
<stroke Android:width="2dp"
Android:color="#50C0E9" />
<solid Android:color="@Android:color/transparent" />
</shape>
</item>
<item Android:bottom="2dp" >
<shape Android:shape="rectangle" >
<stroke Android:width="2dp"
Android:color="@color/bgcolor" />
<solid Android:color="@Android:color/transparent" />
</shape>
</item>
</layer-list>
@ color/bgcolor ist die Farbe des Hintergrunds, auf den Sie Ihre Ansicht mit Rand zeichnen.
Wenn Sie die Position des Rahmens ändern möchten, ändern Sie den Versatz mit einem der folgenden Werte:
Android:bottom="2dp"
Android:top="2dp"
Android:right="2dp"
Android:left="2dp"
oder kombiniere sie zu 2 oder mehr Grenzen:
Android:bottom="2dp" Android:top="2dp"
Sie können die Ansicht auch in ein FrameLayout einbetten und dann die Hintergrundfarbe und den Abstand des Frames auf das gewünschte Maß festlegen. Die Textansicht hat jedoch standardmäßig einen 'transparenten' Hintergrund. Sie müssen also auch die Hintergrundfarbe der Textansicht ändern.
Warum nicht einfach eine 1dp-Hochansicht mit Hintergrundfarbe erstellen? Dann kann es einfach platziert werden, wo Sie möchten.
Um dies zu ändern:
<TextView
Android:text="My text"
Android:background="@drawable/top_bottom_border"/>
Ich bevorzuge diesen Ansatz in "drawable/top_bottom_border.xml":
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
<shape>
<gradient
Android:angle="270"
Android:startColor="#000"
Android:centerColor="@Android:color/transparent"
Android:centerX="0.01" />
</shape>
</item>
<item>
<shape>
<gradient
Android:angle="90"
Android:startColor="#000"
Android:centerColor="@Android:color/transparent"
Android:centerX="0.01" />
</shape>
</item>
</layer-list>
Dadurch werden nur die Umrandungen erstellt, nicht ein Rechteck, das angezeigt wird, wenn der Hintergrund eine Farbe hat.
Erstellen Sie zunächst eine XML-Datei mit dem unten gezeigten Inhalt und nennen Sie sie border.xml. Platzieren Sie sie im Layoutordner im Verzeichnis res
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<stroke Android:width="1dp" Android:color="#0000" />
<padding Android:left="0dp" Android:top="1dp" Android:right="0dp"
Android:bottom="1dp" />
</shape>
Danach im Code verwenden
TextView tv = (TextView)findElementById(R.id.yourTextView);
tv.setBackgroundResource(R.layout.border);
Dadurch wird eine schwarze Linie oben und unten in der Textansicht angezeigt.
Schreiben Sie den Code auf
<View
Android:layout_width="wrap_content"
Android:layout_height="2dip"
Android:layout_below="@+id/topics_text"
Android:layout_marginTop="7dp"
Android:layout_margin="10dp"
Android:background="#ffffff" />
Nur um meine Lösung der Liste hinzuzufügen ..
Ich wollte einen halbtransparenten unteren Rand, der über die ursprüngliche Form hinausragt (also war der halbtransparente Rand außerhalb des übergeordneten Rechtecks).
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
<shape Android:shape="rectangle" >
<solid Android:color="#33000000" /> <!-- Border colour -->
</shape>
</item>
<item Android:bottom="2dp" >
<shape Android:shape="rectangle" >
<solid Android:color="#164586" />
</shape>
</item>
</layer-list>
Was mir gibt;
Fügen Sie einfach Ansichten am oberen und unteren Rand der View
hinzu.
<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<View
Android:layout_width="match_parent"
Android:layout_height="1dp"
Android:background="@color/your_color"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintStart_toStartOf="@+id/textView" />
<TextView
Android:id="@+id/textView"
Android:layout_width="0dp"
Android:layout_height="wrap_content"
Android:layout_marginTop="32dp"
Android:gravity="center"
Android:text="Testing"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
Android:layout_width="match_parent"
Android:layout_height="1dp"
Android:background="@color/your_color"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintStart_toStartOf="@+id/textView"
app:layout_constraintTop_toBottomOf="@+id/textView" />
</Android.support.constraint.ConstraintLayout>
Versuchen Sie, das Bild mit einem linearen Layout zu versehen, und stellen Sie den Hintergrund auf die Rahmenfarbe ein, die der Text umgeben soll. Stellen Sie dann den Abstand in der Textansicht auf die Stärke ein, die Sie für Ihren Rand wünschen.
Sie können auch einen 9-Pfad verwenden, um Ihre Arbeit zu erledigen. Erstellen Sie es so, dass sich farbige Pixel nicht nur in der Höhe, sondern nur mit dem transparenten Pixel multiplizieren.
Hier ist ein Weg, um es zu erreichen.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
<shape Android:shape="rectangle">
<stroke
Android:width="1dp"
Android:color="@color/grey_coaching_text" />
</shape>
</item>
<item
Android:bottom="1dp"
Android:top="1dp">
<shape Android:shape="rectangle">
<solid Android:color="@color/white" />
</shape>
</item>
</layer-list>
Erster Punkt für Schlaganfall und zweiter für kräftigen Hintergrund. Linke und rechte Ränder verstecken.
// Just simply add border around the image view or view
<ImageView
Android:id="@+id/imageView2"
Android:layout_width="90dp"
Android:layout_height="70dp"
Android:layout_centerVertical="true"
Android:layout_marginRight="10dp"
Android:layout_toLeftOf="@+id/imageView1"
Android:background="@Android:color/white"
Android:padding="5dip" />
// After that dynamically put color into your view or image view object
objView.setBackgroundColor(Color.GREEN);
//VinodJ/Abhishek
<TextView
Android:id="@+id/textView3"
Android:layout_width="match_parent"
Android:layout_height="2dp"
Android:background="#72cdf4"
Android:text=" aa" />
Fügen Sie einfach diese Textansicht unter dem Text hinzu, in dem Sie den Rahmen einfügen möchten
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="@color/light_grey1" />
<stroke
Android:width="1dip"
Android:color="@color/light_grey1" />
<corners
Android:bottomLeftRadius="0dp"
Android:bottomRightRadius="0dp"
Android:topLeftRadius="5dp"
Android:topRightRadius="5dp" />
</shape>
Die einfachste Möglichkeit zum Hinzufügen von Rändern zum Einfügen der Ränder mithilfe von InsetDrawable
, wird nur der obere Rand des Schuhs verwendet:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:insetBottom="-2dp"
Android:insetLeft="-2dp"
Android:insetRight="-2dp">
<shape Android:shape="rectangle">
<solid Android:color="@color/light_gray" />
<stroke
Android:width=".5dp"
Android:color="@color/dark_gray" />
</shape>
</inset>