চিত্রের পরিবর্তে পাঠ্য সহ ভাসমান অ্যাকশনবটন


86

আমি কীভাবে অ্যান্ড্রয়েড সমর্থন লাইব্রেরি থেকে ফ্লোটিংএ্যাকশনবটনকে সংশোধন করা যায় তা জানার চেষ্টা করছি। এটি কি চিত্রের পরিবর্তে পাঠ্য দিয়ে ব্যবহার করা যেতে পারে?

এর মতো কিছু:

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

আমি দেখতে পাচ্ছি এটি ইমেজবাটনকে প্রসারিত করে তাই আমি ভাবি না। আমি কি সঠিক?

সাধারণভাবে মেটেরিয়াল ডিজাইনের ক্ষেত্রে এটি কি সঠিক?

উত্তর:


26

এপিআই 28 এর সাহায্যে আপনি কেবল ফ্যাবগুলিতে এটি ব্যবহার করে পাঠ্য যোগ করতে পারেন:

দেখুন: https://matory.io/develop/android/components/extended-floating-action-button/

 <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:contentDescription="@string/extended_fab_content_desc"
      android:text="@string/extended_fab_label"
      app:icon="@drawable/ic_plus_24px"
      app:layout_anchor="@id/app_bar"
      app:layout_anchorGravity="bottom|right|end"/>

আরে, শেষ পর্যন্ত তারা তা করেছে। সম্ভবত এটি এখন এটি ব্যবহারের সেরা উপায়। ভাগ করে নেওয়ার জন্য ধন্যবাদ.
কমরেড

java.lang.ClassNotFoundException: "com.google.android.matory.floatingactionbutton.ExtendedFloatingActionButton"
নিরেল

4
Github.com/matory-components/matory-comp घटक- android থেকে আপনাকে সর্বশেষ ব্যবহার করতে হবে implementation 'com.google.android.material:material:1.1.0-alpha06'
জব এম

4
এটি একটি গোল কোণার আয়তনে পরিণত হয়, কীভাবে এটি একটি বৃত্তাকার বোতামটি তৈরি করবেন?
dx3906

4
@ জবএম আপনি আমার দশকগুলি সংরক্ষণ করেছেন। ধন্যবাদ
মইখন খান

101

সবাইকে ধন্যবাদ.

এই প্রশ্নটির জন্য আমি খুঁজে পেয়েছি এটি সহজ ound অ্যান্ড্রয়েড 4+ এর জন্য সঠিকভাবে কাজ করে, অ্যান্ড্রয়েড 5+ এর জন্য নির্দিষ্ট প্যারামিটার অ্যান্ড্রয়েড যুক্ত করা হয়: ফ্লোটিংএ্যাকশনবটনের উপরে টেক্সটভিউ আঁকতে উচ্চতা।

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:color/transparent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@android:string/ok"
        android:elevation="16dp"
        android:textColor="@android:color/white"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</FrameLayout>

4
উচ্চতা বৈশিষ্ট্যগুলির কারণে
পাঠ্যদর্শন

android:layout_margin="20dp"ছায়া ইস্যু সমাধান করার জন্য ফ্লোটিং অ্যাকশনবাটনে বৈশিষ্ট্যগুলি যুক্ত করার চেষ্টা করুন । এর আরও ভাল সমাধানের জন্য অপেক্ষা করা হচ্ছে
লং রেঞ্জার

যোগ android:includeFontPadding="false"করার জন্য TextViewভাল কার্য সম্পাদনার জন্য ট্যাগ

অ্যান্ড্রয়েড: উচ্চতা = "16 ডিপি" কেবলমাত্র 21 21 এবং উচ্চতরের সাথেই উপযুক্ত।
রেড এম

57

একটি পাঠ্যকে বিটম্যাপে রূপান্তর করুন এবং এটি ব্যবহার করুন। এটি অত্যন্ত সহজ।

fab.setImageBitmap(textAsBitmap("OK", 40, Color.WHITE));

