How to change the style of SearchView? - java

I have to implement a SearchView in my application.
The XML declaration is as follows:
<SearchView
android:id="#+id/searchView"
style="#style/SearchViewStyle"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
The style is:
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="android:searchIcon">#drawable/ico_search</item>
<item name="android:queryBackground">#android:color/transparent</item>
and finally in the activity:
SearchView mSearchView = findViewById(R.id.searchView);
mSearchView.setIconifiedByDefault(true);
mSearchView.setSubmitButtonEnabled(false);
mSearchView.setOnQueryTextListener(this);
mSearchView.setQueryHint("Search here");
I don't understand how to change the text color of the hint and the background of the "edittext" where I type the keywords used for the research.
What did I just try?
Add this line in the style.xml
<item name="android:textSize">18sp</item>
<item name="android:textColor">#color/white</item>
or add this in my activity
AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
searchText.setHintTextColor(getResources().getColor(color.black));
searchText.setTextColor(getResources().getColor(color.black));
Those solutions didn't work.

You can style your SearchView like this:
<style name="Theme.MyTheme" parent="Theme.AppCompat">
<item name="searchViewStyle">#style/MySearchViewStyle</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<!-- Background for the search query section (e.g. EditText) -->
<item name="queryBackground">...</item>
<!-- Background for the actions section (e.g. voice, submit) -->
<item name="submitBackground">...</item>
<!-- Close button icon -->
<item name="closeIcon">...</item>
<!-- Search button icon -->
<item name="searchIcon">...</item>
<!-- Go/commit button icon -->
<item name="goIcon">...</item>
<!-- Voice search button icon -->
<item name="voiceIcon">...</item>
<!-- Commit icon shown in the query suggestion row -->
<item name="commitIcon">...</item>
<!-- Layout for query suggestion rows -->
<item name="suggestionRowLayout">...</item>
</style>
Here is details information https://philio.me/styling-the-searchview-with-appcompat-v21/

you can use EditeText insted of searchBox with same property by using shape:
<EditText
android:id="#+id/edt_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/shape_rectangle_edittext"
android:drawableRight="#drawable/ic_search_gray"
android:ems="10"
android:hint="#string/search_box"
android:imeOptions="actionSearch"
android:inputType="text"
android:padding="#dimen/size10"
android:textColorHint="#444"
android:textSize="#dimen/size16"
/>
and shape_rectangle_edittext.xml in drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#777"/>
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>

Related

Checkbox does not show after changing font

Hello I have a problem with displaying checkbox in alert dialog. It concern only a situation when the font is changed. On Arial everything (title , message and checkbox) shows correctly but on Ginger (AppThemeWithCustomFont) this Checkbox not shows at all (title and message works fine). Those are my codes.
checkbox.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"
android:id="#+id/layout_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="10dp">
<CheckBox
android:id="#+id/skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="center_horizontal"
android:buttonTint="#fff"
app:buttonTint="#fff"
android:text="#string/checkbox_show"
android:textColor="#fff"/>
StageZero.java
void configureInitDialog() {
AlertDialog adb = new AlertDialog.Builder(this, R.style.MojStyl).create();
View checkboxLayout = View.inflate(this, R.layout.checkbox, null);
skip = checkboxLayout.findViewById(R.id.skip);
adb.setView(checkboxLayout);
adb.setIcon(android.R.drawable.ic_dialog_info);
adb.setTitle("Info");
adb.setMessage(getResources().getString(R.string.stage_zero_dialog));
adb.setCancelable(false);
adb.setButton(DialogInterface.BUTTON_NEUTRAL, "Ok", (dialogInterface, i) -> {
String checkBoxResult = "";
if (skip.isChecked())
checkBoxResult = "linia2";
if (checkBoxResult.equals("linia2"))
editor.putBoolean("hideDialog", true).apply();
});
if (!hideDialog)
adb.show();
}
styles.xml
<style name="AppThemeWithClassicFont" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowBackground">#color/activity_background</item>
<item name="android:icon">#android:color/transparent</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="android:fontFamily">#font/arial</item>
<item name="android:actionBarStyle">#style/ThemeActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/ThemeActionBar</item>
<item name="windowActionBarOverlay">true</item>
</style>
<!-- Application theme. -->
<style name="AppThemeWithCustomFont" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowBackground">#color/activity_background</item>
<item name="android:icon">#android:color/transparent</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="android:fontFamily">#font/ginger</item>
<item name="android:actionBarStyle">#style/ThemeActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/ThemeActionBar</item>
<item name="windowActionBarOverlay">true</item>
</style>
I will give the best answer for any support. Thank you in advance!
I found a better way to customize the font on your check box, follow these steps to change the font:
1-Go to File/New/Folder/Assets Folder and create new Assets folser in the default location.
2-Copy your font into your new Assets folder.
3-Use this code inside the onCreate method to set your new font to the check box:
checkBox = findViewById(R.id.skip);
Typeface font = Typeface.createFromAsset(getAssets(), "YourFont.ttf");
checkBox.setTypeface(font);
This is the xml code that I used for the check box, in relative layout:
<CheckBox
android:id="#+id/skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:buttonTint="#fff"
app:buttonTint="#1d1d1b"
android:text="hello world"
android:textColor="#1d1d1b"/>
But you can change and customize it.
That's the appearance that I got with my custom font:

