画像の代わりにテキストを使用したFloatingActionButton


85

私はAndroidサポートライブラリからFloatingActionButtonを変更する方法を理解しようとしています。画像の代わりにテキストで使用できますか?

このようなもの:

ここに画像の説明を入力してください

ImageButtonを拡張しているので、そうではないと思います。私は正しいですか?

これは、マテリアルデザイン全般に関して正しいですか?

回答:


22

API 28を使用すると、以下を使用してFabにテキストを簡単に追加できます。

ログイン:https://material.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.material.floatingactionbutton.ExtendedFloatingActionButton」を見つけることができませんでした
Nirel

2
github.com/material-components/material-components-androidあなたは、最新の使用する必要があります implementation 'com.google.android.material:material:1.1.0-alpha06'
仕事M

1
丸い角の長方形になりますが、丸いボタンにする方法は?
dx39 0619年

すべてのコーナー半径を作成30dp
ジョブ

100

ありがとうございます。

これが私がこの質問のために見つけた簡単な回避策です。Android 4以降では正しく機能します。Android5以降では、FloatingActionButton上にTextViewを描画するための特定のパラメーターandroid:elevationが追加されています。

<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>

2
標高プロパティによる影を示すTextView–
Lavekush Agrawal 2017

android:layout_margin="20dp"影の問題を解決するには、FloatingActionButtonに属性を追加してみてください。それに対するより良い解決策を待っています
ロングレンジャー

パフォーマンスを向上さandroid:includeFontPadding="false"せるためにTextViewタグに追加

android:elevation = "16dp"は、API21以降とのみ互換性があります。

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;
}

2
完璧ですが、テキストサイズは変わりません。
ankur_009 2017

1
@ Ankur_009その変化。フロートの場合と同じように、値をかなり大きくしてみてください。
pratz9999 2017

甘い、ほとんど変更を加えずに、アイコンフォントをドローアブルに変換できるようにしました
SolidSnake 2017年

1
@ Ankur_009:ボタンのスペースが限られているため、テキストサイズに変化は見られません。したがって、テキストがすでにボタンのスペース全体を占めている場合、テキストを大きくしても効果はありません。
j3App 2018年

2
@ pratz9999私はそれを1000に設定しましたが、それでも変更されていません
Shivam Pokhriyal 2018

30

FABは通常CoordinatorLayoutsで使用されます。あなたはこれを使うことができます:

<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


1
エラーの取得android.support.design.widget.FloatingActionButtonをandroid.view.ViewGroupにキャストできません
Ankur_009 2017

1
FloatingActionButtonがCoordinatorLayout内にあることを確認しますか?
lokeshrmitra 2017

1
@ Ankur_009このエラーandroid.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroupは、おそらくTextViewFAB内に配置したことが原因です。タグが閉じている場所をOPに確認してください。
dumbfingers 2018年

TextViewの標高もFABの標高よりも大きくする必要があります。そうでない場合、FABの背後に隠れます
Ali Nem 2018年

素晴らしい答え!
SJD

17

FloatingActionButtonサポートライブラリからテキストを設定することはできませんが、Android Studioから直接テキスト画像を作成し、File -> New -> Image Assetそれをボタンに使用することができます。

マテリアルデザインの観点から; 彼らはFloatingActionButton、でテキストを使用することについて言及していませんでした、そしてあなたが実際にテキストのための多くのスペースを持っていないので、私はそれをする理由がわかりません。


5
「OK」、「YES」、「NO」、「GO」などのテキストは、FABの内部に完全に収まります..........
MarsAndBack 2017年

ファブの中の単語の場合は、拡張タブを参照してください。material.io/design/components/...
マイク・マーグリーズ

8

FABでテキストが必要でしたが、代わりに、円形の描画可能な背景を持つTextViewを使用しました。

  <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"/>

これがdrawable(circle_backgroung.xml)です:

<?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>

ここに画像の説明を入力してください


2
このようなソリューションには波紋アニメーションはありません
Vlad

2

@NandanKumarSinghの回答https://stackoverflow.com/a/39965170/5279156は機能しますが、コード内のfabいくつかの変更を加えました(クラスメソッドで上書きされるため、xmlではありません)

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)
}

0

21未満のAndroidAPIでサポートするための同志の回答へのごくわずかな変更app:elevation="0dp"は、FloatingActionButton

これは他の人を助けるかもしれません!


0

CardViewを使用して同じ結果を達成しました

  <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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.