I want to have a rounded corner for the items in navigation drawer like this :
it's an example of material design in material.io website
is it possible ?
Just use the app:itemShapeAppearanceOverlay attribute:
<com.google.android.material.navigation.NavigationView
app:itemShapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Nav"
...>
with:
<style name="ShapeAppearanceOverlay.Nav" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
First, I recommend you move to Flutter, it is more intuitive and you got the best integration flow of Material guidelines.
Now, for add round corners, color, font and padding to a checked item with XML and Android Studio, you have the 'app' attributes on NavigationView:
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
...>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
...
app:itemIconTint="#color/custom_color_config"
app:itemTextColor="#color/custom_color_config"
app:itemBackground="#drawable/custom_drawable_resource"
app:itemTextAppearance="#style/custom_style"/>
With itemIconTint and itemTextColor you set the color config of the hole item (icon and text) when is checked or non-checked. First, do res > new > directory, and name directory as 'color'. Then, create the color resource file in color directory with new > color resource file > custom_color_config (name) and put this:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="your_checked_item_color"
android:state_checked="true" />
<item
android:color="your_non_checked_item_color"/>
</selector>
The item with the state_checked=true attribute will apply his color to the current navigation checked item.
To add the background rounded box, create in drawable directory a new drawable resource file to set at itemBackground later. So, new > drawable resource file > custom_drawable_resource (name) and put this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="9dp"
android:right="9dp"
android:top="2dp"
android:bottom="2dp">
<shape>
<solid android:color="#color/new_color_resource_name"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
And next, create again a second color resource file in color directory to associate with the solid color attribute in file custom_drawable_resource (new_color_resource_name) and there put this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="your_background_checked_item_color"
android:state_checked="true" />
<item
android:color="your_background_non_checked_item_color"/>
</selector>
And
VOILA! just add to text appearance a custom style with some semi bold font.
PD: Sorry if I've a bad english, I usually read more than I write, regards from MX.
This is done with navigationview and menuItem and create a shape file for the round border and a selected_state file was created with the selected_checked when it is active and when it is deactivated.
Related
This question already has answers here:
Android button background is taking the primary color
(6 answers)
Closed 1 year ago.
I want to customize a button using my custom drawable file as follows:
custom_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#48cae4" />
<corners android:radius="10dp" />
</shape>
But after changing the background of the button(as follows) there is no effect
android:background="#drawable/custom_button"
But if I change <style name="Theme.A" parent="Theme.MaterialComponents.DayNight.NoActionBar"> to <style name="Theme.A" parent="Theme.AppCompat.DayNight.NoActionBar">, then custom drawble takes effect on the button, but then the Material Components I used, convert to normal widgets.
You cannot use custom drawable for MaterialButton or using Material Theme. You can only set solid color states and set them with app:backgroundTint attribute. Ref
Create tint.xml inside res/color/ directory:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_pressed="true"/>
<item android:color="#color/colorSecondary" />
...
</selector>
Use it in your button or button style:
app:backgroundTint="#color/tint"
I want to have a background color that changes color according to the state of the view.
I tired creating it exactly like the example from Google (except I'm using colors from my resources instead of hardcoding the hex values :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="#color/transparent" />
<item
android:color="#color/gray_3"
android:state_selected="true" />
</selector>
(this is located in res/color)
then I set this as a background to my view.but when I run the code, I get a crash with this error:
Binary XML file line #3: <item> tag requires a 'drawable' attribute or child tag defining a drawable
It's telling me that the "item" tag in my selector needs drawable, not color to define the color.
when I change it to a drawable, as such:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable ="#color/transparent" />
<item
android:drawable ="#color/gray_3"
android:state_selected="true" />
</selector>
that crash goes away, but Android Studio gives me a lint warning saying that "color" is required
my only suspicion is that maybe I'm not supposed to set the view background as a color selector
Try this:
drawable xml code:-
transparent color use like this
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#android:color/transparent"" />
<stroke
android:width="1dp"
android:color="#color/selected" />
<corners android:radius="4dp" />
</shape>
Define #color/selected in color xml.
As Google's documentation here, you should not define the default statement in the first item. Here's the example they provide.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#ffff0000"/> <!-- pressed -->
<item android:state_focused="true"
android:color="#ff0000ff"/> <!-- focused -->
<item android:color="#ff000000"/> <!-- default -->
</selector>
Try using hex color codes instead of color values.
I currently have a set of ToggleButtons, enclosed by a RadioGroup, with each button referring to a selector that changes the color of the button state, and writing code to implement the radio-buttonesque behavior. This works great. (EDIT: I should mention that the selector is what the android:background element of the button is referred to)
The Selector is something like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/gold"
android:state_checked="true" />
<item android:drawable="#color/white" />
</selector>
Now I want a second set of buttons to have the exact same behavior. The catch is that this time, I want Images on some of them, not text.
There are lots of StackOverflow posts on how to change the Image based on the Button's state but I don't want to change the image based on the state. I want to change the color of the button based on the state (the images have transparent backgrounds).
I'm really trying to avoid modifying the button images themselves.
I believe the solution involves making a selector with a layer-list but this is new territory for me.
Create a xml named colors.xml in res/values folder:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="red">#ff0000</color>
<color name="green">#00ff00</color>
</resources>
In drawable folder, create a xml file my_btn_toggle.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#color/red" />
<item android:state_checked="true" android:drawable="#color/green" />
</selector>
and in xml section define your toggle button:
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btntoggle"
android:background="#drawable/my_btn_toggle"/>
I think you are looking for tinting attributes - mentioned here.
In your case, try to set ColoStateList to android:tint attribute. In ColorStateList doc you have example that shows color selector - like drawable selector, but for colors.
(I'm not sure it's already support pre-Lollipop devices or you should do it programatically with PorterDuff filters for older versions.)
What apparently one needs to do is create a layered drawable in the selector like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item android:drawable="#color/gold"
android:gravity="fill"/>
<item android:drawable="#drawable/image"
android:gravity="fill"/>
</layer-list>
</item>
<item android:state_checked="false">
<layer-list>
<item android:drawable="#color/white"
android:gravity="fill"/>
<item android:drawable="#drawable/image"
android:gravity="fill"/>
</layer-list>
</item>
</selector>
The standard approach to variable state button selectors is what Priyank mentions above. Just the graphic must be transparent and declared like above, such that it will be layered with a background color to pull off the color state change
I am using a appcompat theme for my application. Need to know how i can show underline to spinner. It is just showing anchor. I tried setting up underline using android:background but it makes the anchor disappear.
Update your support library and in XML use
Please add this style to your Spinner
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
This is hacky (and not perfect) way to change spinner and underline color in appcompat theme. Main point that I customized Android support library images and xml files to change color.
1) go to support library package and copy 2 images (or download my custom from the bottom of this post)
/your-app/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.1.0/res/drawable-hdpi/abc_spinner_mtrl_am_alpha.9.png
and
/your-app/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.1.0/res/drawable-hdpi/abc_textfield_default_mtrl_alpha.9.png
2) Make a copy of those images
3) Change color of abc_spinner_mtrl_am_alpha.9.png (warning: leave black borders as they are, it's for 9 patch)
4) Change color of second bottom line of abc_textfield_default_mtrl_alpha.9.png (you can see in attached small image below)
5) Save and move files to your project drawables
6) Create bottom_line_color.xml drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-6dp" android:left="-6dp" android:right="-6dp">
<shape>
<stroke android:color="#color/brown" android:width="6dp"/>
</shape>
</item>
7) Create spinner_bottom_line.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_control_inset_material"
android:insetTop="#dimen/abc_control_inset_material"
android:insetBottom="#dimen/abc_control_inset_material"
android:insetRight="#dimen/abc_control_inset_material">
<selector>
<item android:state_checked="false" android:state_pressed="false">
<layer-list>
<item android:drawable="#drawable/my_custom_abc_textfield_default_mtrl_alpha" />
<item android:drawable="#drawable/my_custom_abc_spinner_mtrl_am_alpha" />
</layer-list>
</item>
<item>
<layer-list>
<item android:drawable="#drawable/my_custom_abc_textfield_default_mtrl_alpha" />
<item android:drawable="#drawable/my_custom_abc_spinner_mtrl_am_alpha" />
</layer-list>
</item>
</selector>
</inset>
P.S. I couldn't achieve same visual style as default spinner (visual changes shown below). If you start using this custom spinner theme you should use it in all project.
So add to values/styles.xml
<style name="My.Spinner.Style" parent="Base.Widget.AppCompat.Spinner.Underlined">
<item name="android:background">#drawable/spinner_bottom_line</item>
</style>
And use it in application like this:
<Spinner
android:id="#+id/account_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/My.Spinner.Style"
/>
Important:
You should resize spinner and place to various drawables folders. You can find size in same path as I showed above.
There are few popular sizes:
drawables-mdpi 20x26
drawables-hdpi 29x38
drawables-xhdpi 38x50
drawables-xxhdpi 74x98
You can take my customized images from here:
my_custom_abc_spinner_mtrl_am_alpha:
my_custom_abc_textfield_default_mtrl_alpha:
Spinner example is (xxhdpi), line is mdpi (because we don't need various lines in various drawable folders, so we can have only 1).
Visual difference (from android studio xml preview window) is shown here:
First line is my custom underline spinner, second is default Base.Widget.AppCompat.Spinner.Underlined
Applying style="#style/Base.Widget.AppCompat.Spinner.Underlined" didn't show any difference .Then gave android:backgroundTint and android:backgroundTintMode to spinner and it worked.
<Spinner
android:id="#+id/spBookingType"
android:spinnerMode="dropdown"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:backgroundTint="#ff000000"
android:backgroundTintMode="src_in" />
in styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:spinnerStyle">#style/holoSpinner</item>
</style>
<style name="holoSpinner" parent="Widget.AppCompat.Spinner.Underlined">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/colorPrimary</item>
</style>
========================
in Layout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<Spinner
android:id="#+id/spinCountry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_text_bottom_border"
android:paddingBottom="10dp" />
</android.support.design.widget.TextInputLayout>
===============================================
edit_text_bottom_border.xml file in Drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#535353" />
<!--android:color="#535353" />-->
</shape>
</item>
</layer-list>
Is it possible to change the text color of a textview if the textview is pressed?
I want to achieve a flashing effect with the color change only lasting as long as the button is pressed.
I know how to change the background of the textview with a selector list and the correct state but how can I change the color of text if the user pushes a button or a simple textview?
You can define a selector for colors as well. A short example that only distinguishes between pressed and all other states is:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#FFFFFF" />
<item
android:color="#4C566C" />
</selector>
For a full documentation on the selector see this unofficial documentation.
Put every color selector in a single file and put this files in a directory called color in the resources folder of your project.
Taken from official documentation:
XML file saved at res/color/button_text.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#ffff0000"/> <!-- pressed -->
<item android:state_focused="true"
android:color="#ff0000ff"/> <!-- focused -->
<item android:color="#ff000000"/> <!-- default -->
</selector>
This layout XML will apply the color list to a View:
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button_text"
android:textColor="#color/button_text" />
search for color selector to use in the
android:setTexColor
attr
you can change it using the setTextColor(ColorStateList) method
myTextView.setTextColor(myColorStates);
myTextView.setTextColor( 0xFFFF0000 )