How to customize ActionBar in Android (ActionbarSherlock)? - android-actionbar

I have used ActionBarSherlock in my application for providing ActionBars to pre honeycomb devices. I want to use Light.DarkActionBar Theme in, How can I customize following for parts of the ActionBar (see image)
Background color of ActionBar
Background Image for ActionBar tab bar
The bottom line which represents the selected tab
The divider between tabs...
I have tried using following settings, Though I have achieved some success but the result however doesn't look as expected,
<item name="android:background">#drawable/bg_title_bar</item>
<item name="background">#drawable/bg_title_bar</item>
<item name="actionModeSplitBackground">#drawable/bg_tab_bar</item>
<item name="android:actionModeSplitBackground">#drawable/bg_tab_bar</item>
Which are the other settings that I should use ? Thanks!!

This is how I did it just in case someone has similar requirements in future..
I downloaded a sample zip file from Style Genarator... Unzipping and a close look on the content suggested that I needed following attributes,
for Background color of ActionBar
<item name="background">#drawable/title_bg</item>
<item name="android:background">#drawable/title_bg</item>
2.
for Background Image for ActionBar tab bar
<item name="backgroundStacked">#drawable/tab_bg</item>
<item name="android:backgroundStacked">#drawable/tab_bg</item>
3.
for The bottom line which represents the selected tab
i. I created a style as follows
<style name="ActionBar.TabStyle" parent="#style/Widget.Sherlock.Light.ActionBar.TabView">
<item name="background">#drawable/ab_tab_indicator</item>
<item name="android:background">#drawable/ab_tab_indicator</item>
</style>
ii. I used that style in the theme as follows
<item name="actionBarTabStyle">#style/ActionBar.TabStyle</item>
<item name="android:actionBarTabStyle">#style/ActionBar.TabStyle</item>
4 for The divider between tabs...
in theme I added two lines..
<item name="actionBarTabBarStyle">#style/My.ActionBar.TabBar</item>
<item name="android:actionBarTabBarStyle">#style/My.ActionBar.TabBar</item>
than
<style name="My.ActionBar.TabBar" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="divider">#drawable/tab_divider</item>
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/tab_divider</item>
<item name="android:dividerHeight">24dp</item>
<item name="android:dividerPadding">8dp</item>
<!-- <item name="android:background">#drawable/tab_unselected</item> -->
</style>

Here is a link! use this style generator, customize as you need. Download the file, copy past all the drawables to respective directories, copy style.xml under values directory..
and use the give theme name as your theme either in manifest of respective activity..
Hope this works for you

Related

How to remove Qt layout from between two other layouts in Qt Creator's UI designer?

I have the following structure in my Qt form:
How can I completely remove the VerticalLayout_1, so that the gridLayout_8 will became an immediate and only child of page_4?
I tried selecting delete from the right click menu, but that deletes the childs of VerticalLayout_1 also. I also tried moving the gridLayout_8 in the drag and drop interface, but since it was the only child of the verticalLayout_1, I just wasn't able to move it to be in page_4.
One possible way would be to edit the .ui XML file manually to remove the unneeded layout. If you open up your XML file in an editor, you should find something like this:
...
<layout class="QGridLayout" name="page_4">
<item row="0" column="0">
<!-- below is the layout you want to remove -->
<layout class="QVBoxLayout" name="verticalLayout_1">
<item>
<layout class="QGridLayout" name="gridLayout_8">
...
</layout>
</item>
</layout>
</item>
</layout>
...
In your case, you just need to remove the <layout> tag and its <item> child, so that the gridLayout_8 becomes a direct child of an <item> of page_4, i.e.:
...
<layout class="QGridLayout" name="page_4">
<item row="0" column="0">
<layout class="QGridLayout" name="gridLayout_8">
...
</layout>
</item>
</layout>
...
After that, you can re-open the XML file in QtCreator to make sure everything looks the way it should.
I am not sure if there is a simpler way to achieve the same result from QtCreator. If you know of any, feel free to add an answer.
It can be tricky to select, but in the form, you should've been able to select the gridLayout_8 as a unit and drag it into the page_4 layout. That would leave the verticalLayout_1 still present, but empty, and then you can easily delete it. If the gridLayout_8 layout has zero margins, then it might be impossible to select; you would have to set the margins to something so that the border of gridLayout_8 is separated from the border of verticalLayout_1.
I drag layouts around all the time. The hard part is making the sure the layout is selected rather than something inside it. Just be prepared to undo and try again if you drop in the wrong place or grab the wrong thing.

