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

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>

Related

I am trying to make AutoCompleteTextView look like a material Edittext

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>

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

How to display Superscripted hint in TextInputLayout in Android? I can't seem to figure it out.Here's my code

Here's my Activity.xml file. I put the AppCompatEditText inside TextInputLayout. I want the hint to be shown in the html form with superscript text but it just won't happen. All the text is shown as just normal text. Is there a way around?
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/acceleration_unit_ms2"
android:inputType="numberDecimal"
android:id="#+id/acceleration_unit_ms2"/>
</android.support.design.widget.TextInputLayout>
Strings.xml
<string name="acceleration_unit_ms2">Meter/Second Square (m/s<sup><small>2</small></sup>)</string>
According to efficient performance use TextInputEditText inside TextInputLayout.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/input_layout_email"
android:layout_marginTop="#dimen/dp_10"
app:hintEnabled="true"
app:hintAnimationEnabled="false">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_email"
android:inputType="textEmailAddress"
android:hint="#string/email"
android:textSize="16sp"/>
</android.support.design.widget.TextInputLayout>

How to transition between EditText and Spinner?

I have an Edittext wrapped inside a TextInputLayout. I tried using android:nextFocusForward="#+id/spinnerLanguage" so that i could gain the focus of the spinner. This doesn't work. I even tried using android:nextFocusUp and this method does not seem to work
<android.support.design.widget.TextInputLayout
android:id="#+id/txtEmailAddressWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:hint="EMAIL ADDRESS"
android:padding="5dp"
android:id="#+id/txtEmailAddress"
android:nextFocusForward="#+id/spinnerLanguage"
android:inputType="text"
android:maxLength="40" />
</android.support.design.widget.TextInputLayout>
<fr.ganfra.materialspinner.MaterialSpinner
android:id="#+id/spinnerLanguage"
android:layout_width="match_parent"
app:ms_floatingLabelColor="#color/colorAccent"
android:layout_height="wrap_content"
app:ms_enableFloatingLabel="true"
app:ms_hint="LANGUAGE" />
try with this
txtEmailAddress.setFocusableInTouchMode(true);
or
txtEmailAddress.setFocusable(false);
and use this to clear focous
txtEmailAddress.clearFocus();
or use this in xml
android:focusable="true"
android:focusableInTouchMode="true"
may be this will help you

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>

Categories

Resources