बटन पर आइकन पर नई आइटम गिनती जोड़ें - एंड्रॉइड

Question

मैं डेवलपर हूं। मुझे नीचे दिखाए गए डिज़ाइन को लागू करने की आवश्यकता है। मेरे पास पहले से ही कार्यात्मक ऐप है लेकिन आश्चर्य है कि इस तक कैसे पहुंचे? विशेष रूप से, मुझे टैब के अंतर्गत "नई" वस्तुओं की संख्या दिखाने के तरीके में दिलचस्पी है। मुझे क्या पता है - लाल बिंदुओं के साथ नए आइकन बनाते हैं और नई सामग्री उपलब्ध होने पर उन्हें प्रदर्शित करते हैं।

लेकिन मुझे नहीं पता कि उन राउंड सर्किलों को शीर्षक के शीर्ष पर कैसे तैरना है और अंदर नंबर दिखाएं। क्या किसी के पास भी क्या सुझाव है इस पर सुझाव है? नमूने? दिशा-निर्देश?

गतिविधियों को अलग करने के बारे में दूसरा प्रश्न। क्या मुझे इस तरह के बटन गठबंधन करने के लिए नियंत्रण करना चाहिए और इसे गतिविधियों पर ही बढ़ा देना चाहिए? अन्यथा मैं टैब्ड गतिविधि बना सकता हूं लेकिन मुझे यकीन नहीं है कि इसे इस तरह दिखने के लिए शैली बनाना संभव है।

Answer 1

क्या आप setText() फोन करके चाहते कुछ भी करने के संख्यात्मक मान सेट करने के लिए अनुमति देता है, तो आपका बैज एक TextView करें। TextView की पृष्ठभूमि को XML <shape> ड्रायबल के रूप में सेट करें, जिसके साथ आप सीमा के साथ ठोस या ढाल चक्र बना सकते हैं। एक एक्सएमएल ड्रॉबल दृश्य को फिट करने के लिए स्केल करेगा क्योंकि यह कम या ज्यादा पाठ के साथ बदलता है।

रेस/drawable/badge_circle.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"> 
    <solid 
    android:color="#F00" /> 
    <stroke 
    android:width="2dip" 
    android:color="#FFF" /> 
    <padding 
    android:left="5dip" 
    android:right="5dip" 
    android:top="5dip" 
    android:bottom="5dip" /> 
</shape> 

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

रेस/drawable/badge_circle.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners 
    android:radius="10dip"/> 
    <solid 
    android:color="#F00" /> 
    <stroke 
    android:width="2dip" 
    android:color="#FFF" /> 
    <padding 
    android:left="5dip" 
    android:right="5dip" 
    android:top="5dip" 
    android:bottom="5dip" /> 
</shape> 

बनाया स्केलेबल पृष्ठभूमि के साथ

, तो आप बस इसे एक TextView की पृष्ठभूमि के लिए, जोड़ सकते हैं ताकि तरह:

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="10" 
    android:textColor="#FFF" 
    android:textSize="16sp" 
    android:textStyle="bold" 
    android:background="@drawable/badge_circle"/> 

अंत में, ये TextView बैज उचित बटन/टैब के शीर्ष पर आपके लेआउट में रखे जा सकते हैं। मैं शायद इसलिए की तरह एक RelativeLayout कंटेनर में अपने बैज के साथ प्रत्येक बटन समूहीकरण, द्वारा इस करना होगा:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
    <Button 
    android:id="@+id/myButton" 
    android:layout_width="65dip" 
    android:layout_height="65dip"/> 
    <TextView 
    android:id="@+id/textOne" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignTop="@id/myButton" 
    android:layout_alignRight="@id/myButton" 
    android:text="10" 
    android:textColor="#FFF" 
    android:textSize="16sp" 
    android:textStyle="bold" 
    android:background="@drawable/badge_circle"/> 
</RelativeLayout> 

उम्मीद है कि यह है कि आप सही दिशा में इशारा किया कम से कम करने के लिए पर्याप्त जानकारी है!

Answer 2

अंडाकार का उपयोग करने के बजाय, आप एक पूर्ण भरे सर्कल को आकर्षित करने के लिए अंगूठी के आकार का उपयोग कर सकते हैं।

कृपया मेरा उत्तर here देखें।

Answer 3

एंड्रॉयड ViewBadger

एक आसान तरीका "बिल्ला" किसी भी एंड्रॉयड रनटाइम पर लेआउट में इसके लिए पूरा करने के लिए बिना देखने के लिए।

अपने libs में .jar फ़ाइल जोड़ें फ़ोल्डर

Click to download उदाहरण

GitHub पर Example देख

सरल उदाहरण:

View target = findViewById(R.id.target_view); 
BadgeView badge = new BadgeView(this, target); 
badge.setText("1"); 
badge.show(); 

Answer 4

सरल केवल TextView के लिए शैली देकर हैक।

 <TextView 
       android:id="@+id/fabCounter" 
       style="@style/Widget.Design.FloatingActionButton" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentEnd="true" 
       android:layout_centerVertical="true" 
       android:layout_marginEnd="10dp" 
       android:padding="5dp" 
       android:text="10" 
       android:textColor="@android:color/black" 
       android:textSize="14sp" />