Change Context Action Bar checkmark/done drawable?

Is there a good way to change the Context Action Bar checkmark drawable without creating a custom view for the whole Action Bar?
Yes there is. You simply need to add the "actionModeCloseDrawable" item to your style.
<style name="MyCustomTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionModeCloseDrawable">#drawable/my_custom_close_icon</item>
<!-- Support library compatibility -->
<item name="actionModeCloseDrawable">#drawable/my_custom_close_icon</item>
</style>

selector for actionBarItemBackground not working

I have to following problem, I want to change the selector from the actionbar item (just the normal actionbar, neither support actionbar nor actionbarsherlock). The backgroud color should be grey instead of default blue if the item icon is pressed. I have searched a lot and know that I need to override the attribute android:actionBarItemBackground in styles, but still my selector doesnt work, the background color is transparent, but the color in on pressed state is not grey, it stays transparent. :/
here is my code:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarItemBackground">#drawable/action_bar_item_drawable</item>
</style>
and here the drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#android:color/transparent"/>
<item android:drawable="#color/grey" android:state_pressed="true"/>
</selector>
anyone an idea?
When you supply a selector as a drawable, the first matching item that satisfies all conditions will be displayed.
In your drawable, the transparent color gets chosen every time because it doesn't have any condition such as state_pressed="true".
You should put items with more restricting conditions first and item without any condition as the last one.
Your drawable should instead look like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#color/grey" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>

ActionBar with Search and One more option

I would like to add 2 menu options to the action bar. One is Search and the other is custom one. When I tried to add, the 2nd option is always going to over flow menu only. But I want that to be displayed always as below.
But it's being displayed as
Here is my menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
<item
android:id="#+id/action_search"
android:showAsAction="ifRoom"
android:icon="#drawable/ic_search"
android:title="#string/action_search"
yourapp:actionViewClass="android.support.v7.widget.SearchView"
yourapp:showAsAction="ifRoom|collapseActionView"/>
<item
android:id="#+id/action_add_new_event"
android:icon="#drawable/ic_refresh"
android:showAsAction="ifRoom|withText"
android:title="#string/action_add_new_event"/>
</menu>
Any idea about how can I achieve this? Thanks in advance.
I just modified the below code
<item
android:id="#+id/action_add_new_event"
android:icon="#drawable/ic_refresh"
android:showAsAction="ifRoom|withText"
android:title="#string/action_add_new_event"/>
to
<item
android:id="#+id/action_add_new_event"
android:icon="#drawable/ic_refresh"
yourapp:showAsAction**="ifRoom|withText"
android:title="#string/action_add_new_event"/>
and it worked.

Change ActionBar Tabs background color

Is there a way to change the background color of the tab bar in the ActionBar without changing it in the one line version?
To clarify what I want: In portrait mode the ActionBar is split in two lines, the ActionBar itself and the tabs below. In landscape mode the tabs are in the actual ActionBar.
I want to change the background color of the portrait mode. If I change the background in the TabView it'll be changed for both modes. Do I have to create separate styles for those? Which brings up a second question: is there a way to know when it'll be two lines and when not?
Or am I just missing something?
I'm using ActionBarSherlock btw
I think you are looking for the android:backgroundStacked attribute of the ActionBar style:
<style name="MyTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:backgroundStacked">#drawable/my_stacked_background</item>
</style>
or (If using ActionBarSherlock):
<style name="MyTheme" parent="#style/Theme.Sherlock.Light">
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
<item name="actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="android:backgroundStacked">#drawable/my_stacked_background</item>
<item name="backgroundStacked">#drawable/my_stacked_background</item>
</style>
To Change Actionbar Tab's color, Pls use this code:
//For Example if you want White color as Tabs background, then
getActionBar().setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#FFFFFF")));
In ActionBarSherlock's values/abs__themes.xml there is
<item name="actionModeSplitBackground">#drawable/abs__cab_background_bottom_holo_dark</item>
You have to create your own theme derived from ABS
<style name="AppTheme" parent="Theme.Sherlock">
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="Widget.Sherlock.ActionBar">
<item name="actionModeSplitBackground">#drawable/my_split_background</item>
</style>
Hope this helps you.
ColorDrawable colorDrawable = new ColorDrawable(Color.White);
actionBar.SetStackedBackgroundDrawable(colorDrawable);
for xamarin folks.
To seperate styles depending on orientation you have to create in your /res folder a new folder called layout-land (for landscape mode) and layout-port (in portrait mode) and put your xml files for action bar and set it's specific style (with the color you want) on each folder.