Android में छवि दृश्य के लिए बॉर्डर?


जवाबों:


566

मैंने चित्र के रूप में छवि दृश्य की पृष्ठभूमि के नीचे xml सेट किया है। यह काम करता हैं।

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#000000" />
    <padding android:left="1dp" android:top="1dp" android:right="1dp"
        android:bottom="1dp" />
</shape>

और फिर android:background="@drawable/yourXmlFileName"अपने में जोड़ेंImageView


112
और फिर जोड़ने android:background="@drawable/yourXmlFileName"के लिएImageView
मिथुन श्रीधरन

10
सीमा बाएँ और दाएँ दोनों का काम करती है, लेकिन ऊपर और नीचे के लिए यह माता-पिता को शीर्ष पर भर देती है।
मौरिस

3
ओह अच्छा, मैं भी यही चाहता हूँ। अपने ImageView के लिए पैडिंग सेट करना याद रखें।
पन्नाधाय

5
@Maurice आप सच के लिए फसल कटाई सेट कर सकते हैं।
मिककोप

4
मत भूलना सेट क्रॉपटाउडिंग = "सच"
Landry

164

निम्नलिखित कोड है कि मैं काली सीमा हुआ करता था। ध्यान दें कि मैंने सीमा के लिए अतिरिक्त xml फ़ाइल का उपयोग नहीं किया है।

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/red_minus_icon"
    android:background="#000000"
    android:padding="1dp"/>

29
हाँ .. यह एक सीमा जैसा दिखता है। लेकिन जब आप एक पारदर्शी छवि का उपयोग पारदर्शी पृष्ठभूमि के साथ करते हैं, तो यह आपकी छवि को सीमा के साथ ठीक से नहीं दिखाएगा। यह काला रंग दिखाता है जहाँ भी आपके पास पारदर्शी है। तो आपका जवाब सबसे अच्छा तरीका नहीं है।
प्रवीण

19
हाँ! लेकिन आपके पास एक और xml फ़ाइल बनाने के बिना एक सीमा है।
user609239

7
जब आप छवि का उपयोग करके आकार बदलते हैं तो यह काम नहीं करता है android:scaleType="centerCrop"
21

8
यह बुरा है क्योंकि यह अनावश्यक अतिवृद्धि पैदा करता है
Jay Soyer

1
@Silox के लिए scaleType="centerCrop", यह भी सुनिश्चित करेंcropToPadding="true"
एडम जॉन्स

24

यह एक पुरानी पोस्ट है जिसे मैं जानता हूं, लेकिन मुझे लगा कि यह संभवतः किसी को वहां से निकालने में मदद कर सकता है।

यदि आप एक पारभासी सीमा का अनुकरण करना चाहते हैं जो आकार के "ठोस" रंग को ओवरलैप नहीं करता है, तो अपने xml में इसका उपयोग करें। ध्यान दें कि मैं "स्ट्रोक" टैग का उपयोग यहां बिल्कुल नहीं करता हूं क्योंकि ऐसा लगता है कि यह हमेशा वास्तविक खींची गई आकृति को ओवरलैप करता है।

  <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#55111111" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />

            <solid android:color="#ff252525" />
        </shape>
    </item>
</layer-list>

मुझे यह भी पसंद है लेकिन अगर आप बाहरी किनारों को बहुत छोटा करते हैं, तो कोने खाली हैं। यह कुछ भी 2dp और ऊपर के साथ अच्छी तरह से काम करता है।
जॉन स्टैक

इस पद्धति का लाभ यह है कि यह गोल कोनों के लिए अनुमति देता है। यदि आप पिछले उत्तर से सीमा को ओवरलैप नहीं करना चाहते हैं, तो ImageView टैग में पैडिंग जोड़ें। इस पद्धति का दोष यह है कि पारभासी पृष्ठभूमि का उपयोग करने पर सीमा को छवि क्षेत्र में ब्लीड किया जाएगा। इसलिए मैं पिछली विधि चुनता हूं क्योंकि मुझे गोल कोनों से बेहतर पारभासी पृष्ठभूमि पसंद है।
लियो लैंडौ

