Stile di fondo in Android


120

Devo creare una forma androide in modo che solo il fondo abbia un tratto (una linea tratteggiata). Quando provo quanto segue, il tratto taglia in due la forma attraverso il centro. Qualcuno sa come farlo bene? il tratto deve essere la linea / bordo inferiore. Sto usando la forma come sfondo per un TextView. Per favore, non importa perché ne ho bisogno.

<?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="#1bd4f6" />
        </shape>
    </item>

    <item>
        <shape android:shape="line" >
            <padding android:bottom="1dp" />

            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

2
Perché dovrei andare a vedere il tuo progetto git per qualcosa di così semplice? Cerchi hit per questo progetto?
Cote Mounyo

solo per curiosità, perché usi px per specificare le dimensioni dei trattini?
Jose_GD

Risposte:


313

È una specie di hack, ma penso che questo sia probabilmente il modo migliore per farlo. La linea tratteggiata sarà sempre in basso, indipendentemente dall'altezza.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

Spiegazione:

La seconda forma è un rettangolo trasparente con un contorno tratteggiato. La chiave per fare in modo che il bordo appaia solo lungo il fondo risiede nei margini negativi impostati sugli altri lati. Questi margini negativi "spingono" la linea tratteggiata fuori dall'area tracciata su quei lati, lasciando solo la linea lungo il fondo. Un potenziale effetto collaterale (che non ho provato) è che, per le viste che disegnano al di fuori dei propri limiti, i bordi del margine negativo potrebbero diventare visibili.


5
Davvero intelligente. Mi ci è voluto del tempo per capire che ciò che rende questo lavoro è la differenza di 1 dp (in valore assoluto) tra alto, destro e sinistro e la larghezza del tratto :)
Jose_GD

5
Funziona perfettamente, ma qualcuno potrebbe integrare la risposta con una spiegazione matematica in questo (per le povere anime come me e chiunque altro arrivi qui nei giorni a venire) :)
source.rar

Funziona alla grande. E puoi persino usare un selettore che punta agli xml dell'elenco dei livelli a seconda dello stato. Ho dovuto capirlo e funziona anche.
Dacker

Non introdurre superamenti inutili. Penso che la soluzione di @Anonan sia migliore. Prova a modificarlo in base alle tue esigenze.
Vlad

44

Questo fa il trucco ...

<item >
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BOTTOM_LINE_COLOR"/>
    </shape>
</item>

<item android:bottom="1.5dp">
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BG_COLOR"/>
    </shape>
</item>

Ci sono due rettangoli che si sovrappongono e aggiungono spazio in basso per mostrare un altro colore come una linea. quindi, puoi applicarlo in un altro modo
Jongz Puangput

3
Buona risposta ma con overdraw ridondante
Lester

e inoltre non funzionerà quando si hanno colori con alpha
Dirk

43
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:bottom="0dp">

        <shape android:shape="rectangle">
            <solid android:color="#88FFFF00"/>
            <stroke
                android:width="5dp"
                android:color="#FF000000"/>
        </shape>
    </item>
</layer-list>

Ha funzionato perfettamente per me! Grazie.
hetsgandhi

19

Questa risposta è per quei ricercatori di Google che vogliono mostrare il bordo inferiore tratteggiato EditTextcome qui

campione

Crea una cartella dotted.xmlinterna drawablee incolla questi

<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="0.5dp"
                android:color="@android:color/black" />    
            <solid android:color="#ffffff" />
            <stroke
                android:width="1dp"
                android:color="#030310"
                android:dashGap="5dp"
                android:dashWidth="5dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

Quindi imposta semplicemente l' android:backgroundattributo su che dotted.xmlabbiamo appena creato. Il tuo EditTextsembra così.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Some Text"
    android:background="@drawable/dotted" />

13

Sento che è semplice, senza tutte queste imbottiture negative o cicogne.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/main_bg_color"/>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="5dp"/>
            <solid android:color="@color/bottom_bar_color"/>
        </shape>
    </item>
</layer-list>

2
Se non hai bisogno di uno sfondo speciale, puoi rimuovere<item android:drawable="@color/main_bg_color"/>
Overclover

1
Funziona con Android 27, non funziona con Android 19 ... non ha testato altre versioni.
Ridcully

10

Prova il prossimo codice disegnabile xml:

    <layer-list>
        <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
            <shape>
                <solid android:color="@android:color/transparent" />
                <stroke
                    android:width="1dp"
                    android:color="#fff" />
            </shape>
        </item>
    </layer-list>

7

Penso che non sia necessario usare la forma se ti ho capito.

Se stai guardando come mostrato nell'immagine seguente, usa il seguente layout.

inserisci qui la descrizione dell'immagine

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#1bd4f6"
    android:paddingBottom="4dp" >

    <TextView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="#ababb2"
        android:padding="5dp"
        android:text="Hello Android" />
 </RelativeLayout>

 </RelativeLayout>

