Develop Reference

How do I align a checkbox and edittext field side by side in android?

I am trying to make a checkbox and an edittext field side by side inside my LinearLayout. This is my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottom_dialog"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/report_bill_period"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Incorrect bill period"
android:layout_marginEnd="10dp"
android:layout_marginStart="30dp"
android:layout_marginBottom="5dp">
</com.google.android.material.checkbox.MaterialCheckBox>
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/report_bill_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Incorrect bill amount"
android:layout_marginEnd="10dp"
android:layout_marginStart="30dp"
android:layout_marginBottom="5dp">
</com.google.android.material.checkbox.MaterialCheckBox>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/anything_else"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginBottom="5dp">
</com.google.android.material.checkbox.MaterialCheckBox>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:background="#color/white"
android:hint="Anything else?"
android:textColor="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:inputType="textCapCharacters"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAlignment="center"
android:lines="10"
android:maxLines="10" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</LinearLayout>
This is the output that I get:
enter image description here
As you can see in the screenshot, the third checkbox isn't aligned properly with the first two checkboxes. How do I fix this issue?

Set linear layout gravity to center
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<!-- checkbox and textfield code -->
</LinearLayout>
You can also use a relative layout
Or you can also wrap checkbox and textfield inside a constraint layout and constraint the children in such a way that they become vertically centered

Add minWidth and minHeight for Checkbox. It will remove the default padding.
android:minWidth="0dp"
android:minHeight="0dp"

How to align text in TextInputLayout in android?

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>

EditText height changes according to the text size

If I change the textsize in editext, the height of edittext changes accordingly. I want the size of edittext to be same and I want a smaller sized hint or text to be in it. What should I do? Following is the code and I am also posting the screenshot of this layout :
<RelativeLayout
android:id="#+id/normal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4594e4"
android:orientation="horizontal">
<ImageView
android:id="#+id/set"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_marginTop="05dp"
android:padding="5dp"
android:src="#drawable/bari" />
<EditText
android:id="#+id/etOrigin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_10sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:text="My Location"
android:textColor="#434343"
android:textIsSelectable="true" />
<EditText
android:id="#+id/etDestination"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etOrigin"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_5sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:onClick="wow"
android:text="Where to go ?"
android:textColor="#fff"
android:textColorHint="#fff" />
<ImageView
android:id="#+id/swipe"
android:layout_width="30dp"
android:layout_height="27dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/_5sdp"
android:background="#drawable/flip" />
</RelativeLayout>
Screenshot of the layout before changing:
Screenshot of layout after changing textsize:

Try using android:minHeight and android:maxHeight attributes :
<EditText
android:id="#+id/etUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_username"
android:imeOptions="actionNext"
android:inputType="textPersonName"
android:maxLines="1"
android:gravity="center_vertical"
android:minHeight="?actionBarSize"
android:maxHeight="?actionBarSize"
android:textColor="#color/textPrimary"
android:textSize="12sp"/>
<EditText
android:id="#+id/etUserEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_username"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:gravity="center_vertical"
android:minHeight="?actionBarSize"
android:maxHeight="?actionBarSize"
android:textColor="#color/textPrimary"
android:textSize="14sp"/>

Use padding for this :-
<EditText
android:id="#+id/etOrigin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_10sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:text="My Location"
android:textColor="#434343"
android:textIsSelectable="true" />

Give fix height to the layout android:layout_height="75dp"
<EditText
android:id="#+id/etOrigin"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_10sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:text="My Location"
android:textColor="#434343"
android:textIsSelectable="true"/>

Here, try this third party library.
Your TextView height would be fixed but your textView size will be adjusted
dependencies {
compile 'me.grantland:autofittextview:0.2.+'
}
Enable any View extending TextView in code:
AutofitHelper.create(textView);
Enable any View extending TextView in XML:
<me.grantland.widget.AutofitLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
/>
</me.grantland.widget.AutofitLayout>
Use the built in Widget in code or XML:
<RootElement
xmlns:autofit="http://schemas.android.com/apk/res-auto"
...
<me.grantland.widget.AutofitTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:maxLines="2"
android:textSize="40sp"
autofit:minTextSize="16sp"
/>
For more information, visit below link:
https://github.com/grantland/android-autofittextview

You can explicitly set the height and size of your EditText view as well as the text in it.
To set the heigh of the EditText simply use :
android:layout_height="<height_you_want>dp"
And to set height of the text in your EditText view :
android:textSize="<height_you_want>sp"
And you can simultaneously view the changes in the preview tab of AndroidStudio.

One Solution : include these two lines in your XML file
android:maxLines="1"
android:singleLine="true"

Using the EditText inside of a ConstraintLayout will fix this.
...
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="17">
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="1"
android:textSize="24sp"
android:text="foo"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

Designing password text with show password button

I am trying to design EditText for password with show password imageView. However I cannot design it correctly beacuse I cannot see ImageView, since EditText's layout_width="fill_parent". When I change it to wrap_content, I can see my ImageView but then it looks very bad in UI. Is it possible to design it without giving fixed size?
Here is my code;
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:layout_marginBottom="8dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<EditText
android:id="#+id/registerPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/register_password"
android:inputType="textPassword" />
<ImageView
android:id="#+id/fragment_login_password_visibility"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_partial_secure"
android:layout_gravity="center"
android:clickable="true"/>
</LinearLayout>
</android.support.design.widget.TextInputLayout>
EDIT:
android:layout_weight=1 solved issue. Now I can see ImageView left of EditText. However now, I TextInputLayout hint is not working.

You don't need use ImageView.
Support Library adds support for the password visibility toggle in recent update (revision 24.2.0 - August 2016).
try it:
setPasswordVisibilityToggleDrawable(int resId)
Set the icon to use for the password visibility toggle button.
https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

First set android:weightSum of LinearLayout to "1". Then, set android:layout_width and android:layout_weight of EditText to "0dp" and "1", respectively.

Did you try to use weight?
android:layout_weight="1"
and
android:layout_width="0dp" or android:layout_width="wrap_content"
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:layout_marginBottom="8dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<EditText
android:id="#+id/registerPassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/register_password"
android:inputType="textPassword" />
<ImageView
android:id="#+id/fragment_login_password_visibility"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_partial_secure"
android:layout_gravity="center"
android:clickable="true"/>
</LinearLayout>
</android.support.design.widget.TextInputLayout>

Try this :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/editText"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Password"
android:singleLine="true"
android:textSize="25sp"
android:paddingRight="60dp"
/>
<ImageButton
android:id="#+id/showpass"
android:layout_marginLeft="-60dp"
style="?android:buttonBarButtonStyle"
android:paddingBottom="5dp"
android:src="#drawable/pass_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

I recommend using a TextInputLayout with passwordToggleDrawable .
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputPasswordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:passwordToggleContentDescription="Show"
app:passwordToggleDrawable="#drawable/ic_password_visibility_selector"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/textInputEditTextPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:fontFamily="sans-serif-light"
android:gravity="bottom"
android:hint="#string/enter_your_password"/>
</android.support.design.widget.TextInputLayout>
app:passwordToggleDrawable="#drawable/ic_password_visibility_selector" assign your drawable

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"