যখন একটি বোতামটি ক্লিক করা হচ্ছে তখন একটি বৃত্তাকার রিপলটি কীভাবে তৈরি করবেন?


121

পটভূমি

অ্যান্ড্রয়েডের ডায়ালার অ্যাপে, যখন আপনি কোনও কিছুর সন্ধান শুরু করেন এবং আপনি সম্পাদনা পাঠের বামদিকে তীর বোতামটি ক্লিক করেন, আপনি এটিতে একটি বৃত্তাকার রিপল প্রভাব পান:

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

সমস্যাটি

আমি এটি চেষ্টা করার চেষ্টা করেছি, তবে আমি একটি আয়তক্ষেত্রাকার পেয়েছি:

    <ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/search_ic_back_arrow"/>

প্রশ্নটি

ক্লিক করা অবস্থায় আমি কীভাবে বোতামটির একটি বৃত্তাকার রিপল প্রভাব ফেলতে পারি? আমাকে কী নতুন অঙ্কনযোগ্য তৈরি করতে হবে, বা এর জন্য কোনও বিল্ট ইন আছে?



সম্ভব উত্তর এখানে stackoverflow.com/questions/33477025/...
অমরিশ Kakadiya

1
আপনার নির্বাচিত উত্তরটিকে সর্বাধিক উন্নত ব্যক্তিদের সাথে পরিবর্তন করে বিবেচনা করুন, কারণ এটি আসলে সমস্যাটি সমাধান করে
জেফ

@ জেফবার্গার কেন? দুটোই ঠিকঠাক কাজ করে। তাদের মধ্যে এর চেয়ে ভাল আর কেউ নেই।
অ্যান্ড্রয়েড বিকাশকারী

উত্তর:


17

আপনার যদি ইতিমধ্যে একটি ব্যাকগ্রাউন্ড চিত্র থাকে, তবে এখানে একটি রিপলের একটি উদাহরণ যা নির্বাচনযোগ্য আইটেমব্যাকগ্রাউন্ডবোর্ডারলেস এর কাছাকাছি দেখায়:

            <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/state_pressed_ripple"/>
    <item
        android:state_enabled="true"
        android:drawable="@drawable/ic_filter" />
</selector>

state_pressed_ripple.xml: (সাদা ব্যাকগ্রাউন্ডে অস্বচ্ছতা 10% সেট করা হয়েছে) 1 এএফএফএফএফএফএফ

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

286

আপনি যদি অ্যাপকম্প্যাট থিমটি ব্যবহার করে থাকেন তবে আপনি দৃশ্যের ব্যাকগ্রাউন্ডটি সেট করতে পারেন:

android:background="?selectableItemBackgroundBorderless"

এটি 21 ও এর উপরে বৃত্তাকার রিপল এবং 21 এর নীচে বর্গক্ষেত্র যুক্ত করবে।


খুশী হলাম। আমি কি এর রঙ কিছুটা সেট করতে পারি?
অ্যান্ড্রয়েড বিকাশকারী

4
আইপিএলে 23-তে 'আপ' ব্যাকগ্রাউন্ডটি নির্বাচনের যোগ্য আইটেমব্যাকগ্রাউন্ডবর্ডারলেস
স্নোডনিপার

3
ভাল, সেরা উত্তর। ty
স্কাইওয়াকার

1
@androiddeveloper, রঙ colorControlHighlight নিচে মত আপনার styles.xml মধ্যে <আইটেমের নাম = "colorControlHighlight"> # F00 </ আইটেমটি> সেটিং দ্বারা নির্ধারণ করা যাবে
বন্ড

3
আপনি যদি এটি অন্যান্য লেআউটের ভিতরে ব্যবহার করে android:clipChildren="false"থাকেন তবে অ্যানিমেশনটি প্রচার করতে দেওয়ার জন্য আপনার প্রয়োজন হতে পারে লেআউটগুলিতেও।
তানাসিস

83

রাউন্ড রিপল এফেক্ট সহ আরও একটি বৈশিষ্ট্য, বিশেষত অ্যাকশন বারের জন্য:

android:background="?actionBarItemBackground"

ইউপিডি : রিপল রঙ এই বৈশিষ্ট্য দ্বারা পরিবর্তন করা যেতে পারে:

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

তবে মনে রাখবেন, এই বৈশিষ্ট্যটি সমস্ত ডিফল্ট রিপল প্রভাবগুলিতে প্রযোজ্য।


এটি কাস্টমাইজ করার কোনও উপায়? উদাহরণস্বরূপ রঙ? শৈলীতে কিছু হতে পারে? বা আরও বিশেষভাবে এক্সএমএল ট্যাগ নিজেই দেখুন?
অ্যান্ড্রয়েড বিকাশকারী 13

আমি জানি না, আজ আমি এই সমস্যাটি সমাধান করেছি এবং উপরের উত্তরগুলি আমার প্রয়োজন মতো কাজ করে নি। আমি ধরে নিই যে রঙটি স্টাইলগুলিতে কাস্টমাইজ করা যেতে পারে, তবে অবশ্যই এই দৃষ্টিতে নয়।
অ্যারিমিয়ান

1
এটি আমি ঠিক খুঁজছি সঠিক প্রভাব। যাইহোক, আপনি এই বৈশিষ্ট্যটি কোথায় খুঁজে পাবেন তা উল্লেখ করতে পারেন, এটি নথিভুক্ত নয় বলে মনে হয়।
জ্যাক ওয়াং 21

2
ওপি প্রশ্নের উত্তর দেয়। জোরে সেরা উত্তর হিসাবে চিহ্নিত করা হবে। +1
কর্বেলা

2
@ মাইসামহাদিগহে ?শর্টকাট?attr/
মুসোফ

