বাটন ব্যাকগ্রাউন্ড রঙের সাথে আমার বোতামে রিপল ইফেক্ট যুক্ত করবেন?


125

আমি একটি বোতাম তৈরি করেছি এবং আমি সেই বোতামটিতে রিপল প্রভাব যুক্ত করতে চাই!

আমি একটি বোতাম বিজি এক্সএমএল ফাইল তৈরি করেছি: (বিজি_বিটিএন.এক্সএমএল)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>

এবং এটি আমার রিপল এফেক্ট ফাইল: (ripple_bg.xML)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

এবং এটি আমার বোতামটি যা আমি রিপল ইফেক্ট যুক্ত করতে চাই:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />

তবে রিপল ইফেক্ট বোতামের পটভূমিটি যুক্ত হওয়ার পরে স্বচ্ছ, এবং ক্লিক করলেই বোতাম প্রদর্শন প্রদর্শিত হবে:

ক্লিক করার আগে

ক্লিক করুন

তবে আমার উভয় বোতামের পটভূমির রঙ এবং রিপল ইফেক্টের প্রয়োজন, স্ট্যাক ওভারফ্লোয়ের বিভিন্ন ব্লগে আমি এই কোডটির কয়েকটি পেয়েছি, কিন্তু এখনও এটি কাজ করছে না!


দয়া করে পরের বারের স্ক্রিনশটগুলি আরও ছোট করুন .. (আপলোড করার আগে পুনরায় আকার দিন)
ব্যবহারকারী 25

@ ব্যবহারকারী 25, আপনি কেবলমাত্র একটি lবা mচিত্রের লিঙ্কে যুক্ত করতে পারেন । (আমার সম্পাদনা দেখুন)
সুরগাচ

উত্তর:


154

যারা আরও একসাথে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড, কোণার ব্যাসার্ধ এবং রিপল প্রভাব যুক্ত করতে চান তাদের জন্য এখানে আরও একটি অঙ্কনযোগ্য এক্সএমএল:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryLight"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>
</ripple>

এটি আপনার বোতামের পটভূমিতে যুক্ত করুন।

<Button
    ...
    android:background="@drawable/button_background" />

4
@pei আপনি কীভাবে এই ইনফসগুলি পাবেন? আমি বলতে চাইছি আপনি কীভাবে জানেন যে এই কাজটি করার জন্য রিপল নামে একটি এক্সএমএল উপাদান রয়েছে?

1
এটি উপাদান নকশায় ব্যবহৃত একটি ধারণা। অ্যান্ড্রয়েড স্টুডিওতে একটি অঙ্কনযোগ্য এক্সএমএল এ দয়া করে একটি নতুন মূল ট্যাগটি লিখতে শুরু করুন তারপরে আপনার সহ সমস্ত উপলব্ধ ট্যাগ দেখতে সক্ষম হওয়া উচিত ripple
পেই

1
মাস্ক আইটেম ব্যবহার কি?
প্রশান্ত

10
এটির জন্য এপিআই স্তর 21
এমকাজেম আখগারি

2
এটি কাজ করে তবে কীভাবে এটি কাজ করে তা ব্যাখ্যা করা হয়নি। এটি আইটেমের আইডির সাথে সম্পর্কিত হওয়া উচিত। রেফারেন্স করা উচিত।
oiyio

155

যোগ "?attr/selectableItemBackground"আপনার ভিউ এর android:foregroundঅ্যাট্রিবিউট এটি ইতিমধ্যেই সহ একটি পটভূমি আছে android:clickable="true"


সর্বদা কাজ করে না, তবে গ্রহণযোগ্য উত্তরের মন্তব্যে উল্লিখিত হিসাবে আপনি রিপল প্রভাবটিতে একটি পটভূমি যুক্ত করতে পারেন
টাইলার

আমি আমার বোতামটির জন্য একটি কাস্টম পটভূমি ব্যবহার করায় আমাকে এই সমাধানটি ব্যবহার করতে হয়েছিল। এটা দুর্দান্ত কাজ করেছে।
বিনাগ্রয়াল

@ আরএআর, এটি ঠিক, তবে কমপক্ষে: "এটি কোনও ত্রুটি নয়; অ্যাপ্লিকেশনটি কেবল বৈশিষ্ট্যটিকে উপেক্ষা করবে However তবে, যদি বৈশিষ্ট্যটি আপনার অ্যাপ্লিকেশনটির উপস্থিতি বা কার্যকারিতার জন্য গুরুত্বপূর্ণ হয়, আপনি অর্জনের বিকল্প উপায় সন্ধান করার কথা বিবেচনা করা উচিত কেবলমাত্র উপলব্ধ বৈশিষ্ট্যগুলির সাথে একই ফলাফল, এবং তারপরে আপনি aচ্ছিকভাবে একটি লেআউট-ভিএনএন ফোল্ডারে লেআউটটির অনুলিপি তৈরি করতে পারেন যা এপিআই এনএন বা উচ্চতর যেখানে আপনি নতুন বৈশিষ্ট্যের সুবিধা নিতে পারবেন সেখানে ব্যবহৃত হবে। সুতরাং এটি API 23 এর উপরের ডিভাইসগুলিতে ভালভাবে কাজ করে এবং নীচে থাকাকালীন উপেক্ষা করা হয় (আমরা কেবল পারি tools:ignore="UnusedAttribute)।
জর্জিএএমভিএফ

