Wie erstelle ich Standard -Grenztasten (wie in der genannten Entwurfsrichtlinie)?

Question

Ich habe gerade die Designrichtlinien überprüft und mich über die grenzenlosen Tasten gefragt. Ich schalte und versuchte in der Quelle zu finden, kann es aber nicht alleine zusammenbringen. Ist dies das normale Schaltflächen -Widget, fügen Sie jedoch einen benutzerdefinierten (Android -Standard) -Stil hinzu? Wie mache ich diese randlosen Tasten (natürlich kannst du den Hintergrund auf leer setzen, aber dann habe ich nicht den Teiler)?

Hier Links zu den Entwurfsrichtlinien:

• http://developer.android.com/design/building-blocks/buttons.html
• http://developer.android.com/guide/topics/ui/controls/button.html#bordless

Answer 1

Um Verwirrung zu klären:

Dies erfolgt in 2 Schritten: Einstellen des Schaltfläche Hintergrundattributs auf Android: Attr/SelectableItembackground Erstellt Ihnen eine Schaltfläche mit Feedback, aber ohne Hintergrund.

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

Die Linie, um die randlose Taste vom Rest von Ihnen zu teilen, erfolgt durch eine Ansicht mit dem Hintergrund Android: Attr/Dividervertical

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

Für ein besseres Verständnis ist hier ein Layout für eine Kombination aus OK / Cancer Randloser Taste am unteren Rand Ihres Bildschirms (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>

Answer 2

Fügen Sie einfach das folgende Stilattribut in Ihrem hinzu Button Schild:

    style="?android:attr/borderlessButtonStyle"

Quelle: http://developer.android.com/guide/topics/ui/controls/button.html#bordless

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

Answer 3

Späte Antwort, aber viele Ansichten. Wie Apis <11 noch nicht tot ist, ist für diejenigen, die hier interessiert sind, ein Trick.

Lassen Sie Ihren Behälter die gewünschte Farbe haben (kann transparent sein). Geben Sie dann Ihren Schaltflächen einen Selektor mit Standard -transparenter Farbe und etwas Farbe beim Drücken. Auf diese Weise haben Sie eine transparente Taste, ändern sich jedoch beim Drücken der Farbe (wie Holo). Sie können auch einige Animationen hinzufügen (wie Holo's). Der Selektor sollte so etwas sein:

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 Knopf sollte haben android:background="@drawable/selector_transparent_button"

PS: Lassen Sie den Container die Trenner haben (android:divider='@android:drawable/... für api <11)

PS [Neulinge]: Sie sollten diese Farben in Werten/Farben definieren.xml

Answer 4

Für denjenigen, der randlose Schaltflächen wünscht, aber immer noch animiert wird, wenn Sie klicken. Fügen Sie dies in der Schaltfläche hinzu.

style="?android:attr/borderlessButtonStyle"

Wenn Sie einen Teiler / eine Linie zwischen ihnen haben möchten. Fügen Sie dies in das lineare 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>

Answer 5

Für Materialstil hinzufügen style="@style/Widget.AppCompat.Button.Borderless" Bei Verwendung der AppCompat -Bibliothek.

Answer 6

Von dem ioSched App Source Ich habe mir das ausgedacht ButtonBar Klasse:

/**
 * 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 wird der sein LinearLayout in die die Tasten "OK" und "Abbrechen" eingehen und sie in die entsprechende Reihenfolge einstellen. Geben Sie dies dann in das Layout ein, in dem die Tasten in:

<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 Tasten. Sie können diese Attribute im RES im Rahmen finden. buttonBarStyle Macht der vertikale Teiler und die Polsterung. buttonBarButtonStyle ist eingestellt wie borderlessButtonStyle Für Holo -Thema, aber ich glaube, dies sollte die robusteste Möglichkeit sein, es anzuzeigen, da das Framework es anzeigen möchte.

Answer 7

Schauen Sie sich die Themenattribute an buttonBarStyle, buttonBarButtonStyle, und borderlessButtonStyle.

Answer 8

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

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

Answer 9

Für diejenigen, die eine randlose Schaltfläche programmatisch für APIs> = 8 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);

Answer 10

Eine andere Lösung, die sowohl auf älterer als auch auf neuerer Android -Plattform funktionieren sollte, ist die Verwendung

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

Attribut für die Schaltflächenansicht. Nach dem Hinzufügen der oberen Linie bietet die Taste jedoch kein Berührungsfeedback.

Um Touch -Feedback bereitzustellen, fügen Sie den folgenden Code der Aktivitätsklasse hinzu

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.

Answer 11

Für jeden, der noch sucht:

Erben Sie Ihren eigenen Stil für Holo -Buttonbars:

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

oder Holo -Licht:

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

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

Answer 12

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

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

Answer 13

Sie können verwenden AppCompat Support Library Für randlose Taste.

Sie können einen solchen randlosen Knopf 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 Knopf wie folgt erstellen:

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

Answer 14

So erstellen Sie programmgesteuert eine randlose (flache) Taste ohne Verwendung von 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);

Answer 15

Aus irgendeinem Grund auch nicht style="Widget.Holo.Button.Borderless" Noch android:background="?android:attr/selectableItemBackground" arbeitete für mich. Präziser sein Widget.Holo.Button.Borderless Hat die Arbeit bei Android 4.0 gemacht, aber nicht bei Android 2.3.3 funktioniert. Was war der Trick für mich in beiden Versionen für mich android:background="@drawable/transparent" und dieses XML in res/Dravable/transparent.xml:

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

Einfacher Kopf durch den Wandansatz.

Answer 16

Eine tolle Diashow auf wie man den gewünschten Effekt von Googles Nick Butcher erzielt (Beginnen Sie bei Folie 20). Er verwendet den Standard Android @attr um den Knopf und den Teiler zu stylen.

Answer 17

Hinzufügen zur oberen Antwort. Sie können auch Ansichten mit einer dunkelgrauen 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 und die Breite für übergeordnete und umgekehrt einstellen, wenn Ihre Linie vertikal ist.

Answer 18

Wenn Sie das gleiche programmgesteuert erreichen möchten:

(Dies ist C#, aber leicht transatierbar zu Java)

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

Passen

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

Answer 19

Probieren Sie diesen Code aus, um die vom Hintergrund zeichnbare (@Drawable/BG) programmgesteuert zu entfernen, nur müssen wir Null als Parameter bereitstellen.

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