Comment créer des boutons standard sans bordure (comme dans la directive de conception mentionnée)?
Je vérifiais simplement les directives de conception et je m'interrogeais sur les boutons sans bordure . Je suis resté bouche bée et j'ai essayé de le trouver dans le code source, mais je ne peux pas le rassembler tout seul ..__ (Android par défaut) style? Comment rendre ces boutons sans bordure (bien sûr, vous pouvez définir l’arrière-plan vide, mais je n’ai pas de séparateur)?
Voici des liens vers les directives de conception:
- http://developer.Android.com/design/building-blocks/buttons.html
- http://developer.Android.com/guide/topics/ui/controls/button.html#Borderless
Pour effacer une certaine confusion:
Cela se fait en 2 étapes: Définir l'attribut de fond du bouton sur Android: attr/selectableItemBackground crée un bouton avec retour mais sans arrière-plan.
Android:background="?android:attr/selectableItemBackground"
La ligne permettant de 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’illustration à 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>
Ajoutez simplement l'attribut de style suivant dans votre balise Button:
style="?android:attr/borderlessButtonStyle"
source: http://developer.Android.com/guide/topics/ui/controls/button.html#Borderless
Ensuite, vous pouvez ajouter des séparateurs comme dans La réponse de Karl .
Réponse tardive, mais beaucoup de points de vue. Comme les API <11 ne sont pas encore mortes, c'est un truc pour ceux qui sont intéressés.
Laissez votre conteneur avoir la couleur désirée (peut être transparent). Ensuite, donnez à vos boutons un sélecteur avec la couleur transparente par défaut et une couleur lorsque vous appuyez dessus. De cette façon, vous aurez un bouton transparent, mais changera de couleur lorsque vous appuierez dessus (comme celui de holo). Vous pouvez également ajouter une animation (comme celle de holo). Le sélecteur devrait être quelque chose comme ceci:
res/drawable/selector_transparent_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:exitFadeDuration="@Android:integer/config_shortAnimTime">
<item Android:state_pressed="true"
Android:drawable="@color/blue" />
<item Android:drawable="@color/transparent" />
</selector>
Et le bouton devrait avoir Android:background="@drawable/selector_transparent_button"
PS: laissez le conteneur contenir les séparateurs (Android:divider='@Android:drawable/... pour API <11)
PS [Newbies]: vous devez définir ces couleurs dans values / colors.xml
Pour ceux qui veulent des boutons sans bordure mais toujours animés lorsqu'on clique dessus Ajoutez ceci dans le bouton.
style="?android:attr/borderlessButtonStyle"
Si vous vouliez un séparateur/une ligne entre eux. Ajoutez ceci dans la mise en page linéaire.
style="?android:buttonBarStyle"
Résumé
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:orientation="horizontal"
style="?android:buttonBarStyle">
<Button
Android:id="@+id/add"
Android:layout_weight="1"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:text="@string/add_dialog"
style="?android:attr/borderlessButtonStyle"
/>
<Button
Android:id="@+id/cancel"
Android:layout_weight="1"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:text="@string/cancel_dialog"
style="?android:attr/borderlessButtonStyle"
/>
</LinearLayout>
Pour le style de matériau, ajoutez style="@style/Widget.AppCompat.Button.Borderless" lorsque vous utilisez la bibliothèque AppCompat.
À partir de iosched app source j'ai créé cette classe ButtonBar:
/**
* An extremely simple {@link LinearLayout} descendant that simply reverses the
* order of its child views on Android 4.0+. The reason for this is that on
* Android 4.0+, negative buttons should be shown to the left of positive buttons.
*/
public class ButtonBar extends LinearLayout {
public ButtonBar(Context context) {
super(context);
}
public ButtonBar(Context context, AttributeSet attributes) {
super(context, attributes);
}
public ButtonBar(Context context, AttributeSet attributes, int def_style) {
super(context, attributes, def_style);
}
@Override
public View getChildAt(int index) {
if (_has_ics)
// Flip the buttons so that "OK | Cancel" becomes "Cancel | OK" on ICS
return super.getChildAt(getChildCount() - 1 - index);
return super.getChildAt(index);
}
private final static boolean _has_ics = Build.VERSION.SDK_INT >=
Build.VERSION_CODES.ICE_CREAM_SANDWICH;
}
Ce sera la LinearLayout dans laquelle vont les boutons "OK" et "Annuler" et gérera de les placer dans l'ordre approprié. Ensuite, placez ceci dans la mise en page dans laquelle vous voulez les boutons:
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:divider="?android:attr/dividerHorizontal"
Android:orientation="vertical"
Android:showDividers="middle">
<!--- A view, this approach only works with a single view here -->
<your.package.ButtonBar style="?android:attr/buttonBarStyle"
Android:id="@+id/buttons"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:weightSum="1.0">
<Button style="?android:attr/buttonBarButtonStyle"
Android:id="@+id/ok_button"
Android:layout_width="0dp"
Android:layout_height="wrap_content"
Android:layout_weight="0.5"
Android:text="@string/ok_button" />
<Button style="?android:attr/buttonBarButtonStyle"
Android:id="@+id/cancel_button"
Android:layout_width="0dp"
Android:layout_height="wrap_content"
Android:layout_weight="0.5"
Android:text="@string/cancel_button" />
</your.package.ButtonBar>
</LinearLayout>
Cela vous donne l'apparence du dialogue avec des boutons sans bordure. Vous pouvez trouver ces attributs dans la res du framework. buttonBarStyle fait le séparateur vertical et le remplissage. buttonBarButtonStyle est défini sur borderlessButtonStyle pour le thème Holo, mais j'estime qu'il devrait s'agir du moyen le plus robuste pour l'afficher, car le cadre le souhaite.
Vous pouvez aussi créer des boutons sans bordure avec du code:
TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(Android.R.attr.selectableItemBackground, value, true);
myButton.setBackgroundResource(value.resourceId);
Recherchez les attributs de thème buttonBarStyle, buttonBarButtonStyle et borderlessButtonStyle.
Une autre solution qui devrait fonctionner à la fois sur la plate-forme Android plus ancienne et plus récente consiste à utiliser
Android:background="@Android:color/transparent"
attribut pour la vue Bouton. Mais après avoir ajouté la ligne ci-dessus, le bouton ne fournira pas de retour tactile.
Pour fournir des commentaires tactiles, ajoutez le code suivant à la classe d'activité.
button.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent event) {
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
((Button)view).setBackgroundColor(Color.LTGRAY);
break;
case MotionEvent.ACTION_UP:
((Button)view).setBackgroundColor(Color.TRANSPARENT);
}
return false;
}
});
Cela fonctionne bien pour moi.
Pour ceux qui veulent créer un bouton sans bordure par programmation pour les API> = 8
ImageButton smsImgBtn = new ImageButton(this);
//Sets a drawable as the content of this button
smsImgBtn.setImageResource(R.drawable.message_icon);
//Set to 0 to remove the background or for bordeless button
smsImgBtn.setBackgroundResource(0);
Pour ceux qui cherchent encore:
héritez de votre propre style pour les barres de boutons Holo:
<style name="yourStyle" parent="@Android:style/Holo.ButtonBar">
...
</style>
ou Holo Light:
<style name="yourStyle" parent="@Android:style/Holo.Light.ButtonBar">
...
</style>
et pour les boutons Holo sans frontières:
<style name="yourStyle" parent="@Android:style/Widget.Holo.Button.Borderless.Small">
...
</style>
ou Holo Light:
<style name="yourStyle" parent="@Android:style/Widget.Holo.Light.Button.Borderless.Small">
...
</style>
Vous pouvez utiliser AppCompat Support Library pour le bouton sans bordure.
Vous pouvez créer un bouton sans bordure comme ceci:
<Button
style="@style/Widget.AppCompat.Button.Borderless"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_margin="16dp"
Android:text="@string/borderless_button"/>
Vous pouvez créer un bouton coloré sans bordure comme ceci:
<Button
style="@style/Widget.AppCompat.Button.Borderless.Colored"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_margin="16dp"
Android:text="@string/borderless_colored_button"/>
C’est ainsi que vous créez un bouton (plat) sans bordure par programmation sans utiliser XML.
ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(),
R.style.Widget_AppCompat_Button_Borderless_Colored);
Button myButton = new Button(myContext, null,
R.style.Widget_AppCompat_Button_Borderless_Colored);
Utilisez le code ci-dessous dans votre fichier XML . Utilisez Android: background = "# 00000000" pour obtenir la couleur transparente.
<Button
Android:id="@+id/btnLocation"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:background="#00000000"
Android:text="@string/menu_location"
Android:paddingRight="7dp"
/>
Si vous voulez atteindre le même programme:
(c'est en C # mais facilement transposable en Java)
Button button = new Button(new ContextThemeWrapper(Context, Resource.Style.Widget_AppCompat_Button_Borderless_Colored), null, Resource.Style.Widget_AppCompat_Button_Borderless_Colored);
Rencontre
<Button
style="@style/Widget.AppCompat.Button.Borderless.Colored"
.../>
En ajoutant à la première réponse, vous pouvez également utiliser des vues avec une couleur de fond gris foncé dans une présentation linéaire.
<View
Android:layout_width="match_parent"
Android:layout_height="1dip"
Android:layout_marginBottom="4dip"
Android:layout_marginLeft="4dip"
Android:layout_marginRight="4dip"
Android:layout_marginTop="4dip"
Android:background="@Android:color/darker_gray"/>
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginBottom="4dip"
Android:orientation="horizontal"
Android:weightSum="1">
<Button
Android:id="@+id/button_decline"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginLeft="10dp"
Android:layout_weight="0.50"
Android:background="?android:attr/selectableItemBackground"
Android:padding="10dip"
Android:text="@string/decline"/>
<View
Android:layout_width="1dip"
Android:layout_height="match_parent"
Android:layout_marginLeft="4dip"
Android:layout_marginRight="4dip"
Android:background="@Android:color/darker_gray"/>
<Button
Android:id="@+id/button_accept"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginRight="10dp"
Android:layout_weight="0.50"
Android:background="?android:attr/selectableItemBackground"
Android:padding="10dip"
Android:text="@string/accept"/>
</LinearLayout>
Si votre ligne est horizontale, définissez la hauteur sur 1dip et la largeur sur le parent, et inversement, si votre ligne est verticale.
Essayez ce code, pour supprimer le dessinable en arrière-plan (@ drawable/bg) par programmation, il suffit de fournir null en tant que paramètre.
Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);
Pour une raison quelconque, ni style="Widget.Holo.Button.Borderless" ni Android:background="?android:attr/selectableItemBackground" n'a fonctionné pour moi. Pour être plus précis, Widget.Holo.Button.Borderless a effectué le travail sous Android 4.0 mais n'a pas fonctionné sous Android 2.3.3. Le problème pour moi sur les deux versions était Android:background="@drawable/transparent" et ce XML dans res/drawable/transparent.xml:
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle" >
</shape>
Tête plate à travers l'approche du mur.
Un excellent diaporama sur comment obtenir l'effet souhaité de Googles Nick Butcher (commencez à la diapositive 20). Il utilise le code Android @attr standard pour styliser le bouton et le séparateur.