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.
Related
I have been doing this for years with no problem, when I need to create a button with curved corners I create a drawable with corners and a color and I use it as the background to the button I need to change, but since Android Studio 4.2 preview, it's not working any more. Can anyone help. Thanks.
Here is an example of how the drawable xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#EFB70E" />
<corners android:radius="12dp" />
</shape>
and I set that drawable as the background of my button.
In Material Design components, buttons have a default backgroundTint value set to colorPrimary that is why no matter what color you use in your button's background, it will be tinted blue(colorPrimary).
Just Add this line in the button's code : app:backgroundTint="#null"
And a better way to make your buttons round in material design:
In your themes.xml file add this :
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
</style>
Then if you want to apply round corners to all buttons in the app, add this line in your app's main theme :
<item name="shapeAppearanceSmallComponent">#style/ShapeAppearance.App.SmallComponent</item>
Otherwise, if you want to apply this style to specific button, add this line to it's code:
style="#style/Widget.App.Button"
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.
How do i remove this line under the action bar?
(source: android.com)
I would like it to be a solid color like the way google+ or the below app is:
i have tried
<item name="windowContentOverlay">#null</item>
<item name="android:windowContentOverlay">#null</item>
But that doesnt seem to remove it. All i want to do is just use a solid color, no tiled image, no gradient.
they this code it is override Background of actiobar
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(getResources().getDrawable(
R.drawable.actionbar));
drawable/actionbar.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#06B697" />
</shape>
You can change the style the ActionBar using the styles.xml file in res/values
In the theme you are yusing for your app write
<item name="android:actionBarStyle>#style/actionBarStyle</item>
and add the style actionBarStyle
<style name="actionBarStyle"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:background>Color or drawable you want as background</item>
</style>
Here is a nice tutorial about this
alternativly, you can style the actionbar programmatically from an activity:
getActonBar.setBackgroundDrawable(drawable you want as background);
On my ActionBar the "up icon" and logo during the "pressed" state shows a bright red border (as I want). But it doesn't show the bright red through the image's transparency, so the image still shows the ActionBar normal background color. The image is transparent and works in the default theme. But when using the ActionBar Theme Generator, I can't get it to work. However, the Action buttons on the right behave properly.
I can get the light red to disappear completely by making the pressed state transparent, so I think I'm styling the item underneath the image, and not the image (or its immediate container?). I'm not using Sherlock. I'm targeting min sdk 16.
My theme xml:
...
<item name="android:actionBarItemBackground">#drawable/red_selectable_background</item>
My red_selectable_background.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="false" android:state_focused="true" android:drawable="#android:color/transparent" />
<item android:state_pressed="true" android:drawable="#drawable/red_pressed_background" />
<item android:drawable="#android:color/transparent" />
</selector>
My red_pressed_background.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/blood_red" />
</shape>
My Color:
<color name="blood_red">#a00f0f</color>
I blew away my styles and generated fresh. I think what I was missing was when I merged the ActionBar theme with the Holo theme (both generated), I didn't properly merge the generated top-level ActionBar theme. Now I don't need any of the custom stuff I wrote before.
Basically I just had to merge the following items into my theme that inherits from android:Theme.Holo:
<item name="android:actionBarItemBackground">#drawable/selectable_background_xxx</item>
<item name="android:popupMenuStyle">#style/PopupMenu.xxx</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.xxx</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.xxx</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.xxx</item>
<item name="android:actionBarStyle">#style/ActionBar.Transparent.xxx</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_xxx</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_xxx</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.xxx</item>
I'm using the following style together with a set of nine patch images to create a red line at the bottom of some Ice Cream Sandwich tabs instead of the standard blue line:
<style name="customTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:tabStripLeft">#null</item>
<item name="android:tabStripRight">#null</item>
<item name="android:tabStripEnabled">false</item>
<item name="android:showDividers">none</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:background">#drawable/tab_line</item>
<item name="android:gravity">center</item>
</style>
<style name="customTabBar" parent="#android:style/Widget.Holo">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/divider2</item>
<item name="android:dividerPadding">0dp</item>
</style>
<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
<item name="android:actionBarTabStyle">#style/customTabStyle</item>
<item name="android:actionBarTabBarStyle">#style/customTabBar</item>
</style>
The red line is shown and everyting looks good, except for the divider between the tabs.
As you can see inside the green box in the image the line is not drawn below the divider.
How do I select a drawable, or a style for this divider?
The android:divider and android:showDividers items are not responsible for the divider between tabs. They only select the divider drawn between the tab icon and the tab title. I hide those dividers because there isn't a title and a divider would look strange.
Update With the answer from Aneal in mind I added a second style customTabBar. The style selects a drawable as a divider. The divider is a solid black line created with the following 9patch drawable:
With this drawable the divider is drawn, but there is also a blank line next to it:
After removing every style I use I got the following image:
This image also contains the small gaps. Therefore it seems that this is some kind of default behavior.
However I found a way to work around the problem. I set the redline as a standard Background for the whole tabbar. This way the gap appears but nobody can see it because the background, that already contains the line is shown.
I now use the following style for all my activities:
<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
<item name="android:actionBarTabBarStyle">#style/customTabBar</item>
<item name="android:actionBarTabStyle">#style/customTabStyle</item>
</style>
This style is used to style each single tab inside the tabbar:
<style name="customTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:showDividers">none</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:background">#drawable/tab_line</item>
<item name="android:gravity">center</item>
</style>
To style the whole Tabbar i use the following style:
<style name="customTabBar" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/divider</item>
<item name="android:dividerPadding">0dp</item>
<item name="android:background">#drawable/tab_unselected</item>
</style>
This style defines my custom divider and also defines the background for the tabbar. As background I directly set the nine patch drawable that is drawn if a tab is not selected.
The result of all this is a tabbar with a red underline without any gaps.
Here you go.
<style name="YourTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarTabBarStyle">#style/Divider</item>
</style>
<style name="Divider" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:divider">#drawable/your_divider_drawable_here</item>
<item name="android:showDividers">middle</item>
<item name="android:dividerPadding">12dip</item>
</style>
<style name="AppTheme" parent="AppBaseTheme">
<item>......
</item>
<item name="android:actionBarDivider">#null</item>
</style>
here #null is for not to provide any divider
and if you want to customize your divider than use #drawable/your_divider_image
If you'd like to get rid of dividers you could do just this:
<style name="customTabBar" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:divider">#null</item>
</style>
Btw. This is caused by huge bug in the ICS in LinerLayout class implementation of android:divider attribute. It was introduced in Honeycomb, broken in ICS and working again in Jelly Bean.
Problem is that when you use android:divider it make small space between it child for place divider, but place divider no into this space, but after it, so it will be overlap by the tab itself and space will stay empty. Very stupid bug. Try to compare LinerLayout source code for release 4.0 and 4.1.
And yes solution is put the delimiter to the background of all tabs and it will be visible only in the gaps between tabs caused by this bug.
Based on ATom's answer, here's a way to have something resembling dividers in all android versions.
In order to make this work, you don't use any of the native divider methods (because they are broken in some versions). Don't forget removing any code where you set dividers.
The trick is simply setting a very small right margin in the views used for each tab. This way, there will be a small gap where you can see the background (the TabHost). To finish this, you set the background on the TabHost to mimic stretched divider.
Although this trick doesn't work for all possible designs you might want, it works well for many cases like the one I had.
Here's a sample implementation:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// ...
// inflate or create tabHost in code
// call tabHost.setup
// ...
TabWidget tabWidget = tabHost.getTabWidget();
tabWidget.setBackgroundResource(R.drawable.tab_divider);
// ... add tabs
for( int i = 0; tabWidget.getChildCount()-1; i++) {
View view = tabWidget.getChildAt(i);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view.getLayoutParams();
layoutParams.rightMargin = getResources().getDimensionPixelSize(R.dimen.tab_divider_width); //1dp
view.setLayoutParams(layoutParams);
}
return tabHost;
}
Here's a sample tab_divider drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/divider_color" />
<stroke android:width="#dimen/tab_divider_vertical_padding"
android:color="#color/tab_background_color"/>
</shape>