跳到主要內容

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:...
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...
張貼留言
閱讀完整內容

探討 LayoutInflater 的 inflate method

        在 Android 程式裡要動態新增 View，最直接的方法就是使用 LayoutInflater 提供的 inflate method。比較常用的有以下兩個 method： inflate(int resource, ViewGroup root) inflate(int resource, ViewGroup root, boolean attachToRoot)         第一個參數 resource，就是 layout xml file，如 R.layout.your_file。第二個參數 root，指的是這個 inflate 的 view，要成為哪個 view 的 child view。最後一個參數 attachToRoot 是 inflate 的 view 是否要 attach 到 root view，這會影響到回傳的是哪個 view。假如 attachToRoot 為 true，則最後回傳的 view 為 root view (就是第二個參數的 view)；反之就是回傳 inflate 的 view。         第二個參數 ViewGroup root 需要特別說明一下，因為這會影響到如何 inflate 新的 view 出來。android 的 view 是有階層 (hierarchy) 的，因此 parent view 的屬性 (attribute) 會影響到 child view 。假如你是如以下兩種方式使用 inflate method的話： View view1 = LayoutInflater.from(mContext).inflate(R.layout.your_file, null) View view2 = LayoutInflater.from(mContext).inflate(R.layout.your_file, null, false)         因為沒有 root view，系統沒辦法把 inflate view 的屬性正確設定，因此系統會把 inflate view 的屬性設為 null，這會導致 inflate ...
張貼留言
閱讀完整內容