Develop Reference

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.

Artifacts on lollipop popup menu when using dark background

As you can see the background is distorted behind the popup. It only happens on lollipop! Please don't be confused by all the x_ in my style files. I've just de-branded the code.
In theme file:
<style name="core" parent="Theme.AppCompat.Light">
<!-- Popup menu -->
<item name="android:popupMenuStyle">#style/x_popup_menu_theme</item>
<item name="android:textAppearanceSmallPopupMenu">#style/x_popup_menu_small_text</item>
<item name="android:textAppearanceLargePopupMenu">#style/x_popup_menu_large_text</item>
</style>
in v21/themes_styles.xml
<style name="x_popup_menu_theme" parent="Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#color/x_navy_dark</item>
</style>
<style name="x_popup_menu_large_text" parent="TextAppearance.AppCompat.Widget.PopupMenu.Large">
<item name="android:textColor">#color/std_white</item>
</style>
<style name="x_popup_menu_small_text" parent="TextAppearance.AppCompat.Widget.PopupMenu.Small">
<item name="android:textColor">#color/std_white</item>
</style>
If I change/remove the style to this it works as shown in the next pic.
<style name="x_popup_menu_theme" parent="Widget.AppCompat.PopupMenu">
</style>
<style name="x_popup_menu_large_text" parent="TextAppearance.AppCompat.Widget.PopupMenu.Large">
</style>
<style name="x_popup_menu_small_text" parent="TextAppearance.AppCompat.Widget.PopupMenu.Small">
</style>

There was a bug in Android 5.0.x (which was fixed in 5.1) where setting an opaque (ex. #color) background in an elevated window resulted in visual artifacts.
As a workaround on 5.0.x devices, you can set the background to a non-opaque drawable such as a rounded rectangle.
res/drawable/my_popup_bg.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#color/x_navy_dark" />
</shape>
res/values/styles.xml:
...
<style name="x_popup_menu_theme" parent="Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#drawable/my_popup_bg</item>
</style>

[EDITED - Removed original answer that suggested turning off hardware acceleration]
It appears this is a bug in android 5.0 with the frame buffer. It has been fixed in android 5.1. Bug listing
Here's a message from Chet Haase on how to work around the issue:
The trigger is that you're setting the background of the popup window to a color, which resolves to a colored rectangle. You should either be using a rounded rect (like the default style uses) or, better yet, use the dark theme instead of a custom color.
The bug [in android] (which is [fixed in 5.1]) was that we were not accounting for the padding for shadows and were not setting the correct translucency flags in the window in this situation.
For now I just created my own popup menu using a linearlayout and handling the clicks and back button manually. Not too elegant, but it matched what the art team wanted closer than the popup menu anyway.
<LinearLayout
android:id="#id/fake_popup"
android:layout_below="#id/pending"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView
style="#style/button.dropdown"
android:id="#id/send_reminder"
android:background="#color/navy_dark"
android:textColor="#color/std_white"
android:text="#string/send_reminder"/>
<TextView
style="#style/button.dropdown"
android:id="#id/withdraw_invite"
android:background="#color/navy_dark"
android:textColor="#color/std_white"
android:text="#string/withdraw_invite"/>
</LinearLayout>
Handle the click to show/hide the menu (note the annotations are ButterKnife):
#OnClick (R.id.pending) public void showPendingActionsMenu () {
// pendingActionsPopupMenu.show ();
if (pendingPopup.isShown ()) {
hidePendingPopup ();
} else {
showPendingPopup ();
}
}
And handle the clicks of the individual choices:
#OnClick (R.id.send_reminder)
public void sendReminder () { //your code here }
Don't forget to override onBackPressed!
#Override public void onBackPressed () {
if (pendingPopup.isShown ()) {
hidePendingPopup ();
} else {
super.onBackPressed ();
}
}

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.

ActionBar overflowing on pre-ICS devices

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>

Window background is clipped by status bar

I am setting image as window background:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:windowBackground">#drawable/bg_window</item>
</style>
It works for tablets and fullscreen windows:
but on the handset it is clipped by status bar:
Is this the way things work? How do I avoid it? Of course, I could set the background for each layout, but I want to know if this the only way to solve the problem.

My solution to this problem (at least for phones) was to create a xml drawable with the statusbar height as the top offset
e.g. drawable/window_background.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="25dp">
<bitmap android:src="#drawable/some_background" />
</item>
</layer-list>
This will not work, if the status bar is on the bottom though.
EDIT: edited the answer to use a single xml drawable, as sugested by Aleksejs Mjaliks

Try it in the following way..
<style name="AppTheme" parent="#android:style/Theme.Holo.Light.NoActionBar.Fullscreen">
<item name="android:windowBackground">#drawable/bg_window</item>
</style>
:)