I need to change the default arrow with circle in the navigation route view. I tried the following and it is not working.
<style name="NavigationLayerStyle">
<item name="mapbox_gpsDrawable">#drawable/ic_directions_black_24dp</item>
</style>
<com.mapbox.services.android.navigation.ui.v5.NavigationView
android:id="#+id/navigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navigationViewMapStyle="#style/CustomNavigationViewDark"
app:navigationDarkTheme="#style/CustomNavigationViewDark"
app:navigationLightTheme="#style/CustomNavigationViewDark"
app:navigationViewPrimary="#color/colorPrimary"
app:navigationViewLocationLayerStyle="#style/NavigationLayerStyle"/>
Is there any other way to achieve this?
I had this problem to and i figured out in few hours
First, you need to declare the custom style with your custom drawable.
In order to do this, you need to declare the "NavigationLocationLayerStyle" style extension (which contains the drawable) and give to him the attribute "mapbox_gpsDrawable"
<style name="customGPS" parent="NavigationLocationLayerStyle">
<item name="mapbox_gpsDrawable">#drawable/bike_icon_map</item>
</style>
Then, declare the "main theme" with your custom location layer style
<style name="customdark" parent="NavigationViewDark">
<item name="navigationViewLocationLayerStyle">#style/customGPS</item>
</style>
Once done, you simply have to inject your theme to your navigation view
To achieve this, you can't use any method of navigationView, because they all don't work (or at least i didn't find the correct one). So i wrote just this command (in kotlin):
(this as Context).setTheme(R.style.customdark)
This roughly works, hope is not too late.
Related
According to the documentation
A Button which supports compatible features on older versions of the
platform, including:
Allows dynamic tint of its background via the background tint methods
in ViewCompat. Allows setting of the background tint using
R.attr.backgroundTint and R.attr.backgroundTintMode. This will
automatically be used when you use Button in your layouts and the
top-level activity / dialog is provided by appcompat. You should only
need to manually use this class when writing custom views.
Now, this makes me assume that the following two buttons would look exactly the same on high level devices.
<androidx.appcompat.widget.AppCompatButton
android:text="AppCompatButton"
android:id="#+id/appcompatbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_below="#id/appcompatbutton"
android:id="#+id/button"
android:layout_width="wrap_content"
android:text="Button"
android:layout_height="wrap_content" />
However, here is how it actually looks:
I ran this on the following emulator:
Galaxy Nexus, API:28 (720 x 1280 xhdpi)
And when I apply buttonStyle in my appTheme like this:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="buttonStyle">#style/Widget.MaterialComponents.Button</item>
</style>
It changes the AppCompatButton but not the normal button like this:
(Note the slight difference in the rounded edges)
I also tried to create a custom button that both inherited from android.widget.Button and also androidx.appcompat.widget.AppCompatButton, both of these buttons show the same behaviour as using AppCompatButton in xml does. So it feels like the only outlier is Button in XML.
Question 1:
This all seems incredibly confusing according to me. Can someone clarify this as either a bug or feature?
EDIT 1
Doing debugging I found that the Button actually gets transformed into a MaterialButton, see the following:
Question 2:
Why is this transformation happening?
EDIT 2
Question 2 answer:
The transformation of Button to MaterialButton is due to the parent theme I was using.
Question 3:
How do you implement a custom button which works just like Button in xml would?
As a side note and personal opinion, also a slight repetition, this system is not only confusing but its hard to get it right and foolproof for future changes. In addition to this, the documentation is very poor. I would appreciate if an answer to this would be included as well, or at least a discussion regarding it, how to deal with it for example.
Short answers.
This all seems incredibly confusing according to me. Can someone clarify this as either a bug or feature?
They use different styles.
Why is this transformation happening?
There is an auto-inflation enabled which will replace <Button with <com.google.android.material.button.MaterialButton at runtime.
How do you implement a custom button which works just like Button in xml would?
You can customize the attributes in xml or the theme attributes.
Long answers.
They use different styles.
The default style of MaterialButton is Widget.MaterialComponents.Button.
This style inherits from Widget.AppCompat.Button but changes some attributes.
Here you can find the differences.
The main difference is here:
<item name="shapeAppearance">?attr/shapeAppearanceSmallComponent</item>
You can read more about shaping in the official doc.
If you navigate through the style you will find:
<style name="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerSize">#dimen/mtrl_shape_corner_size_small_component</item>
</style>
where mtrl_shape_corner_size_small_component = 4dp.
It explains the slight difference in the rounded edges.
Also you are using
<item name="buttonStyle">#style/Widget.MaterialComponents.Button</item>.
It doesn't work for the MaterialButton. You have to use:
<item name="materialButtonStyle">#style/Widget.MaterialComponents.Button</item>
The auto-inflation is here.
The MaterialComponentsViewInflater replaces some framework widgets with Material Components ones at inflation time, provided a Material Components theme is in use.
Something similar happens also with AppCompat (you can check that MaterialComponentsViewInflater extends AppCompatViewInflater).
It means that, the <Button is replaced <com.google.android.material.button.MaterialButton at runtime, if you are using a Material Theme.
There are different options. One of these is to define a custom style for buttons.
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="materialButtonStyle">#style/MyButtonStyle</item>
</style>
<style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="cornerRadius">xxx</item>
</style>
or
<style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="shapeAppearanceOverlay">#style/SShapeAppearanceOverlay.MyApp.Button.Rounded</item>
</style>
<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">xxdp</item>
</style>
I changed the <Button> to <ImageButton>
Quick and short way.
Don't forget to check & change references in java/kotlin files. Compiler will alert you any way.
To change the default option menu icon color(3 vertical dote), i have tried adding
<item name="android:textColorSecondary">#color/white</item>
But it doesn't make any change. I think it is not working coz my AppTheme parent is Theme.AppCompat.Light.NoActionBar. So can anybody help me on this?
The easiest way of doing it is by adding
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
or
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Dark</item>
to your primary Theme in order to change it to light or dark.
EDIT: In order to add any color for the overflow icon you would have to override the actionOverflowButtonStyle like so:
<style name="Theme.MyAppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="actionOverflowButtonStyle">#style/OverFlow</item>
</style>
<style name="OverFlow" parent="#style/Widget.AppCompat.Light.ActionButton.Overflow">
<item name="android:src">#drawable/ic_overflow_icon</item>
</style>
You can easily create your own overflow icon from websites like Android Asset Studio
2019 - Easiest way to do is write the below code to your xml in toolbar code or where you want.
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
please give up vote if its work.
You can Either use your own drawable or get the default overFlowIcon and change its tint value like below:
bd.toolbar.overflowIcon?.setTint(Color.WHITE)
To change the drawable all together, you just have to create your own vector and set it like below:
bd.toolbar.overflowIcon = ContextCompat.getDrawable(this,R.drawable.ic_baseline_menu_24)
If you are using Toolbar, just add the following code in your Activity:
toolbar.setOverflowIcon(getDrawable(R.drawable.ic_more_vert_black_24dp));
By using this code, you can directly replace the "three dots" icon with any other icon of your choice. It worked for me.
I am working on programmatically add a menu-Item into menu. I want to add background color on selection to particular Item. How can I add background to menuItem?
Your answer would be appreciated.
While other answers provide change style (which will affect all menu items, and, as I understand, need is to change one menu item),I propose you to use android:actionLayout attribute to implement your custom layour for menu item.
See documentation for it (search actionLayout there, it's very simple actually).
Also I think there is a possibility to make a selector as your layout and use it.
Update. Sorry, I mislead you :(
All of this will work only if MenuItem is shown as Action (not when pressing on three dots).
Seems like guys given other answers were right - the only way to customize this is changing themes.
But please check this and this - it might help you to provide selector for your purpose.
Also you can create PopupMenu or even PopupWindow, last one is fully customizable.
The last option is to create custom Spinner, check this.
Hope something from this will help you. Thanks.
Firstly You need to create an Style for popmenu as you want refer below sample for that
<style name="MyApp.PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
<item name="android:textStyle">#style/commonEditTextTheme</item>
<item name="android:popupBackground">#drawable/pop_up_menu_bg_with_shadow</item>
</style>
Place of drawable you can also replace with color as you needed or make XML Drawable into your drawable folder
<style name="commonEditTextTheme" parent="#android:style/TextAppearance.Medium">
<item name="android:fontFamily">sans-serif-light</item>
</style>
this pop menu theme add in your main application or activity theme like below
<!--My Theme-->
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
......
<item name="android:popupMenuStyle">#style/MyApp.PopupMenu</item>
</style>
I'm using appcompat v7 with the hamburger to arrow toggle.
However, I would like to add some padding on the left of the toggle.
This is my current situation :
http://nl.tinypic.com/r/2a0f712/8
This is what I would like to have :
http://nl.tinypic.com/r/v3q176/8
I've tried this :
findViewById(android.R.id.home).setPadding(25, 0, 15, 0);
But that didn't work. However, this did add padding on the right of the toggle.
I've also tried to add padding in the styles but that didn't work either.
AFAIK, the action is hard-coded in layout resources. U cant change the padding. Google did this to maintain the consistency across the app guess.
However u can define ur own icon in a drawable with ur own attributes (padding and all) and use it as an indicator by adding this line to styles.xml
<item name="android:homeAsUpIndicator">#drawable/xyz</item>
And the image u have shown about what u want is actually a toolbar and not an action bar. In toolbar, the icon is by default placed there.
To know more about toolbar and how to implement them, here is a link : http://android-developers.blogspot.in/2014/10/appcompat-v21-material-design-for-pre.html
I'm going to assume you are familiar with styling to some extent and recommend you go that route. FYI I have not confirmed the code below as working but I think it would be close to what you want.
For res/values-14/style.xml, something like this:
<!-- style for Action Bar -->
<style name="MyPaddedActionBar" parent="android:style/Widget.Holo.Light.ActionBarView">
<item name="android:paddingLeft">32dp</item>
<item name="android:paddingRight">32dp</item>
</style>
And then for everything 14 and below, you would use AppCompat (res/values-14/style.xml):
<style name="MyPaddedActionBar" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:paddingLeft">32dp</item>
<item name="android:paddingRight">32dp</item>
</style>
I am trying to start an activity with a custom transition animation. The only way I have found out so far to do this (without using onPendingTransition() in the previous activity) is to use a custom theme on the activity and define either activityOpenEnterAnimation, taskOpenEnterAnimation, windowEnterAnimation or windowAnimationStyle to set the animation. But, none of these attributes are working for me. Some experimentation yielded the following results-
If I set the windowAnimationStyle attribute to some custom style which defines values for activityOpenEnterAnimation, taskOpenEnterAnimation, windowEnterAnimation or windowAnimationStyle I can get rid of the default transition animation occurring at the start of the activity. It doesn't show the transition animation using the actual value specified but at least the default animation is not shown.
According to the reference doc here,
I should be able to define an animation at the start of the activity using activityOpenEnterAnimation. But no success so far.
Any ideas?
I am using this in a current project of mine, it is basically pretty simple. You define a new animation style in your styles.xml, like this:
<!-- just defines top layer "Animation" -->
<style name="Animation" />
<!-- the animations must have been defined in your "anim" folder, of course -->
<style name="Animation.MyAwesomeAnimation" parent="android:style/Animation.Activity">
<item name="android:activityOpenEnterAnimation">#anim/myawesomeanimation_enter</item>
<item name="android:activityOpenExitAnimation">#anim/hold_long</item>
<item name="android:activityCloseEnterAnimation">#anim/hold_long</item>
<item name="android:activityCloseExitAnimation">#anim/myawesomeanimation_exit</item>
</style>
Then set this style in a theme (themes.xml):
<style name="Theme.MyAwesomeTheme" parent="Theme.Default">
<item name="android:windowAnimationStyle">#style/Animation.MyAwesomeAnimation</item>
</style>
And then you can simply set these themes to every activity you like in your AndroidManifest.xml:
<activity
android:name=".MyAwesomeActivity"
android:theme="#style/Theme.MyAwesomeTheme" />
Now I wish you big fun with activity animations! :-D