I would like to make my EditText fields look like in Google Calendar app:
Does anyone have some snippet to get that look with minimal cost?
I have a same EditText in one of my projects.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#android:color/darker_gray"
android:minHeight="?android:attr/actionBarSize"
android:theme="#style/ToolbarTheme">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/toolbar_title_new"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#android:color/transparent"
android:hint="Enter title"
android:paddingBottom="16dp"
android:textAppearance="#style/TextAppearance.AppCompat.Subhead"
android:textColor="#android:color/white"
android:textColorHint="#android:color/white" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Here is the xml code for "add location" part:
<ImageView
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:alpha="0.54"
android:src="#mipmap/ic_action_place_dark"
app:layout_column="0"
app:layout_columnSpan="1"
app:layout_gravity="fill|start"
app:layout_row="8" />
<EditText
android:id="#+id/location_new"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
android:gravity="start|center_vertical"
android:paddingBottom="16dp"
android:paddingTop="16dp"
android:textAppearance="#style/TextAppearance.AppCompat.Subhead"
app:layout_column="1"
app:layout_columnSpan="2"
app:layout_gravity="fill|start"
app:layout_row="8"
android:hint="Add Location"
/>
As I mentioned in comment the key points are in background color and text color and padding.
The row and column and other attributes here are for using GridLayout. You can achieve the same design by using RelativeLayout.
Related
I need to create a shadow for EditText as shown here - design .
I was able to partially recreate the same using the code below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".SignupActivity">
<ImageView
android:id="#+id/signinPageLogo"
android:layout_width="171dp"
android:layout_height="160dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="132dp"
android:src="#drawable/dummy_logo" />
<TextView
android:id="#+id/signinAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/signinPageLogo"
android:layout_centerHorizontal="true"
android:text="#string/welcomePageText1"
android:textSize="30sp"
android:textStyle="bold" />
<androidx.cardview.widget.CardView
android:id="#+id/signinEmailIdCardView"
android:layout_width="234dp"
android:layout_height="73dp"
android:layout_below="#+id/signinAppName"
android:layout_centerHorizontal="true"
android:layout_marginStart="6dp"
android:layout_marginTop="109dp"
android:layout_marginEnd="6dp"
android:outlineSpotShadowColor="#color/teal_700"
android:layout_marginBottom="10dp"
app:cardCornerRadius="10dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<EditText
android:id="#+id/signinEmailId"
android:layout_width="211dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/rounded_edittext"
android:hint="#string/signinPageText1"
android:inputType="textEmailAddress"
android:padding="10dp" />
</androidx.cardview.widget.CardView>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/signinPassword"
android:layout_width="211dp"
android:layout_height="wrap_content"
android:layout_below="#id/signinEmailIdCardView"
android:layout_centerHorizontal="true"
app:boxBackgroundColor="#color/white"
app:boxBackgroundMode="none"
app:hintEnabled="false"
app:passwordToggleDrawable="#drawable/show_password_selector"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/signinPageText2"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/signinForgotPass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/signinPassword"
android:layout_alignEnd="#id/signinPassword"
android:text="#string/signinPageText3" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/signinButton"
android:layout_width="256dp"
android:layout_height="64dp"
android:layout_below="#+id/signinForgotPass"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="#drawable/button_style"
android:gravity="center"
android:text="#string/welcomePageText1"
android:textAllCaps="false" />
</RelativeLayout>
But I need to increase the shadow length to get the correct effect. The design I am able to produce now - my design
The android:outlineSpotShadowColor is limited to above 28 api only. so is there any other alternative for this? Please advice to get this shadow effect properly.. Thanks a lot!
You can try using the "elevation" property. Here is the documentation: https://developer.android.com/training/material/shadows-clipping .
To change the color you will need to use Carbon (https://github.com/ZieIony/Carbon). You could also see this answer: Android change Material elevation shadow color .
I want to show the label "Km" with a white background with the same height as that of the edit text field.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayoutInputDist"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="wrap_content"
android:layout_height="42dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/inputDist"
android:layout_width="80dp"
android:layout_height="match_parent"
android:background="#drawable/bg_left_corner_shape"
android:backgroundTint="#android:color/white"
android:fontFamily="#font/roboto_regular"
android:imeOptions="actionDone"
android:inputType="numberDecimal"
android:maxEms="4"
android:padding="4dp"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/label_km"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:background="#drawable/bg_right_corner_shape"
android:backgroundTint="#android:color/white"
android:fontFamily="#font/roboto_regular"
android:gravity="center_vertical"
android:text="#string/km"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textInputLayoutInputDist"
app:layout_constraintTop_toTopOf="#+id/textInputLayoutInputDist" />
</androidx.constraintlayout.widget.ConstraintLayout>
But the TextInputLayout is taking some more height that the edit text field, I cant align the edit text and the "Km" label vertically the same levels.
As I understand your question check below answer
Give kmLable top and bottom constraint to edit text. Here I give fix width for a temporary purpose (change according to your requirement).
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayoutInputDist"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_margin="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/inputDist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/dividerColor"
android:fontFamily="#font/roboto_bold"
android:imeOptions="actionDone"
android:inputType="numberDecimal"
android:maxEms="4"
android:padding="4dp"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/label_km"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#color/dividerColor"
android:fontFamily="#font/roboto_medium"
android:gravity="center_vertical"
android:text="km"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/textInputLayoutInputDist"
app:layout_constraintStart_toEndOf="#+id/textInputLayoutInputDist"
app:layout_constraintTop_toTopOf="#+id/textInputLayoutInputDist" />
</androidx.constraintlayout.widget.ConstraintLayout>
try
setHintEnabled(false)
in your xml like this:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayoutInputDist"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_margin="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/inputDist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/dividerColor"
android:fontFamily="#font/roboto_bold"
android:imeOptions="actionDone"
android:inputType="numberDecimal"
android:maxEms="4"
android:padding="4dp"
android:textColor="#color/colorPrimaryDark"
android:textSize="14sp" />
</com.google.android.material.textfield.TextInputLayout>
In my application i want show views into TextInputLayout.
I want show EditText, TextView (for show countDownTimer) and View (for show line)!
Such as Below Image :
I write below codes, but i can show just EditText and i can't show any other views, such as TextView and View!
My XML codes :
<android.support.design.widget.TextInputLayout
android:id="#+id/signInFrag_phoneInpLay"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="8dp"
app:boxStrokeColor="#color/colorAccent"
app:boxStrokeWidth="1dp">
<EditText
android:id="#+id/edtLogin1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:drawableEnd="#drawable/ic_phone"
android:drawableRight="#drawable/ic_phone"
android:gravity="right|center_vertical"
android:hint="Phone Number"
android:inputType="phone"
android:maxLength="11"
android:maxLines="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:singleLine="true"
android:textColorHint="#c0c0c0"
android:textSize="12sp" />
</android.support.design.widget.TextInputLayout>
How can i change my code for show such as above image?
You can set view as overlap on textInputLayout by constraintLayout. May be it has risk to overlap editText`s text with count text or vertical view. But i found in your text view has text limit. so For your reason it is not possible overlap the count text view.
Code **
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search Page"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:boxStrokeColor="#color/colorAccent"
app:boxStrokeWidth="1dp"
app:hintEnabled="true"
app:layout_constraintTop_toBottomOf="#+id/title">
<EditText
android:id="#+id/edtLogin1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:drawableStart="#drawable/ic_action_profile"
android:gravity="left|center_vertical"
android:hint="Phone Number"
android:inputType="phone"
android:maxLength="11"
android:maxLines="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:singleLine="true"
android:textColorHint="#c0c0c0"
android:textSize="12sp" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/text_view_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="22sec"
app:layout_constraintBottom_toBottomOf="#+id/input_layout"
app:layout_constraintEnd_toEndOf="#+id/input_layout"
app:layout_constraintTop_toTopOf="#+id/input_layout" />
<View
android:id="#+id/view"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="#+id/input_layout"
app:layout_constraintEnd_toStartOf="#+id/text_view_time"
app:layout_constraintTop_toTopOf="#+id/input_layout" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am trying to use material design textfields in my android project.
Problem
when I use TextInputLayout and TextInputEditText in my xml code, I get an error that these two classes are not recognised or found.
I tried importing design support library but that didn't work.
Question
How can I use material design textfields in my android project?
My Target SDK version is 28
Here's my xml code
<android.support.constraint.ConstraintLayout
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:background="#android:color/background_light"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/pickImgBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Pick Image"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="0dp"
app:layout_constraintTop_toTopOf="parent"
style="?android:attr/borderlessButtonStyle"
android:onClick="pickImage" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textfieldContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/pickImgBtn">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/toptextfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="add top text"
android:padding="10dp"
android:layout_margin="10dp" />
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/bottomtextfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="add top text"
android:padding="10dp"
android:layout_margin="10dp" />
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="#+id/createMemeBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Create Meme"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toBottomOf="#id/textfieldContainer"
style="?android:attr/borderlessButtonStyle" />
<android.support.constraint.ConstraintLayout
android:id="#+id/memeLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="51dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/createMemeBtn">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#android:color/darker_gray"/>
<TextView
android:id="#+id/toptext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Insert Top Text Here"
android:layout_weight="0"
android:textSize="25sp"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:gravity="center"
android:textStyle="bold"
android:textColor="#fff"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/bottomtext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="Insert Bottom Text Here"
android:textSize="25sp"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:gravity="center"
android:textStyle="bold"
android:textColor="#fff"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
<Button
android:id="#+id/saveMemeBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Save Image"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toBottomOf="#id/memeLayout"
style="?android:attr/borderlessButtonStyle" />
</android.support.constraint.ConstraintLayout>
You need to use below code:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email" />
</android.support.design.widget.TextInputLayout>
If you want to use Material Text Fields you need to add Material Library
implement com.google.android.material:material:1.0.0-beta01
Note: You should not use the com.android.support and com.google.android.material dependencies in your app at the same time.
Please read instructions here
try to complie this in gradle
implementation 'com.android.support:design:28.0.0-alpha3'
and this in your xml
<android.support.design.widget.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/light_white"
app:boxStrokeColor="#color/light_white"
app:boxStrokeWidth="1dp">
<com.lynx.zaindelivery.views.ZainEditText
android:id="#+id/ActivityLoginMobileNumberOrEmailEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/mobile_number_or_email" />
</android.support.design.widget.TextInputLayout>
note you can try different style
In my App I'm using a Custum Dialog (android.app.Dialog) with three Edit Texts in it. I'm able to set the next focus from the first to the second EditText when I press the next Button on the SoftKeyboard, but it doesen't work to set the focus on the third EditText. I already tried to set nextFocusForward or nextFocusDown and so on but it still doesn't work.
Here is the XML Layout from my Custom Dialog:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/addcard_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/dialog_addcard_info" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="#+id/addcard_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:hint="#string/name"
android:inputType="text"
android:lines="1"
android:maxLines="1"
android:scrollHorizontally="true" />
<EditText
android:id="#+id/addcard_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:hint="#string/number"
android:inputType="number"
android:maxLength="16"
android:scrollHorizontally="true"/>
<EditText
android:id="#+id/addcard_pin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:hint="#string/pin"
android:inputType="numberPassword"
android:maxLength="4"
android:textSize="14sp"
android:scrollHorizontally="true"/>
</LinearLayout>
<TextView
android:id="#+id/addcard_errormessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="#string/error"
android:textColor="#ff0000"
android:textStyle="bold"
android:visibility="gone" />
<Button
android:id="#+id/addcard_verify"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="#string/verify" />
</LinearLayout>
Does anyone have an idea why i'm not able to set the focus on the third EditText?
Thanks in advance.
try this one in your code :)
<EditText
android:id="#+id/addcard_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:hint="#string/number"
android:inputType="number"
android:maxLength="16"
android:imeOptions="actionNext" // try this one
android:nextFocusDown="#+id/addcard_errormessage" // and add this one
android:scrollHorizontally="true"/>