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" />
Related
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>
I want to add a white stroke to black text inside a button. I can figure out to do this with regular textview but not when it comes to a button.
Thi is regarding Xml android studio btw.
activity_main.xml:
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip"
android:background="#drawable/login_button_style"
android:text="Log Ind"
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/editTextPass"
android:layout_alignEnd="#+id/editTextPass"
android:clickable="true" /><![CDATA[
/>
login_button_style.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#d7d7d7"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
<stroke android:color="#d10f0f" android:width="3dp" />
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="shadoweffect">
<item name="android:paddingLeft">4px</item>
<item name="android:paddingBottom">4px</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">25sp</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">0</item>
<item name="android:shadowRadius">3</item>
</style>
</resources>
can someone please enlighten me?
Look at this answer to a similar question on how to make a border. He creates a new file that is a shape of just that color then stores it as a drawable to be used as the background image
https://stackoverflow.com/questions/7690416/android-border-for-button
Just change the color to white and there you go
EDIT:
Actually seeing now. You want the letters to be outlined in white.
So my best guess would be to draw the entire image with the text and border up in Photoshop/Sketch. And then save that as a drawable. To set for your buttons background. Make sure to set the buttons text to just quotes since you will already have the text in the Photoshop mockup
android:text = ""
I have come across this weird issue in which the EditText fields change color to Red in the start of an Activity like they change incase there is a SetError. Also, this does not happen everytime, only in some cases it appears. How do I fix this bug? Any help is appreciated.
Please refer image for more.
here is the code
<android.support.design.widget.TextInputLayout
android:id="#+id/input_name"
style="#style/my_style_textInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<EditText
android:id="#+id/edt_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name:"
android:inputType="textPersonName"
android:singleLine="true"
android:textSize="#dimen/subHeading" />
</android.support.design.widget.TextInputLayout>
Here is the style:
<style name="my_style_textInput" parent="#style/TextAppearance.AppCompat">
//hint color And Label Color in False State
<!--<item name="android:textColorHint">#color/item_color</item>-->
<!--<item name="android:textColor">#color/colorPrimary</item>-->
<item name="android:textSize">#dimen/caption</item>
//Label color in True State And Bar Color False And True State
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorControlNormal">#color/colorPrimary</item>
<item name="colorControlActivated">#color/colorPrimaryAccent</item>
</style>
Please note, none of colorPrimary, colorAccent and item_color are red.Thank You.
You can use this code to customize the color.
Apply android:background="#drawable/edittext_bg" on your layout
<EditText
android:la`enter code here`yout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/login_username"
android:hint="#string/username_hint"
/>
After under drawable and create the file edittext_bg.xml and put this code inside.
<layer-list>
<item>
<shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke android:color="#ff1e0c" android:width="2dp"/>
</shape>
</item>
<!-- Overlap the left, top and right border using background color -->
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#fffbce"/>
</shape>
</item>
Hope it helps you.
i have activities which i themed with my custom theme, but for spinner i choosed to style it with Appcompat v21 but i got this :
So how to change the Spinner arrow to be black or blue if is there a way ?
i found this as similar question but doesn't have any answer : https://stackoverflow.com/questions/28561105/add-custom-spinner-arrow
here is my spinner :
<Spinner
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner2"
android:layout_marginTop="10dp"
android:layout_centerInParent="true" />
i used this to style the spinner:
<style name="MyTheme.SpinnerAppTheme" parent="Widget.AppCompat.Spinner">
</style>
this is how i use the adapter
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
getBaseContext(), R.array.listMedRes, android.R.layout.simple_spinner_item);
i just want to theme the spinner , thanks alot
Might be late but better late than never. To respond to your question: "Is there a way to use it only in spinner?". The answer is yes, refer to the code below.
Add this code to your theme or style file
<style name="customSpinnerTheme" parent="yourAppThemeThatUseAppCompat21">
<item name="colorControlNormal">#eaeaea</item>
<item name="colorControlActivated">#000000</item>
<item name="colorControlHighlight">#000000</item>
</style>
Then in your XML that use spinner you can add this line
android:theme="#style/customSpinnerTheme"
e.g.
<Spinner
android:theme="#style/customSpinnerTheme"
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:spinnerMode="dialog" />
Since you are using AppCompat-v21, you can take advantage of the new material design styles attributes:
colorPrimary: your app branding color for the app bar, applies to action bar
colorPrimaryDark: darker variant for the status bar and contextual app bars
colorAccent: lets you define bright complement to the primary branding color. By default, this is the color applied to framework controls (via colorControlActivated)
colorControlNormal: color applied to framework controls in their normal state
colorControlActivated: applied to framework controls in their activated
Here is an example for you
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/primary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/primary_dark</item>
<!-- colorAccent is used as the default value for colorControlActivated which is used to tint widgets -->
<item name="colorAccent">#color/accent</item>
<item name="colorControlNormal">#color/primary</item>
</style>
colors.xml
<resources>
<color name="primary">#ff0000ff</color>
<color name="primary_dark">#ff0000af</color>
<color name="accent">#870000ff</color>
<color name="white">#ffffffff</color>
</resources>
Here is how it looks
Hope this helps.
There is a way to change your arrow color... actually it's not color you can change this image with blue color image..
create a xml file myspinner_selector in your drawable folder
and paste
<?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/blue_arrow" /> // you can use any other image here, instead of default_holo_dark_am
</item>
</layer-list></item>
</selector>
blue_arrow is an image, and add this style in your style file
<style name="spinner_style" >
<item name="android:background">#drawable/myspinner_selector</item>
<item name="android:layout_marginLeft">5dp</item>
<item name="android:layout_marginRight">5dp</item>
<item name="android:layout_marginBottom">5dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
</style>
finally add this style in your spinner
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/spinner_style"
/>
it look like this. you need to customize
look at below code.
create spinner_bg.xml under drawable folder
<?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="270" android:centerColor="#d0d0d0" android:endColor="#c5c6c6" android:startColor="#dbdadb" android:type="linear" />
<stroke android:width="1dp" android:color="#7a7a7a" />
<corners android:radius="1dp" />
<padding android:left="3dp" android:right="3dp" />
</shape></item>
<item><bitmap android:gravity="center|right" android:src="#drawable/dropdown_icon_black" />
</item>
</layer-list></item>
</selector>
write down below code in styles.xml
<style name="spinner_style">
<item name="android:background">#drawable/spinner_bg</item>
</style>
Apply style to spinner
<Spinner
android:id="#+id/spinner"
style="#style/spinner_style"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:focusable="true"
android:overlapAnchor="false"
android:paddingRight="10dp"
android:spinnerMode="dropdown"
android:textColor="#android:color/white" />
use this image for spinner drawable
you could tint it with the attribute tint color.
<Spinner android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:backgroundTint="#color/white"
/>
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/