web-dev-qa-db-fra.com

Comment créer des boutons sans bordure dans Android

Les directives de conception Android disent d'utiliser des boutons sans bordure (voir l'image ci-dessous), mais n'expliquent pas vraiment comment. Quelqu'un a posé la même question il y a quelques semaines: Comment créer des boutons standard sans bordure (comme dans le guide de conception mentionné)? et il y avait une réponse marquée "la" réponse, mais je suis toujours perdu et je ne vois pas comment ajouter des commentaires à une question qui a été "fermée"

Le répondeur a dit

"Regardez dans les attributs du thème buttonBarStyle, buttonBarButtonStyle et borderlessButtonStyle"

mais je n'arrive toujours pas à comprendre comment utiliser ces choses. J'ai cherché un peu dans Google et je n'ai rien trouvé. J'ai donc décidé de poser la question à nouveau. J'espère que quelqu'un pourra vous donner un peu plus de détails sur la façon dont cela fonctionne.

enter image description here

androidlayoutbuttonborderless
86
demarcmj

Je pensais avoir résolu ce problème lorsque j'ai jeté un coup d'œil ici il y a quelques semaines et j'ai remarqué la réponse à propos de l'utilisation d'un fond transparent, mais ce n'est pas assez, car cela empêche le bouton d'être mis en surbrillance lorsque vous appuyez dessus.

De plus, définir le style sur Widget.Holo.Button.Borderless n'est pas approprié car cela rend les limites du bouton trop grandes.

Pour comprendre cela une fois pour toutes, j'ai vérifié le code source Android de l'application Calendrier standard et constaté qu'il utilise les éléments suivants:

Android:background="?android:attr/selectableItemBackground"

En procédant ainsi, le bouton est sans bordure et la bonne taille.

143
Paul Drummond

Regardez ceci: http://developer.Android.com/guide/topics/ui/controls/button.html#Borderless

L'attribut de votre balise Button ou ImageButton:

    style="?android:attr/borderlessButtonStyle"
80
Dalc

Si vous utilisez ActionbarSherlock ...

<Button 
  Android:id="@+id/my_button" 
  style="@style/Widget.Sherlock.ActionButton" />
23
WindRider

Il y a quelques jours, la situation s'est dégradée.

Voici ma solution:

Cela se fait en 2 étapes: Définir l'attribut de fond du bouton sur Android: attr/selectableItemBackground vous crée un bouton avec retour mais sans arrière-plan.

Android:background="?android:attr/selectableItemBackground"

La ligne pour séparer le bouton sans bordure du reste de la présentation est créée par une vue avec l'arrière-plan Android: attr/dividerVertical

Android:background="?android:attr/dividerVertical"

Pour une meilleure compréhension, voici une disposition pour une combinaison de boutons sans bordure OK/Annuler au bas de votre écran (comme dans l’image de droite ci-dessus).

<RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="48dp"
        Android:layout_alignParentBottom="true">
        <View
            Android:layout_width="match_parent"
            Android:layout_height="1dip"
            Android:layout_marginLeft="4dip"
            Android:layout_marginRight="4dip"
            Android:background="?android:attr/dividerVertical"
            Android:layout_alignParentTop="true"/>
        <View
            Android:id="@+id/ViewColorPickerHelper"
            Android:layout_width="1dip"
            Android:layout_height="wrap_content"
            Android:layout_alignParentTop="true"
            Android:layout_alignParentBottom="true"
            Android:layout_marginBottom="4dip"
            Android:layout_marginTop="4dip"
            Android:background="?android:attr/dividerVertical" 
            Android:layout_centerHorizontal="true"/>
        <Button
            Android:id="@+id/BtnColorPickerCancel"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentLeft="true"
            Android:layout_alignParentTop="true"
            Android:layout_toLeftOf="@id/ViewColorPickerHelper"
            Android:background="?android:attr/selectableItemBackground"
            Android:text="@Android:string/cancel" 
            Android:layout_alignParentBottom="true"/>
        <Button
            Android:id="@+id/BtnColorPickerOk"
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_alignParentRight="true"
            Android:layout_alignParentTop="true"
            Android:background="?android:attr/selectableItemBackground"
            Android:text="@Android:string/ok" 
            Android:layout_alignParentBottom="true" 
            Android:layout_toRightOf="@id/ViewColorPickerHelper"/>
    </RelativeLayout>
19
KarlKarlsom

Ce code fonctionne pour moi:

<View
    Android:layout_width="match_parent"
    Android:layout_height="1dip"
    Android:background="?android:attr/dividerVertical" />

<LinearLayout
    style="?android:attr/buttonBarStyle"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:measureWithLargestChild="true"
    Android:orientation="horizontal"
    Android:paddingLeft="2dip"
    Android:paddingRight="2dip"
    Android:paddingTop="0dip" >

    <Button
        Android:id="@+id/cancel"
        style="?android:attr/buttonBarButtonStyle"
        Android:layout_width="0dip"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:onClick="onClickCancel"
        Android:text="@string/cancel" />

     <Button
        Android:id="@+id/info"
        style="?android:attr/buttonBarButtonStyle"
        Android:layout_width="0dip"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:onClick="onClickInfo"
        Android:visibility="gone"
        Android:text="@string/info" />

    <Button
        Android:id="@+id/ok"
        style="?android:attr/buttonBarButtonStyle"
        Android:layout_width="0dip"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:onClick="onClickSave"
        Android:text="@string/save" />
</LinearLayout>

Je montre 3 boutons en bas

13
Mirko
Android:background="@Android:color/transparent"
9
Rich
<Button Android:id="@+id/my_button" style="@Android:style/Widget.Holo.Button.Borderless" />
7
jgani

Vous devez également définir les marges et le remplissage de l'image sur 0. Regardez également la seconde réponse non marquée à Comment créer des boutons standard sans bordure (comme dans le guide de conception mentionné)?

0
Gangnus