ActionBar padding between elements: - android

I am trying to put padding between items in the action bar - specially my logo and the Navigation drawer icon, following is the style I am using:
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:icon">#drawable/logo_header</item>
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
</style>
<style name="MyActionButtonStyle" parent="#android:style/Widget.ActionButton">
<item name="android:minWidth">32dip</item>
<item name="android:padding">12dp</item>
</style>
</resources>
However these two dont seem to work:
<item name="android:minWidth">32dip</item>
<item name="android:padding">12dp</item>
Any idea what I am missing here?

I'd make the logo into a drawable layer list instead and that way i can set its padding something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/my_main_icon"
android:right="20dp"/>
</layer-list>
And if you use this please update your manifest to use this drawable as the main icon instead of the current.
update: it might be better to use this icon as a logo as per reading on stackOverFlow.
so in your manifest in application tag set android:logo="my_main_icon" , researching this still.
update: if you use logo i think you have to turn it on in the actionbar...
setDisplayUseLogoEnabled() Enables the use of an alternative image (a
"logo") in the Action Bar, instead of the default application icon. A
logo is often a wider, more detailed image that represents the
application

i think the correct syntax here would be:
<item
...
android:layout_padding="12dp"
...
/>

Related

How can I apply a transparent background to the windowBackground

I have created a simple image using Inkscape with a transparent background, alpha(0) and at the center, I have a small logo. I then applied it to my styles like below:
<style name="SplashScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowFullscreen">true</item>
<item name="android:windowBackground">#drawable/splashscreen</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorPrimaryDark">#color/colorPrimary</item>
<item name="colorAccent">#color/loginHeaderBackground</item>
</style>
It works fine, however, I'm missing my main objective, its displaying a black screen with the middle icon instead of a transparent one.
What I want (User should be able to still see their phone background when the app starts to launch)
What I'm getting
Why is this?
There is an example for you. I wrote custom theme and i added this theme to my activty. You should add this your splash activity in manifest file.
<activity ...
android:theme="#android:style/Theme.TranslucentTheme"
.../>
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="TranslucentTheme" parent="android:Theme.Translucent">
<item name="android:windowBackground">#color/transparent_black</item>
</style>
<color name="transparent_black">#DA000000</color>
</resources>

Android Dialog in Custom Style: Remove Blue Line and set ActionBar Color

I am creating a custom Dialog with the following code and the view as follow:
mCountryDialog = new Dialog(getActivity(),android.R.style.Theme_Holo);
However, i want to remove the blue divider and change the background color of the "action bar"
Attempted Result
With reference to stackoverflow, i created a custom dialog style in style.xml
`<style name="LoCountryDialog" parent="android:Theme.Holo">
<item name="android:windowFullscreen">true</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowNoTitle">false</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowBackground">#color/main_theme_red</item>
`
I would change the background color from black to red but the "Topbar" which shows Time, battery level ,etc was gone and the blue divider line remains here.
It will be great if anyone would share the solution with me, many thanks in advance!
Simply add this line to your Dialog.onCreateView() Method:
getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE);
http://jgilfelt.github.io/android-actionbarstylegenerator
It will generate all necessary nine patch assets plus associated XML drawables and styles which you can copy straight into your project.
You create a theme with these styles similar like that
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="#style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#ff0000</item>
</style>
</resources>
after this you apply your theme to your entire app or individual activities:
for further reading, please see the documentation

Overflow menu row customization

I am wanting to customise the rows of the overflow menu in the action bar. I found a great blog post explaining how to go about doing this, which seem simple enough. The link is below.
http://scriptedpapers.com/2014/08/12/android-action-bar-overflow-menu-customization/
I am specifically wanting to change the background colour of the overflow menu rows so the theme that I am using looks like the following:
<resources>
<!--the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/CustomActionBar</item>
<item name="android:homeAsUpIndicator">#drawable/upcaret</item>
<item name="android:actionOverflowButtonStyle">#style/CustomOverflowButton</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
</style>
<!--ActionBar style -->
<style name="CustomActionBar" parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/customBlue</item>
</style>
<style name="CustomOverflowButton" parent="#android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">#drawable/overflowbutton</item>
</style>
<style name="PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#color/customBlue</item>
</style>
Applying this theme to the application, the background colour of the overflow menu remains the same colour as the default for Holo.Light.DarkActionBar, despite setting a custom popupMenuStyle.
For my project, the minSdkVersion is 15 and targetSdkVersion is 19.
Does anyone have any ideas?
Thanks.
Try specifying a 9-patch drawable instead of a color.
Go here and choose the color that you want your rows to be by selecting a color from the "Popup color" drop-down.
The only file you need from the zip is menu_dropdown_panel.9.png.
Make sure to place this file in your various drawable-xxxx folders.
Then use it like this:
<style name="PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel</item>
</style>
If it still doesn't work, add this to the above:
Add this line to your main theme (CustomActionBarTheme):
<item name="android:actionBarWidgetTheme">#style/PopupWrapper</item>
Then add this:
<style name="PopupWrapper" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/PopupMenu</item>
</style>

Custom Android appcompat Actionbar: how to remove bottom border on v11+ devices

