एंड्रॉइड के लिए स्पिनर पृष्ठभूमि डिज़ाइन और रंग कैसे बदलें?

Question

मैं एक ऐप विकसित कर रहा हूं जिसमें मुझे पृष्ठभूमि रंग से मेल खाने के लिए स्पिनर पृष्ठभूमि लेआउट को बदलने की आवश्यकता है। मैंने शोध किया और पाया कि मुझे 9 पैच छवि बनाने की जरूरत है। मैंने 9 पैच छवि बनाई है और ऐप में उपयोग की है लेकिन यह सामान्य स्पिनर से बड़ी दिखती है और मैं स्पिनर में ड्रॉप डाउन बटन भी नहीं देख पा रहा हूं।

मैं बहुत खुश हूं अगर आप मुझे स्पिनर के लिए 9 पैच छवि बनाने और ऐप में इसका उपयोग करने से एक स्पष्ट ट्यूटोरियल प्रदान करते हैं।

स्पिनर

<Spinner 
     android:id="@+id/spnIncredientone" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/txtMixtureTitle" 
     android:layout_marginLeft="5dip" 
     android:layout_marginRight="5dip" 
     android:background="@drawable/spinner_background" 
     android:prompt="@string/selectmixture" /> 

Answer 1

आप इस तरह एक्सएमएल में स्पिनरों पृष्ठभूमि रंग सेट कर सकते हैं के लिए कोड:

android:background="YOUR_HEX_COLOR_CODE" 

और आप के साथ ड्रॉप डाउन मेनू का उपयोग करता है, तो आप स्पिनर आप इस तरह के पृष्ठभूमि रंग सेट कर सकते हैं:

android:popupBackground="YOUR_HEX_COLOR_CODE" 

Answer 2

आप अपने स्पिनर मदों के लिए एक नया व्यक्तिगत लेआउट बनाने की जरूरत है, इस तरह, मैं इसे नाम होगा:

spinner_item.xml:

<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/text1" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:textSize="20sp" 
    android:textColor="#ff0000" /> 

फिर अपने स्पिनर घोषणा पर

, आप की जरूरत है अपने स्पिनर अनुकूलक में नए लेआउट का उपयोग करते हैं:

ArrayAdapter adapter = ArrayAdapter.createFromResource(this, 
R.layout.spinner_item, YOUR_SPINNER_CONTENT); 
spinner.setAdapter(adapter); 

ड्रॉपडाउन सूची से तत्वों को निजीकृत करने के लिए, यदि आप किसी अन्य लेआउट बनाने की जरूरत है, मैं इसे नाम होगा एसपीआई nner_dropdown_item.xml:

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/text1" 
    style="?android:attr/spinnerDropDownItemStyle" 
    android:singleLine="true" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
    android:ellipsize="marquee" 
    android:textColor="#aa66cc"/> 

और फिर एडाप्टर पर:

ArrayAdapter adapter = ArrayAdapter.createFromResource(this, 
R.layout.spinner_item, YOUR_SPINNER_CONTENT); 
adapter.setDropDownViewResource(R.layout.spinner_dropdown_item); 
spinner.setAdapter(adapter); 

Answer 3

Jakob pointed out के रूप में, android:popupBackground लटकती (स्पिनर की खोला राज्य) के लिए प्रमुख विशेषता है, लेकिन इसके बजाय सिर्फ एक रंग का उपयोग करने का

menu_dropdown_panel.9.png

:, मैं इस तरह एक 9-पैच drawable के साथ सबसे अच्छा परिणाम मिला

ध्यान दें कि आपकी पसंद के पृष्ठभूमि रंग के लिए यह 9-पैच छवि उत्पन्न करना बहुत आसान है, उदाहरण के लिए this online tool का उपयोग करके explained in this answer!

तो, मेरी स्पिनर XML परिभाषा लगता है:

