ActionBar overflowing on pre-ICS devices - android

I'm developing an application that needs to be compatible with Android 2.2+ it's using ActionBarSherlock to customize the ActionBar on pre-ICS devices.
I'm facing a problem only on 2.2 and 2.3 devices that makes the content of the ActionBar overflow even though the content fits the device screen. Something like this:
I've already tested (on the emulator) the device screen size (mdpi on 320x480) runnning Android 4.0 and it works fine, so I believe that problem is something related to the ActionBarSherlock.
I'm also tried drastically reducing my icon files, but it even though the images were smaller, the content was still overflowing.
Here is my styles.xml file:
<style name="AppBaseTheme" parent="Theme.Sherlock.Light.DarkActionBar">
</style>
<style name="AppTheme" parent="AppBaseTheme">
<item name="actionBarStyle">#style/AppBaseTheme.ActionBarStyle</item>
<item name="actionBarTabStyle">#style/AppBaseTheme.ActionBarTabStyle</item>
<item name="actionBarTabBarStyle">#style/AppBaseTheme.ActionBarTabBarStyle</item>
</style>
<style name="AppBaseTheme.ActionBarStyle" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/action_bar_background</item>
<item name="android:background">#drawable/action_bar_background</item>
</style>
<style name="AppBaseTheme.ActionBarTabStyle" parent="Widget.Sherlock.Light.ActionBar.TabView.Inverse">
<item name="background">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
<item name="android:paddingLeft">0dip</item>
<item name="android:paddingRight">0dip</item>
</style>
<style name="AppBaseTheme.ActionBarTabBarStyle" parent="Widget.Sherlock.Light.ActionBar.TabBar.Inverse">
<item name="background">#drawable/action_bar_tab_divider</item>
<item name="android:background">#drawable/action_bar_tab_divider</item>
<item name="divider">#drawable/sp</item>
<item name="android:divider">#drawable/sp</item>
</style>
The file #drawable/action_bar_background is 320px wide and both #drawable/action_bar_tab_divider and #drawable/sp are 1px wide.
And here is the code for creating the tabs on my main activity:
ActionBar actionBar = super.getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
this.createTab(actionBar, R.drawable.action_bar_tab_home_off);
this.createTab(actionBar, R.drawable.action_bar_tab_news_off);
this.createTab(actionBar, R.drawable.action_bar_tab_videos_off);
this.createTab(actionBar, R.drawable.action_bar_tab_guide_off);
private void createTab(ActionBar actionBar, int resource) {
Tab t = actionBar.newTab();
t.setTabListener(this);
t.setIcon(resource);
actionBar.addTab(t);
}
Any ideas?