24

ImageView xml फ़ाइल में

<ImageView
            android:id="@+id/myImage"
            android:layout_width="100dp"
            android:layout_height="100dp"

            android:padding="1dp"
            android:scaleType="centerCrop"
            android:cropToPadding="true"
            android:background="@drawable/border_image"

            android:src="@drawable/ic_launcher" />

के नाम के साथ नीचे कोड को बचाने border_image.xmlऔर यह drawable फ़ोल्डर में होना चाहिए

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="270"
        android:endColor="#ffffff"
        android:startColor="#ffffff" />

    <corners android:radius="0dp" />

    <stroke
        android:width="0.7dp"
        android:color="#b4b4b4" />
</shape>

यदि आप छवि की सीमा को गोल कोना देना चाहते हैं तो आप सीमा रेखा को xx फ़ाइल में बदल सकते हैं

<corners android:radius="4dp" />

2
बस इस पर ध्यान दें, यदि छवि गतिशील रूप से सेट की गई है, तो सीमा को कोड में फिर से सेट करने की आवश्यकता है, ताकि छवि सीमा के ऊपर हो।
14:85 पर Rob85

4

बॉर्डर बनाएं

अपने ड्रा करने योग्य फ़ोल्डर में निम्न सामग्री के साथ एक xml फ़ाइल बनाएं (उदाहरण के लिए "frame_image_view.xml"):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="@dimen/borderThickness"
        android:color="@color/borderColor" />
    <padding
        android:bottom="@dimen/borderThickness"
        android:left="@dimen/borderThickness"
        android:right="@dimen/borderThickness"
        android:top="@dimen/borderThickness" />
    <corners android:radius="1dp" /> <!-- remove line to get sharp corners -->
</shape>

बदलें @dimen/borderThicknessऔर @color/borderColorजो भी आप चाहते हैं या संबंधित डिमेन / रंग जोड़ें।

अपने चित्र के रूप में ड्रा करने योग्य को अपने ImageView में जोड़ें:

<ImageView
        android:id="@+id/my_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame_image_view"
        android:cropToPadding="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter" />

आपको उपयोग करना होगा android:cropToPadding="true", अन्यथा परिभाषित पैडिंग का कोई प्रभाव नहीं है। वैकल्पिक रूप android:padding="@dimen/borderThickness"से समान प्राप्त करने के लिए अपने ImageView में उपयोग करें। यदि सीमा आपके ImageView के बजाय माता-पिता को फ़्रेम करती है, तो उपयोग करने का प्रयास करेंandroid:adjustViewBounds="true"

बॉर्डर का रंग बदलें