<Spinner 
    android:id="@+id/spinner" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@color/navigationBlue" 
    android:spinnerMode="dropdown" 
    android:popupBackground="@drawable/menu_dropdown_panel" 
    /> 

और परिणाम:

(। कस्टम फोंट के लिए, एक custom SpinnerAdapter is needed भी ऊपर दिए गए स्क्रीनशॉट में के रूप में,)

कम से कम एंड्रॉइड 4.0+ (एपीआई स्तर 14+) पर काम करता है।

Answer 4

आप पृष्ठभूमि का रंग बदलने और इस तरह से

चरण 1 कर की तरह स्थित ड्रॉप डाउन मेनू कर सकते हैं: drawable फ़ोल्डर में स्पिनर की सीमा के लिए background.xml बनाते हैं।

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<solid android:color="@android:color/transparent" /> 
<corners android:radius="5dp" /> 
<stroke 
    android:width="1dp" 
    android:color="@color/darkGray" /> 
</shape> //edited 

चरण 2: स्पिनर उपयोग की लेआउट डिजाइन या चिह्न नीचे इस ड्रॉप drop.pnj

<RelativeLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginRight="3dp" 
        android:layout_weight=".28" 
        android:background="@drawable/spinner_border" 
        android:orientation="horizontal"> 

        <Spinner 
         android:id="@+id/spinner2" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_centerVertical="true" 
         android:layout_gravity="center" 
         android:background="@android:color/transparent" 
         android:gravity="center" 
         android:layout_marginLeft="5dp" 
         android:spinnerMode="dropdown" /> 

        <ImageView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_alignParentRight="true" 
         android:layout_centerVertical="true" 
         android:layout_gravity="center" 
         android:src="@mipmap/drop" /> 

       </RelativeLayout> 

अंत में छवि के नीचे की तरह लग रहा है और यह हर जगह दौर क्षेत्र और कोई जरूरत में क्लिक करने योग्य है किसी भी छवि के लिए छवि दृश्य के लिए क्लिक लिस्टर लिखने के लिए।

अधिक जानकारी के लिए आप Here

Answer 5

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

यह कि यह कैसा दिखता है ..

स्पिनर की तरह पर लागू करें ...

<Spinner 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/spinner_bg" /> 

spinner_bg.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <color android:color="@color/InputBg" /> 
    </item> 
    <item android:gravity="center_vertical|right" android:right="8dp"> 
     <layer-list> 
      <item android:width="12dp" android:height="12dp" android:gravity="center" android:bottom="10dp"> 
       <rotate 
        android:fromDegrees="45" 
        android:toDegrees="45"> 
        <shape android:shape="rectangle"> 
         <solid android:color="#666666" /> 
         <stroke android:color="#aaaaaa" android:width="1dp"/> 
        </shape> 
       </rotate> 
      </item> 
      <item android:width="30dp" android:height="10dp" android:bottom="21dp" android:gravity="center"> 
       <shape android:shape="rectangle"> 
        <solid android:color="@color/InputBg"/> 
       </shape> 
      </item> 
     </layer-list> 
    </item> 
</layer-list> 

@color/InputBg रंग आप चाहते हैं द्वारा प्रतिस्थापित किया जाना चाहिए आपकी पृष्ठभूमि के रूप में।

सबसे पहले यह वांछित रंग के साथ पृष्ठभूमि भरता है। फिर एक बाल परत सूची एक वर्ग बनाता है और इसे 45 डिग्री से घूमती है और उसके बाद पृष्ठभूमि रंग के साथ एक दूसरा आयताकार घुमावदार वर्ग के शीर्ष भाग को कवर करता है जो इसे नीचे तीर की तरह दिखता है। (वहाँ घुमाया आयत में एक अतिरिक्त स्ट्रोक है के साथ वास्तव में आवश्यक नहीं है)

Answer 6

स्पिनर कोड:

<TextView 
    android:id="@+id/spinner" 
    android:gravity="bottom" 
    android:layout_marginTop="16dp" 
    android:background="@drawable/spinner_selector" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:clickable="true" 
    android:paddingLeft="16dp" 
    android:textSize="16sp" 
    android:text="TextView" /> 

spinner_selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/spinner_pressed" android:state_enabled="true" android:state_pressed="false" /> <!-- enable --> 
    <item android:drawable="@drawable/spinner_clicked" android:state_pressed="true" android:state_enabled="true" /> 
    <item android:drawable="@drawable/spinner_default" android:state_enabled="false" /> <!-- disable --> 
</selector> 

spinner_disable.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="#ddf" /> 
      <padding android:bottom="1dp" /> 
     </shape> 
    </item> 
    <item android:bottom="1dp"> 
     <shape android:shape="rectangle" > 
      <solid android:color="#fff" /> 

      <padding 
       android:left="0dp" 
       android:right="0dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape android:shape="rectangle" > 
      <solid android:color="#fff" /> 
     </shape> 
    </item> 
    <item 
     android:gravity="center_vertical|right" 
     android:right="8dp"> 
     <layer-list> 
      <item 
       android:width="12dp" 
       android:height="12dp" 
       android:bottom="10dp" 
       android:gravity="center"> 
       <rotate 
        android:fromDegrees="45" 
        android:toDegrees="45"> 
        <shape android:shape="rectangle"> 
         <solid android:color="#ddf" /> 
         <stroke 
          android:width="1dp" 
          android:color="#aaaaaa" /> 
        </shape> 
       </rotate> 
      </item> 
      <item 
       android:width="30dp" 
       android:height="10dp" 
       android:bottom="21dp" 
       android:gravity="center"> 
       <shape android:shape="rectangle"> 
        <solid android:color="@android:color/white" /> 
       </shape> 
      </item> 
     </layer-list> 
    </item> 
</layer-list> 

spinner_focused .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="#00f" /> 
      <padding android:bottom="1dp" /> 
     </shape> 
    </item> 
    <item android:bottom="1dp"> 
     <shape android:shape="rectangle" > 
      <solid android:color="#fff" /> 

      <padding 
       android:left="0dp" 
       android:right="0dp" /> 
     </shape> 
    </item> 
    <item> 
     <shape android:shape="rectangle" > 
      <solid android:color="#fff" /> 
     </shape> 
    </item> 
    <item 
     android:gravity="center_vertical|right" 
     android:right="8dp"> 
     <layer-list> 
      <item 
       android:width="12dp" 
       android:height="12dp" 
       android:bottom="10dp" 
       android:gravity="center"> 
       <rotate 
        android:fromDegrees="45" 
        android:toDegrees="45"> 
        <shape android:shape="rectangle"> 
         <solid android:color="#00f" /> 
         <stroke 
          android:width="1dp" 
          android:color="#aaaaaa" /> 
        </shape> 
       </rotate> 
      </item> 
      <item 
       android:width="30dp" 
       android:height="10dp" 
       android:bottom="21dp" 
       android:gravity="center"> 
       <shape android:shape="rectangle"> 
        <solid android:color="@android:color/white" /> 
       </shape> 
      </item> 
     </layer-list> 
    </item> 
</layer-list> 

spinner_enable.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="#00f" /> 
     <padding android:bottom="1dp" /> 
    </shape> 
</item> 
<item android:bottom="1dp"> 
    <shape android:shape="rectangle" > 
     <solid android:color="#BBDEFB" /> 

     <padding 
      android:left="0dp" 
      android:right="0dp" /> 
    </shape> 
</item> 
<item> 
    <shape android:shape="rectangle" > 
     <solid android:color="#BBDEFB" /> 
    </shape> 
