Wie füge ich einer Schaltfläche einen Rahmen hinzu? Ist dies möglich, ohne auf die Verwendung von Bildern zurückzugreifen?
Wie füge ich einer Schaltfläche einen Rahmen hinzu? Ist dies möglich, ohne auf die Verwendung von Bildern zurückzugreifen?
Antworten:
Schritt 1: Erstellen Sie eine Datei mit dem Namen: my_button_bg.xml
Schritt 2: Platzieren Sie diese Datei in res / drawables.xml
Schritt 3: Fügen Sie den folgenden Code ein
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#00FF00"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
Schritt 4: Verwenden Sie den Code "android: background =" @ drawable / my_button_bg ", wo dies erforderlich ist, z. B. unten:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your Text"
android:background="@drawable/my_button_bg"
/>
Android Official Solution
Seit Einführung von Android Design Support v28 ist es einfach, eine umrandete Schaltfläche mit zu erstellen MaterialButton
. Diese Klasse liefert aktualisierte Materialstile für die Schaltfläche im Konstruktor. Mit app:strokeColor
und können app:strokeWidth
Sie einen benutzerdefinierten Rahmen wie folgt erstellen:
androidx
:build.gradle
dependencies {
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.0.0'
}
• Umrandete Schaltfläche:
<com.google.android.material.button.MaterialButton
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MATERIAL BUTTON"
android:textSize="15sp"
app:strokeColor="@color/green"
app:strokeWidth="2dp" />
• Nicht ausgefüllte umrandete Schaltfläche:
<com.google.android.material.button.MaterialButton
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UNFILLED MATERIAL BUTTON"
android:textColor="@color/green"
android:textSize="15sp"
app:backgroundTint="@android:color/transparent"
app:cornerRadius="8dp"
app:rippleColor="#33AAAAAA"
app:strokeColor="@color/green"
app:strokeWidth="2dp" />
appcompat
:build.gradle
dependencies {
implementation 'com.android.support:design:28.0.0'
}
style.xml
Stellen Sie sicher, dass Ihr Anwendungsthema von Theme.MaterialComponents
statt erbt Theme.AppCompat
.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
• Umrandete Schaltfläche:
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MATERIAL BUTTON"
android:textSize="15sp"
app:strokeColor="@color/green"
app:strokeWidth="2dp" />
• Nicht ausgefüllte umrandete Schaltfläche:
<android.support.design.button.MaterialButton
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UNFILLED MATERIAL BUTTON"
android:textColor="@color/green"
android:textSize="15sp"
app:backgroundTint="@android:color/transparent"
app:cornerRadius="8dp"
app:rippleColor="#33AAAAAA"
app:strokeColor="@color/green"
app:strokeWidth="2dp" />
style="@style/Widget.AppCompat.Button.Borderless"
?
Erstellen Sie eine button_border.xml
Datei in Ihrem Zeichenordner.
res / drawable / button_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFDA8200" />
<stroke
android:width="3dp"
android:color="#FFFF4917" />
</shape>
Fügen Sie Ihrem XML-Aktivitätslayout eine Schaltfläche hinzu und legen Sie den Hintergrund fest android:background="@drawable/button_border"
.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_border"
android:text="Button Border" />
Erstelle drawable / button_green.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#003000"
android:centerColor="#006000"
android:endColor="#003000"
android:angle="270" />
<corners android:radius="5dp" />
<stroke android:width="2px" android:color="#007000" />
</shape>
und weisen Sie darauf hin als @drawable/button_green
:
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/button_green"
android:text="Button" />
Informationen zum Erstellen einer Form zum Zeichnen finden Sie hier http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
Sobald Sie dies getan haben, in der XML für Ihre Schaltfläche festgelegt android:background="@drawable/your_button_border"
Wenn für Ihre Schaltfläche kein transparenter Hintergrund erforderlich ist, können Sie mithilfe eines Rahmenlayouts eine Illusion eines Rahmens erstellen. Passen Sie einfach das Attribut "Auffüllen" des FrameLayout an, um die Dicke des Rahmens zu ändern.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="1sp"
android:background="#000000">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text goes here"
android:background="@color/white"
android:textColor="@color/black"
android:padding="10sp"
/>
</FrameLayout>
Ich bin nicht sicher, ob die XML-Formdateien dynamisch bearbeitbare Rahmenfarben haben. Ich weiß jedoch, dass Sie mit dieser Lösung die Farbe des Rahmens dynamisch ändern können, indem Sie den FrameLayout-Hintergrund festlegen.
In Ihrem XML-Layout:
<Button
android:id="@+id/cancelskill"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_weight="1"
android:background="@drawable/button_border"
android:padding="10dp"
android:text="Cancel"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="20dp" />
Erstellen Sie im Zeichenordner eine Datei für den Rahmenstil der Schaltfläche:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#f43f10" />
</shape>
Und in Ihrer Aktivität:
GradientDrawable gd1 = new GradientDrawable();
gd1.setColor(0xFFF43F10); // Changes this drawbale to use a single color instead of a gradient
gd1.setCornerRadius(5);
gd1.setStroke(1, 0xFFF43F10);
cancelskill.setBackgroundDrawable(gd1);
cancelskill.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
cancelskill.setBackgroundColor(Color.parseColor("#ffffff"));
cancelskill.setTextColor(Color.parseColor("#f43f10"));
GradientDrawable gd = new GradientDrawable();
gd.setColor(0xFFFFFFFF); // Changes this drawbale to use a single color instead of a gradient
gd.setCornerRadius(5);
gd.setStroke(1, 0xFFF43F10);
cancelskill.setBackgroundDrawable(gd);
finish();
}
});
Ich weiß, dass es ungefähr ein Jahr zu spät ist, aber Sie können auch ein Bild mit 9 Pfaden erstellen. Es gibt ein Tool, das mit dem Android SDK geliefert wird und beim Erstellen eines solchen Bildes hilft. Siehe diesen Link: http://developer.android.com/tools/help/draw9patch .html
PS: Das Bild kann auch unendlich skaliert werden