কাস্টম সার্কেল বোতাম


186

আমি কাস্টম বোতামটি তৈরি করতে চাই এবং এটির বৃত্ত হওয়া আমার প্রয়োজন। আমি কীভাবে একটি বৃত্ত বোতাম তৈরি করতে পারি? আমি মনে করি না যে ড্র 9 প্যাচ দিয়ে সম্ভব হবে।

এছাড়াও কাস্টম বোতাম কীভাবে বানাতে হয় তাও জানি না!

তোমার কি কোন পরামর্শ আছে?


আপনাকে বোতামের ক্লাসটি প্রসারিত করতে হবে এবং অন ড্র করার পদ্ধতিটি ওভাররাইড করতে হবে।
আশ্বিন এন ভানুশালী

2
তবে সমস্যাটি এখানে রয়েছে যদি আমি এটি প্রসারিত করি এবং ব্যবহারকারী যদি বৃত্তের বাইরে চলে যায় তবে ওনলিককে ডাকা হবে, কীভাবে এটি সমাধান করা যায়।
আতা

আপনি কেন আপনার বাটনের ব্যাকগ্রাউন্ড হিসাবে একটি গোল আকৃতির চিত্রটি সেট করেন না?
এমকেজেপ্রেখ 27'12

আমি সাধারণ অনড্রাউন করেছি, এটি ডিজাইন ভিউতে দেখায়, তবে আমি যখন অ্যাপ্লিকেশন চালাতে চাইছি তখন এটি লোড করার ক্ষেত্রে এই সমস্যাটি তৈরি করে: android.view.InflateException: বাইনারি এক্সএমএল ফাইল লাইন # 52: শ্রেণি com.inaros.magicbox._customButtonPlay
আতা

উত্তর:


346

এক্সএমএল এর মতো অঙ্কনযোগ্য ব্যবহার করুন:

নিম্নলিখিত বিষয়বস্তু সংরক্ষণ round_button.xmlমধ্যে drawableফোল্ডারের

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

অ্যান্ড্রয়েড উপাদান প্রভাব: যদিও FloatingActionButtonএকটি ভাল বিকল্প, আপনি এটি XML নির্বাচক ব্যবহার না করতে চান তাহলে, একটি ফোল্ডার তৈরি drawable-v21মধ্যে resএবং অন্য সংরক্ষণ round_button.xmlনিম্নলিখিত XML সেখানে

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

এবং এটির মতো xML এর পটভূমি হিসাবে সেট করুন Button:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

গুরুত্বপূর্ণ:

  1. আপনি যদি এটি এই সমস্ত রাজ্য (সক্ষম, অক্ষম, হাইলাইট ইত্যাদি) দেখানোর জন্য চান তবে আপনি এখানে বর্ণিত হিসাবে নির্বাচক ব্যবহার করবেন ।
  2. অঙ্কনযোগ্য পিছনে-সামঞ্জস্যপূর্ণ করতে আপনাকে দুটি ফাইলই রাখতে হবে। অন্যথায়, আপনি পূর্ববর্তী অ্যান্ড্রয়েড সংস্করণে অদ্ভুত ব্যতিক্রমগুলির মুখোমুখি হবেন।

অঙ্কনযোগ্য ফোল্ডার দ্বারা আপনি 'অঙ্কনযোগ্য' নামে একটি ফোল্ডার খুলতে চান, বা এটি আঁকতে-এমডিপিআই, এইচডিপিআই ইত্যাদিতে সংরক্ষণ করতে চান ...?
Jjang

@ জাজং না, আপনাকে কেবল এটি 'অঙ্কনযোগ্য' ফোল্ডারে সংরক্ষণ করতে হবে, অঙ্কনের জন্য কোনও এক্সএমএল রিসোর্স সাধারণত 'ড্রইবেলে' সংরক্ষণ করা হয়, এমডিপিআই, এইচডিপি ইত্যাদিতে নয়
আদিল

কে থেক্স, আমার এখন অবধি কোনও অঙ্কনযোগ্য ফোল্ডার ছিল না (কেবল এমডিপিআই, এইচডিপি ... এবং -ভি 21) :)
জাজং

পিএস কীভাবে বোতামটি ডিফল্ট রিপল রঙ দেয়? ডিফল্টরূপে ধূসর রঙের মতো যা অ্যাপ্লিকেশানের সমস্ত বোতাম রঙ করছে।
Jjang

@ অ্যাডিলসোমো আমার আপনার ইমেল ঠিকানা দরকার বা আমাকে মেইল ​​করুন adilm717@gmail.com , পাক থেকে
আদিল