MODIFICARE

giocando con queste proprietà otterrai risultati

    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension"

prova in questo modo

<?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="#1bd4f6" />
    </shape>
</item>

<item android:top="20px"
    android:left="0px">
    <shape android:shape="line"  >
        <padding android:bottom="1dp" />

        <stroke
            android:dashGap="10px"
            android:dashWidth="10px"
            android:width="1dp"
            android:color="#ababb2" />
    </shape>
</item>

</layer-list>

il mio tratto è una linea tratteggiata
Cote Mounyo

Funziona, l'unico avvertimento è quando la vista viene ridimensionata troppo piccola, la forma diventa invisibile
Jose_GD

Dovresti sempre fare attenzione a non introdurre overdraw non necessari.
Vlad

5

Una soluzione semplice:

Crea un file disegnabile come edittext_stroke.xml nella cartella drawable. Aggiungi il codice seguente:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
   >
    <stroke
        android:width="1dp"
        android:color="@android:color/white" >
    </stroke>
</shape>

Nel file di layout, aggiungi il drawable a edittext come

Android: drawableBottom = "@ drawable / edittext_stroke"

<EditText
      android:textColor="@android:color/white"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableBottom="@drawable/edittext_stroke"
      />

In questo caso la tua linea sarà al centro, non in basso
Sviatoslav Zaitsev

4

Di solito per attività simili - ho creato un elenco di livelli disegnabile come questo:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
        <solid android:color="@color/underlineColor"/>
        </shape>
    </item>
<item android:bottom="3dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/buttonColor"/>
    </shape>
</item>

L'idea è che prima si disegna il rettangolo con underlineColor e poi sopra questo si disegna un altro rettangolo con l'attuale buttonColor ma applicando bottomPadding. Funziona sempre.

Ma quando avevo bisogno che buttonColor fosse trasparente, non potevo usare il disegno sopra. Ho trovato un'altra soluzione

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>

<item android:drawable="@drawable/white_box" android:gravity="bottom"     android:height="2dp"/>
</layer-list>

(come puoi vedere qui il mainButtonColor è trasparente e white_box è solo un semplice rettangolo disegnabile con Solid bianco)


2

usa questo xml cambia il colore a tua scelta.

<item>
    <layer-list>
        <item>
            <shape>
                <solid android:color="@color/gray_500" />

            </shape>
        </item>
        <!-- CONTENT LAYER -->
        <item android:bottom="2dp" >
            <shape>
                <solid android:color="#ffffff" />
            </shape>
        </item>
    </layer-list>
</item>

In Case se vuoi a livello di codice

public static Drawable getStorkLineDrawable(@ColorInt int colorStrok, int    iSize, int left, int top, int right, int bottom)

{
    GradientDrawable gradientDrawable = new GradientDrawable();
    gradientDrawable.setShape(GradientDrawable.RECTANGLE);
    gradientDrawable.setStroke(iSize, colorStrok);
    LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{gradientDrawable});
    layerDrawable.setLayerInset(0, left, top, right, bottom);
    return layerDrawable;
}

chiama questo metodo come

  Drawable yourLineDrawable=  getStorkLineDrawable(yourColor, iSize, -iSize, -iSize, -iSize, 0);

2

Questo ha funzionato meglio per me:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-5dp" android:left="-5dp" android:right="-5dp" android:bottom="0dp">
        <shape android:shape="rectangle">
            <stroke android:width="4dp" android:color="#ff0000"/>
        </shape>
    </item>
</layer-list>

Mostra solo la linea in basso. Puoi facilmente modificare la larghezza del tratto in base alle dimensioni che preferisci e anche aggiornare la parte superiore, sinistra, destra di conseguenza.


2

Il modo più semplice per farlo è mettere dopo quella vista dove vuoi il bordo inferiore

    <?xml version="1.0" encoding="utf-8"?>
    <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/colorPrimary" />

0

è Edittext completamente trasparente con sfondo trasparente.

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/transparent" />
    </shape>
</item>

<item android:top="-3dp" android:right="-3dp" android:left="-3dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke

            android:width="2dp"
            android:color="@color/bottomline" />
    </shape>
</item>


0

Una soluzione semplice :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="-1dp"
        android:left="-1dp"
        android:right="-1dp"
        android:top="-1dp">

        <shape android:shape="rectangle">

            <solid android:color="#AARRGGBB" />

            <stroke
                android:width="5dp"
                android:color="@android:color/red"
                android:dashWidth="10dp"
                android:dashGap="12dp" />

        </shape>
    </item>
</layer-list>

E finalmente abbiamo qualcosa del genere :)

inserisci qui la descrizione dell'immagine

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.