web-dev-qa-db-ja.com

ボタンを埋めるようにフローティングアクションボタンの画像を設定するにはどうすればよいですか？

通常、アイコンはフローティングアクションボタンに設定されていますが、円形の画像を作成できるように画像を設定する必要があります。

プロジェクトに追加しましたが（Android Studio-> New-> Image Assetを使用）、画像がボタン全体に表示されませんでした：

enter image description here

私のxml：

<com.github.clans.fab.FloatingActionMenu
    Android:id="@+id/run_menu"
    Android:layout_alignParentBottom="true"
    Android:layout_alignParentRight="true"
    Android:paddingBottom="@dimen/activity_horizontal_margin"
    Android:paddingRight="@dimen/activity_horizontal_margin"
    Android:visibility="visible"
    fab:fab_colorNormal="#DA4336"
    fab:fab_colorPressed="#E75043"
    fab:fab_colorRipple="#99FFFFFF"
    fab:fab_shadowColor="#66000000"
    fab:fab_showShadow="true"
    fab:layout_constraintBottom_toBottomOf="parent"
    fab:layout_constraintHorizontal_bias="0.0"
    fab:layout_constraintLeft_toLeftOf="parent"
    fab:layout_constraintRight_toRightOf="parent"
    fab:layout_constraintTop_toTopOf="parent"
    fab:layout_constraintVertical_bias="0.0"
    fab:menu_backgroundColor="#ccffffff"
    fab:menu_fab_label="Choose an action"
    fab:menu_labels_colorNormal="#333333"
    fab:menu_labels_colorPressed="#444444"
    fab:menu_labels_colorRipple="#66FFFFFF"
    fab:menu_labels_ellipsize="end"
    fab:menu_labels_maxLines="-1"
    fab:menu_labels_position="left"
    fab:menu_labels_showShadow="true"
    fab:menu_labels_singleLine="true"
    fab:menu_openDirection="up"
    Android:layout_height="0dp"
    Android:layout_width="0dp">

    <com.github.clans.fab.FloatingActionButton
        Android:id="@+id/shop"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@mipmap/store"
        fab:fab_label="Store" />

</com.github.clans.fab.FloatingActionMenu>

それを修正する方法についてのアイデアはありますか？どのように適切に作成する必要がありますか？

androidmaterial-designandroid-buttonfloating-action-buttonmaterial-components-android
10
Ago

解決策はapp:maxImageSize = "56dp"プロパティをFABサイズに設定します。

  1. 画像またはベクターアセットを用意します。できれば完全な円の形で、キャンバスに完全にフィットします（空の余白はありません）。
  2. 実際のことを知る フローティングアクションバー（FAB）のサイズ -デフォルト（56 x 56dp）またはミニ（40 x 40dp）。
  3. したがって、XMLコードは次のようになります。
<com.google.Android.material.floatingactionbutton.FloatingActionButton
   Android:src="@drawable/perfect_fit_circle_image"
   app:maxImageSize="56dp"
   Android:layout_width="wrap_content"
   Android:layout_height="wrap_content" />
11
aLL

FABに次のプロパティを設定します

Android:scaleType="center"

それが機能しない場合は、プロパティを使用してみてください

app:fabSize="mini"

3
Manohar Reddy

以下のコードを使用してください

Android:scaleType="fitXY"
2
Anil

丸みを帯びたpng画像を設定する場合、これを回避するには、floatingActionButtonクラスを拡張してから、onMeasureメソッドをオーバーライドし、パディングを0に設定し、scaleTypeをcenterCropに設定します。

public class FloatingImageButton extends FloatingActionButton {


public FloatingImageButton(Context context) {
    super(context);
}

public FloatingImageButton(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setPadding(0, 0, 0, 0);
    setScaleType(ScaleType.CENTER_CROP);


}
}

xmlサンプル

    <com.tabz.app.FloatingImageButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/camera_circle"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="16dp"/>

出力

enter image description here

2
TABZ

XMLでフロートボタンのスケールを設定します

Android:scaleX="2.0"

または、プログラムで実行できます。

someButton.setScaleX(2.0f);
someButton.setScaleY(2.0f);
1
Ivan Vovk

マテリアルコンポーネントライブラリ では、 doc に従って、属性app:maxImageSizeを使用できます。

カスタムディメンションを使用できますが、これらの定義済みディメンションを参照することもできます。

<dimen name="design_fab_size_mini">40dp</dimen>
<dimen name="design_fab_size_normal">56dp</dimen>

使用するだけ：

 <com.google.Android.material.floatingactionbutton.FloatingActionButton
        Android:id="@+id/fab"
        app:srcCompat="@drawable/ic_add_24px"
        app:maxImageSize="@dimen/design_fab_size_normal"
        ../>

ここでは、標準ディメンション（<dimen name="design_fab_image_size">24dp</dimen>）とdesign_fab_size_normalの結果を示しています。

enter image description hereenter image description here

0
Gabriele Mariotti