</item> 
<item 
    android:gravity="center_vertical|right" 
    android:right="8dp"> 
    <layer-list> 
     <item 
      android:width="12dp" 
      android:height="12dp" 
      android:bottom="10dp" 
      android:gravity="center"> 
      <rotate 
       android:fromDegrees="45" 
       android:toDegrees="45"> 
       <shape android:shape="rectangle"> 
        <solid android:color="#00f" /> 
        <stroke 
         android:width="1dp" 
         android:color="#aaaaaa" /> 
       </shape> 
      </rotate> 
     </item> 
     <item 
      android:width="30dp" 
      android:height="10dp" 
      android:bottom="21dp" 
      android:gravity="center"> 
      <shape android:shape="rectangle"> 
       <solid android:color="#BBDEFB" /> 
      </shape> 
     </item> 
    </layer-list> 
</item> 
</layer-list> 

यह नौ पैच चित्र के बिना ठीक काम करता है। एपीआई 21+

Answer 7

spinner_selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/spinner_enabled" android:state_enabled="true" android:state_pressed="false" /> <!-- enable --> 
    <item android:drawable="@drawable/spinner_clicked" android:state_enabled="true" android:state_pressed="true" /> 
    <item android:drawable="@drawable/spinner_disabled" android:state_enabled="false" /> <!-- disable --> 
</selector> 

spinner_enabled।एक्सएमएल

<?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="#00f" /> 
     <padding android:bottom="2dp" /> 
    </shape> 
</item> 

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

<item> 
    <rotate 
     android:fromDegrees="90" 
     android:pivotX="100%" 
     android:pivotY="60%" 
     android:toDegrees="135"> 
     <rotate 
      android:fromDegrees="135" 
      android:pivotX="100%" 
      android:pivotY="60%" 
      android:toDegrees="45"> 
      <shape android:shape="rectangle"> 
       <stroke 
        android:width="10dp" 
        android:color="#00f" /> 
       <solid android:color="#00f" /> 
      </shape> 
     </rotate> 
    </rotate> 
</item> 
</layer-list> 

spinner_disabled.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="#ddf" /> 
     <padding android:bottom="2dp" /> 
    </shape> 
</item> 

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

<item> 
    <rotate 
     android:fromDegrees="90" 
     android:pivotX="100%" 
     android:pivotY="60%" 
     android:toDegrees="135"> 
     <rotate 
      android:fromDegrees="135" 
      android:pivotX="100%" 
      android:pivotY="60%" 
      android:toDegrees="45"> 
      <shape android:shape="rectangle"> 
       <stroke 
        android:width="10dp" 
        android:color="#ddf" /> 
       <solid android:color="#ddf" /> 
      </shape> 
     </rotate> 
    </rotate> 
</item> 
</layer-list> 

spinner_focused.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="#00f" /> 
     <padding android:bottom="2dp" /> 
    </shape> 
</item> 

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

<item> 
    <rotate 
     android:fromDegrees="90" 
     android:pivotX="100%" 
     android:pivotY="60%" 
     android:toDegrees="135"> 
     <rotate 
      android:fromDegrees="135" 
      android:pivotX="100%" 
      android:pivotY="60%" 
      android:toDegrees="45"> 
      <shape android:shape="rectangle"> 
       <stroke 
        android:width="10dp" 
        android:color="#00f" /> 
       <solid android:color="#00f" /> 
      </shape> 
     </rotate> 
    </rotate> 
</item> 
</layer-list> 

यह नौ पैच चित्र के बिना ठीक काम करता है। एपीआई 10+

Answer 8

स्पिनर कोड

<Spinner 
    android:id="@+id/spinner" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:textColor="@color/text.white" 
    android:paddingBottom="13dp" 
    android:background="@drawable/bg_spinner"/> 

