2

I am using EditTexts placed inside TextInputLayouts for implementing some input fields. My problem is that there seems to be some extra space at the bottom of EditTexts, which is obvious when I place several input fields below each other.

Here is a picture of what I see, with the gap between the input fields visible (framed with red).

enter image description here

I want to get rid of this extra space. Setting paddings and margins to 0 did not help and although I know I could try applying negative margins, I would really like to avoid this solution as it has caused some problems with UI tests. Does anyone have any better idea how to eliminate that extra space?

Some codes:

Stylings for the EditText and the TextInputLayout (note that the default margin dimension values are all 0dp):

<style name="EditTextLayout">
    <item name="android:layout_height">@dimen/input_field_height</item>
    <item name="android:minHeight">@dimen/input_field_height</item>
    <item name="android:background">@drawable/input_field_background</item>
    <item name="android:paddingBottom">@dimen/default_margin_bottom</item>
    <item name="android:paddingStart">@dimen/default_margin_left</item>
    <item name="android:paddingEnd">@dimen/default_margin_right</item>
    <item name="android:paddingTop">@dimen/default_padding_top</item>
    <item name="android:layout_marginBottom">@dimen/default_margin_bottom</item>
    <item name="android:textColorHint">@color/input_field_floating_label</item>
</style>

<style name="EditTextTheme">
    <item name="android:imeOptions">actionDone</item>
    <item name="android:maxLines">1</item>
    <item name="colorControlNormal">@color/primary_line_color</item>
    <item name="colorControlActivated">@color/nordea_blue</item>
    <item name="colorControlHighlight">@color/error_color</item>
    <item name="android:textColorPrimary">@color/input_field_text</item>
    <item name="android:textSize">@dimen/textsize_caption</item>
    <item name="android:textColorHint">@color/input_field_floating_label</item>
</style>

<style name="EditText">
    <item name="android:theme">@style/EditTextTheme</item>
    <item name="android:textCursorDrawable">@drawable/cursor_blue</item>
    <item name="android:paddingStart">@dimen/default_padding</item>
    <item name="android:paddingEnd">@dimen/default_padding</item>
    <item name="android:paddingTop">@dimen/input_field_floating_label_padding</item>
    <item name="android:layout_marginBottom">@dimen/default_margin_bottom</item>
    <item name="android:background">@drawable/input_field_divider</item>
</style>

Background for the EditText (made only to make the bottom line thicker):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
    <item
        android:left="@dimen/input_field_background_side_margin"
        android:right="@dimen/input_field_background_side_margin"
        android:top="@dimen/input_field_background_side_margin">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke
                android:width="@dimen/input_field_divider_height"
                android:color="@color/input_field_divider_color"></stroke>
            <padding
                android:bottom="@dimen/testlogin_dropdown_divider_padding"
                android:top="@dimen/input_field_floating_label_padding"/>
        </shape>
    </item>
</layer-list>

Background for the TextInputLayout:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="@dimen/inputfield_background_light_margin_bottom">
        <shape android:shape="rectangle">
            <solid android:color="@color/input_field_layout_bg"/>
            <padding
                android:bottom="0dp"
                android:left="0dp"
                android:right="0dp" />
        </shape>
    </item>
</layer-list>

Usage:

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_container"
    style="@style/EditTextLayout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/input_field_height"
    app:errorTextAppearance="@style/EditTextErrorText"
    app:hintTextAppearance="@style/EditTextFloatingLabel"
    tools:hint="Hint text"
    tools:text="Label text">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/input_editfield"
        style="@style/EditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:imeOptions="actionDone"
        android:inputType="text|textCapSentences"/>

</android.support.design.widget.TextInputLayout>
hildegard
  • 559
  • 8
  • 24
  • Have you tried completely removig `padding` and `marginBottom`? Also, what is the point in so many 0dp `paddings`? – Prad Oct 27 '16 at 11:05
  • I'm not sure can u try with changing the values of testlogin_dropdown_divider_padding and input_field_floating_label_padding as a test case? – Raghavendra Oct 27 '16 at 11:16
  • @Prad, I tried all these, removing the paddings and the margins, changing the values etc. Whatever I do, however, there is always that extra space at the bottom. Even when I try to set the paddings and margins to 0, it still appears. I am wondering if anyone knows where exactly that space comes from and what can I do to get rid of it. As I said earlier, negative margins are not good solutions for me, so I am looking for alternatives. – hildegard Oct 27 '16 at 12:42

2 Answers2

0

try this

 android:layout_marginTop="-10dp"

for your 2nd edit text , use the value as per your convinience

Manohar
  • 22,116
  • 9
  • 108
  • 144
0

Actually there is no attribute to remove that space But u can remove that space by using custom background for edittext.And for custom background click here

Awais Aslam
  • 75
  • 1
  • 1
  • 9