I'm using the Android appcompat library to create a custom action bar. That all works. On devices not using the v11 theme (values folder) a bottom border does not appear as it should not. But when v11+ devices use the theme (in the values-v11 folder of course) there is a bottom border. It's a thin 1dp type border. I have a custom background applied for the actionbar and this all works on version < v11, just an annoying extra bottom border is added on v11+ devices ;-]
Now I found via another SO article where the user was using ActionBarSherlock that the base theme needed to be Theme.X and not theme.X.Light.x to resolve this issue (with no explanation as to why). I applied this same logic (I'm using android's appcompat, not sherlock one) and it worked for removing the border but then other style issues came up with radio buttons, etc, taking on the non-light theme. So I want to keep the base theme as 'Theme.AppCompat.Light' and get rid of the bottom border on the actionbar. Again, it doesn't show up on devices < v11.
Screen shots (Theme.AppCompat.Light/Theme.AppCompat):
My theme (same in values folder minus the android prefacing):
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>
Through the power of SO my question was finally answered! I tried everything the OP in the below link tried and more over the last two days. Somehow I didn't see this SO thread (I wasn't using search terms 'divider', methinks).
What worked for me was to have the no window overlay property set to null. I see that setting the window color may work on some higher version of android (4.2.x+) as well, so I decided to set both. Here is the SO link with the solution(s) to this nasty feature (bug?): link
My final values-v11/themes.xml -
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>
If user2545146 answer doesn't work on lollipop.
call setElevation on the actionbar from the activity.
getSupportActionBar().setElevation(0);
The only thing that worked for me was
AppBarLayout appBarLayout = findViewById(R.id.my_app_bar_layout);
appBarLayout.setOutlineProvider(null);
api >= 21 only

Actionbar fills transparent icon pixels with wrong background

I am using actionbar sherlock. I have an icon with transparent pixels. But when I run my app, it seems "something" is replacing these transparent pixels with the main background from the theme, not the actionbar background.
It does not matter if the main background is specified as a #color or a #drawable (9 patch) but in the latter case (which is what I actually want) there is an additional quirk in that a few pixels of the main background 9 patch appear at the right(!) hand edge of the actionbar. Go figure.
I have no idea what's going on here. Just that if I remove the background items from the main style, the actionbar looks as it should (so that seems to be the problem).
Has anyone else seen such behaviour before? Thanks for taking a look!
I'll paste my style.xml below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ViewPagerIndicator">
<attr name="vpiSubTabPageIndicatorStyle" format="reference"/>
</declare-styleable>
<style name="Theme.StandBy" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="vpiTabPageIndicatorStyle">#style/CustomTabPageIndicator</item>
<item name="vpiSubTabPageIndicatorStyle">#style/CustomSubTabPageIndicator</item>
<item name="android:actionBarStyle">#style/Theme.StandBy.App.ActionBar</item>
<item name="actionBarStyle">#style/Theme.StandBy.App.ActionBar</item>
<!-- ------------------------------------------ ->
<!-- I tried both of these, but can't get transparent pixels in my icon to work --->
<!-- when I use the 9 patch (frg_background) in stead of a plain color, there -->
<!-- are extra artefacts in that some of the 9 patch pixels end up on the righthand -->
<!-- side of the action bar -->
<!--<item name="android:background">#drawable/frg_background</item>
<item name="background">#drawable/frg_background</item>-->
<item name="android:background">#color/cream</item>
<item name="background">#color/cream</item>
<!-- ------------------------------------------ ->
</style>
<style name="Theme.StandBySubTab" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="vpiTabPageIndicatorStyle">#style/CustomSubTabPageIndicator</item>
</style>
<style name="Theme.StandBy.App.ActionBar" parent="Widget.Sherlock.ActionBar">
<!--
Both `android:xyz` and `xyz` need to be set to support 4.x and 2.x devices.
-->
<item name="android:displayOptions">showHome</item>
<item name="displayOptions">showHome</item>
<item name="android:background">#drawable/bar</item>
<item name="background">#drawable/bar</item>
</style>
<!-- top tab style -->
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#drawable/tab_background</item>
<item name="android:textAppearance">#style/CustomTabPageIndicator.Text</item>
<item name="android:divider">#drawable/tab_divider</item>
<item name="android:showDividers">middle</item>
<item name="android:paddingLeft">4dp</item>
<item name="android:paddingRight">4dp</item>
</style>
<style name="CustomTabPageIndicator.Text">
<item name="android:textColor">#color/tab_text</item>
<item name="android:textSize">10sp</item>
<item name="android:textStyle">bold</item>
</style>
<!-- sub tab style -->
<style name="CustomSubTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#drawable/sub_background</item>
<item name="android:textAppearance">#style/CustomSubTabPageIndicator.Text</item>
<item name="android:paddingLeft">4dp</item>
<item name="android:paddingRight">4dp</item>
</style>
<style name="CustomSubTabPageIndicator.Text">
<item name="android:textColor">#color/sub_text</item>
<item name="android:textSize">10sp</item>
<item name="android:textStyle">bold</item>
</style>
</resources>
EDIT: since the problem goes away if I do not specify background and android:background in my main style (Theme.StandBy) it occurred to me I might be asking the wrong question. My purpose in putting these items in is to specify a default background for all of my fragments (content of tabs). That works, but has the unwanted side-effects I mentioned above. Should I be doing this in another way? Thanks for any suggestions!
Properties that you set on the theme will be inherited by EVERY view when the view resolves its styles. In your case, every view that doesn't have an explicit background set somewhere else will render an #color/cream background. This is bound to cause the kinds of visual problems you're experiencing, as well as creating massive amounts of unnecessary overdraw.
A much better way to apply common styling to your fragments is to simply create a style
<style name="Fragment">
<item name="android:background">#color/cream</item>
</style>
and reference it from the root view of each fragment, e.g.
<LinearLayout style="#style/Fragment">
...
</LinearLayout>
This means a bit of extra typing as the reference to the style needs to go into each fragment, but there is no good way to avoid this -- Conceptually only View classes can have their own default style set by the theme (e.g. you can point the textViewStyle attribute at a style definition, and it will apply to all TextViews). However Fragments (or Activities for that matter) aren't Views, so this mechanism doesn't apply.

Categories

Resources