AndroidのTextInputLayoutの要素の位置を調整する

位置指定についてメモ。

左右の余白について

TextInputLayoutはその内部だけだと左側の位置が揃っているのですが、 他の要素で同じ値を指定した時と比べてみると、TextInputLayoutの要素の左右に4dpのPaddingがあるみたいです。

これでは他の要素と一緒にフォームに入れたときに、TextInputLayoutだけ真ん中の方に引っ込んで余分な目の動きが発生することになります。

こう言う場合、全体を包んでいるLinearLayoutなどのViewGroupの持つ左右のpaddingを4dp減らして、他の要素の左右のmarginを4dp増やせば揃います。

上下の余白について

デフォルトの指定より、もう少しエラーメッセージの余白を詰めたい/空けたいな、と思うことがあります。

そう言う場合は、TextInputLayoutの子要素のpaddingBottomを使ったらできました。

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:background="#ccc"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <EditText
        android:id="@+id/userid"
        android:textSize="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp" <!-- 下線とエラーの余白 -->
        android:hint="TextInputLayout"/>
</android.support.design.widget.TextInputLayout>

android:layout_marginBottom="-10dp"で詰めた場合

上下の高さについて

TextInputLayoutでlayout_heightを指定しないとエラーメッセージが出たとき/出ない時でこエラーメッセージ分この要素の高さが変わってフォーム全体の表示が崩れるのを避けるため、layout_heightに大きめの固定値を指定したことがあります。

このとき、TextInputLayoutのlayout_heightが思ったより小さいと、サポートライブラリのバグ*1とは無関係にエラーメッセージが表示されなくなることがあります。

一行目は大丈夫でも、長めの入力を受け取って、2行分EditTextのフォームに取ったら足りなくなったとかそういうこともあるので、そう言う場合は、TextInputLayoutの要素の下の要素の上の方の余白をすべてTextInputLayoutの余白に突っ込んだり、2行目は入力時以外表示しない設定にする、などどう対処するのか確認しておきましょう。

*1: このバグ http://stackoverflow.com/questions/30537413/textinputlayout-not-showing-edittext-hint-before-user-focus-on-it