Android - dessinable avec des coins arrondis en haut uniquement


151

J'ai eu ce dessinable pour avoir un rectangle arrondi en arrière-plan:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:radius="6dp" />
</shape>

Cela fonctionne bien, comme prévu.

Maintenant, je veux changer cela pour arrondir uniquement les coins supérieurs, donc je le change en ceci:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
             android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

Mais maintenant, aucun des coins n'est arrondi et j'obtiens un rectangle uni. Qu'est-ce que j'oublie ici?


Ce n'est vraiment pas une solution mais je pense que j'ai déjà eu un problème similaire. Augmenter la charge à 2 pixels a aidé, mais vous savez, ce n'est pas une solution.
Code Poet

Voici un problème avec les coins de forme: code.google.com/p/android/issues/detail?id=939
Knickedi

Réponses:


304

Essayez de donner ces valeurs:

 <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
         android:bottomLeftRadius="0.1dp" android:bottomRightRadius="0.1dp"/>

Notez que j'ai changé 0dpen 0.1dp.

EDIT: Voir le commentaire d' Aleks G ci-dessous pour une version plus propre


131
En explorant cela plus loin, j'ai trouvé une solution encore meilleure: <corners android:radius="1dp" android:topLeftRadius="6dp" android:topRightRadius="6dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>- cela produit des coins inférieurs parfaitement carrés sans même un soupçon d'arrondi. Cependant, votre solution fonctionne à peu près.
Aleks G

Comment le faire en code, avec un bitmap? Et comment ajouter un contour (AKA stroke) autour de lui?
développeur android

@Aleks G je ne vois pas qu'il soit nécessaire de spécifierandroid:radius="1dp"
hmac

@hmac c'est nécessaire. Lisez la documentation, c'est clair.
Aleks G

@AleksG Oui, la documentation est fausse, test sur Samsung 10, Android 9: "Chaque coin doit (initialement) avoir un rayon d'angle supérieur à 1, sinon aucun coin n'est arrondi. Si vous voulez que des coins spécifiques ne soient pas arrondis, un le contournement consiste à utiliser android: radius pour définir un rayon de coin par défaut supérieur à 1, mais ensuite remplacer "- pas vrai, je spécifie en bas à droite, en haut à droite, en haut à gauche comme zéro et en bas à gauche + ve et en bas à gauche est correctement courbé
hmac

14

Essayez de faire quelque chose comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="-20dp" android:left="-20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <corners android:radius="20dp" />
        </shape>
    </item>
</layer-list>

Il ne semble pas approprié de définir un rayon de coin différent du rectangle. Vous pouvez donc utiliser ce hack.


Voir ma propre réponse - il est parfaitement acceptable d'avoir un rayon différent pour différents coins.
Aleks G

J'ai essayé cette approche, ce n'est pas acceptable, ide dit qu'il ne convient pas d'avoir un rsdius différent et l'ignore
busylee

11

Dans mon cas ci-dessous le code

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

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

            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
            />
        </shape>

    </item>
    </layer-list>

1
Les propriétés du haut et du bas de l'élément ne sont pas nécessaires, sauf si vous souhaitez un remplissage dans la vue, mais sinon cela fonctionne.
RominaV

9

Se fondant sur la réponse de busylee , voici comment vous pouvez faire un drawablequi n'a qu'un seul un coin arrondi ( en haut à gauche, dans cet exemple):

<?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/white" />
            <!-- A numeric value is specified in "radius" for demonstrative purposes only,
                  it should be @dimen/val_name -->
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- To keep the TOP-LEFT corner UNROUNDED set both OPPOSITE offsets (bottom+right): -->
    <item
        android:bottom="10dp"
        android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

S'il vous plaît noter que ce qui précède drawableest pas correctement montré dans l'aperçu Android Studio (2.0.0p7). Pour le prévisualiser quand même, créez une autre vue et utilisez-la comme android:background="@drawable/...".


6
@AleksG - Bien sûr. C'est pertinent aujourd'hui comme à l'époque (comme preuve - j'avais besoin de quelque chose comme ça). Vous devez savoir qu'au fil des ans, certaines façons de faire deviennent obsolètes et devront peut-être être remplacées par des méthodes plus modernes. Comme Busylee l'a mentionné, l'IDE se plaint lors de la définition de différents rayons d'angle, ce qui n'est pas le cas avec la présente méthode. De plus, comme cette question était mon premier succès sur Google (iirc), il était logique pour moi de la mettre à jour. Quoi qu'il en soit, je suis sûr que SO ne me dérangera pas encore quelques Ko de code ... :)
Dev-iL

2

J'ai essayé votre code et j'ai obtenu un bouton dans le coin supérieur arrondi. J'ai donné les couleurs au fur @ffffffet à mesure et le trait que j'ai donné #C0C0C0.

essayer

  1. Donner android: bottomLeftRadius = "0.1dp" au lieu de 0. si cela ne fonctionne pas
  2. Vérifiez quel dessinable et la résolution de l'émulateur. J'ai créé un dossier dessinable sous res et je l'utilise. (hdpi, mdpi ldpi) le dossier dans lequel vous avez ce XML. c'est ma sortie.

entrez la description de l'image ici


De quelle version Android s'agit-il? Mon application doit fonctionner sur 1.6 - et l'émulateur 1.6 a eu le problème.
Aleks G

1

Vous devrez peut-être lire ceci https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

et ci-dessous il y a une note.

Remarque Chaque coin doit (initialement) avoir un rayon d'angle supérieur à 1, sinon aucun coin n'est arrondi. Si vous souhaitez que des coins spécifiques ne soient pas arrondis, une solution consiste à utiliser android: radius pour définir un rayon de coin par défaut supérieur à 1, mais remplacez chaque coin par les valeurs que vous voulez vraiment, en fournissant zéro ("0dp" ) où vous ne voulez pas de coins arrondis.


1

Créez roung_top_corners.xml sur drawable et copiez le code ci-dessous

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
    android:topLeftRadius="22dp"
    android:topRightRadius="22dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    />
<gradient
    android:angle="180"
    android:startColor="#1d2b32"
    android:centerColor="#465059"
    android:endColor="#687079"
    android:type="linear" />
<padding
    android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp"
    />
<size
    android:width="270dp"
    android:height="60dp"
    /></shape>
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.