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
Related
In a RelativeLayout I have a TextInputLayout where I have EditText inside it to type phone number and a Textview inside a LinearLayout where I am showing the country code.
When we start typing `TextInputLayout slide to top, but I want it to slide to as in image 3.
I am facing issue in this can somebody help me?
This is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/error_mobile_no"
android:layout_alignTop="#+id/error_mobile_no"
android:layout_alignBottom="#+id/error_mobile_no"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/country_code_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/lorin_regular"
android:text="+971"
android:layout_marginBottom="2dp"
android:textColor="#color/black"
android:textSize="14sp" />
</LinearLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/error_mobile_no"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
app:errorEnabled="true">
<EditText
android:id="#+id/etPhoneNumberDetailedActivity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:autofillHints=""
android:paddingStart="35dp"
android:backgroundTint="#6283a3"
android:fontFamily="#font/lorin_regular"
android:hint="#string/mobile_number"
android:inputType="phone"
android:textColor="#color/black"
android:textColorHint="#6283a3" android:textSize="14sp" />
</com.google.android.material.textfield.TextInputLayout>
</RelativeLayout>
This is an image of the field before entering text.
This is the image after entering text.
But I am trying to get it to look like this.
You can use the app:prefixText to display the prefix:
<com.google.android.material.textfield.TextInputLayout
android:hint="mobile_number"
app:prefixText="+971"
...>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:autofillHints=""
android:inputType="phone"
.../>
</com.google.android.material.textfield.TextInputLayout>
I am trying to make AutoCompleteTextView look like this image https://ibb.co/ZJxmgK5 but unable to do the same. The outlined box is not visible in the result
Below is my current code. Earlier I tried adding an EditText in TextInputLayout but now I want to add Autocomplete in this.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout_holiday_destination"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/lbl_destination_big">
<AutoCompleteTextView
android:id="#+id/edittext_holiday_destination"
style="#style/Base.Widget.AppCompat.EditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="10"
android:background="#android:color/transparent"
android:hint="#string/lbl_destination"
android:layout_marginLeft="#dimen/margin8"
android:singleLine="true"
android:lines="1"
android:textSize="25sp"
android:nextFocusDown="#+id/txv_holiday_num_of_nights"
android:imeOptions="actionNext"
android:textCursorDrawable="#drawable/edittext_cursor_drawable"/>
/>
</com.google.android.material.textfield.TextInputLayout>
The expected result is the image for which the URL has been given above.
If you would like to have a TextInputLayout in conjuction with an AutoCompleteTextView you should use this style for the TextInputLayout Widget.MaterialComponents.TextInputLayout.*.ExposedDropdownMenu.
In your case:
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
Use something like:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/name_text_input"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="HINT TEXT">
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"/>
</com.google.android.material.textfield.TextInputLayout>
Check also the doc:
Note: When using an outlined text field with an EditText child that is not a TextInputEditText, make sure to set the EditText's android:background to #null. This allows TextInputLayout to set an outline background on the EditText.
If you would like to avoid the dropdown icon just use the app:endIconMode attribute.
<com.google.android.material.textfield.TextInputLayout
app:endIconMode="none"
...>
Below code solves the problem:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout_holiday_destination"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/lbl_destination_big">
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
android:id="#+id/edittext_holiday_destination"
style="#style/Widget.MaterialComponents.AutoCompleteTextView.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:singleLine="true"
android:lines="1"
android:nextFocusDown="#+id/txv_holiday_num_of_nights"
android:imeOptions="actionNext"
android:textCursorDrawable="#drawable/edittext_cursor_drawable"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout_holiday_destination"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/edittext_holiday_destination"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Destination"
android:layout_weight="10"
android:singleLine="true"
android:lines="1"
android:textSize="25sp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
tools:text="Hello" />
/>
</com.google.android.material.textfield.TextInputLayout>
This works. The problem was with the background color that you were setting to the AutoCompleteTextView.
finally my answer is this
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/uomLay"
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="#id/quantity_lay"
app:layout_constraintStart_toStartOf="#id/start2"
app:layout_constraintEnd_toEndOf="#id/end2"
style="#style/OutlineBoxDropDown"
app:endIconDrawable="#drawable/ic_path_16692"
app:shapeAppearance="#style/Rounded"
app:hintTextAppearance="#style/hintTextAppearence"
android:layout_marginTop="#dimen/_13sdp"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/uom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/graphikregular"
android:hint="UOM"
style="#style/Widget.MaterialComponents.AutoCompleteTextView.OutlinedBox"
android:background="#null"
android:paddingVertical="#dimen/_7sdp"
android:textColor="#color/desc_color"
android:textSize="#dimen/_11ssp"
tools:text="kg" />
</com.google.android.material.textfield.TextInputLayout>
I spent a lot of time in attempt to resolve this issue but without success for now...
when the application runs on android with RTL language. the label(hint) of the EditText is shown at the wrong position.
Desired result
ltr layout
RTL Layout
rtl layou
XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
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">
<!-- Login form container -->
<android.support.percent.PercentRelativeLayout
android:id="#+id/form_container"
android:layout_centerHorizontal="true"
app:layout_widthPercent="85%"
app:layout_heightPercent="30%"
app:layout_marginTopPercent="8%">
<!-- Username layout -->
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:inputType="textVisiblePassword|textNoSuggestions"
android:textDirection="ltr"
android:hint="#string/hint_username"/>
</android.support.design.widget.TextInputLayout>
<!-- Password layout -->
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#+id/input_layout_username">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:textDirection="anyRtl"
android:hint="#string/hint_password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
</android.support.percent.PercentRelativeLayout>
</android.support.percent.PercentRelativeLayout>
how can i fix the unnecessary margin in the RTL layout?
In addition, it would be great if it's possible to remove/hide the "visibility toggle"(eye icon) button!
Thank you!
to disable password toggle all you need is to add "passwordToggleEnabled" attribute to your TextInputLayout, for example:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:passwordToggleEnabled="false">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:textDirection="ltr"
android:hint="#string/hint_password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
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>
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>