web-dev-qa-db-ger.com

Wie erstelle ich Borderless-Standardtasten (wie in der genannten Design-Richtlinie)?

Ich habe gerade die Gestaltungsrichtlinien durchgesehen und mich über die randlosen Schaltflächen gewundert. Ich habe geguckt und versucht, in der Quelle zu finden, kann sie aber nicht selbst zusammenstellen .. Ist dies das normale Schaltflächen-Widget, fügen Sie jedoch einen benutzerdefinierten Wert hinzu (Android-Standard) Stil? Wie werden diese randlosen Schaltflächen erstellt (natürlich können Sie den Hintergrund auf leer setzen, aber dann habe ich keinen Trenner)?

Hier Links zu den Gestaltungsrichtlinien:

enter image description here

109
KarlKarlsom

Um einige Verwirrung zu beseitigen:

Dies erfolgt in zwei Schritten: Wenn Sie das Hintergrundattribut der Schaltfläche auf Android setzen: attr/selectableItemBackground erstellt eine Schaltfläche mit Feedback, jedoch ohne Hintergrund.

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

Die Trennlinie zwischen dem randlosen Button und dem restlichen Layout wird durch eine Ansicht mit dem Hintergrund Android erstellt: attr/dividerVertical

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

Zum besseren Verständnis ist hier ein Layout für eine OK/Cancel-Schaltfläche für die randlose Schaltfläche unten auf dem Bildschirm angegeben (wie im rechten Bild oben).

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

Fügen Sie einfach das folgende style-Attribut in Ihr Button-Tag ein:

    style="?android:attr/borderlessButtonStyle"

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

Dann können Sie Teiler hinzufügen wie in Karls Antwort .

46
Diego V

Späte Antwort, aber viele Ansichten. Da APIs <11 noch nicht tot sind, ist dies für Interessierte ein Trick. 

Lassen Sie Ihren Behälter die gewünschte Farbe haben (möglicherweise transparent). Geben Sie Ihren Schaltflächen dann eine Auswahl mit der voreingestellten transparenten Farbe und etwas Farbe, wenn Sie sie drücken. Auf diese Weise haben Sie eine transparente Schaltfläche, ändern jedoch die Farbe, wenn Sie gedrückt werden (wie bei einem Holo). Sie können auch einige Animationen (wie Holos) hinzufügen. Der Selektor sollte so aussehen:

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>

Und der Button sollte Android:background="@drawable/selector_transparent_button" haben

PS: Lass den Container die Trennlinien haben (Android:divider='@Android:drawable/... für API <11)

PS [Newbies]: Sie sollten diese Farben in values ​​/ colors.xml definieren

22
aacotroneo

Für diejenigen, die randlose Schaltflächen wünschen, aber beim Klicken trotzdem animiert sind. Fügen Sie dies in der Schaltfläche hinzu.

style="?android:attr/borderlessButtonStyle"

Wenn Sie einen Trenner/eine Trennlinie zwischen ihnen wünschen. Fügen Sie dies im linearen Layout hinzu.

style="?android:buttonBarStyle"

Zusammenfassung 

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

Fügen Sie für den Materialstil style="@style/Widget.AppCompat.Button.Borderless" hinzu, wenn Sie die AppCompat-Bibliothek verwenden.

7
Roel

Aus der iosched-App-Quelle habe ich diese ButtonBar-Klasse gefunden:

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

Dies ist der LinearLayout, in den die Schaltflächen "OK" und "Cancel" gehen, und behandelt diese in der richtigen Reihenfolge. Dann fügen Sie dies in das Layout ein, in das Sie die Tasten einfügen möchten:

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

Dies gibt Ihnen das Aussehen des Dialogs mit randlosen Schaltflächen. Sie finden diese Attribute in den res im Framework. buttonBarStyle führt den vertikalen Teiler und die Auffüllung aus. buttonBarButtonStyle ist als borderlessButtonStyle für das Holo-Design festgelegt, aber ich glaube, dies sollte die robusteste Art sein, um es anzuzeigen, da das Framework es anzeigen möchte.

5
Dandre Allison

Sie können Schaltflächen auch durch Code randlos machen:

TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(Android.R.attr.selectableItemBackground, value, true);
 myButton.setBackgroundResource(value.resourceId);
4
Isj

Sehen Sie sich die Motivattribute buttonBarStyle, buttonBarButtonStyle und borderlessButtonStyle an.

4
Josh Lee

Eine andere Lösung, die sowohl auf älteren als auch auf neueren Android-Plattformen funktionieren sollte, ist zu verwenden

Android:background="@Android:color/transparent"

attribut für Button-Ansicht. Nach dem Hinzufügen der Schaltfläche oberhalb der Schaltfläche wird jedoch kein Feedback angezeigt.

Fügen Sie der Activity-Klasse den folgenden Code hinzu, um Berührungsfeedback bereitzustellen

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

Es funktioniert gut für mich.

2
prodev

Für diejenigen, die randlos eine Schaltfläche für APIs> = 8 programmgesteuert erstellen möchten

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);
2
Sohail

