跳到主要內容

Borderless Ripple Effect using Appcompat v21

        Google 日前發表了新的設計準則: Material design, 其中定義了新的 touch effect: Ripple effect。而在最近也發佈了新的 support v7 library，可以讓 api level 7 以上都能建立 Material design 的 UI。我自己是滿偷懶的, 都只會設計一種 layout/style, 讓所有 api level 通吃, 此時 support library 就幫了我很大的忙 XDD。

        最近剛好看到如何讓 view 按下去的時候會有 ripple effect, Google 官方其實就有提供說明了, 請參考 https://developer.android.com/training/material/animations.html#Touch, 只要在 layout xml, 想出現此效果的view 加上 android:background= ?android:attr/selectableItemBackground 就可以啦~~ 要是想向下相容, 就必需使用 support v7 library, 其實也只是把上面那行改成 android:background="?attr/selectableItemBackground"

        但是請注意, 使用上述產生的 ripple effect 最大範圍是 view 的大小。有注意看 Google 的一些 app, Appbar(Action bar/ Toolbar) 上的按鈕按下去的話, ripple effect 是會超出 view, 也就是說, 邊界會是圓形的而不是方形的。要達到這個效果的話, 只要把 selectableItemBackground 改成 selectableItemBackgroundBorderless  就可以啦, support v7 libaray 也可以用喔。

        最後再提醒一點, ripple effect 目前只有 Android 5.0 以上的裝置才會有, 將上述做法用在 5.0 以下的話, 還是之前的 touch effect 喔, 而且要用 Material design 的效果, app theme 要使用 @android:style/Theme.Material.XXX , support library 則要改用 Theme.AppCompat.XXX

 參考資料

 1. Android Customize Touch Feedback
   https://developer.android.com/training/material/animations.html#Touch

 2. Using the Material Theme
    https://developer.android.com/training/material/theme.html

 3. AppCompat v21 — Material Design for Pre-Lollipop Devices!
    http://android-developers.blogspot.tw/2014/10/appcompat-v21-material-design-for-pre.html
標籤：

留言

張貼留言

這個網誌中的熱門文章

如何把 Status Bar 變透明

        Android 從 4.4 (KitKat, api level 19) 後才支援這個功能, 到了 5.0 (Lollipop, api level 21) 自訂性更高, 可以讓我們設定各種顏色, 當然也包含透明色。以下分別介紹如何使用這兩種版本的方法。         方法1: 利用 attribute " android:windowTranslucentStatus ", 在 style.xml 加上這個 attribute 就好。要注意的是 Android 版本要在 4.4 以上才可以用這個 attribute: <resources> <!-- Base application theme for API 19+. This theme completely replaces AppTheme from res/values/styles.xml on API 19+ devices. --> <style name="AppTheme" parent="@style/AppBaseTheme"> <!-- API 19 theme customizations can go here. --> <item name="android:windowTranslucentStatus">true</item> </style> </resources>         下面的圖分別為 4.4 跟 5.0 的手機使用這個 attribute 的結果:         因為設定了這個 attribute, 畫面會從 status bar 下方開始畫。要解決這個有兩種方法, 第一個是在 layout 畫面設定 attribute "android:fitsSystemWindows " <RelativeLayout xmlns:android="http://schemas.android.com/apk/res
1 則留言
閱讀完整內容

透明背景的 AlertDialog

        Android dialog 預設都會有一個背景底色，要怎麼把它去掉呢？其實直接改 AlertDialog 的 style 就可以了，但我改好久…以下的範例是使用了 Support v7 AppCompat 的 theme，其他 theme 我不知道可不可以，有興趣的人可以試試看。 <style name="TransparentDialog" parent="@style/Base.Theme.AppCompat.Dialog"> <item name="android:windowFrame">@null</item> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowIsFloating">true</item> <item name="android:windowTitleStyle">@null</item> <item name="android:background">@android:color/transparent</item> <item name="android:windowNoTitle">true</item> <item name="android:alertDialogStyle">@style/TransparentDialog.Color</item> </style> <style name="TransparentDialog.Color" parent="@style/Base.Theme.AppCompat.Dialog"> <item name="androi
張貼留言
閱讀完整內容

Deprecated API

        當透過 IDE 使用 API，或是查 Document 時，常會看到一段途述:  This method was deprecated… 這是什麼意思呢？這是告訴我們還是可以使用此 method，但未來可能會沒有用、甚至是 在新版本的 SDK 會把這個 method 移掉 。         以 API level 11 出現的 Fragment  為例子，在使用時常會 override 一個 callback 叫 onAttach (Activity activity)，但到了 API level 23 (Lollipop) 時，可以發現 onAttach (Activity activity) 被標記為 deprecated 了，取而代之的是 onAttach (Context context)。         像我個人寫程式不太喜歡出現 warning，而使用到 deprecated api 會被 Android Studio 檢查出來，我在用 Fragment 時就直接都換成 onAttach (Context context)，結果程式在 api level 較低的手機就出現不符合預期的行為。Debug 了一陣子才發現 onAttach (Context context) 是新的 API，舊版本 SDK 當然沒有這個  API，自然就不會執行到該 API。         因此，雖然有些 API 被標記為 deprecated，但當你的程式還需要支援較舊版本時，還是得使用這些 API，假如要用的 API 在 Support Library  也有對應版本的話，我會建議用 Support Library 版本，因為放在裡面的 API 本來就是為了向下相容而設計的。以 Support Libaray 裡的Fragment 來說，onAttach (Activity activity) 一樣被標記為 deprecated，也一樣有 onAttach (Context context)  ，但它卻向下相容到 api level 4，因此為了向下相容性，使用 Support Library 是比較好的。 參考資料 1. Android Fragment 2. Android Support v4 Fragment 3. An
張貼留言
閱讀完整內容