Style de fond dans Android


120

J'ai besoin de créer une forme androïde pour que seul le bas ait un trait (une ligne en pointillés). Lorsque j'essaye ce qui suit, le trait coupe la forme en deux par le centre. Quelqu'un sait-il comment faire les choses correctement? le trait doit être la ligne du bas / la bordure. J'utilise la forme comme arrière-plan d'un TextView. S'il vous plaît, ne vous inquiétez pas pourquoi j'en ai besoin

<?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
Pourquoi est-ce que j'irais voir votre projet git pour quelque chose d'aussi simple? Cherchez-vous des hits pour ce projet?
Cote Mounyo

par simple curiosité, pourquoi utilisez-vous px pour spécifier la taille des tirets?
Jose_GD

Réponses:


313

C'est une sorte de hack, mais je pense que c'est probablement la meilleure façon de le faire. La ligne pointillée sera toujours en bas, quelle que soit la hauteur.

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

Explication:

La deuxième forme est un rectangle transparent avec un contour en pointillé. La clé pour que la bordure n'apparaisse que le long du bas réside dans les marges négatives définies sur les autres côtés. Ces marges négatives "poussent" la ligne en pointillé à l'extérieur de la zone dessinée sur ces côtés, ne laissant que la ligne le long du bas. Un effet secondaire potentiel (que je n'ai pas essayé) est que, pour les vues qui sortent de leurs propres limites, les bordures de marge négative peuvent devenir visibles.


5
Intelligent en effet. Il m'a fallu un certain temps pour comprendre que ce qui fait ce travail est la différence de 1 dp (en valeur absolue) entre le haut, la droite et la gauche et la largeur du trait :)
Jose_GD

5
Cela fonctionne parfaitement, mais quelqu'un pourrait-il s'il vous plaît compléter la réponse avec une explication des mathématiques dans ce domaine (pour les pauvres âmes comme moi et quiconque arrivera ici dans les jours à venir) :)
source.rar

Fonctionne très bien. Et vous pouvez même utiliser un sélecteur qui pointe vers des fichiers XML de liste de calques en fonction de l'état. Je devais comprendre celui-là et cela fonctionne aussi.
Dacker le

N'introduisez pas de découvert inutile. Je pense que la solution @Anonan est meilleure. Essayez de modifier celui-ci selon vos besoins.
Vlad

44

Cela fait l'affaire ...

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

Il y a deux rectangles qui se chevauchent et ajouter un espace en bas pour afficher une autre couleur sous forme de ligne. donc, vous pouvez l'appliquer pour faire autrement
Jongz Puangput

3
Bonne réponse mais avec un découvert redondant
Lester

et ne fonctionnera pas non plus lorsque vous avez des couleurs avec 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>

A parfaitement fonctionné pour moi! Merci.
hetsgandhi le

19

Cette réponse est destinée aux chercheurs Google qui souhaitent afficher la bordure inférieure en pointillé EditTextcomme ici

échantillon

Créez un dossier dotted.xmlintérieur drawableet collez-les

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

Ensuite, définissez simplement l' android:backgroundattribut que dotted.xmlnous venons de créer. Votre EditTextressemble à ceci.

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

13

Je pense que c'est simple, sans toutes ces rembourrages négatifs ou cigognes.

<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
Si vous n'avez pas besoin d'un arrière-plan spécial, vous pouvez supprimer le<item android:drawable="@color/main_bg_color"/>
Overclover

1
Fonctionne avec Android 27, ne fonctionne pas avec Android 19 ... n'a pas testé d'autres versions.
Ridcully

10

Essayez le prochain code de dessin 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

Je pense que vous n'avez pas besoin d'utiliser la forme si je vous ai compris.

Si vous regardez comme indiqué dans l'image suivante, utilisez la disposition suivante.

entrez la description de l'image ici

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

ÉDITER

jouer avec ces propriétés, vous obtiendrez un résultat

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

essaie comme ça

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

mon coup est une ligne pointillée
Cote Mounyo

Cela fonctionne, la seule mise en garde est lorsque la vue est redimensionnée trop petite, la forme devient invisible
Jose_GD

Vous devez toujours faire attention à ne pas introduire de découvert inutile.
Vlad

5

Une solution simple:

Créez un fichier dessinable comme edittext_stroke.xml dans le dossier dessinable. Ajoutez le code ci-dessous:

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

Dans le fichier de mise en page, ajoutez le dessinable à edittext comme

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

Dans ce cas, votre ligne sera au centre, pas en bas
Sviatoslav Zaitsev

4

Habituellement, pour des tâches similaires - j'ai créé une liste de calques pouvant être dessinée comme celle-ci:

<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'idée est que vous dessinez d'abord le rectangle avec underlineColor, puis par-dessus celui-ci, vous dessinez un autre rectangle avec le buttonColor réel mais en appliquant bottomPadding. Ça marche toujours.

Mais quand j'avais besoin que buttonColor soit transparent, je ne pouvais pas utiliser le dessin ci-dessus. J'ai trouvé une autre solution

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

(comme vous pouvez le voir ici, le mainButtonColor est transparent et white_box est juste un simple rectangle dessinable avec un solide blanc)


2

utilisez ce xml changez la couleur avec votre choix.

<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 si vous voulez par programme

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

appelez cette méthode comme

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

2

Cela a fonctionné le mieux pour moi:

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

Affiche la ligne en bas uniquement. Vous pouvez facilement modifier la largeur du trait à la taille que vous aimez et également mettre à jour le haut, la gauche et la droite en conséquence.


2

Le moyen le plus simple de le faire est de placer après cette vue où vous voulez la bordure inférieure

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

0

c'est Edittext complètement transparent avec fond transparent.

<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

Une solution simple :

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

Et enfin nous avons quelque chose comme ça :)

entrez la description de l'image ici

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.