I am facing a problem with the position of the error indicator of my EditText when calling editText.setError("...").
As you can see in the screenshot I am using a BottomSheetDialog with an EditText inside of it. When I display the error indicator, the text is completely out of place. It seems as if the dialog "thinks" that it is full-screen, while it is actually not.
This is my dialog layout file (phone_dialog.xml):
<android.support.constraint.ConstraintLayout 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="wrap_content"
android:layout_weight="0"
android:orientation="vertical">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:padding="#dimen/padding_layout_normal"
android:text="#string/dialog_title_edit_phone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<EditText
android:id="#+id/etPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:inputType="phone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTitle"/>
<Button
android:id="#+id/btnSavePhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/etPhone"/>
</android.support.constraint.ConstraintLayout>
My Activity layout file (activity_contacts.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/rvContacts"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
This is how I show the dialog from my Activity:
PhoneBottomDialog dialog = new PhoneBottomDialog(Context);
dialog.show();
This is my PhoneBottomDialog class:
public class PhoneBottomDialog extends BottomSheetDialog {
public PhoneBottomDialog(Context context) {
super(context);
View view = getLayoutInflater().inflate(R.layout.phone_dialog, null);
setContentView(view);
// additional setup below this...
}
// ...
}
I am not performing any other layouting inside my custom PhoneButtomDialog. Changing the root layout of my dialog to RelativeLayout or LinearLayout as well as adding a ScrollView did not change anything. It's also not a device or specific Android version related issue as the problem occurs on all of my testing devices ranging from Android 5.0 to 7.1, it also occurs on the emulator.
Does anyone have an idea why this is happening?
You can use TextInputLayout and inside that you can define Edit Text.
I have done some modification inside your phone_dialog.xml.
phone_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_gravity="bottom"
android:background="#android:color/holo_blue_light"
android:padding="10dp"
app:behavior_hideable="true"
app:behavior_peekHeight="60dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center"
android:padding="10dp"
android:text="dialog_title_edit_phone" />
<android.support.design.widget.TextInputLayout
android:id="#+id/inputPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/TextInputLayoutLabel">
<EditText
android:id="#+id/etPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter phone"
android:imeOptions="actionDone"
android:inputType="phone"
android:maxLines="1"
android:textSize="20sp" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/btnSavePhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etPhone"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="8dp"
android:text="Save" />
</LinearLayout>
</FrameLayout>
Inside style.xml add this.
<style name="TextInputLayoutLabel" parent="Widget.Design.TextInputLayout">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#android:color/black</item>
<item name="android:textSize">15sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorControlNormal">#color/colorAccent</item>
<item name="colorControlActivated">#color/colorAccent</item>
</style>
PhoneBottomDialog.java
public class PhoneBottomDialog extends BottomSheetDialog {
TextInputLayout inputPhone;
EditText edtPhone;
Button btnSave;
public PhoneBottomDialog(Context context) {
super(context);
View view = getLayoutInflater().inflate(R.layout.phone_dialog, null);
setContentView(view);
// additional setup below this...
inputPhone = (TextInputLayout) view.findViewById(R.id.inputPhone);
edtPhone = (EditText) view.findViewById(R.id.etPhone);
btnSave = (Button) view.findViewById(R.id.btnSavePhone);
btnSave.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (!validatePhone())
return;
}
});
}
private boolean validatePhone() {
if (edtPhone.getText().toString().isEmpty()) {
inputPhone.setError("Please enter valid phone number with country code.");
requestFocus(edtPhone);
return false;
} else {
inputPhone.setErrorEnabled(false);
}
return true;
}
private void requestFocus(View view) {
if (view.requestFocus()) {
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
}
}
// ...
}
And inside Activity.
#SuppressLint("SetTextI18n")
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test24);
mContext = this;
this.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
PhoneBottomDialog dialog = new PhoneBottomDialog(mContext);
dialog.show();
}
Below you can see the output for this.
add compile 'com.android.support:design:24.2.0' in gradle dependencies
use TextInputLayout in xml.
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputServer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="36dp"
app:errorTextAppearance="#style/TextErrorAppearance">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
........./>
</android.support.design.widget.TextInputLayout>
From Lollipop(5.0) version android provide TextInputLayout to do this.
Use below xml and java code to show same type view.
abc.xml:
<android.support.design.widget.TextInputLayout
android:id="#+id/text_input_layout_user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
app:theme="#style/AppTheme">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:imeOptions="actionNext"
android:inputType="text"
android:singleLine="true"
android:textColor="#color/icons"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
Abc.java:
private TextInputLayout
textInputLayout_User = (TextInputLayout) findViewById(R.id.text_input_layout_user);
textInputLayout_User.setError(getString(R.string.valid_username));
Related
Hello i'm stcuk by a little problem,
I want to add a new CardView with same set of the first CardView underneath the first Cardview only when i click on my button and this action can be repetable endlessly.
Because i'm beginner in android and i have litterally no idea how to make that.
If anyone can Copy Past this code and help me i will be very happy.
I know the spinner is void but its for after i just want to duplicate this.
my activity :
package com.example.lif.test;
public class testActivity extends AppCompatActivity {
Spinner idSpinnerLance;
EditText idEdtTempsLance;
TextView idTextViewPuissance, textViewTitre;
Button idButtonAdd;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
idSpinnerLance = findViewById(R.id.idSpinnerLance);
idEdtTempsLance = findViewById(R.id.idEdtTempsLance);
textViewTitre = findViewById(R.id.textViewTitre);
idTextViewPuissance = findViewById(R.id.idTextViewPuissance);
idButtonAdd = findViewById(R.id.idButtonAdd);
idButtonAdd.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
}
});
}
}
and my xml code :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".test.testActivity">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
android:layout_margin="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ajouter une lance :"
android:textColor="?android:textColorPrimary"
android:textSize="15dp"
android:textStyle="bold" />
<Spinner
android:id="#+id/idSpinnerLance"
android:layout_width="150dp"
android:layout_height="47dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Temps :"
android:textColor="?android:textColorPrimary"
android:textSize="15dp"
android:textStyle="bold" />
<EditText
android:id="#+id/idEdtTempsLance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/idButtonAdd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="add" />
</LinearLayout>
</ScrollView>
thank you
If those CardView will contain different data you can use a RecyclerView and on button click you can add an item in the list and notify the adapter this will add a new item(here item is your CardView created in a different XML file) on screen.
This could be helpful
and this too
I was updating an existing code by introducing dismiss button, and the onClick Butterknife method is not working for dismiss button, whereas its working for close button. In the below code, I am enabling the close button for some devices and for other devices I am enabling the dismiss button. I am quite unsure why this "dismiss" button is not working, whereas the close button is working fine. And both of them use the ButterKnife, onClick method - onSkip()
InfoActivity.java :
public class InfoActivity extends BccActiviy {
#BindView(R.id.ImageView_CloseView)
ImageView tCloseView;
#BindView(R.id.Dismiss)
Button tDismiss;
.....
#OnClick({R.id.Dismiss, R.id.ImageView_CloseView})
public void onSkip(View v) {
onDissmissPressed();
}
public void initialize(Bundle savedInstanceState) {
if (tConfig.isDismiss()) {
tCloseView.setVisibility(View.GONE);
tDismiss.setVisibility(View.VISIBLE);
} else {
tDismiss.setVisibility(View.GONE);
}
}
}
info_screen.xml :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:ignore="All"
android:id="#+id/root_layout"
android:background="#color/fd_theme"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ImageView_CloseView"
style="#style/CancelButton"
android:layout_width="#di/target_size"
android:layout_marginTop="#di/p_6"
android:layout_height="#di/target_size"
android:layout_alignParentStart="true"
android:clickable="true"
android:contentDescription="#string/close_btn_txt"
android:importantForAccessibility="yes"
android:paddingStart="#di/p_14"
android:paddingEnd="#di/p_14"
android:background="?attr/bg_color"
app:srcCompat="#drawable/icn_close_white"/>
<LinearLayout
android:id="#+id/TextView_Layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/TextContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="#di/size_2x"
android:focusableInTouchMode="true"
android:gravity="center"
android:text="#string/text"
android:textColor="#color/white"
android:textSize="#di/rating"
android:textAlignment="center"/>
<com.package.button.star.views.widgets.StaView
android:id="#+id/StarView_AppRating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center">
</com.package.button.star.views.widgets.StarView>
<Button
android:id="#+id/Dismiss"
style="#style/buttonStyle"
android:layout_marginTop="#di/margin_top"
android:paddingLeft="#di/padding_50"
android:paddingTop="#di/padding_18"
android:paddingRight="#di/padding_50"
android:paddingBottom="#di/padding_18"
android:text="Dismiss"
android:onClick="onSkip"
android:textAlignment="center"
android:textAllCaps="false"
android:textSize="#di/dismiss_fontSize"
android:visibility="visible"
android:focusable="true"
tools:text="Dismiss" />
<ViewStub
android:id="#+id/actions_stub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#di/margin_center"
android:inflatedId="#+id/view_actions"
android:layout="#layout/view_actions" />
</LinearLayout>
</FrameLayout>
Try removing the onClick from xml.
I have an alert dialog which popups when you click a button in my app. The code is pretty simple and can be seen below:
final String[] options = {"Bar Graph", "Pie Chart", "Text Summary"};
AlertDialog.Builder builder = new AlertDialog.Builder(myActivity.this);
builder.setTitle("Choose a summary");
builder.setIcon(R.drawable.summaryicon);
builder.setItems(options, ... );
See below an image of what it looks like. This is good.
However, strangely sometimes when I build my app on the emulator the theme of the alert dialog changes and looks like this instead:
I cannot imagine what would be causing this random change in a seemingly unpredictable way.
I have tried using this line to set the theme manually, but it seems to have no effect.
ContextThemeWrapper themedContext = new ContextThemeWrapper( AnalysisActivity.this, android.R.style.ThemeOverlay_Material_Dialog_Alert );
AlertDialog.Builder builder = new AlertDialog.Builder(themedContext);
...
I am confused and looking for a way to set the theme manually or ensure it doesn't change from the default.
I can't entirely tell if the rest of my app also experiences the same theme change because most has all been overridden by custom code, but I don't believe it is changing. Any ideas would be welcome.
Note: this alternate theme looks like an older theme so perhaps there is some version issue?
try this code...
step-1: create layout file of your alert dialog(this layout is your designed alertDialog)
step-2: and use this code
public void displayAlertDialog() {
LayoutInflater factory = LayoutInflater.from(this);
final View alertDialogView = factory.inflate(R.layout.alert_dialog, null);
final AlertDialog alertDialog = new AlertDialog.Builder(this).create();
alertDialog.setView(alertDialogView);
alertDialogView.findViewById(R.id.bar_graph).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//your business logic
alertDialog.dismiss();
}
});
alertDialogView.findViewById(R.id.pie_chart).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//your business logic
alertDialog.dismiss();
}
});
alertDialogView.findViewById(R.id.text_summary).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//your business logic
alertDialog.dismiss();
}
});
alertDialog.show();
}
Along with Dinesh Sarma's answer the code I have now implemented to create the alertdialog activity can be seen here.
It creates a layout that looks like this:
Use this layout code in a file called alert_dialog.xml:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_light"
android:orientation="horizontal"
android:weightSum="12">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_weight="7"
android:contentDescription="Icon"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:scaleType="fitCenter"
app:srcCompat="#drawable/summaryicon" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="5"
android:gravity="center_vertical"
android:text="Choose a Summary"
android:textSize="18sp"
android:textStyle="normal" />
</LinearLayout>
<Button
android:id="#+id/bar_graph"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#android:color/background_light"
android:gravity="center_vertical"
android:paddingStart="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="Pie Chart"
android:textAllCaps="false"
android:typeface="sans" />
<Button
android:id="#+id/pie_chart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#android:color/background_light"
android:gravity="center_vertical"
android:paddingStart="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="Bar Graph"
android:textAllCaps="false"
android:typeface="sans" />
<Button
android:id="#+id/text_summary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#android:color/background_light"
android:gravity="center_vertical"
android:paddingStart="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="Text Summary"
android:textAllCaps="false"
android:typeface="sans" />
</LinearLayout>
I am creating the simple login screen having textimputlayout floating labels.
The java file and xml is given below.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_send_cryptocurrency);
// get the reference of View's
emailTextInputLayout = (TextInputLayout) findViewById(R.id.emailTextInputLayout);
passwordTextInputLayout = (TextInputLayout) findViewById(R.id.passwordTextInputLayout);
email = (EditText) findViewById(R.id.emailEditText);
password = (EditText) findViewById(R.id.passwordEditText);
signIn = (Button) findViewById(R.id.signInButton);
// perform click event on sign In Button
signIn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (validate(email, emailTextInputLayout) && validate(password, passwordTextInputLayout)) {
// display a Thank You message
Toast.makeText(getApplicationContext(), "Thank You", Toast.LENGTH_LONG).show();
}
}
});
}
// validate fields
private boolean validate(EditText editText, TextInputLayout textInputLayout) {
if (editText.getText().toString().trim().length() > 0) {
return true;
}
editText.requestFocus(); // set focus on fields
textInputLayout.setError("Please Fill This.!!!"); // set error message
return false;
}
and the xml file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<!-- first TextInputLayout -->
<android.support.design.widget.TextInputLayout
android:id="#+id/emailTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android.support.design:counterMaxLength="3">
<EditText
android:id="#+id/emailEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email Id" />
</android.support.design.widget.TextInputLayout>
<!-- first TextInputLayout -->
<android.support.design.widget.TextInputLayout
android:id="#+id/passwordTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password">
<EditText
android:id="#+id/passwordEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
<!-- sign In Button -->
<Button
android:id="#+id/signInButton"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="Sign In"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold" />
and the screen shot is
I have searched and tried a lot for edit text visibilty but not finding any proper reason when i give the background to xml file like any color it displays. But in the white background it is not visible . Please guide me for the mentioned issue.
You can change color of floating labels using theme, just add below code in your styles.xml
<style name="TextAppearence.App.TextInputLayout" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/red</item>
<item name="android:textSize">14sp</item>
</style>
And then apply this theme to you TextInputLayout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/gray"
app:hintTextAppearance="#style/TextAppearence.App.TextInputLayout">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint" />
</android.support.design.widget.TextInputLayout>
This question already has answers here:
Outlined Edit Text from Material Design
(7 answers)
Closed 4 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I am trying to create custom TextInputLayout. How can I create below custom TextInputLayout?
You should use Material Design style for Outline Box. Just simple use:
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
in TextInputLayout. See Text Field for Android in Material Design Guide
Here is an workaround:
1. Design your layout structure as below:
activity_test.xml
<?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:padding="16dp"
android:background="#android:color/white">
<!-- Username -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_rounded_input_field" />
<TextView
android:id="#+id/text_dummy_hint_username"
android:layout_width="wrap_content"
android:layout_height="2dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="16dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="Username"
android:textSize="16sp"
android:background="#android:color/white"
android:visibility="invisible"/>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:hint="Username"
android:textColorHint="#android:color/black"
app:hintTextAppearance="#style/HintTextStyle">
<EditText
android:id="#+id/edit_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text|textCapWords"
android:maxLines="1"
android:backgroundTint="#android:color/transparent"/>
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
<!-- Password -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<View
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_rounded_input_field" />
<TextView
android:id="#+id/text_dummy_hint_password"
android:layout_width="wrap_content"
android:layout_height="2dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="16dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="Password"
android:textSize="16sp"
android:background="#android:color/white"
android:visibility="invisible"/>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:hint="Password"
android:textColorHint="#android:color/black"
app:hintTextAppearance="#style/HintTextStyle">
<EditText
android:id="#+id/edit_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLines="1"
android:backgroundTint="#android:color/transparent"/>
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
</LinearLayout>
2. Use below drawable bg_rounded_input_field.xml for rounded corners.
res/drawable/bg_rounded_input_field.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:color="#android:color/black"
android:width="2dp">
</stroke>
<corners
android:radius="8dp">
</corners>
</shape>
3. Use below HintTextStyle to TextInputLayout by adding attribute app:hintTextAppearance="#style/HintTextStyle".
res/values/styles.xml
<style name="HintTextStyle" parent="TextAppearance.Design.Hint">
<item name="android:textSize">16sp</item>
</style>
4. Finally, in your Activity just show/hide TextView text_dummy_hint_username and text_dummy_hint_password
during focus change.
FYI, I have used Handler with delay 100 millis to
show the dummy hints TextView to sync with TextInputLayout hint text
animation.
TestActivity.java
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
public class TestActivity extends AppCompatActivity {
TextView textDummyHintUsername;
TextView textDummyHintPassword;
EditText editUsername;
EditText editPassword;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
textDummyHintUsername = (TextView) findViewById(R.id.text_dummy_hint_username);
textDummyHintPassword = (TextView) findViewById(R.id.text_dummy_hint_password);
editUsername = (EditText) findViewById(R.id.edit_username);
editPassword = (EditText) findViewById(R.id.edit_password);
// Username
editUsername.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
// Show white background behind floating label
textDummyHintUsername.setVisibility(View.VISIBLE);
}
}, 100);
} else {
// Required to show/hide white background behind floating label during focus change
if (editUsername.getText().length() > 0)
textDummyHintUsername.setVisibility(View.VISIBLE);
else
textDummyHintUsername.setVisibility(View.INVISIBLE);
}
}
});
// Password
editPassword.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
// Show white background behind floating label
textDummyHintPassword.setVisibility(View.VISIBLE);
}
}, 100);
} else {
// Required to show/hide white background behind floating label during focus change
if (editPassword.getText().length() > 0)
textDummyHintPassword.setVisibility(View.VISIBLE);
else
textDummyHintPassword.setVisibility(View.INVISIBLE);
}
}
});
}
}
OUTPUT:
Hope this will help~