I am trying to customize my spinner with custom style.
Spinner
<Spinner
android:id="#+id/my_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
app:layout_constraintTop_toBottomOf="#id/expense_amount"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintRight_toLeftOf="parent"
android:elevation="3dp"
/>
Here is my styles.xml file.
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:spinnerStyle">#style/AppTheme.spinnerStyle</item>
<item name="android:spinnerDropDownItemStyle">#style/AppTheme.spinnerDropDownItemStyle</item>
</style>
<style name="AppTheme.spinnerStyle" parent="#android:style/Widget.Material.Light.Spinner">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#color/colorPrimary</item>
</style>
<style name="AppTheme.spinnerDropDownItemStyle" parent="#android:style/Widget.Material.DropDownItem.Spinner">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#color/colorPrimary</item>
</style>
This gives me spinners that look like this:
I want to add a dropdown arrow.
When I change the spinner to code for dropdown arrow, all the textcolor and background color are lost.
Spinner code to show dropdown arrow
<Spinner
android:id="#+id/my_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
app:layout_constraintTop_toBottomOf="#id/expense_amount"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintRight_toLeftOf="parent"
android:background="#android:drawable/btn_dropdown"
/>
How can I retain my theme along with the drop down arrow ??
P.S. I am not very good at capturing screenshots on linux machines.
It's normal behaviour of Android:
Spinner have it's own default background, when you use styles.xml to custom it, it follow and turn to blue. Then in the code you again set the android:background of your Spinner to #android:drawable/btn_dropdown, so it override your styles because properties in layout xml have higher priority than in styles.
You don't have background to show dropdown arrow, use this:
First solution:
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Light"
android:spinnerMode="dropdown" />
and in your java file
spinner = (Spinner) view.findViewById(R.id.spinner);
ArrayAdapter adapter = ArrayAdapter.createFromResource(this, R.array.spinner_data, android.R.layout.simple_spinner_dropdown_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
Second solution
You will need a RelativeLayout wrap outside Spinner. Replace your <Spinner> with this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner_bg">
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Light"
android:spinnerMode="dropdown" />
</RelativeLayout>
Then create a custom background and choose background color for your spinner:
spinner_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8dp" android:bottom="8dp">
<shape>
<solid android:color="#color/colorPrimary" />
<corners android:radius="2dp"/>
<stroke
android:width="1dp"
android:color="#color/colorPrimary" />
<padding
android:top="16dp"
android:bottom="16dp"
android:left="8dp"
android:right="16dp"/>
</shape>
</item>
</layer-list>
Related
I want to customize my searchview edittext which expanded when I click on searchview icon to be like this image
And I tried the custom style to do that but I got this result in this image
The problems:
There is a blue vertical bar at the start of the edittext I need to remove it and make it appears only on a search query and after the querytext also I want to change the color of this vertical bar
I need to add a white search icon with specific padding of the hint and text query currently the white icon in the result screen disappears on search query
How I got this result?
I define searchViewStyle
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="searchIcon">#drawable/ic_baseline_dark_search_24</item>
<item name="closeIcon">#null</item>
<item name="goIcon">#drawable/ic_baseline_dark_search_24</item>
<item name="commitIcon">#drawable/ic_baseline_dark_search_24</item>
<item name="android:editTextColor">#color/white</item>
<item name="android:textColorHint">#color/white</item>
<item name="android:textColorHighlight">#color/red</item>
<item name="queryBackground">#drawable/radius_drawable</item>
<item name="searchHintIcon">#drawable/ic_baseline_search_24</item>
<item name="queryHint">"search_hint"</item>
</style>
I define searchview like this in my fragment layout
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
style="#style/SearchViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.appcompat.widget.SearchView>
I define a custom drawable background for searchview
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="18dp"
/>
<solid
android:color="#4F4F4F"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
While I do not clearly understand what your requirements are exactly, I would like to point out one thing though.
For Applying a style to a SearchView we have to use the theme attribute, your code seems okay, maybe your changes are not being applied for now I believe. So try using the android:theme attribute for your style as follows. The rest of your requirements should easily come by to you with some trial and error I believe. Thanks.
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:theme="#style/SearchViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
Here is how I would recommend you to update your style to get as close as possible to your design.
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="searchIcon">#drawable/ic_baseline_dark_search_24</item>
<item name="queryBackground">#android:color/transparent</item>
<item name="queryHint">"search_hint"</item>
<item name="iconifiedByDefault">false</item>
<item name="android:textColorHint">#color/white</item>
<item name="android:background">#drawable/radius_drawable</item>
</style>
And you can modify your drawable and get rid of the padding and size since you are using wrap_content in your layout
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#4F4F4F" />
<corners android:radius="18dp" />
</shape>
You can use custom searchview in AppCompat SearchView . Copy searchview from this link searchview.xml
Then edit the xml or remove the extra margin from xml.
Add custom searchview layout like this:
<androidx.appcompat.widget.SearchView
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:gravity="center"
app:layout="#layout/custom_search_view"
app:iconifiedByDefault="true"
app:queryBackground="#android:color/transparent"
app:queryHint="Search"
app:searchIcon="#drawable/search" />
I want to add this type of underline in edittext
xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/InputLayout">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name" />
</android.support.design.widget.TextInputLayout>
style
<style name="InputLayout" parent="TextAppearance.AppCompat">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorHint">#color/grey</item>
<item name="colorAccent">#color/white</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/colorPrimary</item>
<item name="android:background">#drawable/edit_draw</item>
</style>
but when it got focused it shows it's own underline along with background drawable and and as you can see the drawable i am using is not working good as well.
Just create xml file like edit_text_design.xml and save it to your drawable folder
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- underline color -->
<item>
<shape>
<solid android:color="#41e3ec" />
</shape>
</item>
<!-- main color -->
<item
android:bottom="1.5dp"
android:left="1.5dp"
android:right="1.5dp">
<shape>
<solid android:color="#FFFFFF" />
</shape>
</item>
<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="5.0dp">
<shape>
<solid android:color="#FFFFFF" />
</shape>
</item>
Then use it in your xml for EditText like this
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/name_edit_text"
android:background="#drawable/edit_text_design"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name"/>
</android.support.design.widget.TextInputLayout>
No theam needed..
Output like this
You have to remove the background from the EditText inside layout, because it has its own.
<android.support.design.widget.TextInputEditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:hint="Name"/>
Add this code to change the state behavior along with Enamul Haque answer
create a drawable and assign it Edittext
Edittext xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/InputLayout">
<android.support.v7.widget.AppCompatEditText
android:padding="7dp"
android:id="#+id/editText"
android:background="#drawable/editext_states"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name" />
</android.support.design.widget.TextInputLayout>
drawable
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="#drawable/underline_blue"
/> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="#drawable/underline_red"
/> <!-- focused -->
<item
android:drawable="#drawable/underline_normal"
/> <!-- default -->
create three drawable and change their color as you like and replace these drawable with that
How to put underbar in edit text , previously underbar comes automatically but now i cannot find it now . I have to add it using android : background attribute and make a line shape in drawable , but this also dont work as the stroke appears in the centre of the texts . So how can i get that under bar
Edit text code
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/line2"
android:hint="hhkfnvkslnbkfnbkfnbknbdkbnlbkn"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:textColorHint="#color/colorAccent" />
Stroke
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<stroke android:width="1dp" android:color="#0000FF"/>
<size android:height="100dp" />
</shape>
Just create a view below the EditText:
<EditText
android:id="#+id/underbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/line2"
android:hint="hhkfnvkslnbkfnbkfnbknbdkbnlbkn"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:textColorHint="#color/colorAccent" />
<View
android:id="#+id/underbar"
style="#style/EditTextLine"
android:layout_below="#+id/underbar"/>
And in your styles.xml,
<style name="EditTextLine">
<item name="android:layout_height">1dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:background">#color/colorAccent</item>
</style>
Make sure that the EditText and the View is wrapped in a RelativeLayout. You can re-use the same underbar-style below every EditText.
I have a dialog layout in that i have 3 edit texts, for the 1st edit text it shows the underline color as green(primary color), and other two edit text shows the color pink(color accent).
Why so? It should be same as other two edit texts.
Tried to change this with :
name.getBackground().mutate().setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_ATOP);
name.getBackground().setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_ATOP);
also by the SO solutions. But nothing helped.
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
....
<item name="android:editTextStyle">#style/EditTextStyle</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/border_gray</item>
<item name="colorControlActivated">#color/border_gray</item>
<item name="colorControlHighlight">#color/border_gray</item>
</style>
layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<LinearLayout android:layout_height="50dp"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Schedule"
android:textColor="#android:color/white"
android:textAppearance="#android:style/TextAppearance.Medium"
android:layout_gravity="center"
android:layout_marginLeft="20dp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp">
<EditText
android:id="#+id/edt_name"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#000000"
android:textSize="14sp"
android:inputType="textCapSentences"
android:hint="Name"
android:cursorVisible="false"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp" />
<EditText
android:id="#+id/edt_dateTime"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#000000"
android:textSize="14sp"
android:cursorVisible="false"
android:inputType="textCapSentences"
android:hint="Date and Time"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/edt_name"
android:layout_alignStart="#+id/edt_name"
android:layout_below="#+id/edt_name"
android:layout_alignRight="#+id/edt_name"
android:layout_alignEnd="#+id/edt_name"
android:layout_marginTop="05dp" />
<EditText
android:id="#+id/edt_budget"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#000000"
android:textSize="14sp"
android:cursorVisible="false"
android:hint="Budget"
android:layout_below="#+id/edt_dateTime"
android:layout_alignLeft="#+id/edt_dateTime"
android:layout_alignStart="#+id/edt_dateTime"
android:layout_alignRight="#+id/edt_dateTime"
android:layout_alignEnd="#+id/edt_dateTime"
android:layout_marginTop="05dp"
android:inputType="number" />
</RelativeLayout>
</LinearLayout>
This is what i got after implementing drawable.
Thank you..
It simply consists of overriding the value for colorControlActivated, colorControlHighlight and colorControlNormal in your app theme definition
<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/accent</item>
<item name="colorControlHighlight">#color/accent</item>
</style>
or by java
editText.getBackground().mutate().setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_ATOP);
by changing your "colorAccent" color you will change color or edittext bottom line and text input layout as well.
Create textfield_bg_drawable.xml in drawable folder. and set it as background resource in EditText.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="2dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<selector>
<item
android:state_enabled="true"
android:state_focused="true">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/focused_line_color" />
</shape>
</item>
<item android:state_enabled="true">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/normal_line_color" />
</shape>
</item>
</selector>
</item>
</layer-list>
Try with this following code properly working on my side
Drawable drawable = editText.getBackground(); // get current EditText drawable
drawable.setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP); // change the drawable color
if (Build.VERSION.SDK_INT > 16) {
editText.setBackground(drawable); // set the new drawable to EditText
} else {
editText.setBackgroundDrawable(drawable); // use setBackgroundDrawable because setBackground required API 16
}
Where editText is the id of your EditText
I think it is because Your 1st editText focusing, when your alert layout appear.
add this line in your editText
android:focusable="true"
You need to disable focus from your first edittext when the activity is opened, so set
android:requestFocus= "false"
in your xml file. Or try the following
edittext.clearFocus();
in your java file.
It will not pick your primary color then.
Hope it works!
I got a custom spinner, and I'm trying to replace the 9-patch background / the triangle in the DropDownSelector.
I just can't get it to work right though. I end up with (the white box is a test asset):
the new 9 patch gets shown, but it messes up the padding, and it looks like a Spinner inside a Spinner.
Here's what it looks like without the 9 patch added:
This is what I want it to look like, but then with the new 9patch instead of the old one, not the Spinner in Spinner effect.
Here's my code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Spinner xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"/>
</RelativeLayout>
I add this RelativeLayout to the Actionbar, and set a custom spinner adapter:
SpinnerAdapter mSpinnerAdapter = (new SpinnerCustomAdapterDark(this, R.layout.customSpinnerTitleLayout, categoryNames ));
spinner = findViewById(R.id.spinner2);
categorySpinnerMenuitem = (Spinner) spinner;
categorySpinnerMenuitem.setAdapter(mSpinnerAdapter);
This is the CustomSpinnerTitleLayout set to the adapter:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
style="?android:attr/spinnerDropDownItemStyle"
android:paddingRight="0dp" >
<ImageView
android:id="#+id/spinner_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:layout_gravity="center"
android:paddingRight="0dp"
/>
</LinearLayout>
This is the Theme where I add the 9 patch
<resources>
<style name="CustomTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:spinnerDropDownItemStyle">#style/customActionBarDropDownStyle</item>
</style>
<style name="customActionBarDropDownStyle" parent="#android:style/Widget.Holo.Light.ListView" >
<item name="android:background">#drawable/spinner9patch</item>
</style>
</resources>
I'm obviously doing something wrong, but what? I've tried to set the spinnerDropDownItemStyle and the spinnerStyle at the Spinner in the first layout file, what didn't do anything. What am I doing wrong here?
Thanks in advance!!
Create an XML in drawable folder with any name for example spinner_bg.xml and add the following lines
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#504a4b" />
<corners android:radius="5dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/spinner_ab_default_holo_dark_am" /> // you can use any other image here, instead of default_holo_dark_am
</item>
</layer-list></item>
</selector>
Add the following lines to your styles.xml which is inside values folder
<style name="spinner_style" >
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
Now add this style to your spinner as
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/spinner_style"
android:popupBackground="#cccccc" />
I really recommended you check this out online Generator just make your custom spinner then download file http://jgilfelt.github.io/android-actionbarstylegenerator/