Develop Reference

Removing space between design widgets

I am currently learning some design on XML. I have a scroll view and I have Several widgets. However, I want to remove space between my Log In and my password, how can I combine them together yet be able to input email and password?
What I want :
enter image description here
what I currently have
enter image description here
Thanks for the help.
So below is my simple code. How can I remove space and have them come together?
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="0dp">
<EditText
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/white"
android:hint="Email"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<!-- Password Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_marginBottom="8dp">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="38dp"
android:background="#color/white"
android:hint="Password"
android:inputType="textPassword"
android:textColorHint="#color/black" />
</android.support.design.widget.TextInputLayout>

You can remove extra top spacing by setting app:hintEnabled="false" to TextInputLayout:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:hintEnabled="false"
android:layout_marginBottom="0dp">
.....
It is space left for hint

Try changing the top/bottom margins of the EditText widgets. Like so:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="0dp">
<EditText
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/white"
android:hint="Email"
android:inputType="textEmailAddress"
android:layout_marginBottom="0dp"
/>
</android.support.design.widget.TextInputLayout>
<!-- Password Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_marginBottom="8dp">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="38dp"
android:background="#color/white"
android:hint="Password"
android:inputType="textPassword"
android:textColorHint="#color/black"
android:layout_marginTop="0dp"
/>
</android.support.design.widget.TextInputLayout>
I would also experiment with the android:padding attribute.
More info: Difference between a View's Padding and Margin

You can put login view and password view into linear layout, and margin_top and margin_bottom = 0

It's not about space between views, it's about view style. So search for style you need your EditText appears
Something like this tutorial

Floating Labels Custom

Is there a way to move up a little more the Floating Labels?
My Edit Text actually has a borderline or a frame, but when the hint floats it floats over the borderline.
Can anyone help me?
Please?

Yes There is a work around of this problem. Use
android:translationY="10dp"
to your EditText

try adjusting
android:paddingTop=""
android:paddingBottom=""
property of Floating Labels

You have definitely problems with android:padding. I don't see your code, but you may put them in wrong places.
Delete them first and let me know if problem still happening:
Here is an sample code from Android Material Design Floating Labels for EditText tutorial
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="60dp">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:hint="#string/hint_name" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/hint_email" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="#string/hint_password" />
</android.support.design.widget.TextInputLayout>
<Button android:id="#+id/btn_signup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/btn_sign_up"
android:background="#color/colorPrimary"
android:layout_marginTop="40dp"
android:textColor="#android:color/white"/>
</LinearLayout> </android.support.design.widget.CoordinatorLayout>
Also look at another great example to learn how it should be implemented from Google Samples Github Repository
Hope it help

use this textinputlayout,
<android.support.design.widget.TextInputLayout
android:id="#+id/username_text_input_layout"
style="#style/TextLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/etUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:ems="10"
android:hint="Username"
android:imeOptions="actionNext"
android:inputType="text|textNoSuggestions"
android:maxLength="255"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
you can use this style , set font as you need , edit this as per your need .
<style name="TextLabel" parent="TextAppearance.Design.Error">
<!--//hint color And Label Color in False State-->
<!--<item name="android:textColorHint">#color/colorPrimary</item>-->
<item name="android:textSize">#dimen/font_normal_size</item>
<!--//Label color in True State And Bar Color False And True State-->
<item name="colorAccent">#color/colorAccent</item>
<!--<item name="colorControlNormal">#color/</item>
<item name="colorControlActivated">#color/Color Name</item>-->
</style>

enter code here
<android.support.design.widget.TextInputLayout
android:id="#+id/firstnameLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<EditText
android:id="#+id/firstname_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:hint="First Name"
android:inputType="text"
android:drawableLeft="#drawable/ic_person_black_18dp"
android:drawablePadding="5dp"
android:textColorHint="#693EB4" />
</android.support.design.widget.TextInputLayout>
Try this maybe it will help you.

Extra space between TextInputLayout and TextView

I have used TextInputLayout to an EditText and there is a TextView just below to it. I see there is an extra space between TextInputLayout and TextView. I want to remove that extra space. Pics attached with and without TextInputLayout. I have enabled boundaries in developer options so pic may look confusing but informative.
Below is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/layoutCurrentPW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:errorEnabled="true">
<EditText
android:id="#+id/editTextCurrentPassword"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="30dp"
android:background="#drawable/edit_text_border_drawable"
android:gravity="center"
android:hint="#string/current_password"
android:layout_gravity="bottom"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:text="#string/forgot_password"
android:textSize="17sp" />
</LinearLayout>

There is a known issue with TextInputLayout which displays additional padding once an error is displayed and isn't removed when the error is cleared or setErrorEnabled(false) is called.
https://code.google.com/p/android/issues/detail?id=200137
A workaround for this issue is to manually hide the bottom child layout when the error is cleared:
textInputLayout.setError(null);
if (textInputLayout.getChildCount() == 2)
textInputLayout.getChildAt(1).setVisibility(View.GONE);

Looks like this is not extra space, but just the bottom half of the TextInputLayout widget. I don't have your background resource, but this is essentially what your code looks like on my device. You could try the EditText without putting it inside a TextInputLayout widget if you want, and then you wouldn't have the extra space on the bottom or top.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TextInputLayout
android:id="#+id/layoutCurrentPW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/holo_green_light"
app:errorEnabled="true">
<EditText
android:id="#+id/editTextCurrentPassword"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="30dp"
android:gravity="center"
android:background="#android:color/white"
android:text="current_password"
android:layout_gravity="bottom"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:text="forgot_password"
android:textSize="17sp" />

Try this
android:layout_alignStart="#id/layoutCurrentPW"

Android Material EditText

I'm using Support Design Library. I created EditText but when I'm writting something there is some blue underline of edit text like in the picture below
Here is my code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Test"
android:inputType="none"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
How to fix that?

It seems autocomplete/suggestions are open. Try this:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Test"
android:inputType="textNoSuggestions"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>

There is any possibility to approach label with EditText in TextInputLayout?

when i put 2 or 3 TextInputLayout, label seams link graphically to previous editText instead of next. i need to put much marginTop to TextInputLayout. there is any possibility to approach label with EditText?
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/name"
android:inputType="textCapWords" />
</android.support.design.widget.TextInputLayout>
in this example we can see margin from hint and edittext

Changing the paddingTop of the EditText should fix it, for example:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="0dp"
android:hint="#string/name"
android:inputType="textCapWords" />
</android.support.design.widget.TextInputLayout>

You can definitely add properties to TextInputLayout however you want it to be. Following will help you to add marginTop from exactly above Viewof TextInputLayout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/name"
android:inputType="textCapWords" />
</android.support.design.widget.TextInputLayout>