Adding background to edittext breaks the layout - android

I'm try to design an input text view. Here is the code I use.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="7dp"
android:layout_margin="10dp"
app:cardCornerRadius="22dp"
android:backgroundTint="#ff7171">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true"/>
</android.support.v7.widget.CardView>
The thing I try to achieve is round corners and a little shadow under the layout. Here is the output of this code:
This gives me 2 disadvantage. First, I can't use floating label with this. This is a low priority. What bugs me is: the underline. I am trying to remove it. The common way people suggest was use:
android:background="#null"
However, when I use it, the output becomes like this:
How can I overcome this issue?

Create a file named background under drawable folder and paste the following codes.
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/background.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#00000000"/>
<stroke
android:width="1dp"
android:color="#00000000"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
Then rewrite the autocompletetextview as
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background.xml"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />

This might help you:
<android.support.v7.widget.CardView 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"
app:contentPadding="16dp"
android:backgroundTint="#ff7171"
app:cardCornerRadius="16dp">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
</android.support.v7.widget.CardView>
Here is the result:

Related

how to set circular password type blink focus in edit textview in android

This is my edit text view code xml
<EditText
android:id="#+id/otp_edit_box11"
android:layout_width="#dimen/dp_42"
android:layout_height="#dimen/dp_42"
android:layout_marginEnd="#dimen/dp_20"
android:background="#drawable/edittext_curve_bg"
android:focusable="true"
android:focusableInTouchMode="true"
android:textCursorDrawable="#drawable/cursor"
android:gravity="center"
android:inputType="numberPassword"
android:maxLength="1"
android:textSize="#dimen/sp_30"
tools:ignore="LabelFor" />
android:textCursorDrawable="#drawable/cursor" using this i am trying show custom blink when i select edit texview
this is my curssor.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#ff000000" />
<size android:width="100dp" />
</shape>
I am trying replace line blink to password type bullet blink please help me how to do this i tried with different to add android:textCursorDrawable="#drawable/cursor"
You can use material text input layout with material text input edit text to achieve this
<com.google.android.material.textfield.TextInputLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/etPasswordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/password_hint"
android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>

How do I create an input box using Android's Layout mechanism?

Using Android's Layout mechanism, how do I create an input box with the password icon, and a split between the icon and the input field, as shown below? I'd like to have the border around the input field as well.
you can use imageview and an edit text inside a layout like this
<RelativeLayout
android:layout_width="#dimen/_280sdp"
android:layout_height="#dimen/_30sdp"
android:id="#+id/rl_password"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="#dimen/_15sdp"
android:layout_height="#dimen/_15sdp"
android:src="#drawable/key"
android:layout_centerVertical="true"
android:id="#+id/iv_password"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Password"
android:layout_toRightOf="#+id/iv_password"
android:layout_centerVertical="true"
android:background="#00000000"
android:layout_marginLeft="#dimen/_8sdp"/>
</RelativeLayout>
Try This ....
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/background"
android:layout_margin="40dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:padding="10dp"
android:src="#drawable/your_image" />
<View
android:id="#+id/view"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#dbdbdb" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:padding="10dp"
android:inputType="textPassword"
android:background="#android:color/transparent"/>
</LinearLayout>
#drawable/background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#fafafa" />
<corners android:radius="2dp" />
<stroke android:width="1dp" android:color="#dbdbdb" />
</shape>
</item>
</selector>
Sorry, but you will not find a tutorial here.
we guys here don't put tutorial if you have any problem in implementing your code you can ask.
for now, you can watch this tutrial may help.

android: How to set margin/padding between EditText custom background and InputTextLayout Label?