//method to convert your text to image
public static Bitmap textAsBitmap(String text, float textSize, int textColor) {
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setTextSize(textSize);
    paint.setColor(textColor);
    paint.setTextAlign(Paint.Align.LEFT);
    float baseline = -paint.ascent(); // ascent() is negative
    int width = (int) (paint.measureText(text) + 0.0f); // round
    int height = (int) (baseline + paint.descent() + 0.0f);
    Bitmap image = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(image);
    canvas.drawText(text, 0, baseline, paint);
    return image;
}

4
নিখুঁত তবে পাঠ্যের আকার পরিবর্তন হচ্ছে না।
অঙ্কুর_009

4
@ অঙ্কুর_009 এর পরিবর্তন হচ্ছে। ভাসমান হিসাবে মানটি আকারের আকার হিসাবে বাড়ানোর চেষ্টা করুন।
pratz9999

মিষ্টি, কয়েকটি পরিবর্তন সহ আমি আইকন ফন্টগুলি অঙ্কনযোগ্যগুলিতে রূপান্তরিত করার কাজটি করেছি
সলডস্পকে

4
@ অঙ্কুর_009: বোতামের স্থানটি সীমিত, এ কারণেই আপনি পাঠ্যের আকার পরিবর্তন দেখতে পাবেন না। সুতরাং আপনার পাঠ্যটি যদি ইতিমধ্যে বোতামটিতে পুরো জায়গা নিয়ে থাকে তবে পাঠ্যকে বড় করে তোলা কোনও প্রভাব ফেলবে না।
j3app 11

4
@ pratz9999 এমনকি আমি এটি 1000 এ সেট করেছিলাম কিন্তু এখনও এটি পরিবর্তন হচ্ছে না
শিবাম পোখরিয়াল

30

FABs সাধারণত ব্যবহৃত হয় CoordinatorLayout। আপনি এটি ব্যবহার করতে পারেন:

<android.support.design.widget.CoordinatorLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"               
            app:backgroundTint="@color/colorPrimary" />

      <TextView android:layout_height="wrap_content"
              android:layout_width="wrap_content"
              android:text="OK"
              android:elevation="6dp"
              android:textSize="18dp"
              android:textColor="#fff"
              app:layout_anchor="@id/fab"
              app:layout_anchorGravity="center"/>

</android.support.design.widget.CoordinatorLayout>

এটিই কাজ করে

app:layout_anchor="@id/fab"
app:layout_anchorGravity="center"

ফলাফল:

ফলাফল

আপনি কিছু ব্যবহার করেন, তাহলে layout_behaviorআপনার FAB স্বরূপ, আপনি একটি অনুরূপ করতে থাকবে layout_behaviorজন্যTextView


4
ত্রুটি পাওয়া android.support.design.widget.FloatingActionButton কে
অ্যান্ড্রয়েড.ভিউ.ভিউগ্রুপে

4
আপনি কি নিশ্চিত যে আপনার ফ্লোটিং অ্যাকশনবাটনটি সমন্বয়কারী লেআউটের ভিতরে রয়েছে?
লোকেশমিত্র

4
@ অঙ্কুর_009 এই ত্রুটিটি android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroupসম্ভবত আপনি এফএবির TextViewভিতরে রেখেছেন বলে । ট্যাগটি কোথায় বন্ধ রয়েছে ওপি-র সাথে পরীক্ষা করুন।
ডাম্বফিংগার্স

টেক্সটভিউয়ের উচ্চতা অবশ্যই এফএবির তুলনায় বড় হতে হবে, অন্যথায় এটি এফএবির পিছনে লুকিয়ে থাকবে
আলী নেম

দুর্দান্ত উত্তর !!
এসজেডি

18

আপনি FloatingActionButtonসমর্থন লাইব্রেরি থেকে পাঠ্য সেট করতে পারবেন না , তবে আপনি যা করতে পারেন তা হ'ল অ্যান্ড্রয়েড স্টুডিও থেকে একটি পাঠ্য চিত্র তৈরি করুন: File -> New -> Image Assetএবং তারপরে এটি আপনার বোতামের জন্য ব্যবহার করুন।

