Implementing custom Edittext style in android - android

I am creating custom edit text in android by adding xml in drawable res.it is as following
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Border -->
<item>
<shape>
<solid android:color="#color/gray"></solid>
</shape>
</item>
<!-- Body -->
<item
android:bottom="1dp"
android:right="0dp"
android:left="0dp"
android:top="0dp">
<shape>
<solid android:color="#color/white"></solid>
</shape>
</item>
</layer-list>
<EditText
android:id="#+id/edt_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/edittext"
android:digits="1234567890"
android:ellipsize="end"
android:focusableInTouchMode="true"
android:inputType="numberPassword"
android:singleLine="true"
android:textColor="#color/dark" />
so i just want edittext as a single line.
But when i implement this, for few seconds the upper border of edittext is visible and then it goes away...
I am really not getting why this is happening...

Create res/drawable/custom_edittext_style.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true" android:drawable="#drawable/apptheme_textfield_default_holo_light" />
<item android:state_window_focused="false" android:state_enabled="false" android:drawable="#drawable/apptheme_textfield_disabled_holo_light" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#drawable/apptheme_textfield_activated_holo_light" />
<item android:state_enabled="true" android:state_activated="true" android:drawable="#drawable/apptheme_textfield_focused_holo_light" />
<item android:state_enabled="true" android:drawable="#drawable/apptheme_textfield_default_holo_light" />
<item android:state_focused="true" android:drawable="#drawable/apptheme_textfield_disabled_focused_holo_light" />
<item android:drawable="#drawable/apptheme_textfield_disabled_holo_light" />
And add all require drawable file into drawable folder.
<EditText
android:id="#+id/edt_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/custom_edittext_style"
android:digits="1234567890"
android:ellipsize="end"
android:focusableInTouchMode="true"
android:inputType="numberPassword"
android:singleLine="true"
android:textColor="#color/dark" />

Related

Button background selector is not showing

I am trying to give the selector to the RadioButton of android:button but not able to showing that button in the preview as well as the real device, My goal is to make the android:button would be the custom.
I have to RadioGroup with two RadioButton.
I have tried this solution also https://stackoverflow.com/a/12432722/6869491
But still not able to get the desired solution.
<RadioGroup
android:id="#+id/radio_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/padding_25"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/sub_const"
app:layout_constraintEnd_toEndOf="#id/sub_const"
app:layout_constraintStart_toStartOf="#id/sub_const"
app:layout_constraintTop_toBottomOf="#id/pay_amt_et">
<RadioButton
style="#style/MyRadioButtonStyle"
android:id="#+id/manual_rb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="#string/manual"
android:textColor="#color/textcolor"
android:textSize="#dimen/fontsize_16"
/>
<RadioButton
style="#style/MyRadioButtonStyle"
android:id="#+id/recurring_rb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Recuring"
android:textColor="#color/textcolor"
android:textSize="#dimen/fontsize_16"
/>
</RadioGroup>
And here is the radio button selector, that is radio_btn_selector.
<item android:state_checked="true" android:state_window_focused="false"
android:drawable="#drawable/radio_btn_active" />
<item android:state_checked="false" android:state_window_focused="false"
android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="true" android:state_pressed="true"
android:drawable="#drawable/radio_btn_active" />
<item android:state_checked="false" android:state_pressed="true"
android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="true" android:state_focused="true"
android:drawable="#drawable/radio_btn_active" />
<item android:state_checked="false" android:state_focused="true"
android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="false" android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="true" android:drawable="#drawable/radio_btn_active" />
And here is the radio_btn_active.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/colorWhite" />
<stroke
android:width="#dimen/padding_2"
android:color="#color/grey_darker" />
</shape>
</item>
<item
android:bottom="#dimen/padding_30"
android:end="#dimen/padding_30"
android:start="#dimen/padding_30"
android:top="#dimen/padding_30">
<shape android:shape="oval">
<solid android:color="#color/primary_edtext_light" />
</shape>
</item>
</layer-list>
And this is radio_btn_un_selected.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorWhite" />
<stroke
android:width="#dimen/padding_2"
android:color="#color/grey_darker" />
</shape>
And Given the style as well.
<style name="MyRadioButtonStyle"
parent="#android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">#drawable/radio_btn_selector</item>
</style>
Whats I am making wrong please guide me.
I think you missed to set RadioButton's android:background="#drawable/radio_btn_selector" property.
<RadioButton
android:id="#+id/manual_rb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="#string/manual"
android:textColor="#color/textcolor"
android:textSize="#dimen/fontsize_16"
android:button="#android:color/transparent"
android:background="#drawable/radio_btn_selector"
/>

Spinner with border