অ্যান্ড্রয়েড সমর্থন লাইব্রেরি ব্যতীত, এটি হবে ?android:attr/selectableItemBackground( android:attrপরিবর্তে attr)
উইকএন্ড

1
android:foregroundবৈশিষ্ট্যটি 23 এর চেয়ে কম এপিআই স্তরে প্রভাব ফেলেনি
ভাদিম কোতোভ

67

একটি অ্যান্ড্রয়েড বোতামে রিপল ইফেক্ট / অ্যানিমেশন যুক্ত করুন

কেবলমাত্র আপনার বোতামের পটভূমির অ্যাট্রিবিউটটি অ্যান্ড্রয়েডের সাথে প্রতিস্থাপন করুন : ব্যাকগ্রাউন্ড = "? অনুগ্রহ / নির্বাচনযোগ্য আইটেমব্যাকগ্রাউন্ড" এবং আপনার কোডটি এর মতো দেখাচ্ছে।

      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground"
        android:text="New Button" />

অ্যান্ড্রয়েড বোতামে রিপল এফেক্ট / অ্যানিমেশন যুক্ত করার আরেকটি উপায়

এই পদ্ধতিটি ব্যবহার করে, আপনি রিপল এফেক্ট রঙটি কাস্টমাইজ করতে পারেন। প্রথমত, আপনাকে আপনার অঙ্কনযোগ্য সংস্থান ডিরেক্টরিতে একটি এক্সএমএল ফাইল তৈরি করতে হবে। একটি ripple_effect.xML ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যুক্ত করুন। মাঝামাঝি / অঙ্কনযোগ্য / ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

এবং উপরের অঙ্কনযোগ্য রিসোর্স ফাইলের বোতামের ব্যাকগ্রাউন্ড সেট করুন

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_effect"
    android:padding="16dp"
    android:text="New Button" />

1
আমার জন্য, রিপল প্রভাবটি উপস্থিত হয়নি। এটি বোতামটির জন্য কেবল একটি রঙের স্যুইচ ছিল: / আমার অ্যান্ড্রয়েড সংস্করণটি 5.1.1 তাই এটি কাজ করা উচিত। তুমি কি সাহায্য করতে পারবে? আমি আপনার পদক্ষেপগুলি অনুসরণ করেছি
viরভিজি

অ্যান্ড্রয়েড: রঙ মাস্ট অ্যান্ড্রয়েডের থেকে আলাদা হওয়া উচিত: রঙ, বা আপনি
রিপল

2
আপনি যদি একটি পটভূমি চান তবে আপনি কেবল রিপলটিতে অন্য আইটেম যুক্ত করুন, যেমন: <আইটেম অ্যান্ড্রয়েড: অঙ্কনযোগ্য = "? অ্যাট্র / রঙপ্রাইমারি" />
টাইলার

36

জিগার প্যাটেলের সমাধান ছাড়াও , বাটনের স্বচ্ছ পটভূমি এড়াতে এটি ripple.xML এ যুক্ত করুন ।

<item
    android:id="@android:id/background"
    android:drawable="@color/your-color" />

সম্পূর্ণ এক্সএমএল :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/your-color"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/your-color" />
        </shape>
    </item>
    <item
        android:id="@android:id/background"
        android:drawable="@color/your-color" />
</ripple>

এই রিপল.এক্সএমএলটিকে আপনার বোতামের পটভূমি হিসাবে ব্যবহার করুন :

android:background="@drawable/ripple"

2
আমাদের এটি ব্যবহার করার দরকার নেই <item android:id="@android:id/mask"> [...]। যদি না আপনি ডিম্বাকৃতি মাস্ক চান না। আপনার উত্তরের জন্য ধন্যবাদ!
ফিলিপ ব্রিটো

এই <আইটেম অ্যান্ড্রয়েড: আইডি = "@ অ্যান্ড্রয়েড: আইডি / মাস্ক"> যাই হোক না কেন, আমি সেই বৈশিষ্ট্যটি ছাড়া এবং ছাড়াও 2 টি একই উপাদান তৈরি করেছি এবং তারা ঠিক একই দেখাচ্ছে
সার্থেরিস স্টর্মহ্যামার

