Android - बटन के लिए बॉर्डर


जवाबों:


432

चरण 1: नाम की फ़ाइल बनाएँ: my_button_bg.xml

चरण 2: इस फ़ाइल को res / drawables.xml में रखें

चरण 3: नीचे कोड डालें

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

चरण 4: कोड का उपयोग करें "android: background =" @ drawable / my_button_bg "जहाँ आवश्यक हो जैसे नीचे:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your Text"
    android:background="@drawable/my_button_bg"
    />

1
धन्यवाद। + 1 इसके लिए। एक xml फ़ाइल के रूप में इसे ड्रा करने योग्य फ़ोल्डर में सहेजने के बाद। हम इसका उपयोग कैसे कर सकते हैं?
एंड्रॉइड किलर

1
@AndroidPower आप इसे R.drawable.File_NAME
slayton

2
यह कोड बटन के लिए मार्कअप कोड के लिए .axml कोड में कहां जाता है? क्या यह एक style.xml प्रकार फ़ाइल में जाता है?
theJerm

मैंने बस एक स्ट्रोक का उपयोग किया (और इसे सफेद बना दिया) एक बटन को सफेद के साथ रेखांकित करने के लिए। 4.4 के साथ महान काम करता है, लेकिन 4.0.3 में बटन काला हो जाता है - कोई विचार क्यों?
किबी

1
@ किबी क्षमा करें किसी ने मेरे उत्तर को संपादित किया और आपको गलत सलाह दी। मैंने इसे बदल दिया है, लेकिन मैं हैरान हूं कि कोई व्यक्ति एक स्वीकृत उत्तर को संपादित कर सकता है और उपयोगिता को बदल सकता है।
बालि

57

Android Official Solution

चूंकि एंड्रॉइड डिज़ाइन सपोर्ट v28 पेश किया गया था, इसलिए इसका उपयोग करके बॉर्डर वाला बटन बनाना आसान है MaterialButton। यह वर्ग कंस्ट्रक्टर में बटन के लिए अद्यतन सामग्री शैलियों की आपूर्ति करता है। का उपयोग कर app:strokeColorऔर app:strokeWidthआप निम्नलिखित के रूप में एक कस्टम सीमा बना सकते हैं:


1. जब आप उपयोग करते हैं androidx:

build.gradle

dependencies {
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.0.0'
}

• बॉर्डर वाला बटन:

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

• अनफिल्टर्ड बॉर्डर बटन:

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



2. जब आप उपयोग करते हैं appcompat:

build.gradle

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

style.xml

सुनिश्चित करें कि आपकी एप्लिकेशन थीम Theme.MaterialComponentsइसके बजाय इनहेरिट की गई है Theme.AppCompat

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

• बॉर्डर वाला बटन:

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

• अनफिल्टर्ड बॉर्डर बटन:

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



दृश्य परिणाम

यहां छवि विवरण दर्ज करें


मैं देख रहा हूँ कि आपको अपने बटन XML में textColor और textSize घोषित हो गए हैं। यदि आप किसी को पहले से ही textColor और textSize के लिए परिभाषित शैली है और अब वे जोड़ना चाहते हैं, तो आप क्या सुझाव देंगे style="@style/Widget.AppCompat.Button.Borderless"?
किसी ने

मुझे यह समझ में आ गया है, डेवलपर
किसी ने

जैसा कि आपने उल्लेख किया है, यह एक शैली को परिभाषित करना संभव है जो सीमाहीन शैली से विरासत में मिली है, फिर आधार शैली के अनुसार पसंदीदा विशेषताओं को जोड़ें।
अमीनोग्राफी

थोड़ा OT, लेकिन GIF के निचले भाग में एक्शन बार में दिलचस्प 4th आइकन क्या है? (यह भी ऐसा लगता है कि जीआईएफ को एक असली डिवाइस से पकड़ा गया था, शांत)
i336_

1
हो सकता है कि मैं गलत हूं, लेकिन मेरे लिए • अनफिल्ड बॉर्डर बटन में, मुझे ऐप, बैकग्राउंड
टिंट

37

button_border.xmlअपने ड्रा करने योग्य फ़ोल्डर में फ़ाइल बनाएँ ।

रेस / 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>

और अपने XML गतिविधि लेआउट में बटन जोड़ें और पृष्ठभूमि सेट करें 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" />

19

बनाने योग्य / 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>

और इसे इंगित करें @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" />


8

यदि आपके बटन को पारदर्शी पृष्ठभूमि की आवश्यकता नहीं है, तो आप फ़्रेम लेआउट का उपयोग करके सीमा का भ्रम पैदा कर सकते हैं। बॉर्डर की मोटाई बदलने के लिए बस फ़्रेमलैट के "पैडिंग" विशेषता को समायोजित करें।

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

मुझे यकीन नहीं है कि आकार xml फ़ाइलों में गतिशील रूप से संपादन योग्य बॉर्डर रंग हैं। लेकिन मुझे पता है कि इस समाधान के साथ, आप फ्रेमलैटआउट बैकग्राउंड सेट करके गतिशील रूप से बॉर्डर का रंग बदल सकते हैं।


6

अपने XML लेआउट में:

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

ड्रा करने योग्य फ़ोल्डर में, बटन की सीमा शैली के लिए एक फ़ाइल बनाएं:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <stroke
        android:width="1dp"
        android:color="#f43f10" />
</shape>

और आपकी गतिविधि में:

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

5

मैं इसके बारे में एक साल देर से जानता हूं, लेकिन आप एक 9 पथ छवि भी बना सकते हैं। एक उपकरण है जो एंड्रॉइड एसडीके के साथ आता है जो इस तरह की छवि बनाने में मदद करता है इस लिंक को देखें: http://developer.android.com/tools/help/draw9patch .html

पुनश्च: छवि को असीम रूप से बढ़ाया जा सकता है

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.