One of the problems is that the Action View "Tab Bar" automatically scales images to a predetermined size, so even if you make the icon super large or super small it should fill roughly the same space in the action bar.
The TabBar/TabView was also designed to overflow, which you have already found ^.^ It's for apps that open up 10 to 20 different tabs at a time, the user can scroll through the list of them. Not only that but the tab view is difficult to work with for using a fixed, non scrolling list of icons, simply because Android devices come in all shapes and sizes.
Two options that might suite what you are looking for. Create your own RelativeLayout or LinearLayout with the icons inside of the layout. This way you get to choose the size of the action bar every time =) You can have the bar dock either on the top or bottom of any Activity.
If this isn't an option you may be able to add the icons onto the top ActionBar menu itself which doesn't do scrolling. However your icons might not all fit on the main ActionBar which would cause any overflowing icons to get placed into the overflow menu dropdown. =(
To remove the divider spacing between tabs save the following code as a new xml file in your drawable folder such as dividerdrawable.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size
android:width="0px"
android:color="#android:color/black"
android:dashWidth="0px"
android:dashGap="0px" />
</shape>
and then use that drawable for your tab divider.
<item name="divider">#drawable/dividerdrawable</item>

Related

How to reduce the space around rating bar in android

I have included a rating bar in android, and now I need to place a text view to immediate right if the rating bar.But I failed to do the same since, there is a lot of unwanted space (rectangular blue box) around the rating bar, which prevents me from placing the textview to its immediate right side. Is there any way to reduce this space around the rating bar , so that both the textview and the rating bar comes in same line and textview is placed next to the rating bar without a gap.Please help me with a good support! Thanks in advance! Here is my xml code for it.
<RatingBar
android:id="#+id/overall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="70dp"
android:numStars="5"
android:rating="0.0"
android:scaleX="0.4"
android:scaleY="0.4"
android:stepSize="0.01" />
You can use android default styles, Like:
style="#android:style/Widget.Holo.Light.RatingBar.Small"
in you xml layout. I am using above and have no space around it.
You can check variants here
I tried to use different suggestion but i was unsuccessful with the Android Rating bar removal of extra padding. All i did downloaded ic icons from https://material.io/icons/ and use star and star bordered icon and programmed them with switch cases.
While using the base style for the RatingBar, set the minHeight to 0dp. The base minHeight in the style itself was preventing the view from scaling down. Setting it to 0 should work as you expect a normal view (we set ours to wrap_content).
Tried to use the base (#android:style/Widget.RatingBar) and small (#android:style/Widget.DeviceDefault.RatingBar.Small and #android:style/Widget.Holo.Light.RatingBar.Small) but both fixed/limited the size of the the RatingBar regardless of what icon is used. Looking at their codes, it was no surprise.
<style name="Widget.RatingBar">
<item name="indeterminateOnly">false</item>
<item name="progressDrawable">#drawable/ratingbar_full</item>
<item name="indeterminateDrawable">#drawable/ratingbar_full</item>
<item name="minHeight">57dip</item>
<item name="maxHeight">57dip</item>
<item name="thumb">#null</item>
<item name="mirrorForRtl">true</item>
</style>
<style name="Widget.Material.RatingBar.Small" parent="Widget.RatingBar.Small">
<item name="progressDrawable">#drawable/ratingbar_small_material</item>
<item name="indeterminateDrawable">#drawable/ratingbar_small_material</item>
<item name="minHeight">16dp</item>
<item name="maxHeight">16dp</item>
</style>
<style name="Widget.Holo.Light.RatingBar.Small" parent="Widget.RatingBar.Small">
<item name="progressDrawable">#drawable/ratingbar_small_holo_light</item>
<item name="indeterminateDrawable">#drawable/ratingbar_small_holo_light</item>
<item name="minHeight">16dip</item>
<item name="maxHeight">16dip</item>
</style>
Setting the scales didn't work right either.

set actionbar icon height to match actionbar height

see the problem here, the grey checkbox leaves room from the top and bottom of the action bar:
styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="CustomActionBarTheme" parent="Theme.Base.AppCompat.Light">
<item name="android:windowContentOverlay">#null</item>
<item name="android:actionButtonStyle">#style/ActionButtonStyle</item>
</style>
<!--<style name="ActionButtonStyle" parent="#android:style/Widget.Holo.Light.ActionButton">-->
<style name="ActionButtonStyle" >
<item name="android:height">#dimen/abc_action_bar_default_height</item>
<item name="android:layout_height">#dimen/abc_action_bar_default_height</item>
</style>
i set the item like so:
getMenuInflater().inflate(R.menu.submit_action, menu);
submit_action looks like:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_submit"
android:icon="#drawable/check"
app:showAsAction="always" />
</menu>
and finally, attached is the #drawable/check being used.
any idea how i can get the check to fill the actionbar?
The reason your icon doesn't fill the ActionBar is due to how the ActionMenuItemView measures the icon.
The ActionMenuItemView invokes a maximum size of 32dp when it sets the bounds for your icon
So, it makes so difference how large your image is, the system will always resize it.
any idea how i can get the check to fill the actionbar?
You should use a action layout for your MenuItem, a check mark icon with no background, and change the background color of the action layout parent as you see fit. Here's an example:
layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/actionButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#e8e8e8"
android:clickable="true"
android:contentDescription="#string/cd" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:scaleType="centerInside"
android:src="#drawable/ic_action_tick" />
</RelativeLayout>
MenuItem
<item
android:id="#+id/action_submit"
android:actionLayout="#layout/your_action_layout"
android:showAsAction="always"/>
Accessibility
It's important to make sure your MenuItem is accessible. Normally when you long press an item in the ActionBar a short Toast will display the content description for you, but when you're using a custom MenuItem it's up to you to implement this pattern. An easy way to do this is by using Roman Nurik's CheatSheet. If you're unsure how to use it, you should refer to my answer here that goes into much more detail on creating custom MenuItem layouts.
Alternatively
If you want to use that background color for every MenuItem you have, you could create a custom style and apply it using the android:actionButtonStyle attribute. Here's an example of that:
Your style
<style name="Your.ActionButton" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#e8e8e8</item>
</style>
Your theme
<style name="Your.Theme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionButtonStyle">#style/Your.ActionButton</item>
</style>
Results
Here's what I do with Icons in Android to get the sizing correct. You have an existing project with the res/drawable- folders. You have to put the correct Icon into the correct folder.
Start a new project wizard and when you get to the launcher icon put in the Icon you want to use in your existing project. finish the wizard. The wizard will make the various sizes of Icons for you. Then I manually copy the Icons from the res/drawable-xdpi res/drawable-ldpi etc to the corresponding folder on my existing project. Delete the new project it is no longer needed.

indeterminateProgressBar in ActionBar styling - padding issue

I want to put an indeterminate progress bar inside my ActionBar (using ActionBarSherlock). Everything works, but I want it to be the small progress bar. I use following style:
<style name="IndeterminateProgress" parent="#android:style/Widget.ProgressBar.Small">
<item name="android:progressBarPadding">32dp</item>
<item name="progressBarPadding">32dp</item>
<item name="android:itemPadding">32dp</item>
<item name="itemPadding">32dp</item>
</style>
<style name="Widget.Styled.ActionBar.Tiles" parent="Widget.Sherlock.Light.ActionBar">
<item name="android:indeterminateProgressStyle">#style/IndeterminateProgress</item>
<item name="android:progressBarPadding">32dp</item>
<item name="progressBarPadding">32dp</item>
<item name="android:itemPadding">32dp</item>
<item name="itemPadding">32dp</item>
</style>
The problem is that I cannot set the padding on the progress bar. As you can see above, I've tried every possible combination of itemPadding and progressBarPadding, etc.
The result is always the same:
Any ideas?
I found a working solution how to set indeterminate progress bar with proper size and padding. My solution doesn't use workaround with setActionView(). It is solution for built-in progress bar functionality, supported by native action bar (ActionBarSherlock). Progress bar is enabled/disabled via setProgressBarIndeterminateVisibility(boolean) method. I tested it on Android 2, 3, 4 and ldpi, mdpi, xhdpi.
AndroidManifest.xml:
<application
...
android:theme="#style/Theme.Example">
/res/values/styles.xml:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
...
<style name="Theme.Example" parent="Theme.Sherlock">
<item name="actionBarStyle">#style/Example.ActionBar</item>
<item name="android:actionBarStyle">#style/Example.ActionBar</item>
</style>
<style name="Example.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="indeterminateProgressStyle">#style/Example.ActionBar.IndeterminateProgressBar</item>
<item name="android:indeterminateProgressStyle">#style/Example.ActionBar.IndeterminateProgressBar</item>
</style>
<style name="Example.ActionBar.IndeterminateProgressBar" parent="#android:style/Widget.ProgressBar.Large.Inverse">
<item name="android:indeterminateDrawable">#drawable/layer_list_ab_indeterminate_progress_bar</item>
<item name="android:minWidth">#dimen/ab_indeterminate_progress_bar_size</item>
<item name="android:maxWidth">#dimen/ab_indeterminate_progress_bar_size</item>
<item name="android:minHeight">#dimen/ab_indeterminate_progress_bar_size</item>
<item name="android:maxHeight">#dimen/ab_indeterminate_progress_bar_size</item>
</style>
</resources>
/res/drawable/layer_list_ab_indeterminate_progress_bar.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!--
/res/drawable-mdpi/ab_indeterminate_progress_bar asset is taken from
/sdk/platforms/android-18/data/res/mdpi/spinner_white_48.png
and its content (optical square) is resized to ~0.6 (must be even number)
/res/drawable-mdpi-v14/ab_indeterminate_progress_bar asset is taken from
/sdk/platforms/android-18/data/res/mdpi/spinner_48_outer_holo.png
and its content (optical square) is resized to 0.75
-->
<rotate
android:drawable="#drawable/ab_indeterminate_progress_bar"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="360" />
</item>
</layer-list>
/res/values/dimens.xml:
<dimen name="ab_indeterminate_progress_bar_size">48dp</dimen>
Finally I created progress bar assets. I used these two assets from Android SDK:
/sdk/platforms/android-18/data/res/mdpi/spinner_white_48.png for Honeycomb and older
/sdk/platforms/android-18/data/res/mdpi/spinner_48_outer_holo.png for ICS and newer
To get proper size and padding, we need to resize the assets. I resized spinner_white_48.png to ~0.6. For mdpi, it was 28px. It must be even number to be centrally symmetric. I resized only the content, not the whole icon. So icon in mdpi has still 48px, but its content (optical square) is smaller (28px). You can easily resize the content this way: first change "image size" to 28px X 28px, then change "canvas size" back to 48px X 48px. I resized spinner_48_outer_holo.png to 0.75. You can download the assets below.
Why do I use different assets for Honeycomb- and ICS+? Because if I'm using only Holo assets, the animation is little bit snatchy on some devices with Honeycomb-.
Tip: you can add another item with some animation to layer_list_ab_indeterminate_progress_bar.xml. For example standard Holo progress bar uses 2 animations with opposite direction and different degrees range. See progress_medium_holo.xml in SDK.
/res/drawable-mdpi/ab_indeterminate_progress_bar.png:
/res/drawable-mdpi-v14/ab_indeterminate_progress_bar.png (hardly visible on this page):
/res/drawable-hdpi/ab_indeterminate_progress_bar.png:
/res/drawable-hdpi-v14/ab_indeterminate_progress_bar.png (hardly visible on this page):
/res/drawable-xhdpi/ab_indeterminate_progress_bar.png:
/res/drawable-xhdpi-v14/ab_indeterminate_progress_bar.png (hardly visible on this page):
I don't know the exact answer but these settings worked for me..
This is my refresh_spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<ProgressBar android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:layout_marginRight="12dp"
android:layout_marginLeft="12dp"
style="?indeterminateProgressStyle" />
</FrameLayout>
And this in the corresponding style xml
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="indeterminateProgressStyle">?android:attr/progressBarStyleSmallInverse</item>
</style>
These settings worked for me.
Please let me know if you have any doubts.
Regards
Parvaz Bhaskar
EDIT2 : since I was trying different methods I ended up using ?android:attr/progressBarStyleSmallInverse
as the only property in my style.xml which i later refrenced it from my spinner xml under style as style="?indeterminateProgressStyle"
EDIT:
keep a reference of your menuItem and whenever you want to show a refresh progressbar use setActionView(R.layout.your_layout), and change it to null when the need is over. onCreateOptionsMenu would be a good place to grab the menuItem at start.
I meet this today and find a solution for Android 3/4+
ProgressBar mProgressBarInActionBar = null;
Resources res = Resources.getSystem();
int id = res.getIdentifier("progress_circular", "id", "android");
View internal = findViewById(id);
if(internal != null && internal instanceof ProgressBar){
mProgressBarInActionBar = (ProgressBar)internal;
}
mProgressBarInActionBar.setPadding(0, 0, right, 0);
Set a suitable right :)
I had the same problem and I found an easy answer:
<style name="ActionBarProgressBar.MyStyle" parent="#android:style/Widget.Holo.ProgressBar.Large">
<item name="android:minWidth">56dp</item>
<item name="android:maxWidth">56dp</item>
<item name="android:minHeight">35dp</item>
<item name="android:maxHeight">35dp</item>
</style>
The Width is the standard Actionbar item width. If you change the minHeight and maxHeight, then the image will scale both ways.
And here is the Actionbar styling where you set the appearance of the Indeterminate Progress:
<style name="action_bar_theme" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:indeterminateProgressStyle">#style/ActionBarProgressBar.MyStyle</item>
</style>
And the definition in the Theme you are using (don't forget to use it in your manifest):
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/action_bar_theme</item>
</style>

ActionBar default color

I'm using the Action Bar for the top of my screen and have buttons there. i'd like an additional sequence of butons at the bottom, but there's too many controls for it to fit in the Action Bar, so I'm creating a Custom View and layout. I'm trying to match the color scheme of hte Action Bar, but I can't figure out what the default Android.R.Color is for the Action Bar.
I've set the custom view's layout as shown. There doesn't seem to be a built in color for light_gray, or anything indicating a menu or action bar default color.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#android:color/darker_gray" />
<stroke android:width="1dip" android:color="#333333"/>
</shape>
you can inspect all the styles by looking at styles.xml in your android SDK platforms folder. e.g.,
<your-sdk-dir>/platforms/android-16/data/res/values/styles.xml
looking at API level 16, this is what i see,
<style name="Widget.ActionBar">
<item name="android:background">#android:drawable/action_bar_background</item>
...
if that resource is not public, your best bet is to set the action bar background and your footer background to something you define. you do this by creating a theme in your styles.xml and overriding the action bar style,
<style name="Theme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
now create the actual action bar style,
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/my_background</item>
</style>
now assign this style to your application,
<application
...
android:theme="#style/Theme" >
...
I found myself looking for the colors values inside xml files. I couldn't find it. In the end the most stupid idea was the best:
Print screen of emulator and color picker in gimp. This matched exactly the color I've been looking for.
For me this answer is really stupid. However at the end of a day I've been able to find value very quickly.

Actionbarsherlock with Viewpagerindicator

I have an app that is using Viewpagerindicator. I am using the tabs portion of it. I use a black background and the default blue indicator color. I wanted to add an actionbar to my app so I started using Actionbarsherlock. In order to get my tabs to show an the action bar to show I created my own them which is called in my manifest file. The theme I created is this:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is our main ActionBarSherlock theme -->
<style name="Theme.Styled" parent="Theme.Sherlock.Light.DarkActionBar">
</style>
<style name="Theme.VPI" parent="Theme.Styled">
<item name="vpiTitlePageIndicatorStyle">#style/Widget.TitlePageIndicator</item>
<item name="vpiTabPageIndicatorStyle">#style/Widget.TabPageIndicator</item>
<item name="vpiTabTextStyle">#style/Widget.TabPageIndicator.Text</item>
</style>
</resources>
When I run the app, I get my blue indicator color but the background of the entire app is white.
Originally I was how this code inside:
<style name="Theme.VPI" parent="Theme.Styled">
<item name="vpiTabPageIndicatorStyle">#style/CustomTabPageIndicator</item>
</style>
That gave me red indicators with a white background. I know the custom tabs are red with a white background and that is why I changed it from CustomTabPageIndicator to Widget.TabPageIndicator. However, I am still getting an all white background.
I have tried to just make my layout have a black background inside of my pageviewer, however when I do that, my buttons become really dark and unreadable.
My main question is to find where I can change the color inside of the Viewpagerindicator theme.
Any suggestions would be much appreciated. Thank You.
Visit this example; Making ActionBarSherlock and ViewPagerIndicator play nice
Possible Bug in that example; Android - SupportMapFragment with GoogleMaps API 2.0 giving IllegalArgumentException
Good Luck..!!

Categories

Resources