অফিসিয়াল ডক্স থেকে @ সার্থেরিসটোরমহ্যামার: একটি মুখোশ স্তর সেট করা থাকলে, অবশিষ্ট শিশু স্তরগুলির সংমিশ্রণের উপর আঁকানোর আগে রিপল প্রভাবটি সেই স্তরের বিরুদ্ধে মুখোশ দেওয়া হবে। যদি কোনও মুখোশ স্তর সেট না করা থাকে তবে শিশু স্তরগুলির সংমিশ্রণের বিপরীতে রিপল প্রভাবটি মুখোশযুক্ত। এই লিঙ্কটি, বিকাশকারী.অ্যান্ড্রয়েড.
com

@ সুদীশআর যা এটি আরও বিভ্রান্তিকর করে
তুলেছে

এই সরকারী ডকুমেন্টেশন থেকে @ সার্থেরিসটোরমহ্যামার এটি আমার কাছে মনে হয় বেশ পরিষ্কার। রিপল প্রভাব শিশু / মুখোশযুক্ত স্তরগুলির উপরে আঁকবে। দয়া করে দস্তাবেজটি আবার পড়ুন, আপনি পয়েন্টটি পাবেন।
সুদিশ আর

33

বোতামটি যদি অঙ্কনযোগ্য থেকে পটভূমি থাকে, আমরা অগ্রভাগ প্যারামিটারে রিপল প্রভাব যুক্ত করতে পারি .. নীচে কোডটি পরীক্ষা করে আমার বোতামটির জন্য আলাদা ব্যাকগ্রাউন্ড সহ কাজ করছে

    <Button
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:gravity="center"
    android:layout_centerHorizontal="true"                                                             
    android:background="@drawable/shape_login_button"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:text="@string/action_button_login"
     />

রিপল প্রভাবের জন্য নীচে প্যারামিটার যুক্ত করুন

   android:foreground="?attr/selectableItemBackgroundBorderless"
   android:clickable="true"

রেফারেন্সের জন্য নীচের লিঙ্কটি দেখুন https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/


2
অ্যাট্রিবিউট অ্যান্ড্রয়েড: এপিআই লেভেলের উপর 23 বছরের চেয়ে কম
আলী খাকি

1
এই পদ্ধতির একটি অপূর্ণতা হ'ল, যদিও আমার বোতামের পটভূমিটি ডিম্বাকৃতিটি ছিল ডিম্বাকৃতির লম্বালম্বটি আয়তক্ষেত্রাকার প্রান্ত পর্যন্ত প্রচারিত হয়েছিল।
আইক্যান্টসি

14

অ্যাপকম্প্যাট ভি 7 +

আপনি যদি ?android:আপনার অ্যাপের সাথে উপসর্গ না করেন তবে ক্রাশ হবে।

আপনার ব্যবহার করা উচিত "?android:attr/selectableItemBackground""?android:attr/selectableItemBackgroundBorderless"আপনার পছন্দ বা আপনার পছন্দ উপর ভিত্তি করে । আমি পছন্দ Borderless

আপনি এটি ভিতরে রাখতে পারেন android:background বা android:foregroundবিদ্যমান বৈশিষ্ট্যগুলি রাখতে পারেন।

এটির কাজ করার জন্য উপাদানটি অবশ্যই থাকতে হবে android:clickable="true"এবং android:focusable="true"যাতে রয়েছে তবে অনেকগুলি উপাদান যেমন বোতামগুলির মধ্যে এটি রয়েছেtrue ডিফল্টরূপে থাকে।

<Button
    ...
    android:background="@color/white"
    android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>
<TextView
    ...
    android:background="?android:attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:focusable="true"
/>

প্রোগ্রামগতভাবে (জাভা)

TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myView.setBackgroundResource(value.resourceId);
myView.setFocusable(true); // If needed for view type

প্রোগ্রামগতভাবে (কোটলিন)

val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
myView.setBackgroundResource(value.resourceId)
myView.setFocusable(true) // If needed for view type

পুনরায় ব্যবহারযোগ্য কোটলিন এক্সটেনশন ফাংশন

myView.ripple()

fun View.ripple(): View {
    val value = TypedValue()
    context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
    setBackgroundResource(value.resourceId)
    isFocusable = true // Required for some view types
    return this
}

7

অগ্রভাগ এবং ক্লিকযোগ্যযোগ্য বৈশিষ্ট্যগুলি যুক্ত করা আমার পক্ষে কাজ করেছিল।

<Button
    ... 
    android:background="@color/your_color"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true" />

6

সুধীশ ছাড়াও আর