47

পটভূমি হিসাবে একটি রিপল অঙ্কনযোগ্য তৈরি এবং সেট করুন। এটার মতো কিছু.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

এটা আমার কোড কিছু। আপনি আপনার রঙগুলি ব্যবহার করতে পারেন :)
টমাস আর।

প্রাক-লোলিপপ ক্ষেত্রে ডিফল্ট নির্বাচকটি কীভাবে ব্যবহার করব? এছাড়াও, এটি কি ডায়ালারের মতো একই রং ব্যবহার করে?
অ্যান্ড্রয়েড বিকাশকারী

2
আপনি আপনার অঙ্কনযোগ্য-ভি 21 ফোল্ডারে রিপল আঁকতে পারবেন। এবং প্রাক এল এর জন্য একটি সরল রাষ্ট্র আঁকুন ব্যবহার করুন। একই ফাইলের নামটি ব্যবহার করুন এবং এটি অঙ্কনযোগ্য (ডিফল্ট) ফোল্ডারে রাখুন।
টমাস আর।

2
আপনি একটি স্টাইলও তৈরি করতে পারেন। মান-ভি 21 ফোল্ডারে একটি নতুন শৈলী তৈরি করুন এবং পটভূমি হিসাবে পটভূমি আঁকতে সক্ষম করুন। এবং প্রাক এল এর জন্য, যেমন আপনার মানগুলিতে ফোল্ডার স্টাইলস x
টমাস আর

1
আপনি যদি অ্যাপ্লিকেশনে ব্যবহৃত অন্যান্য ডিফল্ট রিপল ইফেক্টগুলির মতো একই লম্বালম্বি রঙটি চান তবে রঙ হিসাবে "? Attr / colorControlHightlight" ব্যবহার করুন।
alexbchr

27

এই ব্যাকগ্রাউন্ডটি কেবল আপনার দর্শনে যুক্ত করুন

android:background=?android:attr/actionBarItemBackground


18

আপনি android:radiusএক্সএমএলে বৈশিষ্ট্য ব্যবহার করে চেনাশোনা রিপল অঙ্কনযোগ্য তৈরি করতে পারেন ।

উদাহরণ:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />

মনোযোগ দিন, যাতে your_radiusআপনার দেখার প্রস্থ এবং উচ্চতা কম হওয়া উচিত। উদাহরণস্বরূপ: আপনার যদি আকারের ভিউ থাকে 60dp x 60dp your_radiusতবে এটির 30dp(প্রস্থ / 2 বা উচ্চতা / 2) হওয়া উচিত।

অ্যান্ড্রয়েড 5.0 এবং তারপরে উপর কাজ করুন।


3

আপনি যদি আরও জেনেরিক এক্সএমএল ফাইল চান তবে আমার কাছে দুটি ফাইল রয়েছে:

1) কোড সহ বিটিএন_রিপল_ব্যাকগ্রাউন্ড :

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

2) রিপল_ক্রাইকুলার_ কোড সহ আকার :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/btn_state_pressed_text_color"
    android:shape="oval">
    <solid android:color="@color/btn_state_pressed_text_color" />
</shape>

অবশেষে ব্যবহার:android:foreground="@drawable/ripple_btn_background"


1

চেষ্টা করুন:

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"

1
দয়া করে একটি উত্তর হিসাবে কেবল কোড পোস্ট করবেন না, তবে আপনার কোডটি কী করে এবং কীভাবে এটি সমস্যার সমস্যার সমাধান করে তার একটি ব্যাখ্যা অন্তর্ভুক্ত করুন। একটি ব্যাখ্যা সহ উত্তরগুলি সাধারণত উচ্চমানের হয় এবং এগুলি আরও বেশি আকর্ষণ করতে পারে more
মার্ক রোটভিল

ব্যাকগ্রাউন্ড হিসাবে অ্যাকশনবারটাইমব্যাকগ্রাউন্ড সেট করার চেয়ে মসৃণ। তবে এখনও অ্যাকশন বার অ্যানিমেশন নিজেই ঠিক ঠিক একই নয়।
coolcool1994

1

আপনি যদি রিপল ইফেক্ট চান যা বৃত্তের সীমাটি অতিক্রম করবে না, আপনি এই কোডটি পরীক্ষা করতে পারেন। এটি আমার পক্ষে নিখুঁতভাবে কাজ করে। কেবল মনে রাখবেন, আপনাকে আইডি = @ অ্যান্ড্রয়েড: আইডি / মাস্কটি রিপল_ ব্লু.এক্সএমএল দিতে হবে

<ImageButton
    android:id="@+id/send_password_to_mail_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_blue"
    android:src="@drawable/ic_filter" />

ripple_blue.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

    <item android:id="@android:id/background">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

</ripple>

color.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="colorWindowBackground">#F2F5FC</color>
    <color name="colorRipple">#0288d1</color>
</resources>

0

শুধু এই আপনার আইটেম যুক্ত করুন

           <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="?android:attr/actionBarItemBackground"
                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />

1
এর সাথে অভিন্ন বলে মনে হচ্ছে: stackoverflow.com/a/54440773/878126
অ্যান্ড্রয়েড বিকাশকারী 14

0

কোটলিন / জাভাতে আপনি নিম্নলিখিতগুলি করতে পারেন

fun View.applyCircularRippleEffect() {
    val backgroundResId = context.getResource(android.R.attr.actionBarItemBackground)

    if (backgroundResId != 0) {
        setBackgroundResource(backgroundResId)
        isClickable = true
        isFocusable = true
    }
}

// getResource extension
fun Context.getResource(resourceId: Int): Int {
    val out = TypedValue()
    theme.resolveAttribute(resourceId, out, true)

    return out.resourceId
}


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