Im trying to customize the actionbar sherlock tabs so they display the tab text below the tab icon. After searching and reading about the subject, I'm still not having much luck.
Here are the results I'm getting:
Custom tab1 selected
Custom tab1 not selected, standard tab2 selected
This is what I have so far:
Created my own styles.xml where I change some of the actionbar settings:
<style name="SkoletubeTheme" parent="Theme.Sherlock">
<item name="actionBarSize">#dimen/st__action_bar_default_height</item>
<item name="actionBarTabStyle">#style/Skoletube.TabView</item>
<item name="actionBarTabTextStyle">#style/Skoletube.Tab.Text</item>
</style>
<style name="Skoletube.TabView" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:background">#drawable/abs__tab_indicator_holo</item>
<item name="android:paddingLeft">6dp</item>
<item name="android:paddingRight">6dp</item>
</style>
<style name="Skoletube.Tab.Text" parent="Widget.Sherlock.ActionBar.TabText">
<item name="android:textAppearance">#android:style/TextAppearance.Medium</item>
<item name="android:textColor">#android:color/primary_text_dark</item>
<item name="android:textSize">10sp</item>
</style>
Created an xml ressource where I change and owerwrite some textsettings for the actionbar. Here I have increased the height of the actionbar, which in turn increases the height of the tabs. I also decreased the size of the text in order to make room for fitting icon and text in the tab
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Default height of an action bar. -->
<dimen name="st__action_bar_default_height">58dip</dimen>
<!-- Text size for action bar titles -->
<dimen name="ab__action_bar_title_text_size">10dp</dimen>
<!-- Text size for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_text_size">6dp</dimen>
<!-- Top margin for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_top_margin">-3dp</dimen>
<!-- Bottom margin for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_bottom_margin">5dip</dimen>
</resources>
Then I've defined a custom layout for the tabs to use, where I place the text below the icon:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/customTabLayout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:focusable="true"
android:gravity="center"
style="?attr/actionBarTabStyle"
>
<ImageView
android:id="#+id/sk_abs__tab_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
/>
<com.actionbarsherlock.internal.widget.ScrollingTextView
android:id="#+id/sk_abs__tab_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sk_abs__tab_icon"
android:layout_alignWithParentIfMissing="true"
android:layout_weight="1"
android:layout_centerHorizontal="true"
android:lines="1"
android:scrollHorizontally="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
style="#style/Skoletube.Tab.Text"
/>
<FrameLayout
android:id="#+id/abs__tab_custom"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="5dip"
android:layout_weight="1"
android:visibility="gone"
/>
Just for the record the attribute passed as the style for the relative layout points to this:
<style name="Widget.Sherlock.ActionBar.TabBar" parent="android:Widget"></style>
Then I've applied these changes to my app as follows, the first tab has my customized implementation, the second tab has the standard implementation:
final ActionBar actionBar;
actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayUseLogoEnabled(true);
// Set up tabs
myMediaTab = actionBar.newTab();
myMediaTab.setCustomView(R.layout.skoletube_tab_layout);
ImageView myMediaImg = (ImageView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_icon);
myMediaImg.setImageResource(R.drawable.tab_mymedia);
ScrollingTextView myMediaText = (ScrollingTextView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_txt);
myMediaText.setText("Tab1");
myMediaTab.setTabListener(this);
myMediaTab.setTag("MyMediaTab");
actionBar.addTab(myMediaTab);
myChannelsTab = actionBar.newTab();
myChannelsTab.setIcon(drawable.tab_mychannels);
myChannelsTab.setText("Tab2");
myChannelsTab.setTabListener(this);
myChannelsTab.setTag("myChannelsTab");
actionBar.addTab(myChannelsTab);
While I think I'm close to the solution, I think I've missed a step somewhere.
Obviously the blue bar behind the text/below the image needs to not be there, but I also haven't seemed to find out where I can set the focused image(I want the img to change color when a tab is selected) andtext color. Do I need to make the imageview focusable and handle it through that or?
I'm still fairly new at this, so the approach I have taken here might be wrong if there is a better/smarter way to go about doing this please do say.
Appreciate any suggestions and ideas.
I have solved that by using a compound drawable:
tv = new TextView(this);
tv.setText(R.string.tab_movies);
tv.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.nav_movies, 0, 0);
mBar.addTab(mBar
.newTab()
.setCustomView(tv)
.setTabListener(
new TabListenerImpl<TheatersTabActivity>(this, "theaters",
TheatersTabActivity.class)));
In order to deal with the selected or not selected image, I am using a selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_selected="true"
android:drawable="#drawable/nav_movies_on"/>
<item
android:state_selected="false"
android:drawable="#drawable/nav_movies_off"/>
</selector>
I don't know if you have found an answer for this or not yet but one solution could be to modify the tab image to include the text, with GIMP or photoshop something, and then just set those images in the tabs, instead of images and text. It is a bit of an awkward way of doing it but it would work.
Hope this helps!
Related
I just created a custom action bar from my styles.xml class that shows up just the way I want it. And I have activated it from the manifest file.
<style name="customStyle" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="actionBarStyle">#style/customActionBarStyle</item>
<item name="android:textColorPrimary">#color/titletextcolor</item>
</style>
<style name="customActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/custom</item>
</style>
However, I'm trying to find a way to CENTRALIZE the title text on the action bar from the styles.xml file. Please can anyone help with how to do that.
I tried using this: <item name="android:layout_gravity">center</item>. But it had no effect.
Most of the suggestions I've seen online requires creating a toolbar layout separately. But I've done that and Its not what I want because It requires way more code.
Thank you.
To have a centered title in ABS (if you want to have this in the default ActionBar, just remove the "support" in the method names), you could just do this:
In your Activity, in your onCreate() method:
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.abs_layout);
abs_layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="my Title"
android:textColor="#ffffff"
android:id="#+id/mytext"
android:textSize="18sp" />
</LinearLayout>
Now you should have an Actionbar with just a title. If you want to set a custom background, set it in the Layout above (but then don't forget to set android:layout_height="match_parent").
or with:
getSupportActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.yourimage));
<style name="ActionBarStyle"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/pink</item>
<item name="android:icon">#drawable/header</item>
<item name="android:displayOptions">showHome|useLogo</item>
<item name="android:titleTextStyle">#style/ActionBar.TitleTextStyle</item>
<item name="android:height">79px</item>
</style>
Above is my action bar style. the icon's original size is 41px in height. What i want is to keep the original size and center it vertically in the cation bar. But right now, the icon is stretch to fill the 79 px in height. Is it by default to stretch the icon to fill the space or what ?
Please point me to the right direction to solve this, Thanks in Advance.
Add an <item> like this to your action bar:
<item
android:title="my_icon"
app:actionLayout="#layout/my_icon_layout"
app:showAsAction="always"
/>
Notice the my_icon_layout line.
Create a my_icon_layout.xml in your res/layout folder that looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="41px">
<ImageView
android:src="#drawable/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
/>
</RelativeLayout>
Should work for you.
I have been trying to make an ActionBar for a while now. At first I decided just to draw it as an image (2nd actionBar in the image below) but noticed that on some of the devices that Image wouldn`t take up the whole screen width. As for the original ActionBar I use this code in my main Activity onCreate method:
final ActionBar actionBar = getActionBar();
#SuppressWarnings("deprecation")
BitmapDrawable background = new BitmapDrawable (BitmapFactory.decodeResource(getResources(), R.drawable.actionbar));
actionBar.setBackgroundDrawable(background);
//actionBar.setIcon(android.R.color.transparent);
actionBar.setDisplayShowTitleEnabled(false);
The first ActionBar has a light theme with the image being stretched. How can I make it to be transparent and is there a way to set ActionBar height so it wouldn`t look that stretched ? I also tried doing this with styles and had the same result.
EDIT I followed vinitius answer so I now have this: result the image is 482x104 and my phone is 480x800. This is the same problem that happened when using it as plain image. Image is in drawable-hdpi folder.
EDIT 2 by adding android:scaleType="fitXY" to the ImageView it will make the whole image stretched.
actionbar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#3383A8" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:src="#drawable/actionbar" />
</RelativeLayout>
EDIT 3 If I add the image as a RelativeLayout background it fill not fit in the whole width on the bigger devices. If I use it as an image on bigger width devices it will be stretched. Image
You can design your own actionBar view, you may even inflate it from any xml, and then just:
getActionBar().setCustomView(yourView);
getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
To adjust the height of your bar, you could do it like this:
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<!-- the height you desire according to your dimen -->
<item name="android:height">#dimen/action_bar_height</item>
</style>
Then, apply your theme. It works for me
I would like the icon of my app to appear in the center of the actionbar - no other changes to the actionbar are required at all.
I have looked at more comprehensible solutions, such as this one:
ActionBar logo centered and Action items on sides
While this is possible, it seems like overkill for such a simple use case. Is there any way it can be achieved through simple styling? I am using the default Holo Light theme, with base API 11.
Why not set a background to your ActionBar with the image in it (like a strip for the Action bar background with your image to its center, Nine patch would be preferred).
Then you can assign this as Action Bar background like,
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
and,
<!-- general styles for the action bar -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<!-- Support library compatibility -->
<item name="android:background">#drawable/actionbar</item>// your nine patch image
<item name="android:icon">#android:color/transparent</item>
</style>
You can then hide the Title as well. This is not a hack but considering you don't wanna temper ActionBar this will work. Have fun :)
You can do something like this:
ActionBar action = getActionBar();
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.action_menu, null);
action.setCustomView(view);
action_menu.xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10sp" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Left button" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="The logo" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Right button" />
</RelativeLayout>
I want to change the title bar color .Following the instructions here
, or eliminating the title bar with Notitle bar in AndroidManifest esults in not showing the text fonts in the list view (I use "simple_list_item_checked" listview).
Here is the xml for this activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#FFFAFA"
>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/green_button"
android:text="#string/show_items_kfc"
android:onClick="onClick"/>
<ListView
android:id="#+id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
(the rest of xml code is the same as the link above)
Any solutions to this?
Thanks!
If I got the problem:
Instead of parent="android:Theme":
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="customTheme" parent="android:Theme">
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground</item>
</style>
</resources>
Use parent="android:Theme.Light":
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="customTheme" parent="android:Theme.Light">
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground</item>
</style>
</resources>
The problem is that you are overriding the native Black theme which has black background and white letters. By switching to Light theme you achieve the black letter also have your own white background!
Note: After that you may have to fix custom theme colors (eg. title text color force to white) to white/black if they do not fit the UI you need.
you can use the titlebar object for the purpose...
the link below gives the good explanation on how to do that...
Title bar color change issues