I would like to design a simple spinner like below:
Below is my code:
sinnerBg.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false" android:state_enabled="true"
android:drawable="#android:color/black" />
<item>
<layer-list>
<item>
<shape>
<solid android:color="#ffffff" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item >
<bitmap android:gravity="right" android:src="#drawable/arrow_down" />
</item>
</layer-list>
</item>
</selector>
In style.xml:
<style name="spinner_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/spinnerBg</item>
<item name="android:layout_margin">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:popupBackground">#000000</item>
<item name="backgroundTint">#ffffff</item>
<item name="android:textColor">#000000</item>
</style>
Spinner in my axml file:
<Spinner
android:layout_width="64.0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10"
android:spinnerMode="dropdown"
android:layout_marginRight="6.0dp"
android:id="#+id/PIC"
android:layout_marginTop="12.5dp"
style="#style/spinner_style" />
The code to populate the spinner:
ArrayAdapter<ViewModel> myAdapter = new ArrayAdapter<ViewModel>(this, Android.Resource.Layout.SimpleSpinnerDropDownItem, InfoList);
_spinner.Adapter = myAdapter;
The selected text color of my spinner is coming white which is why the spinner selected text is not displayed in my page:
What am I missing? Any help?
EDIT
This is happening because my spinner is inside linear layout which has background color white:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:background="#color/white">
I want my page to be white. That is the reason I had set white background for root linearlayout.
I managed to solve the issue. Hope it helps. Here is my solution for it:
style.xml:
<style name="spinner_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/gradient_spinner</item>
<item name="android:layout_marginTop">2dp</item>
</style>
gradient_spinner.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<solid android:color="#ffffff" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item >
<bitmap android:gravity="bottom|right" android:src="#drawable/ic_arrow_down" />
</item>
</layer-list>
</item>
</selector>
I made a change here, added SetDropDownViewResource with custom layout:
ArrayAdapter<AgentViewModel> agentAdapter = new ArrayAdapter<AgentViewModel>(this, Resource.Layout.custom_spinner_item, InfoList);
agentAdapter.SetDropDownViewResource(Resource.Layout.spinner_dropDowm_item_view);
_spinner.Adapter = agentAdapter;
spinner_dropDowm_item_view.xml
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:textColor="#color/white"
android:padding="10dp"
/>
And added spinner_style style to the spinner:
<Spinner
android:layout_width="64.0dp"
android:layout_weight="0.75"
android:ems="10"
android:spinnerMode="dropdown"
android:id="#+id/spinner"
android:layout_marginTop="12.5dp"
android:layout_column="1"
android:layout_columnSpan="3"
android:layout_row="0"
android:layout_columnWeight="3"
android:layout_marginRight="7.0dp"
android:layout_marginBottom="4.5dp"
style="#style/spinner_style" />
You can use
android:spinnerItemStyle
android:spinnerDropDownItemStyle
You are missing to set
textAppearanceSmallPopupMenu
<item name="android:textAppearanceSmallPopupMenu">#style/my_style</item>
Finally
<style name="my_style" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Small">
<item name="android:textColor">#000000</item>
<item name="android:textSize">12sp</item>
</style>

Switch stops displaying after adding Thumb/Track drawables

I added switch, I wanted to change its color, so i added following in drawables.
Thumb.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#color/black" />
<item android:state_pressed="true" android:drawable="#color/tabAccessoryButtonSelected" />
<item android:state_checked="true" android:drawable="#color/tabAccessoryButtonSelected" />
</selector>
Track.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/tabAccessoryButtonSelected" />
</selector>
Layout.xml
<Switch
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/switch1"
android:layout_centerHorizontal="true"
android:paddingTop="50dp"
android:text="#string/notification_settings"
android:textColor="#color/white"
android:thumb="#drawable/thumb"
android:track="#drawable/track"
/>
As soon as i added this, switch has stopped displaying in the layout, the text is still there, but the Switch tool is not there.
If i remove Thumb.xml and Track.xml it starts displaying switch.
Kindly guide me what i am doing wrong here.
Thanks
I have modify it now try my solution below.
Layout.xml
<Switch
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/switch1"
android:layout_centerHorizontal="true"
android:paddingTop="50dp"
android:text="#string/notification_settings"
android:textColor="#color/white"
android:thumb="#drawable/thumb"
android:track="#drawable/track"
/>
track.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/color_thumb" />
<item android:drawable="#drawable/gray_track" />
</selector>
thumb.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/gray_track" />
<item android:state_pressed="true" android:drawable="#drawable/color_thumb" />
<item android:state_checked="true" android:drawable="#drawable/color_thumb" />
<item android:drawable="#drawable/gray_track" />
</selector>
color_thumb.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<size android:height="40dp" />
<gradient android:height="40dp" android:startColor="#color/tabAccessoryButtonSelected"" android:endColor="#color/tabAccessoryButtonSelected""/>
</shape>
gray_track.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<size android:height="40dp" />
<gradient android:height="40dp" android:startColor="#color/tabAccessoryButtonSelected" android:endColor="#color/tabAccessoryButtonSelected"/>
</shape>
I know this is an old question but I had the same problem today and the issue seemed to be that the thumb drawable needs a fixed size. The track size seems to adjust itself to the size of the thumb so a thumb with no indicated size won't display and because of this the track won't display either.
If you add an actual xml drawable as a thumb and not just a color you can add a size element to it:
switch_thumb.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorSwitchThumb" />
<corners android:radius="#dimen/switch_corner_radius"/>
<size android:height="10dp" android:width="10dp"/>
</shape>