bg_spinner.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="@color/colorPrimaryDark"/> 
      <corners android:radius="10dp" /> 
     </shape> 
    </item> 
    <item android:gravity="center_vertical|right" android:right="8dp"> 
     <layer-list> 
      <item android:width="12dp" android:height="12dp" android:gravity="center" android:bottom="10dp"> 
       <rotate 
        android:fromDegrees="45" 
        android:toDegrees="45"> 
        <shape android:shape="rectangle"> 
         <solid android:color="#ffffff" /> 
         <stroke android:color="#ffffff" android:width="1dp"/> 
        </shape> 
       </rotate> 
      </item> 
      <item android:width="20dp" android:height="10dp" android:bottom="21dp" android:gravity="center"> 
       <shape android:shape="rectangle"> 
        <solid android:color="@color/colorPrimaryDark"/> 
       </shape> 
      </item> 
     </layer-list> 
    </item> 
</layer-list> 

Answer 9

इसे स्पिनर में पारदर्शी पृष्ठभूमि के साथ काम करने की आवश्यकता है।

spinner_enable.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="#00000000" /> 
      <padding android:bottom="2dp" /> 
     </shape> 
    </item> 

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

    <item 
     android:bottom="-2dp" 
     android:left="-3dp" 
     android:right="-3dp" 
     android:top="-3dp"> 
     <shape> 
      <solid android:color="#00000000" /> 
      <stroke 

       android:width="2dp" 
       android:color="#00aedb" /> 
     </shape> 
    </item> 

    <item> 
     <rotate 
      android:fromDegrees="90" 
      android:pivotX="100%" 
      android:pivotY="60%" 
      android:toDegrees="135"> 
      <rotate 
       android:fromDegrees="135" 
       android:pivotX="100%" 
       android:pivotY="60%" 
       android:toDegrees="45"> 
       <shape android:shape="rectangle"> 
        <stroke 
         android:width="10dp" 
         android:color="#00aedb" /> 
        <solid android:color="#00aedb" /> 
       </shape> 
      </rotate> 
     </rotate> 
    </item> 
</layer-list> 

spinner_disable.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="#00000000" /> 
     <padding android:bottom="2dp" /> 
    </shape> 
</item> 

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

<item 
    android:bottom="-2dp" 
    android:left="-3dp" 
    android:right="-3dp" 
    android:top="-3dp"> 
    <shape> 
     <solid android:color="#00000000" /> 
     <stroke 

      android:width="2dp" 
      android:color="#d9dadc" /> 
    </shape> 
</item> 

<item> 
    <rotate 
     android:fromDegrees="90" 
     android:pivotX="100%" 
     android:pivotY="60%" 
     android:toDegrees="135"> 
     <rotate 
      android:fromDegrees="135" 
      android:pivotX="100%" 
      android:pivotY="60%" 
      android:toDegrees="45"> 
      <shape android:shape="rectangle"> 
       <stroke 
        android:width="10dp" 
        android:color="#d9dadc" /> 
       <solid android:color="#d9dadc" /> 
      </shape> 
     </rotate> 
    </rotate> 
</item> 
</layer-list> 

spinner_selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/spinner_enable" android:state_enabled="true" android:state_pressed="false" /> <!-- enable --> 
    <item android:drawable="@drawable/spinner_disable" android:state_enabled="false" /> <!-- disable --> 
</selector> 

Answer 10

मैं नमूने ऊपर की कोशिश की लेकिन मेरे लिए काम नहीं कर रहा। सरल समाधान भयानक मेरे लिए काम कर रहा है:

<RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="#fff" > 
     <Spinner 
      android:id="@+id/spinner1" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:entries="@array/Area"/> 
    </RelativeLayout> 

Answer 11

<FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 
    <Spinner 
     android:layout_marginTop="8dp" 
     android:background="@drawable/edit_border" 
     android:visibility="visible" 
     android:id="@+id/teach_repeat" 
     android:entries="@array/on_off" 
     android:textSize="12sp" 
     android:textColor="#ffffff" 
     android:layout_width="match_parent" 
     android:layout_height="40dp" /> 
     <ImageView 
      android:layout_marginTop="8dp" 
      android:layout_gravity="end" 
      android:src="@drawable/ic_arrow_drop_down_white_18dp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </FrameLayout>