Mam TextView i chciałbym dodać czarną ramkę wzdłuż górnej i dolnej granicy. Próbowałem dodać android:drawableTopi android:drawableBottomdo TextView, ale to spowodowało, że cały widok stał się czarny.

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

Czy istnieje sposób na łatwe dodanie górnej i dolnej ramki do widoku (w szczególności TextView) w Androidzie?

W Androidzie 2.2 możesz wykonać następujące czynności.

Utwórz rysunkowy xml, taki jak /res/drawable/textlines.xml i przypisz go jako właściwość tła TextView.

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

Wadą tego jest to, że musisz określić nieprzezroczysty kolor tła, ponieważ folie nie będą działać. (Przynajmniej myślałem, że tak, ale się myliłem). W powyższym przykładzie widać, że jednolity kolor pierwszego kształtu #FFdddddd jest kopiowany w kolorze obrysu 2. kształtu.

Użyłem lewy, aby ramka była wyświetlana poza kontenerem. W przypadku tej sztuczki rysowana jest tylko linia, aby pokazać tło widoku podstawowego.

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

Opcja 1: kształt rysowany

Jest to najprostsza opcja, jeśli chcesz obramować układ lub widok, w którym możesz ustawić tło. Utwórz plik XML w drawablefolderze, który wygląda mniej więcej tak:

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

Możesz usunąć, solidjeśli nie chcesz wypełnienia. Zestaw background="@drawable/your_shape_drawable"w twoim układzie / widoku.

Opcja 2: Widok tła

Oto mała sztuczka, której użyłem w RelativeLayout. Zasadniczo masz czarny kwadrat pod widokiem, który chcesz nadać ramce, a następnie nadaj temu widokowi trochę wypełnienia (nie marginesu!), Aby czarny kwadrat był widoczny na krawędziach.

Oczywiście działa to poprawnie tylko wtedy, gdy widok nie ma żadnych przezroczystych obszarów. Jeśli tak, polecam napisać niestandardowy, BorderViewktóry tylko rysuje granicę - powinien to być tylko kilkadziesiąt linii kodu.

<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/..." />

Jeśli zastanawiasz się, to czyni pracę z adjustViewBounds=true. Jednak to nie działa, jeśli chcesz mieć tło w całości RelativeLayout, ponieważ istnieje błąd, który powstrzymuje Cię od wypełnienia RelativeLayoutznakiem View. W takim przypadku polecam Shapewyciągnąć.

Opcja 3: 9 łatek

Ostatnią opcją jest skorzystanie z 9-patcha, który można wyciągnąć w następujący sposób:

Możesz go użyć w dowolnym widoku, w którym możesz ustawić android:background="@drawable/...". I tak, to musi być 6x6 - próbowałem 5x5 i to nie działało.

Wadą tej metody jest to, że nie możesz bardzo łatwo zmieniać kolorów, ale jeśli chcesz fantazyjne obramowania (np. Tylko obramowanie u góry iu dołu, jak w tym pytaniu), możesz nie być w stanie zrobić ich z Shaperysowalnym , co nie jest zbyt potężne.

Opcja 4: Dodatkowe widoki

Zapomniałem wspomnieć o tej naprawdę prostej opcji, jeśli chcesz tylko ramki powyżej i poniżej widoku. Możesz umieścić swój widok w pionie LinearLayout(jeśli jeszcze nie jest), a następnie dodać puste Views powyżej i poniżej tak:

<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>

Aby dodać 1dpbiałą ramkę tylko u dołu i mieć przezroczyste tło, możesz skorzystać z poniższych, co jest prostsze niż większość odpowiedzi tutaj.

Dla tego TextViewlub innego widoku dodaj:

android:background="@drawable/borderbottom"

A w drawablekatalogu dodaj następujący kod XML o nazwieborderbottom.xml

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

Jeśli chcesz mieć ramkę u góry, zmień android:top="-2dp"naandroid:bottom="-2dp"

Kolor nie musi być biały, a tło nie musi być przezroczyste.

solidNie mogą być wymagane elementem. Będzie to zależeć od twojego projektu (dzięki V. Kalyuzhnyu).

Zasadniczo ten plik XML utworzy ramkę przy użyciu kształtu prostokąta, ale następnie wypchnie górną, prawą i lewą stronę poza obszar renderowania dla kształtu. Pozostawia to tylko dolną ramkę.

Aktualnie akceptowana odpowiedź nie działa. W wyniku wygładzania tworzy cienkie pionowe ramki po lewej i prawej stronie widoku.