Change edittext backgroundTint Color

Here is my editext, i want to change bottom line color of edittext. i use android:backgroundTint but its only work in API 21 and above it.
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:backgroundTint="#color/edittintcolor"
android:drawableLeft="#drawable/lock"
android:hint=" Password"
android:padding="15dp"
android:textColor="#color/edittintcolor"
android:textColorHint="#color/edittintcolor"
android:textSize="18sp"
android:typeface="serif" />
I want to change this color using XML or style not in java code
bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FDEEF4" />
<corners
android:radius="15dp" />
<stroke android:width="1dip" android:color="#F9966B" />
<EditText
android:id="#+id/password"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/bd=g"
android:hint="#string/password"
android:inputType="textPassword" >
</EditText>
Create a drawable xml for your edittext background.. Use this following code..
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<!--background color of box-->
</shape>
</item>
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#android:color/white" />
<!-- color of edittext line -->
</shape>
</item>
</layer-list>
and set that drawable xml as your edittext background. :)
use command like below in edit text
<EditText
android:id="#+id/password"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/edittextborder"
android:hint="#string/password"
android:inputType="textPassword" >
<requestFocus />
</EditText>
then proceed with below code inside drawable folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FDEEF4" />
<corners
android:radius="15dp" />
<stroke android:width="1dip" android:color="#F9966B" />
EDEEF4 represents the tint color
We can achieve by using two ways,
Method 1:
We can design background image using selector drawable,
create backgroundEditText.xml in drawable,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false"
android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item
android:state_window_focused="false"
android:state_enabled="false"
android:drawable="#drawable/textfield_disabled" />
<item
android:state_pressed="true"
android:drawable="#drawable/textfield_pressed" />
<item
android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/textfield_selected" />
<item
android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item
android:state_focused="true"
android:drawable="#drawable/textfield_disabled_selected" />
<item
android:drawable="#drawable/textfield_disabled" />
textfield_pressed.9.png
[![textfield_pressed.9][4]][4]
textfield_selected.9.png
[![textfield_selected.9][5]][5]
We need to set backgroundEditText for EditText in layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/edit1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/edit1_text"
android:inputType="text"
android:background="#drawable/edit_text"
/>
</LinearLayout>
[![Final Output ][6]][6]
Method 2:
Using android.support.v4 support library, we can give backward compatibility.
You can use this site to generate your own EditText style.
Generate drawable and set it as background, like:
android:background="#drawable/generated_theme_edit_text"

Custom edit text with different view on different state in android

My edit text now looks like this (like its background)
http://prntscr.com/843323
and this is the code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
How can I set underline to this edit text (for example white) when I click on it to write something.. http://prntscr.com/8434s7
Try this:
how to change focus color of EditText in Android
Or This:
<style name="Theme.MyTheme.EditText" parent="AppTheme">
<item name="colorControlNormal">#ff6600</item>
<item name="colorControlActivated">#ff6600</item>
</style>
<EditText
style="#style/TextAppearance.AppCompat.Display1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/materialDesignEditText"
android:ems="10"
android:hint="Normal EditText"
android:padding="5dp"
android:singleLine="true"
android:textColor="#000000"
android:textColorHint="#android:color/secondary_text_dark"
android:textSize="15dp"
android:theme="#style/Theme.MyTheme.EditText" />
Create textfield_default
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="Color Hash Code"
android:endColor="#color/background_material_light"
android:angle="90" />
</shape>
create edit_text.xml in drawable
<item
android:state_window_focused="false"
android:state_enabled="false"
android:drawable="#drawable/textfield_disabled" />
<item
android:state_pressed="true"
android:drawable="#drawable/textfield_pressed" />
<item
android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/textfield_selected" />
<item
android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item
android:state_focused="true"
android:drawable="#drawable/textfield_disabled_selected" />
<item
android:drawable="#drawable/textfield_disabled" />
</selector>
<EditText
style="#drawable/edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/materialDesignEditText"
android:ems="10"
android:hint="Text here"
android:padding="5dp"
android:singleLine="true"
android:textColor="#000000"
android:textColorHint="#android:color/secondary_text_dark"
android:textSize="15dp" />

Categories

Resources