মেটেরিয়াল ডিজাইনের শর্তে ; তারা এর সাথে পাঠ্য ব্যবহারের কথা উল্লেখ করেনি FloatingActionButtonএবং আমি এটি করার কোনও কারণ দেখতে পাচ্ছি না কারণ আপনার কাছে কোনও পাঠ্যের পক্ষে খুব বেশি জায়গা নেই।


4
"ঠিক আছে", "হ্যাঁ", "না", "যান" এর মতো
পাঠ্যগুলি এফএবি'র মধ্যে

: Fabs শব্দের জন্য, এক্সটেন্ডেড ট্যাব দেখতে material.io/design/components/...
মাইক Margulies

8

আমার একটি এফএবিতে পাঠ্য প্রয়োজন ছিল তবে পরিবর্তে আমি কেবল একটি বৃত্তাকার অঙ্কনযোগ্য পটভূমি সহ একটি টেক্সটভিউয়ের সাথে গিয়েছিলাম:

  <TextView
        android:layout_margin="10dp"
        android:layout_gravity="right"
        android:gravity="center"
        android:background="@drawable/circle_background"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:fontFamily="sans-serif"
        android:text="AuthId"
        android:textSize="15dp"
        android:elevation="10dp"/>

এখানে অঙ্কনযোগ্য (চেনাশোনা_ব্যাকগ্রুং.এক্সএমএল):

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

<solid
    android:color="#666666"/>

<size
    android:width="60dp"
    android:height="60dp"/>
</shape>

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


4
এই জাতীয় সমাধানের সাথে কোনও রিপল অ্যানিমেশন নেই
ভ্লাদ ২

2

@ নন্দনকুমারসিংহের উত্তর https://stackoverflow.com/a/39965170/5279156 কাজ করে তবে আমি কোডে ফ্যাব দিয়ে কিছু পরিবর্তন করেছি (এক্সএমএল নয় কারণ তারা ক্লাস পদ্ধতিতে ওভাররাইট করা হবে)

fab.setTextBitmap("ANDROID", 100f, Color.WHITE)
fab.scaleType = ImageView.ScaleType.CENTER
fab.adjustViewBounds = false

একই কার্যকারিতা সহ শ্রেণীর setTextBitmapজন্য যেখানে একটি এক্সটেনশন ImageViewতবে এটি মাল্টিলিন পাঠ্যকে সমর্থন করে

fun ImageView.setTextBitmap(text: String, textSize: Float, textColor: Int) {
    val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    paint.textSize = textSize
    paint.color = textColor
    paint.textAlign = Paint.Align.LEFT
    val lines = text.split("\n")
    var maxWidth = 0
    for (line in lines) {
        val width = paint.measureText(line).toInt()
        if (width > maxWidth) {
            maxWidth = width
        }
    }
    val height = paint.descent() - paint.ascent()
    val bitmap = Bitmap.createBitmap(maxWidth, height.toInt() * lines.size, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    var y = - paint.ascent()
    for (line in lines) {
        canvas.drawText(line, 0f, y, paint)
        y += height
    }
    setImageBitmap(bitmap)
}

1

আমি একই ফলাফল অর্জন করতে একটি কার্ডভিউ ব্যবহার করেছি

  <androidx.cardview.widget.CardView
            android:layout_width="@dimen/dp80"
            android:layout_height="@dimen/dp80"
            android:layout_gravity="center_horizontal"
            app:cardElevation="@dimen/dp8"
            android:layout_marginBottom="@dimen/dp16"
            android:layout_marginTop="@dimen/dp8"
            app:cardBackgroundColor="@color/colorWhite100"
            app:cardCornerRadius="@dimen/dp40">

            <TextView
                style="@style/TextAppearance.MaterialComponents.Headline4"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/shape_go_bg"
                android:text="GO"
                android:gravity="center"
                android:textColor="@color/colorWhite100" />
        </androidx.cardview.widget.CardView>

0

কমরেডের উত্তরটি 21 এর নীচে অ্যান্ড্রয়েড এপিআই এর পক্ষে সমর্থন করার জন্য একটি খুব সামান্য পরিবর্তন মাত্র যুক্ত app:elevation="0dp"করুনFloatingActionButton

এটি অন্যকে সাহায্য করতে পারে!

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