Develop Reference

Customizing Up/Back/Burger background in my ActionBar

I'm trying to customize the background of my action bar items with a selector, to override what is shown when the button is pressed.
This was pretty easy with menu buttons (e.g., overflow icon), as you can style them with actionBarItemBackground .
Sadly this does not apply for the up/home/left indicator. I have unsuccessfully tried, in my styles.xml:
<item name="actionButtonStyle">;
<item name="actionBarStyle">;
<item name="toolbarStyle">;
None of the nested attributes seem to act on the home icon background. I also searched over android.R.attr and gave a look at this. Is there any way?
I would like to stay with the "up" indicator, without inflating a custom view. In that case, I would also have to inflate the title as well as custom views naturally appear at the end of the title. AND I would lose the burger-to-arrow animation, AND I would have to take care about margins and design guidelines (now managed by AppCompat), and some other bad thing on the way.
I thought about setting a Logo, but that would have some complications as well and I don't think I could change the background anyway.
I thought about Toolbar being a Layout, so I could put custom views in it from XML. If I'm not wrong they appear after the title, so neither this is a good idea.
What can I do?

please let me know if it works
add this to your your theme or if it doesn't take both remove the one with android prefix
<item name="android:selectableItemBackground">#drawable/selector</item>
<item name="selectableItemBackground">#drawable/selector</item>
Example #drawable/selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#ddffffff" />
<item
android:drawable="#android:color/transparent" />
</selector>

Unexpected screen gradient in ListView

I have a ListView with some rows and a custom checkbox on the right hand side. On my OS 4.4 Nexus 4 it seems like a gentle gradient is being applied to the list row backgrounds, creating an ugly artifact on the checkboxes (they disappear half way down, and then invert for the bottom half). On other devices I don't see this problem, and I also don't see it in an OS 4.4.2 emulator.
I haven't been able to find any information online about this, so I'm not sure if it's specific to the device, or the exact OS flavor.
Is this something I can disable? If not, what advice should I give my asset designer?
Here's a screenshot:

The Holo.Light theme uses a subtle grey gradient background. It might only be more apparent on one of your devices due to the screen's contrast/brightness.
You can just set the background to solid white by using the android:windowBackground tag in your Activity's theme:
<style name="SolidWhiteTheme" parent="android:Theme.Holo.Light">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:colorBackground">#android:color/white</item>
</style>
And then applying the theme to your activity in your AndroidManifest.xml like so:
<activity
android:theme="#style/SolidWhiteTheme"
...
>
...
</activity>

As Denley mentioned, the reason for this is the default background specified by the Holo.Light theme.
However, since this background is specifically affecting your ListView, I would suggest setting the background of your ListView in your xml file. Code below.
<ListView
android:background="#android:color/white">

Try specifying a background color for your activity (android:background). If the background is not explicitly set, the device may be using it's own device-specific default background, which is why the gradient is only shown on your Nexus 4 and not other devices.

Compound drawable in a TextView is stretching beyond the image size

