[Android] TextInputLayout 當有文字輸入，hint文字自動跑到上方

Material Design Components正式的1.0.0推出了，來看看其中的TextInputLayout，其中最顯著的效果就是當使用者在EditText輸入文字時，原先hint的文字會跑到較上方的位置，如下圖↓

首先要使用的話，在build.gradle(app)中加上

再來這layout的xml中加上然後打個字就可以有上圖的效果了。

Read More

[Android] 字與字的間距設定 TextView letterSpacing

今天紀錄一下要怎麼調整TextView每個字與字之間的間距呢？
用TextView所提供的letterSpacing即可。

letterSpacing預設為0，最多可設定到小數點第二位，如：0.05，數值越大，間隔越大，也可以設定負數，負數的話，字與字越靠近。

可以透過XML設定或程式碼直接設定

Read More

[Android] Instagram愛心/FB按讚點擊效果實現 (Icon放大旋轉)

 這次來記錄IG 按愛心或FB按讚時，Icon會有動畫效果的模仿，效果以Icon放大並旋轉一點角度的動畫為目標，核心概念透過StateListAnimators來實現這個效果，如下圖。

StateListAnimators可以設定當view是checked/enable/focused/pressed...要呈現的效果，這邊我以最簡單的checked來做，先建立一個CheckBox且放上一個因應checked狀態顯示不同Icon的Selector。

寫一個StateListAnimators的xml，裡面包含了放大與旋轉的數值設定，有需要的可以自行更改動畫時間或數值。

最後，將CheckBox的StateListAnimators指定我們所寫的StateListAnimators，就大功造成了!

資料參考:Creating an Instagram “Like” Animation With StateListAnimators

Read More

[Android] ImageSpan 實現圖示在文字中垂直置中效果

 今天來寫寫關於ImageSpan，透過ImageSpan可以簡單做到在TextView文字中插入圖片。

最簡單的用法如下

可以發現，Icon是貼齊在TextView該行的底部，這邊ImageSpan有verticalAlignment屬性可以設定，預設是ALIGN_BOTTOM，另外一個是ALIGN_BASELINE

效果就如同ALIGN_BASELINE的字面意思，以文字的基底為準，可以看圖明顯看到Icon是貼齊文字的底部。

但屬性就只有這兩種可以設定，那如果想要實現Icon位置處在該行的正中間，該怎麼做呢?

簡單的想法，就是繪製Icon的時候，其位置調整到該行的中間，因此這邊繼承ImageSpan並重寫draw這個function

再來將原本使用ImageSpan改為所寫的VerticalImageSpan，就可以做到ImageSpan垂直置中的效果囉

Read More

[Android] 狀態欄(Status Bar)文字與圖示轉換成灰色

應該有許多人有遇到這樣的問題，UI/UX設計師所設計的畫面中，有時為了配合設計，最上方狀態欄(Status Bar)背景設計為淺色系的，這時狀態欄中的文字與圖示(時間、網路訊號等)系統預設是白色的，會變得十分不顯眼。

在Android 6.0(API 23)之後，有兩種方法可以使狀態欄中的文字與圖示變成灰色的，以配合淺色系的背景色，如下圖↓

第一種方法：透過styles.xml，<item name="android:windowLightStatusBar">true</item>

第二種方法：透過SYSTEM_UI_FLAG_LIGHT_STATUS_BAR，由程式端改變顏色

這邊也寫一個非常簡單的小程式，透過按鈕Button隨即切換狀態欄的背景顏色以及文字、圖示顏色，深色背景搭配預設圖示顏色，淺色背景搭配灰色圖示顏色。

完成圖↓

MainActivity.java
參考資料：Change status bar text color when primaryDark is white
                    Android 6.0狀態欄使用灰色文字與圖示
                    Android M Light and Dark status bar programmatically
完整專案：Solinari GitHub　　　　　

Read More

[Android] SwipeRefreshLayout實現使用者垂直滑動時進行更新

上一次我們透過Volley來取得臺北捷運列車到站資訊，此公開資料是每30秒就更新，我們要如何讓它更新呢?

在許多App上，使用者只須要到頁面的頂端，由上往下滑動，即可進行資料更新的動作，今天我們就來記錄一下，該如何做到這樣的效果。

完成圖↓

透過官方的SwipeRefreshLayout可以很輕鬆地做到這樣的功能，使用上一次的專案，將SwipeRefreshLayout加到「fragmentlist_one.xml」。

fragmentlist_one.xml

然後，修改「FragmentList_One.java」，為SwipeRefreshLayout設置OnRefreshListener，就大功造成啦!

FragmentList_One.java

參考資料：SwipeRefreshLayout
　　　　　Adding Swipe-to-Refresh To Your App
　　　　　Responding to a Refresh Request
完整專案：Solinari GitHub　　　　　

Read More

[Android] 透過Volley發送HTTP Request(使用政府公開資料-臺北捷運資訊)

目前各縣市政府都有提供許多各式各樣的公開資料，那要如何在App上，得到這些資料呢? 

原理與網頁相似，發送Request並接收Response，Android提供了許多方法，像是HttpURLConnection、Volley等，這邊我使用Volley，可以省去一些繁瑣的撰寫，公開資料我使用了臺北市政府資料開放平台-台北捷運列車到站站名，可以得知目前列車進站的站名、該列車終點站更新時間等資訊。

完成圖↓

一樣拿之前專案來繼續實作，要使用Volley我們需要在build.gradle中增加

dependencies {
    ...
    compile 'com.android.volley:volley:1.0.0'
}

修改我們之前RecyclerView放資料的容器「recycler_textview.xml」，改為「recycler_metroinfo.xml」，並新增多個TextView，用來顯示資訊。

recycler_metroinfo.xml

修改「fragmentlist_one.xml」，新增一個ProgressBar，當在請求資料時，有一個loaing圖示，當資料處理完畢，再將資料RecyclerView顯現出來。

fragmentlist_one.xml

再來修改FragmentList_One.java，使用Volley來獲取臺北捷運列車到站資訊。

FragmentList_One.java

最後，修改Adapter「RecyclerViewAdapter.java」。

RecyclerViewAdapter.java

資料來源：Sending a Simple Request
                    Making a Standard Request
完整專案：Solinari GitHub

Read More