Translucent Theme in Android

文章转自 https://gauntface.com/blog/2014/01/10/translucent-theme-in-android/


Non Translucent and Translucent Android ActionBar

One of the new features in KitKat is the Translucent UI, where you have the ability to sit behind status and navigation bars, meaning you can have the subtle change shown above (left side is normal, right side is the translucent version).

NOTE: This application is just me playing around with some stuff, so please look past the awful UI

The How

To get going you need to set the following properties in your theme:

values-19 > styles.xml  
 <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>

Now the interesting thing is what you end up with when you use this. Everything is behind the ActionBar. Hmmmmm.

Initial Translucent Setting of Android App - Broken

So let's step through how we fix this.

Fit System Window

The first thing you'll find on stackoverflow for this is to set the fitsSystemWindows attribute on your layout. Now using the Heirachy Viewer in monitor I ended up making the following changes in my layout.

Altering the activity_main.xml

When I created this project, I was using Android Studio's rather helpful templates to create an application usingAppCompat and a NavigationDrawer.

activitymain.xml_ originally looked like:

    
<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/drawer_layout" android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="co.uk.gauntface.android.webviewbrowser.MainActivity">

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <fragment
            android:id="@+id/navigation_drawer"
            android:layout_width="@dimen/navigation_drawer_width" android:layout_height="match_parent"
            android:layout_gravity="start"
            android:name="co.uk.gauntface.android.webviewbrowser.NavigationDrawerFragment" />

    </android.support.v4.widget.DrawerLayout>

The problem with applying fitsSystemWindows in this is that the NavigationDrawer will change how it acts, it'll still overlay behind the ActionBar although the main content will be below the ActionBar and above the navigation bar at the bottom.

The trick is wrap the navigation draw with a FrameLayout and apply the fitsSystemWindows to that.

    
<FrameLayout
        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:fitsSystemWindows="true"
        tools:context="co.uk.gauntface.android.webviewbrowser.MainActivity">

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/navigation_drawer"
                android:layout_width="@dimen/navigation_drawer_width"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:name="co.uk.gauntface.android.webviewbrowser.NavigationDrawerFragment" />

        </android.support.v4.widget.DrawerLayout>

    </FrameLayout>

This will give us the following layout.

Example Screenshot of Devices with fitsSystemWindows

Add Some Color

To change the color of the status bar I just set the windowBackground attribute in my theme.

   
 <item name="android:windowBackground">@color/window_bg</item>

Screenshot with background color

Now I’d love to have a transparent navigation bar and if I could get the height of the navigation bar reliably, I would actually use that space for part of my UI and add padding to shift touchable elements at the bottom of my UI. But since I can’t find the height, that space is useless to me, hence a quick switch of the navigation bar to black with:

  
  <item name="android:windowTranslucentNavigation">false</item>

Fin.

Screenshot of finished result





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值