SearchView with border and text

I want to make my SearchView like this:
How can I implement in Java ?
What you see in the image is the Material TextInput with OutLined style. You can read more about that and the Filled style in the official docs here.
Also, don't forget you'll need material library for this. For that, do
implementation 'com.google.android.material:material:1.2.0-alpha06'
Now, what you can do with it is to make it like above by adding startDrawable and CornerRadius:
Create the XML widget as below and put a startIcon.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/editTextLayout"
style="#style/TextInputLayoutAppearanceOutLined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Search View"
app:hintEnabled="true"
app:startIconDrawable=" *** Your ICON *** ">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:textSize="12sp" />
</com.google.android.material.textfield.TextInputLayout>
Then, this is the style TextInputLayoutAppearanceOutLined, put it in your style.xml file:
<style name="TextInputLayoutAppearanceOutLined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">#style/HintText</item>
<item name="helperTextTextAppearance">#style/HintText</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:textColorHint">#color/colorAccent</item>
<item name="hintTextColor">#color/colorAccent</item>
<item name="boxStrokeColor">#color/colorAccent</item>
<item name="startIconTint">#color/colorAccent</item>
<item name="boxBackgroundColor">#color/white</item>
<item name="boxCornerRadiusBottomEnd">#dimen/_26sdp</item>
<item name="boxCornerRadiusBottomStart">#dimen/_26sdp</item>
<item name="boxCornerRadiusTopEnd">#dimen/_26sdp</item>
<item name="boxCornerRadiusTopStart">#dimen/_26sdp</item>
<item name="boxStrokeWidthFocused">1dp</item>
<item name="hintEnabled">true</item>
<item name="hintAnimationEnabled">true</item>
<item name="colorControlNormal">#color/colorAccent</item>
<item name="colorControlActivated">#color/colorPrimary</item>
Obviously, you can set this in XML as well, but style gives you more control over your app to change the element everywhere by one edit.
Now, you'll have what you want your SearchView to look like, but further to make it act like a SearchView, you need to set filtering for your ListAdapter to make it work.
For that, you can look here.
make search view in layout file first
<SearchView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_round"/>
then the make drawable and name it bg_round and put the code below to that drawable
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff"/> // this the the inner background color
<stroke android:width="5dp" //this is for the stroke of the border
android:color="#android:color/black"/> //this is the stroke color
<corners android:radius="4cdp" /> //this is the corner radius
</shape>

How can i add divider to my drop down list (spinner)?

