I'm trying to create splash screen for android application with this article: Splash Screens the Right Way. As article says, I created LayerDrawable with two layers: background bitmap and logo (also bitmap). Logo need to be located at the bottom of screen with indent 32dp, for example. Here my drawable:
<item
android:drawable="#drawable/splash_image" />
<item
android:id="#+id/logo"
android:bottom="#dimen/margin_splash">
<bitmap
android:gravity="bottom|center"
android:src="#drawable/logo_green" />
</item>
I pointed this drawable as android:windowBackground param in my splash activity theme. I also want to have transparent status bar when splash screen is shown on devices where this feature is supported (API >=19), so I created two resource files for different android versions and in values-v19\styles.xml I pointed flag android:windowTranslucentStatus as true. Here my values/styles.xml and values-v19/styles.xml:
values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/bg_splash</item>
</style>
</resources>
andvalues-v19/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/bg_splash</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
But on some Android devices with Soft NavigationBar my logo is overlapped by it.
I tried to point android:windowTranslucentNavigation flag as false but without success.
Is any way to make Android Soft NavigationBar transparent together with
transparent status bar, or I need detect Soft NavigationBar availability in onCreate method of my splash activity and update my LayerDrawable by adding bottom indent for logo to the height of NavigationBar?
Thanks.
Did you try this?
<item name="android:navigationBarColor">#android:color/transparent</item> <item name="android:windowTranslucentStatus">false</item> <item name="android:windowTranslucentNavigation">false</item>
Also you can a little bottom padding to your bitmap item in the layer drawable.
I encountered the same problem and solved this problem by setting the following attributes.
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
This attributes is set to values-v21 directory.
Related
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>
I want to change the color of the ToolbarItem and the overflow button (3 vertical dots). As I have found out the colorPrimaryDark is responsible for both. If I change the color also the color of the dots or ToolbarItem text color changes. But changing colorPrimaryDark leads to modifications in my generall app for all sorts of elements.
How do I change the color specifically for the items in the ActionBar?
Here I define AppTheme for my app in MainActivity.cs:
[Activity(Theme = "#style/AppTheme", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
{
// ...
}
In themes_apptheme.xml under Resources/values I have defined my AppTheme:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Material.Light">
<!-- ... -->
<item name="android:colorPrimaryDark">#color/primaryDark</item>
<item name="android:textColorPrimary">#color/primaryDark</item>
<item name="android:actionBarStyle">#style/MyActionBarTheme</item>
</style>
</resources>
In styles.xml under Resources/values there is the referenced MyActionBarTheme:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="MyActionBarTheme" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:homeAsUpIndicator">#drawable/ic_back</item>
<!--<item name="android:background">#color/primaryDark</item>-->
<item name="android:textColorPrimary">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="android:actionModeBackground">#color/primaryDark</item>
</style>
</resources>
I've tried the solutions from the similar questions (e.g. textColorSecondary), but non of them worked or specifically targets my needs. For the dots an image could be used, but that doesn't change the color of ToolbarItem and seems not to be necessary. Also other solutions are using the newer Toolbar instead of the ActionBar. Furthermore the themes are different. Can I somehow use a custom renderer? Or would it be sufficient to add one item to my style? Which one is it?
PS: I'm using Xamarin.Forms 2.5.0.121934
Edit:
My goal is to have a white color for the overflow button and the ToolbarItem text. This can be achived, if I use the following:
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<!-- ... -->
</style>
The downside of this approach is, that the background of ContextAction is black and I don't know how to change the color (as before with the dots and the toolbar button). Styling in Android is a big hassle for me.
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"
...
/>
I am trying to style the actionbar of my app (I use Actionbar Sherlock) by changing its background.
I set up a theme for my Application containing the following line to style the Actionbar:
<item name="android:actionBarStyle">#style/ActionBar</item>
I then created a style called Actionbar:
<style name="ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="titleTextStyle">#style/TitleText</item>
<item name="android:titleTextStyle">#style/TitleText</item>
<item name="background">#drawable/actionbar_background</item>
<item name="android:background">#drawable/actionbar_background</item>
</style>
Finally I have an image file named actionbar_background.9.png (3x5px) in my drawable folder, which looks like this:
All of this style my actionbar just fine but there's a red to purple gradient at the bottom and I don't understand what creates that. Below are screenshots of the rendered ActionBar (the first one using the image above, the second one when I replaced the red pixels with green ones):
I tried replacing the red with green in the image file and the gradient changes accordingly (from green to purple) but I still don't get why there is a gradient.
Anyone can point me into the right direction?
I ended up using the following layerlist as the drawable for the actionbar background:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/brand_orange" />
<item android:drawable="#color/brand_purple" android:bottom="2dp" />
</layer-list>
All suggestions welcome for another approach using 9-patch.
I'm using the Holo.Light Theme for the ActionBar. I'm using the splitActionBar Option via android:uiOptions="splitActionBarWhenNarrow" in my manifest. I also use a custom layout for the ActionBar:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="noTitle" parent="android:Theme.Holo">
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:height">0dip</item>
</style>
</resources>
The thinking behind this one is, to not "show" the top actionbar. So I basically see the "bottom" actionbar and resize the "top" actionbar to zero. This works perfectly fine, but now the problem:
If I use the app on the new devices e.g. Galaxy S4 android 4.2.2 it resizes the "top" and "bottom" actionbar to zero. How can I only resize the top actionbar to zero, so I don't see the title on the new devices.