wake-up-neo.com

Gibt es eine einfache Möglichkeit, einen Rand oben und unten in einer Android-Ansicht hinzuzufügen?

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?

358
emmby

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.

393
Emile

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>
255
user1051892

Option 1: Shape Drawable

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.

Option 2: Hintergrundansicht

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.

Option 3: 9-Patch

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.

Option 4: Zusätzliche Ansichten

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 Views darüber und darunter hinzufügen:

<View Android:background="#000" Android:layout_width="match_parent" Android:layout_height="1px"/>
94
Timmmm

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.

72
Tigger

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).

35
phreakhead

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

34
gregschlom

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.

8
MattZ

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"
7
vovahost

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.

7
okaram

Warum nicht einfach eine 1dp-Hochansicht mit Hintergrundfarbe erstellen? Dann kann es einfach platziert werden, wo Sie möchten.

5
Nic Hubbard

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.

4
Dinidiniz

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.

4
Nikhil Dinesh

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" />
3
Abhi

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;

enter image description here

3
Cadab

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>
1
Levon Petrosyan

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.

1
Matt

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.

1
Kowlown

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.

0
Kavya Shravan
// 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
0
Vinod Joshi
<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

0
Aquib Maniyar
<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>
0
Vinoj Vetha

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>
0
Zaid Mirza