before click
after click - i'd like to add such blue line
I would like to add divider to my drop down list.
I used solutions which I found on stackoverflow but they didn't work.
This is my xml code for in xml fragment
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spinnerMode="dialog"
android:background="#drawable/spinner">
</Spinner>
This is spinner.xml. It is define boarder, shape and image of("click-button")
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape android:shape="rectangle">
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="1.5dp"
/>
<gradient android:startColor="#color/white" android:endColor="#color/white" android:angle="270" />
<stroke android:width="2px" android:color="#color/colorPrimary2" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:gravity="center|right" android:drawable="#drawable/ic_spinner_drop_down"/>
</layer-list>
</item>
</selector>
This works only for spinnerMode="dropdown"... for dialog mode the divider has to be added during runtime via an adapter (the referenced sample is also using dropdown but after implementing it and changing the mode to dialog, the divider is still being displayed).
Just try adding this to your styles.xml file inside the values resource directory:
<style name="SpinnerStyle" parent="Widget.AppCompat.ListView.DropDown">
<item name="android:divider">#0000ff</item>
<item name="android:dividerHeight">0.5dp</item>
</style>
<style name="SpinnerTheme" parent="AppTheme">
<item name="android:dropDownListViewStyle">#style/SpinnerStyle</item>
</style>
And then, you can either add an extra child node to the style tag that's already there in that file (that will apply the style to all spinners):
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... some existing lines -->
<!-- ... new line to add:-->
<item name="android:dropDownListViewStyle">#style/SpinnerStyle</item>
</style>
Or... you can just add that style to your specific Spinner tag in your fragment XML (that will apply the style to only this spinner):
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spinnerMode="dropdown"
android:background="#drawable/spinner"
android:theme="#style/SpinnerTheme">
</Spinner>

How do we change Rating Bar Star icon with some other icon in Android?

I want to change my default Rating bar Star(*) icon to another icon.
Can anybody help me out..
My Code: XML
<RatingBar
android:id="#+id/ratingBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
style="#style/foodRatingBar"
android:isIndicator="false"
android:layout_centerHorizontal="true"
android:layout_marginTop="86dp"
android:numStars="4" />
Styles.xml:
<style name="foodRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/selector</item>
<item name="android:minHeight">23dip</item>
<item name="android:maxHeight">25dip</item>
</style>
Selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#android:id/background"
android:drawable="#drawable/ic_fuel_gray"/>
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/ic_fuel_gray"/>
<item
android:id="#android:id/progress"
android:drawable="#drawable/ic_fuel_color"/>
</layer-list>
But outPut is:
Just add below two snippets and you are done:
<style name="customRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/custom_image1</item>
<item name="android:indeterminateDrawable">#drawable/custom_image2</item>
</style>
and Use above style in your xml where rating bar is used:
<RatingBar style="#style/customRatingBar" ... />
Add replace your Rating bar code with this and check if it is showing in preview?
<RatingBar
android:id="#+id/ratingBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/customRatingBar"
/>
<RatingBar
android:id="#+id/ratingBar"
style="#style/foodRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:numStars="5"
android:rating="5"
android:transformPivotX="0dp"
android:transformPivotY="0dp"
android:isIndicator="false"/>
try this

Android radius button

I have a button like this
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:text="ButtonText"
style="#style/ButtonText"/>
and this style
<style name="ButtonText">
<item name="android:layout_margin">3dp</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">2</item>
</style>
Now I want to add radius to button, I have tried <item name="android:radius">6dp</item> but it is not working. What is a solution for this?
In your drawable folder, create a round_button.xml with
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.dibbus.com/2011/02/gradient-buttons-for-android/ -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners
android:radius="2dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
and then in the xml containing the button, set the background as:
android:background="#drawable/round_button"
I believe to add radius to a button you have to create a custom drawable (see this link, specifically the shape drawable section)
then, with the drawable defined, set the background xml tag of the button equal to your drawable file:
android:background="#drawable/your_file"

Categories

Resources