web-dev-qa-db-ja.com

透明な背景の背後にあるFloatingActionButtonの画像を中央に配置する方法は？

FloatingActionButtonがあり、中央にアイコンを配置して透明にしたいのですが。

スタイルを追加しました：

<style name="ButtonTransparent">
    <item name="colorAccent">@Android:color/transparent</item>
</style>

これまでのところ機能します。 FABは透明になりました。次に、FABを追加しました。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    tools:context=".activities.CameraActivity">
    <TextureView
        Android:id="@+id/texture"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true"/>

    <LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_centerHorizontal="true">

        <ImageView
            Android:id="@+id/iv_last_image"
            Android:layout_width="60dp"
            Android:layout_height="60dp"
            Android:layout_gravity="center_horizontal"
            Android:layout_margin="10dp" />

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/btn_takepicture"
            Android:layout_width="80dp"
            Android:layout_height="80dp"
            Android:layout_gravity="center_horizontal"
            Android:layout_margin="20dp"
            Android:theme="@style/ButtonTransparent"
            Android:src="@drawable/selector_vector_camera_light" />

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/btn_back"
            Android:layout_width="60dp"
            Android:layout_height="60dp"
            Android:layout_gravity="center_horizontal"
            Android:layout_margin="20dp"
            Android:theme="@style/ButtonTransparent"
            Android:src="@drawable/selector_vector_go_back" />
    </LinearLayout>
</RelativeLayout>

下のスクリーンショットでわかるように、うまく調整されていません。 どうすれば修正できますか？screenshot

androidandroid-layouttransparencyfloating-action-button
17
Murat

画像は適切に配置されていますが、背景の影はありません。ボタンを押すと、さらに悪くなります。

transparent floating action button over oragne background

この効果を最小化するには、elevationとpressedTranslationZを変更します

      app:elevation="1dp"
      app:borderWidth="0dp"
      app:pressedTranslationZ="1dp"

そしてあなたは得るでしょう：

effect after changing elevation and pressedTranslationZ

5
RadekJ

この属性を使用してください：fab:fabCustomSize="100dp"これをファブの高さと幅に等しくします。これは私を助けました。これは私のコードでした。

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="60dp"
    Android:layout_height="60dp"
    app:fabCustomSize="60dp"
    Android:backgroundTint="@color/colorPrimary"
    Android:src="@drawable/ic_insert_drive_file_24dp" />

別の方法は、srcの代わりにAndroid:foreground属性を使用してから、Android:foreground_gravityを中央に設定することです。

59
Aayush Singla

.XmlをFab内に書き込むだけです

Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
app:fabCustomSize="your-size"
app:maxImageSize="your-size"

うまくいきます!!

3
Noman khanbhai

このプロパティを追加すると、画像は自動的に中央に配置されます

app:fabSize="normal"
2
arpit1714

こんにちは、これは私にとってはうまくいきます：

Android:layout_width="30dp"
Android:layout_height="30dp"
app:fabCustomSize="30dp"

この行を追加app:fabCustomSize="@dimen/my_dimension"およびこれらに同じ値を設定します。

Android:layout_width="@dimen/my_dimension"

Android:layout_height="@dimen/my_dimension"

1
Nelson H Muñoz Burbano

バックイメージ/ドローアブルの形状が正方形であり、このレイアウト構成が機能することを確認してください enter image description here

<Android.support.design.widget.FloatingActionButton
        Android:id="@+id/btn_back"
        Android:layout_width="60dp"
        Android:layout_height="60dp"
        app:backgroundTint="#0000"
        Android:scaleType="fitXY"
        Android:layout_gravity="center"
        Android:layout_margin="20dp"
        Android:src="@drawable/back_vector" />

あなたが使うなら

 app:backgroundTint="#200f"

ファブの背景のティントカラーは背景のように見えるため、より透明に見えます.. enter image description here

1
erluxman

以下のコードを使用してみてください。このコードは私とうまく機能しています。

<Android.support.design.widget.FloatingActionButton
                Android:id="@+id/floatingMap"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_gravity="end"
                Android:layout_marginRight="@dimen/scale_15dp"
                Android:layout_marginTop="@dimen/scale_130dp"
                Android:elevation="@dimen/scale_5dp"
                Android:src="@drawable/ic_directions"
                app:backgroundTint="@Android:color/transparent" />
0
Akash

CoordinatorLayoutはFrameLayoutのようなものなので、以下を試してください。

app:layout_anchorGravity="bottom|center"

これがお役に立てば幸いです。

0
Chandrahasan

レイアウト2ファイル：content_main.xmlファイルなど：

<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/content_main"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_gravity="center"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.testbd.com.myapplication.MainActivity"
    tools:showIn="@layout/activity_main">

</RelativeLayout>

そして

activity_main.xmlファイル

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@color/colorAccent"
    Android:fitsSystemWindows="true"
    tools:context="com.testbd.com.myapplication.MainActivity">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </Android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        app:srcCompat="@Android:drawable/ic_dialog_email"/>

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

そして最後にres/values/colors.xmlファイル

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#5a1f00</color>
</resources>

がんばって！

0
omor