अपने बॉर्डर कलर को कोड में बदलने का सबसे आसान तरीका है tintBackgound विशेषता।

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(ColorStateList.valueOf(Color.RED); // changes border color to red

या

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(getColorStateList(R.color.newColor));

अपने को परिभाषित करने के लिए मत भूलना newColor


3

Res / drawables / background.xml की तरह एक पृष्ठभूमि ड्रा करने योग्य जोड़ें:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@android:color/white" />
  <stroke android:width="1dp" android:color="@android:color/black" />
</shape>

Res / Layout / foo.xml में ImageView पृष्ठभूमि को अपडेट करें:

...
<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:padding="1dp"
  android:background="@drawable/background"
  android:src="@drawable/bar" />
...

यदि आप चाहते हैं कि पृष्ठभूमि से अधिक आकर्षित करने के लिए ImageView पैडिंग को छोड़ दें।


3

यह ऊपर इस्तेमाल किया गया है लेकिन विशेष रूप से उल्लेख नहीं किया गया है।

setCropToPadding(boolean);

यदि सच है , तो छवि को इसके पैडिंग के भीतर फिट करने के लिए क्रॉप किया जाएगा।

यह ImageViewअपनी पृष्ठभूमि में जोड़े गए पैडिंग के भीतर फिट होने का स्रोत बना देगा ।

XML के रूप में यह नीचे किया जा सकता है-

android:cropToPadding="true"

2

आपको इस कोड को res / drawable में एक background.xml बनाना होगा

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="6dp" />
<stroke
    android:width="6dp"
    android:color="@android:color/white" />
<padding
    android:bottom="6dp"
    android:left="6dp"
    android:right="6dp"
    android:top="6dp" />
</shape>

2

उन लोगों के लिए जो ImageView की कस्टम सीमा और आकार की खोज कर रहे हैं। आप android-size-imageview का उपयोग कर सकते हैं

छवि

बस compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'अपने को जोड़ोbuild.gradle

और अपने लेआउट में उपयोग करें।

<com.github.siyamed.shapeimageview.BubbleImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siArrowPosition="right"
    app:siSquare="true"/>

1

मैंने इस बारे में लगभग हार मान ली।

यह मेरी छवि को लोड करने के लिए ग्लाइड का उपयोग करने की स्थिति है, गोल कोने में परिवर्तन और यहां के बारे में विस्तृत ग्लाइड मुद्दा देखें

मैं भी मेरे लिए एक ही गुण है ImageView, हर किसी के लिए यहाँ जवाब 1 , यहाँ 2 और यहाँ 3

android:cropToPadding="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"`
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/path_to_rounded_drawable"

लेकिन फिर भी कोई सफलता नहीं मिली।

थोड़ी देर के लिए शोध करने के बाद, इस SO उत्तर कीforeground विशेषताओं का उपयोग करके यहां एक परिणाम देंandroid:foreground="@drawable/all_round_border_white"

दुर्भाग्य से यह मुझे छवि के नीचे "अच्छा नहीं" बॉर्डर कॉर्नर दे रहा है:

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


0

मुझे ऐसा करना बहुत आसान लगा:

1) फ़्रेम को सामग्री के अंदर संपादित करें (9patch टूल के साथ)।

2) ImageViewएक के अंदर जगह है Linearlayout, और फ्रेम पृष्ठभूमि या रंग आप की पृष्ठभूमि के रूप में चाहते हैं सेट करें Linearlayout। जैसा कि आपने फ़्रेम को सामग्री के अंदर रखने के लिए सेट किया है, आपका ImageViewफ़्रेम फ़्रेम के अंदर होगा (वहीं जहाँ आप सामग्री को 9patch टूल के साथ सेट करते हैं)।


0

इस लंबी मुसीबत का मेरा सबसे सरल समाधान है।

<FrameLayout
    android:layout_width="112dp"
    android:layout_height="112dp"
    android:layout_marginLeft="16dp" <!-- May vary according to your needs -->
    android:layout_marginRight="16dp" <!-- May vary according to your needs -->
    android:layout_centerVertical="true">
    <!-- following imageView acts as the boarder which sitting in the background of our main container ImageView -->
    <ImageView
        android:layout_width="112dp"
        android:layout_height="112dp"
        android:background="#000"/>
    <!-- following imageView holds the image as the container to our image -->
    <!-- layout_margin defines the width of our boarder, here it's 1dp -->
    <ImageView
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_margin="1dp"
        android:id="@+id/itemImageThumbnailImgVw"
        android:src="@drawable/banana"
        android:background="#FFF"/> </FrameLayout>

निम्नलिखित उत्तर में मैंने इसे अच्छी तरह समझाया है, कृपया इसे भी देखें!

मुझे आशा है कि यह किसी और के लिए उपयोगी होगा!


0

उसी xml में मैंने अगला प्रयोग किया है:

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff" <!-- border color -->
        android:padding="3dp"> <!-- border width -->

        <ImageView
            android:layout_width="160dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:scaleType="centerCrop" />
    </RelativeLayout>

0

सबसे पहले आप अपनी सीमा के रंग के रूप में पृष्ठभूमि रंग जोड़ना चाहते हैं, फिर यहां छवि विवरण दर्ज करें

क्रॉपटाउडिंग को सही में बदलें और उसके बाद पैडिंग जोड़ें।

तब आपके पास आपकी छवि के लिए अपनी सीमा होगी।

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