67

মার্কুশি আশ্চর্যজনক প্রভাব সহ একটি বৃত্ত বোতাম উইজেট লিখেছিলেন। এখানে ক্লিক করুন !

এখানে চিত্র বর্ণনা লিখুন


এটি একটি বিজ্ঞপ্তিবিহীন চিত্র সহ কীভাবে ব্যবহার করবেন?
tomsoft

3
কেবল একটি মাথা আপ: এই উত্তরের সাথে সংযুক্ত গ্রন্থাগারটি এখন অবচয় করা হয়েছে। লেখক (মার্কুশি) পরিবর্তে একটি ফ্লোটিং অ্যাকশন বোতামটি ব্যবহার করার পরামর্শ দিয়েছেন।
মনিকাকে

@ অ্যাবসম্যান কি আমরা বৃত্ত বোতাম উইজেটে পাঠ্য রাখতে পারি? বা কেবল অঙ্কনযোগ্যদের জন্য
রুচির বড়োনিয়া

@ রুচিরবারোনিয়া আমার মনে হয় আপনার সত্যই অ্যান্ড্রয়েড এফএবি বিবেচনা করা উচিত। একটি ছোট বৃত্তাকার বোতামের মধ্যে আপনি কত গদ্য রাখতে চান? এটি আইকনগুলির জন্য তৈরি বলে মনে হচ্ছে। চেক আউট করুন: google.com/design/spec/components/…
মনিকা ২

@ আবছমান ওহে, তবে আমি এই লাইব্রেরিতে এই বোতামটির প্রভাবটি সত্যিই পছন্দ করি। অন্য কোন উপায় আছে?
রুচির বড়োনিয়া

22

কাস্টম অ্যান্ড্রয়েড বোতামের জন্য অ্যাংরিটুল

আপনি এই সরঞ্জাম সাইটের সাহায্যে যেকোন প্রকারের কাস্টম অ্যান্ড্রয়েড বোতাম তৈরি করতে পারেন ... আমি এই সরঞ্জামসাইটটি দিয়ে বৃত্তাকার এবং কোণার সাথে স্কোয়ার বোতামটি তৈরি করি .. এটি দেখার জন্য আমি আপনাকে সাহায্য করব


12

অফিসিয়াল উপাদান উপাদান লাইব্রেরিতে আপনি প্রয়োগটি ব্যবহার করতে পারেন MaterialButtonaWidget.MaterialComponents.Button.Icon স্টাইল ।

কিছুটা এইরকম:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

বর্তমানে app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, android:insetBottomবৈশিষ্ট্যাবলী বাটন অতিরিক্ত প্যাডিং স্থান এড়ানো আইকন কেন্দ্র প্রয়োজন।

app:shapeAppearanceOverlayবৃত্তাকার কোণ পেতে বৈশিষ্ট্যটি ব্যবহার করুন । এই ক্ষেত্রে আপনার একটি বৃত্ত থাকবে।

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

চূড়ান্ত ফলাফল:

এখানে চিত্র বর্ণনা লিখুন


1
ধন্যবাদ @ গ্যাব্রিয়েল মেরিওটি। app:iconPadding="0dp"আইকনটি কেন্দ্রিক রয়েছে তা নিশ্চিত করার জন্য প্রয়োজনীয়তার বিষয়টি তুলে ধরা th আমি এটি না পাওয়া পর্যন্ত আমি একগুচ্ছ সময়ের চেষ্টা কেন্দ্র পোড়া করেছি। দেখে মনে হচ্ছে এটি অ্যাপ্লিকেশন: আইকনগ্র্যাভিটির একটি "কেন্দ্র" মান অনুপস্থিত।
স্কটিয়াব

1
ধন্যবাদ @ গ্যাব্রিয়েল মেরিওটি। আমার জন্য ভাল কাজ!
অ্যান্ড্রয়েডজ

2

আপনি যদি ভেক্টরড্রায়েবল এবং কনস্ট্রেন্টলয়েট ব্যবহার করতে চান তবে

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

বৃত্তের পটভূমি: वृत्त_বাটন.এক্সএমএল

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
    android:width="2dip"
    android:color="#03ae3c" />
<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />
</shape>

2

কোনও এফএবি খুঁজছেন বোতামের জন্য এই স্টাইলটিতে MaterialButton:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

ফলাফল:

এখানে চিত্র বর্ণনা লিখুন

আপনি যদি আকার পরিবর্তন করেন তবে বোতামের আকারের অর্ধেকটি ব্যবহার করতে সতর্ক হন app:cornerRadius

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.