【问题标题】:Circular button with shadow like 5.0 FAB带有阴影的圆形按钮,如 5.0 FAB
【发布时间】:2015-01-09 13:27:22
【问题描述】:

我想要一个带有阴影的圆形按钮。影子必须像FAB。目前我正在使用 png 来实现按钮。

但是当我使用这张图片时,我无法给出正确的按下状态变化。 有没有办法通过使用 xml 来实现这一点

【问题讨论】:

  • 你做到了吗?我有同样的问题。如果您这样做了,请更新您的解决方案。谢谢你!
  • 好吧,我最终使用了 2 个不同的图像,有阴影和没有阴影。虽然不是完美的解决方案。
  • 我找到了解决方案,我将其发布在答案中。你能试试这个吗?我觉得不错

标签: android android-xml android-button material-design


【解决方案1】:

你可以试试

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

    <!-- Drop Shadow Stack -->
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="1dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />

            <solid android:color="#00CCCCCC" />

            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="1dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />

            <solid android:color="#10CCCCCC" />

            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="1dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />

            <solid android:color="#20CCCCCC" />

            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="1dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />

            <solid android:color="#30CCCCCC" />

            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <padding
                android:bottom="1dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />

            <solid android:color="#50CCCCCC" />

            <corners android:radius="3dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />

            <corners android:radius="3dp" />
        </shape>
    </item>

</layer-list>

 <Button
        android:id="@+id/btn"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:background="@drawable/shadow_circle"
        android:text="0"
        android:textColor="#fff" />

【讨论】:

    【解决方案2】:

    drawable文件夹下创建circle.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="oval">
        <solid android:color="#03ae3c"/>
    </shape> 
    

    将此设置为布局或视图的背景。然后将elevation 属性分配给您的视图。这会让你看到它的影子。

    <LinearLayout
                android:layout_width="250dp"
                android:layout_height="250dp"
                android:background="@drawable/circle"
                android:elevation="14dp"
                android:orientation="vertical"/>
    

    【讨论】:

      【解决方案3】:

      首先,您在布局文件夹中创建一个文件名round_shape.xml,内容为

      <selector xmlns:android="http://schemas.android.com/apk/res/android">
          <item>
              <shape android:shape="oval">
                  <size android:width="100dp"
                      android:height="100dp"/>
                  <solid android:color="#59d5fe"/>
              </shape>
          </item>
      </selector>
      

      然后在你的activity_main.xml(你想要放置按钮的地方)添加代码

      <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerHorizontal="true"
          android:layout_centerVertical="true"
          android:background="@layout/round_shape"
          android:textColor="#f8fdf9" />
      

      【讨论】:

        【解决方案4】:

        以下代码将有助于在使用以下代码的 android 中设计不同的大小和形状或彩色控件

        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >       <corners android:radius="14dp"/>
                <gradient android:angle="45"
                    android:centerX="35%"
                    android:centerColor="#7995A8"
                    android:startColor="#E8E8E8"
                    android:endColor="#000000"
                    android:type="linear"/>
                <padding android:left="0dp"
                        android:top="0dp"
                        android:right="0dp"
                        android:bottom="0dp"/>
                <size android:width="270dp"
                android:height="60dp"
                />
                <stroke
                android:width="3dp"
                android:color="#878787"
                />
        

        【讨论】:

          【解决方案5】:

          修复视图布局中的大小,例如:如果您将其用于线性布局背景设置,则说 height = 100sp 和 widht = 100sp

          <?xml version="1.0" encoding="utf-8"?>
          <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
          
              <!-- Drop Shadow Stack -->
              <item>
                  <shape android:shape="oval">
                      <padding
                          android:bottom="1dp"
                          android:left="1dp"
                          android:right="1dp"
                          android:top="1dp" />
          
                      <solid android:color="#00CCCCCC" />
          
                      <corners android:radius="3dp" />
                  </shape>
              </item>
              <item>
                  <shape android:shape="oval">
                      <padding
                          android:bottom="1dp"
                          android:left="1dp"
                          android:right="1dp"
                          android:top="1dp" />
          
                      <solid android:color="#10CCCCCC" />
          
                      <corners android:radius="3dp" />
                  </shape>
              </item>
              <item>
                  <shape android:shape="oval">
                      <padding
                          android:bottom="1dp"
                          android:left="1dp"
                          android:right="1dp"
                          android:top="1dp" />
          
                      <solid android:color="#20CCCCCC" />
          
                      <corners android:radius="3dp" />
                  </shape>
              </item>
              <item>
                  <shape android:shape="oval">
                      <padding
                          android:bottom="1dp"
                          android:left="1dp"
                          android:right="1dp"
                          android:top="1dp" />
          
                      <solid android:color="#30CCCCCC" />
          
                      <corners android:radius="3dp" />
                  </shape>
              </item>
              <item>
                  <shape android:shape="oval">
                      <padding
                          android:bottom="1dp"
                          android:left="1dp"
                          android:right="1dp"
                          android:top="1dp" />
          
                      <solid android:color="#50CCCCCC" />
          
                      <corners android:radius="3dp" />
                  </shape>
              </item>
          
              <!-- Background -->
              <item>
                  <shape android:shape="oval">
                      <solid android:color="@android:color/white" />
          
                      <corners android:radius="3dp" />
                  </shape>
              </item>
          
          </layer-list>

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2016-08-22
            • 2014-08-20
            • 2012-03-26
            • 1970-01-01
            • 2017-09-13
            • 1970-01-01
            • 2010-11-16
            相关资源
            最近更新 更多