Für alle, die noch suchen:

erben Sie Ihren eigenen Stil für Holo-Schaltflächen:

<style name="yourStyle" parent="@Android:style/Holo.ButtonBar">
  ...
</style>

oder Holo Light:

<style name="yourStyle" parent="@Android:style/Holo.Light.ButtonBar">
  ...
</style>

und für randlose Holo-Knöpfe:

<style name="yourStyle" parent="@Android:style/Widget.Holo.Button.Borderless.Small">
  ...
</style>

oder Holo Light:

<style name="yourStyle" parent="@Android:style/Widget.Holo.Light.Button.Borderless.Small">
  ...
</style>
2
silversmurf

Sie können AppCompat Support Library für die randlose Schaltfläche verwenden.

Sie können einen randlosen Button wie folgt erstellen:

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

Sie können einen randlosen farbigen Button wie folgt gestalten: 

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

So erstellen Sie programmgesteuert eine randlose (flache) Schaltfläche, ohne XML zu verwenden 

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);
1
Manuel

Verwenden Sie den folgenden Code in Ihrer XML-Datei . Verwenden Sie Android: background = "# 00000000", um die transparente Farbe zu erhalten.

<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"
/>
1
Kayuri Ravrani

Wenn Sie das programmgesteuert erreichen möchten:

(Dies ist C #, aber leicht auf Java übertragbar)

Button button = new Button(new ContextThemeWrapper(Context, Resource.Style.Widget_AppCompat_Button_Borderless_Colored), null, Resource.Style.Widget_AppCompat_Button_Borderless_Colored);

Spiel

    <Button
       style="@style/Widget.AppCompat.Button.Borderless.Colored"
    .../>
0
Yohan Dahmani

Durch Hinzufügen zur ersten Antwort können Sie auch Ansichten mit dunkelgrauer Hintergrundfarbe in einem linearen Layout verwenden.

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

Wenn Ihre Linie horizontal ist, möchten Sie die Höhe auf 1Dip setzen und die Breite entsprechend dem übergeordneten Element und umgekehrt, wenn Ihre Linie vertikal ist.

0
Munaz

Probieren Sie diesen Code aus, um den Hintergrund (@ drawable/bg) programmgesteuert zu entfernen, Sie müssen lediglich null als Parameter angeben.

Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);
0
Ramesh kumar

Aus irgendeinem Grund funktionierte weder style="Widget.Holo.Button.Borderless" noch Android:background="?android:attr/selectableItemBackground" für mich. Genauer gesagt: Widget.Holo.Button.Borderless hat den Job unter Android 4.0 ausgeführt, funktionierte jedoch nicht unter Android 2.3.3. Der Trick für mich in beiden Versionen war Android:background="@drawable/transparent" und dieses XML in res/drawable/transparent.xml:

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" 
    Android:shape="rectangle" >
</shape>

Einfacher Kopf durch die Wandannäherung.

0
Emperor Orionii

Eine großartige Diaschau auf wie man mit Googles Nick Butcher den gewünschten Effekt erzielt (Start bei Slide 20). Er verwendet den Standard-Android @attr, um die Schaltfläche und den Teiler zu gestalten.

0
Moritz