I want to have custom background for the menu items displayed in the ActionBar. I found out that I can do that by adding the following item to my app theme style definition:
<item name="android:actionBarItemBackground">#drawable/actionbar_button</item>
Where actionbar_button.xml contains:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_btn_on" android:state_pressed="true" />
<item android:drawable="#drawable/action_btn_off" />
</selector>
However, this causes the background image to also render behind the custom app logo displayed on the left of the ActionBar. After several attempts at figuring out a selector that would include only the buttons, I came up with this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_btn_on" android:state_pressed="true" android:state_enabled="true" />
<item android:drawable="#drawable/action_btn_off" android:state_pressed="false" android:state_enabled="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Which sort of worked, and after the app loads fully the background behind the logo is transparent as I want it. But the problem is that while it's still loading it briefly shows the logo with the button background behind it and more annoyingly, it scales and crops the logo to fit inside the fill area of the 9-patch graphic that is the button background. When finished loading, the background is switched out, but the scaling and cropping remains, which looks quite ugly. How can I fix it?
Have not found a working solution to the general problem of setting image-based backgrounds to ActionBar buttons, but the scaling/cropping does not happen if I use entered XML based backgrounds, such as created with a layer-list of shapes. For some cases in may not be viable, but in my case it was entirely possible, and maybe even better than using a bitmap based resource.
Related
I have an app, that has an ImageViev, which can be clicked to perform an action. I want it to be a little bit bigger when it's pressed, and go back to normal when it's released. The problem is, I have 10 different images that appear in the ImageViev, depending on the situation. I've read a lot of threads about that, and none of the solutions seems to solve my problem. I need to:
Make an image bigger when the button is pressed, or replace it with a bigger version.
Make the image shrink when the button is released, or go back to normal version of the image.
When I change the image in the ImageView, it will still change its size when pressed.
I've tried this so far:
Creating a drawable item, that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/b1big" />
<item
android:state_pressed="false"
android:drawable="#drawable/b1"/>
</selector>
but it won't work, because Android automatically scales the image to the size of the ImageView, so no matter if b1big is bigger than b1.
Changing the width and height of the drawable item, but it doesn't have these parameters.
Is creating 10 normal images like image1, image2... image10, then creating 10 big images like image1big... image10big and then creating 10 drawable objects like:
<item
android:state_pressed="true"
android:drawable="#drawable/image1big" />
<item
android:state_pressed="false"
android:drawable="#drawable/image1"/>
and using them as src for my ImageView? How do I prevent them from scaling then?
Update you selector's content to
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/b1big" />
<item
android:drawable="#drawable/b1"/>
</selector>
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>
I am building an application to show a dynamic picture and a dialog with a button. The thumbnail of that picture is then used as the background of the button. However, if the picture is with black pattern, it turns out showing as "holo" and transparent to the background. This makes the button ugly.
I am trying this on android 4.x.
I have tried using different themes for the dialog, Theme.Dialog, Theme.Holo and Theme.Light but no luck.
My problems are
(1) how to make a non-holo button with DiaglogFragment(even on a holo theme view/activity).
(2) is this related to android versions? or machines?
Thank you.
you need to create a selector with all the different states of a button and for each state you will need an image
for example
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/blue_curve" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#drawable/blue_curve_pressed" android:state_pressed="true"/>
</selector>
then set the background to the selector in your xml
So my graphics artist came to me with a really cool layout for controls on our new app. The problem is getting these images laid out since most views in android are rectangular. See image for what I have to work with.
Any idea how to layout these buttons so they shape around each other if that makes sense?
If the problem is the layout, you can draw the buttons and save it as png. You can layout your app by RelevantLayout . And use the "selector" to change the button image when user press an so on.
selector example: "drawable/selector1.xml"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/buttonClicked" /> <!-- focused and pressed-->
<item android:state_pressed="true" android:drawable="#drawable/buttonClicked" /> <!-- pressed -->
<item android:drawable="#drawable/button" /> <!-- default -->
</selector>
use it like this:
android:background="#drawable/selector1"
the Views in android are rectangular, that is correct. The only workaround I see here: use multiple "invisible" Buttons (alpha set to 0). You can position them around the screen and assign the same action to some of them. Of course you'll need to implement the OnClickListener and use switch-case.
I am writing an extremely simple Android application. In doing so, I've found it's quite difficult for me to emulate the button UI elements that are found on the Droid X application selector screen. For those not familiar, they are an icon with white text beneath them. The text has a black rounded rectangle behind it and when the button is clicked, the background beneath the icon and text turns red.
My current solution involves StateListDrawables, but then the rounded rectangle has a fixed width, and has to be edited into every button icon. Localization is an eventual goal, so my solution is temporary at best. I assume there's a less stupid way to do this?
I haven't tried this, and I've never seen the button you're talking about. But the process should be something similar.
First you create your drawables (the actual background images). One with the red background and one transparent. Your drawable XML would look something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/btn_bg_red"/>
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/btn_bg_red"/>
<item android:state_focused="true" android:drawable="#drawable/btn_bg_pressed"/>
<item android:state_focused="false" android:state_pressed="false" android:drawable="#android:color/transparent"/>
</selector>
Then your button itself can be declared similar to this:
<Button android:id="#+id/droid_x_btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Droid Does"
android:drawableTop="#drawable/btn_icon" <!-- this is for the icon on top -->
android:background="#drawable/ic_droid_x_button" <!-- The name of the above file without extension -->
android:textColor="#color/white" />
Hope this helps!