Ta wersja działa idealnie. Umożliwia także niezależne ustawianie szerokości ramek, a także dodawanie ramek po lewej / prawej stronie, jeśli chcesz. Jedyną wadą jest to, że NIE obsługuje przezroczystości.

Utwórz rysunkowy xml o nazwie /res/drawable/top_bottom_borders.xmlz poniższym kodem i przypisz go jako właściwość tła TextView .

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

Testowane na Androidzie KitKat przez Marshmallow

Chciałem więc zrobić coś nieco innego: TYLKO ramkę na dole, aby zasymulować dzielnik ListView. Zmodyfikowałem odpowiedź Piet Delport i otrzymałem to:

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

Uwaga: użycie px zamiast dp, aby uzyskać dokładnie 1 dzielnik pikseli (niektóre DPI telefonu powodują zniknięcie linii 1dp).

Tak jak powiedział @Nic Hubbard, istnieje bardzo łatwy sposób na dodanie linii granicznej.

<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#000000" >
</View>

Możesz zmienić wysokość i kolor tła na cokolwiek chcesz.

Moje odpowiedzi są oparte na wersji @Emile, ale używam przezroczystego koloru zamiast jednolitego.
Ten przykład narysuje dolną granicę 2dp.

<?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 to kolor tła, na którym narysujesz widok z ramką.

Jeśli chcesz zmienić położenie granicy, zmień przesunięcie jednym z:

android:bottom="2dp"
android:top="2dp"
android:right="2dp"
android:left="2dp"

lub połącz je, aby mieć 2 lub więcej ramek:

android:bottom="2dp" android:top="2dp"

Możesz także zawinąć widok w FrameLayout, a następnie ustawić kolor tła i dopełnienie ramki do tego, co chcesz; jednak widok tekstu ma domyślnie „przezroczyste” tło, dlatego należy zmienić również kolor tła widoku tekstu.

Dlaczego po prostu nie utworzyć widoku wysokiej rozdzielczości 1dp z kolorem tła? Następnie można go łatwo ustawić w dowolnym miejscu.

Aby dodać moje rozwiązanie do listy ...

Chciałem półprzezroczystą dolną ramkę, która rozciąga się poza pierwotny kształt (więc półprzezroczysta ramka znajdowała się poza prostokątem nadrzędnym).

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

Co daje mi;

Aby to zmienić:

<TextView
    android:text="My text"
    android:background="@drawable/top_bottom_border"/>

Wolę to podejście w „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>

Powoduje to, że obramowania, a nie prostokąt, który pojawi się, jeśli tło ma kolor.

Najpierw utwórz plik xml z zawartością pokazaną poniżej i nazwij go border.xml i umieść go w folderze układu w katalogu 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>

Następnie użyj kodu

TextView tv = (TextView)findElementById(R.id.yourTextView);
tv.setBackgroundResource(R.layout.border);

Spowoduje to utworzenie czarnej linii na górze i na dole TextView.

Zapisz poniżej kodu

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

Oto sposób na osiągnięcie tego.

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

Pierwszy element do obrysu i drugi do jednolitego tła. Ukrywanie lewej i prawej granicy.

Najprostszym sposobem dodania obramowań w celu wstawienia obramowań za pomocą InsetDrawable, następujące pokaże tylko górną ramkę:

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

Dodaj plik do res / drawable

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:left="-2dp" android:right="-2dp">
            <shape android:shape="rectangle">
                <stroke
                    android:width="1dp"
                    android:color="#000000" />
            </shape>
        </item>
    </layer-list>

Dodaj link do tego pliku do właściwości tła

Spróbuj owinąć obraz liniowym układem i ustaw jego tło na odpowiedni kolor obramowania wokół tekstu. Następnie ustaw dopełnienie w widoku tekstu na grubość, którą chcesz dla swojej ramki.

Możesz także skorzystać z 9 ścieżek, aby wykonać swoją pracę. Utwórz go, aby kolorowy piksel nie zwielokrotniał się na wysokości, a tylko przezroczysty piksel.

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

Po prostu dodaj widoki u góry iu dołu View

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

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

Po prostu dodaj ten TextView poniżej tekstu, w którym chcesz dodać ramkę

Aby wymusić odpowiedzi @phreakhead i user1051892 , <item android:bottom|android:left|android:right|android:top>jeśli negatywne, muszą być większe niż <stroke android:width>. Jeśli nie, obraz przedmiotu zostanie pomieszany z obrazem obrysu i możesz pomyśleć, że te wartości nie działają.