কোণার সহ বোতামের আয়তক্ষেত্র আকারের সাথে একটি Android বাটনে রিপল ইফেক্ট / অ্যানিমেশন যুক্ত করুন

এক্সএমএল ফাইল রেস / ড্রইয়েবল / আপনার_ফाइल_নাম.এক্সএমএল তৈরি করুন

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorWhite"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="50dp" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorAccent"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="50dp" />
        </shape>
    </item>
</ripple>

4

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

আপডেট: অ্যাপকম্প্যাটটির 23.0.0 সংস্করণে প্রকাশিত হিসাবে, একটি নতুন উইজেট রয়েছে App

এটি আপনাকে সরাসরি আপনার বোতামে এটি প্রয়োগ করতে দেয়

<Button
 ...
style="@style/Widget.AppCompat.Button.Colored" />

আপনি আপনার পটভূমির জন্য আপনার ভি 21 ডিরেক্টরিতে একটি অঙ্কনযোগ্য ব্যবহার করতে পারেন যেমন:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>

এটি আপনার ব্যাকগ্রাউন্ডের রঙটি "অ্যাট্রি / কালারপ্রাইমারি" এবং ডিফল্ট ব্যবহার করে ডিফল্ট রিপল অ্যানিমেশনটি নিশ্চিত করবে? অ্যাটর / রঙকন্ট্রোলহাইটলাইট (যা আপনি চাইলে আপনার থিমে সেটও করতে পারেন)।

দ্রষ্টব্য: আপনাকে ভি 21 এর চেয়ে কম কাস্টম সিলেক্টর তৈরি করতে হবে:

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

আমি minSDK lvl 21 ব্যবহার করছি
রকোড

কোনও ভি 21 অঙ্কনযোগ্য ফোল্ডার নেই, কেবলমাত্র একটি ফোল্ডার যা নিজেই ফোল্ডারটি
ভি

হ্যাঁ, আমি এই
এপিআইটিও

আসলে, আমি আমার অ্যাপ্লিকেশনটি আমার ফোনে ডিবাগ মোড দিয়ে পরীক্ষা করছি এবং আমার ওএস হ'ল সায়ানোজেনমড 13 (অ্যান্ড্রয়েড 6,
মার্শমেলো

4

এটা চেষ্টা কর

<Button
            android:id="@+id/btn_location"
            android:layout_width="121dp"
            android:layout_height="38dp"
            android:layout_gravity="center"
            android:layout_marginBottom="24dp"
            android:layout_marginTop="24dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
            android:background="@drawable/btn_corner"
            android:gravity="center_vertical|center_horizontal"
            android:paddingLeft="13dp"
            android:paddingRight="13dp"
            android:text="Save"
            android:textColor="@color/color_white" />

4

এখানে একটি সরল দৃষ্টিভঙ্গি বর্ণিত থিম সেট করা আছে

some_view.xml

<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="?attr/selectableItemBackgroundBorderless"
   android:focusable="true"
   android:src="@drawable/up_arrow"
   android:theme="@style/SomeButtonTheme"/>

some_style.xml

<style name="SomeButtonTheme" >
   <item name="colorControlHighlight">@color/someColor</item>
</style>

3

শুধু ব্যবহার করুন:

android:backgroundTint="#f816a463"

পরিবর্তে:

android:background="#f816a463"

ভুলবেন না আপনার পরিবর্তন করতে Buttonকরতেandroid.support.v7.widget.AppCompatButton


1
খারাপটি হ'ল 100% অনুভূমিক স্ক্রিনটি পূরণ করার জন্য আপনার যদি একটি বোতামের দরকার হয় তবে আপনি তা করবেন না।
ফিলিপ ব্রিটো

1

ব্যবহারের একটি বিকল্প সমাধান <ripple>ট্যাগটি (যা আমি ব্যক্তিগতভাবে না করা পছন্দ করি, কারণ রঙগুলি "ডিফল্ট" নয়), নিম্নলিখিতটি হল:

বোতামের পটভূমির জন্য একটি অঙ্কনযোগ্য তৈরি করুন এবং এর মধ্যে অন্তর্ভুক্ত <item android:drawable="?attr/selectableItemBackground">করুন<layer-list>

তারপরে (এবং আমি মনে করি এটি গুরুত্বপূর্ণ অংশ) প্রোগ্রামটিমেটিকভাবে backgroundResource(R.drawable.custom_button)আপনার বোতামের উদাহরণে সেট করুন।

ভ্রমণ / অসম্পূর্ণ অংশ

Button btn_temp = view.findViewById(R.id.btn_temp);
btn_temp.setBackgroundResource(R.drawable.custom_button);

বিন্যাস

<Button
    android:id="@+id/btn_temp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button"
    android:text="Test" />

custom_button.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="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item android:drawable="?attr/selectableItemBackground" />
</layer-list>

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