I have a box to type in the user's username, and when the area is selected, I want the "username" text to slide up so it is still visible when typing the username. See code for more information.
<ImageView
android:id="#+id/imageView8"
android:layout_width="332dp"
android:layout_height="45dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView7"
app:srcCompat="#drawable/input_background" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:fontFamily="#font/days_one"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Username"
android:textColor="#747474"
app:layout_constraintBottom_toBottomOf="#+id/imageView8"
app:layout_constraintStart_toStartOf="#+id/imageView8"
app:layout_constraintTop_toTopOf="#+id/imageView8" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can achieve this using TextInputLayout with an editText inside it
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/username_text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/etUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:ems="10"
android:hint="Username" />
</com.google.android.material.textfield.TextInputLayout>
check this link at the headline called "Displaying Floating Label Feedback
https://guides.codepath.com/android/Working-with-the-EditText#displaying-floating-label-feedback
Related
I have a card view with 2 radio buttons I want to show it as a dialogue
I want to achieve multiple things
Showing card view as a dialogue
blurring the background layout while showing the dialog
I have 2 radio buttons (only one is selectable) I want that after selecting one of them the dialogue will disappear but not immediately at least there should be a short delay so the user can see the selection of the radio button
Note:- If you want more references of the code please tell me I will
update the question as you can find I dint include the fragment_home
java file so the question doesn't get long and confusing
Here is the layout
sort_image.xml
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:backgroundTint="#color/grey"
app:cardCornerRadius="20dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/sort_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="5dp"
android:fontFamily="#font/roboto"
android:text="Sort by"
android:textAlignment="center"
android:textColor="#color/lite_grey"
android:textSize="25sp" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/divider_line_sort_by"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/sort_textView"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="10dp"
android:backgroundTint="#color/lite_grey"
app:cardCornerRadius="50dp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<TextView
android:id="#+id/latest_sort_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:fontFamily="#font/roboto"
android:text="Latest"
android:textAlignment="center"
android:textColor="#color/lite_grey"
android:textSize="25sp" />
<TextView
android:id="#+id/most_popular_sort_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/latest_sort_textView"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:layout_marginStart="30dp"
android:layout_marginTop="25sp"
android:fontFamily="#font/roboto"
android:text="Most Popular"
android:textAlignment="center"
android:textColor="#color/lite_grey"
android:textSize="25sp" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true">
<RadioButton
android:id="#+id/latest_sort_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25sp" />
<RadioButton
android:id="#+id/most_popular_sort_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
</RadioGroup>
</RelativeLayout>
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>
fragment_home.xml // This layout contains the text which I want that when pressed I open the dialogue and also this is the fragment/layout which I want to blur when showing the dialogue
Note:- only included the necessary code of this layout
<com.google.android.material.card.MaterialCardView
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:layout_toStartOf="#id/divider_line"
android:backgroundTint="#color/black"
android:elevation="6dp"
android:paddingBottom="10dp"
android:textAlignment="center"
app:cardCornerRadius="10dp">
<TextView
android:id="#+id/sort_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="5dp"
android:fontFamily="#font/roboto"
android:text="#string/sort"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="17sp"
android:textStyle="bold" />
</com.google.android.material.card.MaterialCardView>
I think you need to use dialog fragment. You can read more about that in official documentation https://developer.android.com/guide/fragments/dialogs
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>
This question already has answers here:
Android: How do I prevent the soft keyboard from pushing my view up?
(28 answers)
Closed 5 years ago.
I am quite new in Android UI design so please bear with me.
In a relative layout I have a number of different controls -- TextView, ET, Button etc, and at the bottom part a ListView is populated. On the load of the activity when the focus is going to the first input field (Edit Text) the keypad pushes up the ListView and it overlaps the other fields.
Below is the layout xml:
<?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"
android:background="#android:color/holo_orange_light"
tools:context="com.as.myexpense.AddExpenseAct"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/tvShowExpnDate"
android:layout_width="385dp"
android:layout_height="19dp"
android:allowUndo="true"
android:autoSizeTextType="uniform"
android:background="#color/colorAccent"
android:fontFamily="sans-serif"
android:foregroundTintMode="src_over"
android:text="Expense for the date"
android:textColor="#android:color/background_dark"
android:textSize="12sp"
android:textStyle="bold"
tools:ignore="HardcodedText,MissingConstraints,RtlHardcoded,UnusedAttribute"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="7dp" />
<TextView
android:id="#+id/txtChangeExpenseDate"
android:layout_width="88dp"
android:layout_height="17dp"
android:background="#android:color/holo_green_light"
android:text="Change Date"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvShowExpnDate"
tools:ignore="HardcodedText,MissingConstraints,RtlHardcoded"
android:layout_below="#+id/tvShowExpnDate"
android:layout_alignStart="#+id/etExpenseAmount" />
<TextView
android:id="#+id/tvAmount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/imgCategory"
android:layout_below="#+id/txtChangeExpenseDate"
android:text="Amount"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="#+id/tvShowExpnDate"
tools:layout_editor_absoluteX="48dp" />
<TextView
android:id="#+id/tvExpenseCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/imgCategory"
android:layout_below="#+id/etExpenseAmount"
android:text="Choose category"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="#+id/tvAmount"
tools:ignore="HardcodedText,MissingConstraints"
tools:layout_editor_absoluteX="48dp" />
<EditText
android:id="#+id/etExpenseAmount"
android:layout_width="125dp"
android:layout_height="40dp"
android:ems="8"
android:inputType="numberDecimal"
android:labelFor="#+id/etExpenseAmount"
app:layout_constraintLeft_toRightOf="#+id/tvAmount"
app:layout_constraintTop_toBottomOf="#+id/tvShowExpnDate"
app:srcCompat="#android:color/holo_orange_light"
android:layout_alignTop="#+id/tvAmount"
android:layout_toEndOf="#+id/imgCategory"
android:layout_marginStart="12dp" />
<ImageButton
android:id="#+id/imgCategory"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_alignStart="#+id/tvTotalExpense"
android:layout_below="#+id/tvExpenseCategory"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvExpenseCategory"
app:srcCompat="#android:color/holo_orange_light"
tools:ignore="ContentDescription" />
<EditText
android:id="#+id/etShortDescription"
android:layout_width="200dp"
android:layout_height="39dp"
android:layout_above="#+id/btnAddExpnToList"
android:layout_marginBottom="10dp"
android:layout_toEndOf="#+id/tvExpenseCategory"
android:autoText="true"
android:ems="10"
android:hint="#string/short_description"
android:inputType="textPersonName"
android:maxLines="1"
app:layout_constraintLeft_toRightOf="#+id/imgCategory"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="Deprecated,LabelFor" />
<Button
android:id="#+id/btnAddExpnToList"
android:layout_width="118dp"
android:layout_height="50dp"
android:layout_alignBottom="#+id/floatingActionButton"
android:layout_alignParentStart="true"
android:text="#string/Add"
android:textColor="#android:color/background_dark"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/etShortDescription" />
<Button
android:id="#+id/btnCancel"
android:layout_width="118dp"
android:layout_height="50dp"
android:layout_below="#+id/etShortDescription"
android:layout_marginStart="17dp"
android:layout_toEndOf="#+id/btnAddExpnToList"
android:text="#string/Cancel"
android:textColor="#android:color/background_dark"
android:visibility="invisible"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/etShortDescription" />
<ListView
android:id="#+id/lvExpenses"
android:layout_width="387dp"
android:layout_height="312dp"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/tvTotalExpense"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:background="?attr/colorButtonNormal"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnAddExpnToList" />
<TextView
android:id="#+id/tvTotalExpense"
android:layout_width="288dp"
android:layout_height="20dp"
android:layout_above="#+id/lvExpenses"
android:layout_marginStart="10dp"
android:text="Total expense "
android:visibility="invisible"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnAddExpnToList"
tools:ignore="HardcodedText" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/tvTotalExpense"
android:layout_alignEnd="#+id/etShortDescription"
android:layout_marginBottom="6dp"
android:clickable="true"
android:focusable="true"
app:srcCompat="#android:color/holo_orange_dark" />
<TextView
android:id="#+id/tvExpnCatDisplay"
android:layout_width="90dp"
android:layout_height="20dp"
android:layout_above="#+id/btnAddExpnToList"
android:layout_alignStart="#+id/imgCategory"
android:background="#00000000"
android:textColor="#color/common_google_signin_btn_text_dark_focused"
android:textSize="18sp"
android:textStyle="normal|bold" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/spTxnType"
android:layout_below="#+id/tvShowExpnDate"
android:layout_marginTop="9dp"
android:text="#string/payment_type"
android:textSize="18sp" />
<Spinner
android:id="#+id/spTxnType"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_below="#+id/textView3"
android:layout_toEndOf="#+id/btnCancel"
android:entries="#array/txnType_name"
android:spinnerMode="dialog"
android:theme="#style/AlertDialog.AppCompat" />
</RelativeLayout>
Below are the screenshots:
On load of the screen
Expected view
"adjustResize"
The activity's main window is always resized to make room for the soft keyboard on screen.
"adjustPan"
The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window.
according to your comment, use following in your activity manifest
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"/>
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.