5

ログインフォームを作っているんですが、ご覧のように入力フィールドとボタンの幅が少しずれています:

画像の説明をここに入力

フィールドとボタンのmarginの設定は同じです、またlayout_alignで合わせてみました。

<EditText
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_below="@+id/loginField"
   android:layout_centerHorizontal="true"

   android:layout_marginTop="15dp"
   android:layout_marginLeft="10dp"
   android:layout_marginRight="10dp"
   android:paddingBottom="10dp"
   android:paddingTop="10dp"
   android:paddingLeft="10dp"
   android:paddingRight="10dp"

   <!-- 次は当質問に関係ない設定・・・ -->
/>

<Button

   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_below="@+id/loginPassword"

   android:layout_marginTop="20dp"

   android:layout_alignRight="@+id/loginPassword"
   android:layout_alignEnd="@+id/loginPassword"
   android:layout_alignLeft="@+id/loginPassword"
   android:layout_alignStart="@+id/loginPassword" 

   <!-- 次は当質問に関係ない設定・・・ -->
/>

小さいですからほとんど見えないですけど、フィールドにこちらの解決に基づいて丸角を作りました:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="2dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

フィールドとボタンの幅をぴったり合わせる事が出来なかった理由は何でしょうか。

2
  • 「更新」の部分は表題とは別の質問になっていますので、追記という形ではなく新たに質問をしてみてはどうでしょう?
    – quesera2
    Commented 2016年10月19日 11:56
  • 分かりました。それでは、本日中こちらから更新の部分を取り除いて新しい質問を追加します。
    – 徳川武
    Commented 2016年10月19日 12:02

1 件の回答 1

6

Buttonにデフォルトで設定されている背景には、タッチ領域の確保のために若干空白が設けられています。これがズレの原因でしょう。
デフォルトで設定されているbackgroundは @drawable/btn_default_material で、ソースを見ると

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/btn_default_material.xml

となっており、内部でさらに @drawable/btn_default_mtrl_shape を使用しています。
@drawable/btn_default_mtrl_shapeのソースを見てみると、

<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/button_inset_horizontal_material"
   android:insetTop="@dimen/button_inset_vertical_material"
   android:insetRight="@dimen/button_inset_horizontal_material"
   android:insetBottom="@dimen/button_inset_vertical_material">
    (以下略)

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/btn_default_mtrl_shape.xml

とあり、InsetDrawableを生成しています。(InsetDrawableについては別途調べてみてください)
ここの、inset~~に設定されている値がButtonの上下左右に設定されている空白の正体なので、Buttonの左右に合わせたいのであれば、この値分だけEditTextのサイズをズラせば良いでしょう。
ずらし方はいくつかあるかと思いますが、EditTextの背景に設定しているxmlに対してButtonと同様にinsetで囲んであげるのが一番ラクかと思います。(色は見づらかったので少し変えました)

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="@android:dimen/button_inset_vertical_material"
    android:insetLeft="@android:dimen/button_inset_horizontal_material"
    android:insetRight="@android:dimen/button_inset_horizontal_material"
    android:insetTop="@android:dimen/button_inset_vertical_material">

    <shape>
        <solid android:color="#ffcccc" />
        <corners android:radius="2dip" />
        <padding
            android:bottom="0dip"
            android:left="0dip"
            android:right="0dip"
            android:top="0dip" />
    </shape>
</inset>

画像の説明をここに入力

1
  • ご説明、誠にありがとうございます。残念ながら、insetの変更にはアクセス拒否でした。質問のフィールドにエラーメッセージを導入しました。
    – 徳川武
    Commented 2016年10月19日 7:48

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。