I need to rewrite an iOS app for Android. The layout should look alike and I struggle with this issue:
I want to have a label on the left side of an EditText. It should stick there and don't let the EditText text overwrite the label:
I have tried using the interface builder in Android Studio like this :
The problem is, that the EditText's text does not hide behind the label.
Any ideas?
Edit:
Since my question was unclear:
I want a label inside an EditText.
It should stick to the left and have a margin to the input of EditText.
Try using below code in your xml and check, this will align your label text with password field where user can enter the password.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background"
android:layout_margin="#dimen/padding_medium">
<TextView
android:id="#+id/label"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="Password"
android:layout_marginTop="#dimen/padding_medium"
android:gravity="center_vertical"
android:paddingLeft="#dimen/padding_xsmall"
android:textSize="22sp"
android:textColor="#android:color/holo_red_dark"
app:layout_constraintHeight_default="wrap"
android:paddingStart="#dimen/padding_xsmall"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintWidth_default="wrap"/>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/label"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginStart="4dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:background="#null"
android:padding="4dp"
android:imeOptions="actionNext"
android:lines="1"
android:inputType="textPassword"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Note: I have used androidx controls as I am using new material design library. If you are using support library you would need to replace them with controls from support library.
Related
I have a TextInputLayout that contains an AutoCompleteTextView. The idea is that when the user starts typing the mobile number, some automatic suggestions should come. Since it is specifically for phone numbers, a fixed prefix "+91" is required.
app:prefixText="+91" is used for this purpose. It does show the prefix but it gets mixed with the hint and doesn't come properly (as it comes when EditText is used instead of AutoCompleteTextView). Checkout the images to see expected vs actual look.
XML Layout file:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AddMob">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInpLayoutMob"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="300dp"
android:layout_height="60dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:hint="Mobile No."
app:counterMaxLength="10"
app:endIconMode="clear_text"
app:helperTextTextColor="#color/purple_700"
app:layout_constraintBottom_toTopOf="#+id/textInpLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:prefixText="+91"
app:prefixTextColor="#color/purple_700">
<AutoCompleteTextView
android:id="#+id/autoCompleteTextViewMob"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="number"
android:maxLength="10" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to group together the label (e.g. "StaffID") and the value of the textView (e.g. "S1234567") together, vertically, in Android. The label stays on top the textView value throughout while the user is typing in the value in the textView. Attached is the screenshot of how I want the UI to look like.
Click here to view the UI screenshot
Wrap the edit text with TextInputLayout with the desired android:hint attribute.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="StaffId"/>
</com.google.android.material.textfield.TextInputLayout>
check the official docs for more info and features
<android.support.design.widget.TextInputLayout
android:id="#+id/inputlayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:theme="#style/loginActivityHintStyle">
<EditText
android:id="#+id/edittext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/the_hint_that_shows_with_the_editext"
android:inputType="text"
android:labelFor="#+id/edittext"
android:maxLength="15"
android:textColor="#drawable/login_activity_input_text_color" />
</android.support.design.widget.TextInputLayout>
I have an application that uses a lot of textinputlayouts because I like the style they create
on one screen I am showing info on one object and I want it too look like the data the user entered with the textinputedittexts , small caption above and the data below
right now I have a textinputlayout with a disabled textinputedittext below
is there a way to just have a textview under the textinputlayout that will be shown in the same style?
thanks in advance for any help you can provide
edit:
as a side note here's what I am currently using to disable the edittext fully
<android.support.design.widget.TextInputLayout
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/name"
tools:text="This is where the name goes"
android:inputType="none"
android:clickable="false"
android:cursorVisible="false"
android:focusable="false"
android:focusableInTouchMode="false" />
what I am trying to avoid is not use clickable and inputtype etc etc in EVERY view that I'm trying to create, and instead use a single view
so other than creating a custom edittext (like NeverEnabledEditText) that starts unclickabke in every way, or add all those attributes to my xml, is there a way to do the above?
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/date_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Date"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tv_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="none"
android:clickable="true"
android:focusable="false"
android:drawableEnd="#drawable/ic_keyboard_arrow_down_black_24dp"
android:paddingEnd="4dp"
android:paddingVertical="12dp"
android:drawablePadding="4dp"
android:textColor="#color/colorPrimary"
tools:text="00/00/0000" />
</com.google.android.material.textfield.TextInputLayout>
Although a TextInputEditText, now you have it acting like a textview because you can't edit it but can set text to it. You're welcome !
I have this layout:
<LinearLayout
android:id="#+id/dialogCentralContent"
android:gravity="center_horizontal"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_below="#+id/phoneNumberInfo"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="20dp"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:background="#drawable/edittext_white_rounded">
<EditText
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:maxLines="1"
android:inputType="none"
android:focusable="false"
android:text="#={dataContext.phonePrefix}"
style="#style/Widget.App.PurchaseAmountEditText" />
<android.support.design.widget.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
tools:errorEnabled="true"
app:errorText="#{dataContext.validator.phoneValidation}">
<android.support.design.widget.TextInputEditText
android:layout_height="60dp"
android:layout_width="match_parent"
android:gravity="center"
android:maxLines="1"
android:inputType="phone"
android:text="#={dataContext.phoneNumber}"
style="#style/Widget.App.PurchaseAmountEditText" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
It looks like this:
As you can see the second EditText is rendered lower than the first one. When I look at it in the visual editor of Android Studio I can see that the TextInputLayout has some free space at its top, however setting paddingTop="0dp" didn't change anything. So how to make those two EditTexts render the same way?
By default, android.support.design.widget.TextInputLayout will leave room at the top for the floating hint text. If you're not using the floating hint, you can remove that space by adding the following to the opening <TextInputLayout> element.
app:hintEnabled="false"
The regular hint text will still be visible on the TextInputEditText when it's empty.
N.B. – This answer does not apply to the current Material Components version, which is markedly different than the original.
I've created a text input with the help of the design support library but it behaves strangely inside the constraint layout I placed it in. The code below is how I wish the widget to be displayed and it initially displays correctly both in the design-builder and on the device. However, if I select the TextInputLayout (in either the design or blueprint layout) the EditText has it's layout_width modified from match_parent to 0dp causing it disappear.
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintLeft_toLeftOf="#+id/activity_login"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/activity_login"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="#+id/activity_login"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/activity_login"
android:layout_marginBottom="16dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/email"
android:layout_weight="1"
android:hint="#string/email"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="11dp"/>
</android.support.design.widget.TextInputLayout>
I figured I'd come back and provide a solution since this is still left open.
The reason I was seeing the EditText views were behaving abnormally in the TextInputLayout is because they shouldn't be there in the first place. The TextInputLayout is part is the design support library and gives developers an easy way to build dynamic labels and error messages for text fields in a manner that is consistent with the Material design spec. However, they have a TextInputEditText as a child, not EditText.
<android.support.design.widget.TextInputLayout
android:id="#+id/emailLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:labelFor="#+id/email"
app:layout_constraintLeft_toLeftOf="#+id/activity_login"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/activity_login"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="#+id/activity_login"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/activity_login"
android:layout_marginBottom="16dp">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/email"
android:inputType="textEmailAddress"
android:hint="#string/email"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="11dp"
/>
</android.support.design.widget.TextInputLayout>
In my case i just put the below line it worked fine
android:inputType="textEmailAddress"
android:imeOption="yourAction"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp"
Include these lines in textInputLayout.