如何在底部导航栏中实现圆形模糊凸起按钮?

时间:2015-01-02 17:52:24

标签: android android-layout

我正在尝试实现位于应用程序底部的自定义导航栏。这个导航栏包含我不太了解的技巧。

以下是导航栏的所需形状。

Desired Navigation Bar

我面对的这个酒吧的技巧是:

  1. 对来自服务器并经常更改的动态ImageView的模糊。
  2. 包含相机图像的中间圆圈以及该圆圈的透明描边颜色。
  3. 我设法通过使用AnndBlur库解决了第一个问题,该库提供了随背景自动模糊的布局。

    不幸的是,我在处理中间相机按钮和透明笔触颜色方面遇到了问题。

    以下是我正在处理的最新观点

    Latest outcome

    以下是底部导航栏布局的代码

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/landing_bottom_toolbar_height"
        android:layout_alignParentBottom="true">
    
        <ImageView
            android:id="@+id/btn_take_photo"
            android:layout_width="@dimen/landing_bottom_toolbar_height"
            android:layout_height="@dimen/landing_bottom_toolbar_height"
            android:scaleType="centerInside"
            android:layout_centerInParent="true"
            android:src="@drawable/ic_camera" />
    
        <com.myapp.view.blur.BlurLinearLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/landing_bottom_inner_toolbar_height"
            android:layout_alignParentBottom="true"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            app:radius="10dp"
            android:weightSum="5">
    
            <ImageButton
                android:id="@+id/btn_my_profile"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:src="@drawable/ic_profile" />
    
            <ImageButton
                android:id="@+id/btn_schedule"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:src="@drawable/ic_calendar" />
    
            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />
    
            <ImageButton
                android:id="@+id/btn_settings"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:src="@drawable/ic_settings" />
    
            <ImageButton
                android:id="@+id/btn_contacts"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:src="@drawable/ic_contacts" />
        </com.myapp.view.blur.BlurLinearLayout>
    
    </RelativeLayout>
    

    非常感谢任何帮助或指导。

    更新:感谢Machinarius评论使相机图标水平高于其他按钮,现在是最新的工具栏形状:

    Updated Toolbar

    但仍需要弄清楚具有透明笔触颜色的圆形

0 个答案:

没有答案