I am creating a menu in an Android app with several list items and corresponding icons. The problem that I'm having is that the icons are being stretched beyond the image size for some reason. I have created a menu like this before without such a problem, and I essentially copied the code over to this new project, primarily only changing the image names and string names.
Here is the code from the menu layout for a single list item:
<TextView
android:id="#+id/listItemCardTransactions"
style="#style/NavigationMenuItem"
android:drawableLeft="#drawable/ic_card_transaction_menu_icon_normal"
android:text="#string/card_transactions" />
Here is the NavigationMenuItem style:
<style name="NavigationMenuItem">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingTop">#dimen/menu_list_item_padding</item>
<item name="android:paddingBottom">#dimen/menu_list_item_padding</item>
<item name="android:paddingLeft">#dimen/menu_list_item_padding</item>
<item name="android:drawablePadding">#dimen/menu_list_item_left_padding</item>
<item name="android:gravity">center_vertical</item>
<item name="android:clickable">true</item>
<item name="android:background">#drawable/selector_navigation_item</item>
<item name="android:textSize">#dimen/text_size_menu_item</item>
</style>
Here are the dimensions:
<dimen name="text_size_menu_item">18sp</dimen>
<dimen name="menu_list_item_padding">6dip</dimen>
<dimen name="menu_list_item_left_padding">12dip</dimen>
And here is what the menu looks like right now (I know there are several other problems but those aren't my concern right now). You can see the stretching problem best when you drag-and-drop the image to get the full view:
And what the icon is supposed to look like (this one is grey since I wasn't sure how to easily make the white one visible on a white background):
Anyone know what might be causing the image to stretch past its dimensions like this?

I would follow Barry's advise in the comments, ie use an ImageView + TextView inside a LinearLayout for each item. However, to solve the "the height of the list item is smaller", you could try adding the following attribute to the ImageView:
android:adjustViewBounds="true"
If I'm not mistaken, this should effectively make sure that the view bounds is actually based on the content of the image, and not the aspect ratio (ie, it won't change the height beyond the maximum height of the image itself due to "scaling").
Hope that helps (and also makes a bit sense).

Android UI widget vertical alignment issue

I am trying to create a layout (using eclipse) in which I need to vertically align various controls like TextView and Button. I am trying to keep all the widgets perfectly left aligned. Even if I specify the same left margins/paddings for the controls, still a difference of 1-2 pixels can be seen between different types of controls.
The problem is that the distance between widget’s border (blue rectangle in eclipse) and widget’s content/graphics varies across widgets (say TextView and Button).
I can apply workarounds by either specifying left padding for TextView or by reducing the left margin of the button container. But I am looking for cleaner solution. I am unable to find any attribute which controls the difference between widget's border and content.
Any pointers on how I can control this gap ?
Snapshot demonstrating the problem is below. Here is the layout XML that I am using for this problem:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dummy Button" />
</LinearLayout>
The images below show the snapshot of the dummy application. Please note the difference between left side margin of "Hello World" TextView and "Dummy Button".
The second pic shows the button widget when selected in Eclipse. The blue rectangle indicates the widget boundary/border. Is the difference between button's border (blue rectangle) and content (greyed rectangle) controllable by some property ?

This is a tough one the TextView and other Android widgets may have some intrinsic styles of their own (android version dependant as well).
Therefore to get around this you would have to create your own style.
In creating your own style always reference the android source code on this subject:
https://github.com/android/platform_frameworks_base/tree/master/core/res/res/values
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml
There are multiple ways to create your own style.
One way is to theme your activity in your manifest.
First you need a styles.xml file, in your /values/ folder.
In here you would declare your new style:
<style name="Theme.MyTheme.Dark" parent="#android:style/Theme.NoTitleBar">
<item name="android:textViewStyle">#style/Widget.TextView.Black</item>
</style>
<style name="Theme.MyTheme.Light" parent="#android:style/Theme.NoTitleBar">
<item name="android:textViewStyle">#style/Widget.TextView.White</item>
</style>
The style above it inheriting from the Android style that hides the title bar, you can inherit from something else.
In this theme we then override the textViewStyle, this allows us to set custom values for our TextView's and override some of the intrinsic values.
<style name="Widget.TextView.White" parent="#android:style/Widget.TextView">
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="Widget.TextView.Black" parent="#android:style/Widget.TextView">
<item name="android:textColor">#000000</item>
</style>
Finally you theme your activity in the AndroidManifest.xml:
<activity
android:name=".ui.phone.FirstActivity"
android:theme="#style/Theme.MyTheme.Dark" />
<activity
android:name=".ui.phone.SecondActivity"
android:theme="#style/Theme.MyTheme.Light" />
Now when you use a TextView in the FirstActivity it's text will be Black by default and in the second activity it will be white.
For your specific question:
You would have to go look in the source code files I linked at the top and see if there is any padding or minWidth or size attributes that are affecting your widgets and your layout.

Custom dialog background is acting very strange

I am creating a small game for Android. At the moment I'm just creating the UI for the menu screen.
As I'm doing a wooden theme, I also want to use a custom dialog for showing highscores etc so it follows the theme.
I have found some good guides, but I have this very strange problem with the background of the dialog. The dialog is almost transparent.
What I have done:
- created a dialog_theme.xml with:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Dialog" parent="android:Theme">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
</resources>
created custom_dialog.xml with the elements I need (TextView for title and content, and button to close)
created a CustomDialog class which extends Dialog, and lets me build these custom dialogs rather easy with the content and title I want
using the CustomDialog in the activity to create the dialog
(the main guide I used for this blog.androgames.net/10/custom-android-dialog/ )
The problem is that the transparent background isn't always transparent (showing the activity ui in the background). I have 4 custom buttons in this menu. Problem is that instead of just showing the dialog transparent and showing the whole ui in the background, then one of the images for a button is stretched and fills the whole dialog background. If I just use a standard background for this one button then the dialog background is transparent and shows the activity ui in the background as it should.
As I might have been bad at explaining I will show pictures of what I mean:
- Code for the button that causes the problem:
<Button
android:id="#+id/id_about_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/id_achievements_button"
android:layout_marginTop="15dp"
android:background="#drawable/selector_about" />
Gives this result: (sorry but I can't use pictures directly in the post yet)
http://dl.dropbox.com/u/2980431/wrong.png
Modifying the button code to:
<Button
android:id="#+id/id_about_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/id_achievements_button"
android:layout_marginTop="15dp"/>
Gives this result:
http://dl.dropbox.com/u/2980431/correct.png
Hope someone got an idea about why this is happening, and a solution to fix it - to be honest I am totally lost.

Still not sure what happened. In another project I came across the same thing - custom semi transparent dialog background, got another drawable added to the background. Renaming the wrong drawable showing in the background, and then clean the project fixed this for me.
Strange.