Well I want to set margin/padding between EditText and InputTextLayout Label on Pressed State.
Here's my image of - desired design
Main Xml code - `
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:src="#drawable/headphones_3" />
<android.support.design.widget.TextInputLayout
android:id="#+id/textLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:visibility="gone"
app:theme="#style/TextLabel">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/password_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:theme="#style/TextLabel">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#drawable/edit_text_style"
android:drawablePadding="#dimen/floating_hint_margin"
android:hint="Password"
android:inputType="textPassword"
android:paddingLeft="#dimen/floating_hint_margin" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
`
Though right now i applied custom theme only to 'Password" TextInputLayout.!
Here is the code of edit_text_style
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- focused state -->
<item android:state_focused="true">
<shape android:shape="rectangle">
<solid android:color="#80FFFFFF" />
<stroke android:width=".5dp" android:color="#color/colorPrimary" />
<corners android:radius="6dp" />
</shape>
</item>
<!-- normal state -->
<item>
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="2dp" android:color="#color/colorPrimary" />
<corners android:radius="22dp" />
</shape>
</item>
The result which I got - Resulted Image
As you can see the Label goes up to cursor and there's no padding between Label and EditText background.
And how to set Label to where the EditText Background starts ( as it's on top of cursor right now )?
( Sorry for my bad english )
UPDATE : Let me explain you - See those images again.! What i want to set padding between TextInputLayout label ( which is password here when you focus it ). What you guys said was creating padding between custom drawable ( which is edit_text_style here ) cursor and Label, but i want padding between the drawable I added and Label ( password text which appear when it's on focused state ) & Also want to set Label position as it's goes upward to cursor start.!
#Ansh.... You are set the drawable to your TextInputLayout and take padding to both edittext and TextInputLayout.....
In your way it's is not work well.... if you want to do like that you want with textinputlayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:src="#mipmap/ic_launcher" />
<android.support.design.widget.TextInputLayout
android:id="#+id/textLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:padding="10dp"
android:background="#drawable/edit_text_style"
android:visibility="visible">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:hint="Email"
android:inputType="textEmailAddress"
android:padding="10dp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/password_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_text_style"
android:padding="10dp"
android:visibility="visible">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:padding="10dp"
android:hint="Password"
android:inputType="textPassword"
/>
</android.support.design.widget.TextInputLayout>
</LinearLayout>
And also in your drawable take only one rectangle or Rounded for better View
You can apply a custom style to your EditText (the ones where you need to have a padding onPressedState) :
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress" />
And the style :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/next_white">
<inset android:insetLeft=""YOUR_PADDING_IN_DP dp"/>
Source : android:drawableLeft margin and/or padding
For the margin, it isn't possible to do it with drawable, but you can still define an animation which will do the trick :
In res/anim, create a margin_animation.xml :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="#android:anim/accelerate_interpolator">
<translate android:fromYDelta="0" android:toYDelta="100%" />
</set>
Source : In Android, is it possible to set the margin from the drawable?

Cursor not visible in EditText in HTC devices

In my application, I am using cursor color for EditText.
It is working in Samsung devices but in HTC One it's not showing. If I give textCursorDrawable element as null it's showing default text color as cursor color, but I need cursor color in red.
I am not able to get where is the exactly problem.
Please can any one help me.
Here is my EditText in XML code:
<EditText
android:id="#+id/username_edit"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="90"
android:background="#null"
android:ems="10"
android:hint="user name"
android:maxLength="60"
android:paddingLeft="5dp"
android:singleLine="true"
android:textColor="#color/black"
android:textCursorDrawable="#color/appheader_color"
android:textSize="#dimen/TextSize_medium" >
</EditText>
Try adding
android:textCursorDrawable="#null"
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textCursorDrawable="#drawable/color_cursor"
/>
in drawable you can set your own color
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="1dp" />
<solid android:color="#FFFFFF" /> //#FFFFFF will be replaced by your color code
</shape>
Try this. It may help you.
Create drawalble xml: cursor_color
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="3dp" />
<solid android:color="#FF0000" />
</shape>
In Edittext :
<EditText
android:id="#+id/username_edit"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="90"
android:background="#null"
android:ems="10"
android:hint="user name"
android:maxLength="60"
android:paddingLeft="5dp"
android:singleLine="true"
android:textColor="#color/black"
android:textCursorDrawable="#drawable/cursor_color"
android:textSize="#dimen/TextSize_medium" >
</EditText>

Card Interface: Can't fit contents and text is clipped

I'm making an app with it's contents inside card-like views but I am having a couple of problems:
I can't get the label line (the blue line) to move away from the card text. I've tried both padding and margin (on both line imageview and textview from text) and nothing seems to work here.
The bottom part of the card title is getting cropped because of the line spacing. How can I fix this and keep the line spacing?
Check this screenshot for better understanding: http://imgur.com/qsoCFrB
Here's the code to the card background and the interface itself:
card_bg:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="1dp"/>
<solid android:color="#bdbdbd" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="4dp" />
</shape>
</item>
</layer-list>
main acitivity:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg" >
<ImageView
android:id="#+id/iconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:src="#drawable/icon_example" />
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cardText0001"
android:layout_marginTop="4dp"
android:background="#drawable/card_label" />
<TextView
android:id="#+id/cardTitle0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/cardText0001"
android:layout_toRightOf="#+id/iconView0001"
android:fontFamily="sans-serif-condensed"
android:maxLines="2"
android:paddingLeft="4dp"
android:lineSpacingExtra="-6dp"
android:text="#string/card_title_002"
android:textColor="#717171"
android:textSize="16sp" />
<TextView
android:id="#+id/cardText0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iconView0001"
android:fontFamily="sans-serif"
android:layout_marginTop="4dp"
android:maxLines="1"
android:text="#string/card_desc_002"
android:textColor="#acacac"
android:textSize="12sp" />
</RelativeLayout>
</FrameLayout>
Thanks in advance.
this is the creator of the Gist on GitHub!
Have you tried increasing padding on the RelativeLayout, perhaps that could fix the problem? Or even on the TextView element?
Try doing that and see what the results are.
EDIT: Also, why is there negative line spacing within the Text View?
DOUBLE EDIT: So what was happening is that your layout_alignBottom in the linkTitle TextView was shorter than the height of two lines of text, therefore it was cropping the title to limit the height of the TextView to that of the FavIcon ImageView. Removing this property fixes the issue.
Similar issue goes for the label shape, that alignBottom is what's messing it up.
Change layout_alignBottom to layout_below and then padding/margin should affect the position as you please.
Here is the updated version of your code that should remedy your issues:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linkCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ccc" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg">
<TextView
android:id="#+id/linkTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/faviconView0001"
android:padding="4dp"
android:maxLines="2"
android:text="#string/link_title_001"
android:textColor="#717171"
android:textSize="17sp" />
<TextView
android:id="#+id/linkDesc0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linkTitle"
android:paddingTop="6dp"
android:paddingBottom="9dp"
android:fontFamily="sans-serif"
android:maxLines="1"
android:text="#string/link_desc_001"
android:textColor="#acacac"
android:textSize="13sp" />
<ImageView
android:id="#+id/faviconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:layout_alignParentLeft="true"
android:src="#drawable/favicon_example" />
<View
android:layout_height="0dp"
android:layout_width="fill_parent"
/>
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linkDesc0001"
android:background="#drawable/card_label" />
</RelativeLayout>
</FrameLayout>
I hope that all of this helps!

Categories

Resources