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.
Related
I've been working on an app and I've reaching the point where it requires me to display a menu window in the middle of the screen.
I've been using an AlertDialog object filled with a custom View but now it was required of me to "surround" the window with a semi-transparent white glow as opposed to the default grayish one. I did a similar with the fade-in color of some navigation drawers I have on my app but in that case I had a specific method to quickly help me solve that problem. So far I haven't found anything that helps me solve this one.
I tried creating a default style with a new "windowBackground" value but I encountered 3 problems from the get-go:
I'm no longer able to shut the AlertDialog down by clicking outside the layout (I'm guessing because by changing the color that way everything is now the layout)
The menu window is now surrounded by a black outline that wasn't there before
By using the filtering search inside the layout, which manipulates the members of a list, the window collapses on itself
Is there any way to accomplish what I want more or less directly?
I'm not really sure about it, but you can use this in your styles.xml
<style name="MyDialogTheme" parent="android:Theme.AppCompat.Light.Dialog">
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">#color/your_light_color</item>
<item name="android:backgroundDimEnabled">false</item>
And if you want to dismiss the dialog when clicking outside, use this:
dialog.setCanceledOnTouchOutside(true);
or
<item name="windowCloseOnTouchOutside">true</item>
in your styles.xml
I put together a very simple app that uses shared element transitions when starting an activity with Dialog theme (source code on github).
I got the following result:
As you can see there are 2 problems with the transition/animation:
The animation is only visible in the area of the dialog activity so it clips and looks ugly.
There is no transition/animation when I tap outside the activity to
go back.
How can I fix these problems? Any help would be appreciated.
EDIT: After Quanturium's answer I did the following things to get it working:
Use the following theme instead of a Dialog theme:
<style name="AppTheme.Transparent" parent="AppTheme">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">true</item>
</style>
Use a CardView as the background for Dialog look and for rounded corners and shadows.
Call finishAfterTransition(); when user taps outside the CardView.
Now it looks like this (code), the CardView needs refining to better match the Dialog, but it's working at least.:
An activity transition works like this. When you start your second activity, it is displayed on top of your first one with a transparent background. The shared elements are positioned the same way they are on the first activity and then animated to the correct position specified on the second activity.
In your case you are using android:theme="#style/Theme.AppCompat.Dialog" which mean the size of the second activity's drawing area is smaller than the one from the first activity. This explains the clipping and the no transition when clicking outside.
What you want to do is get rid of that theme, and implement your own layout with a dark background / shadow in order to be able to execute your smooth transition.
I modified my theme using the following style (part):
<item name="android:scrollbarTrackVertical">#drawable/scrollbar_1</item>
<item name="android:scrollbarThumbVertical">#drawable/scrollbar_2</item>
(plus of course drawable definition).
However it only works with activity. When activity opens dialog (DialogFragment), scrollbars are standard ones, not mine. Why?
Any help?
I'm starting with a fully working app, with all the buttons in the right locations and the right sizes... but now I wanted to try out using styles for the first time. In particular I wanted to have the text colour in my buttons a dark blue and the background white. So I wrote the following in styles.xml in res/values ->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="mybut" parent="#android:style/Widget.Button">
<item name="android:textColor">#color/dblue</item>
<item name="android:background">#ffffffff</item>
</style>
</resources>
I modified my button code as follows:
<Button
android:id="#+id/spec"
style="#style/mybut" <-- I added this line here
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.12"
android:text="#string/spec" />
In eclipse's XML viewer, the new button looked right in every way. But then at run time, on my android device, the button's height had shrunk by about a third! Any ideas?
EDIT: I'm not very confident about the parent="#android:style/Widget.Button" bit. I'm suspicious that perhaps I'm somehow already using some other style?/theme? and perhaps the line should look something akin to parent="#android:otherstyle/Widget.Button" or parent="#android:style/other.Widget.Button"... or similar.
EDIT: FYI... I'm trying this out on a kind of "home screen" activity which just contains two big buttons. I added the style="#style/mybut" to just one of the two buttons. They are now clearly very different sizes.
EDIT: I noticed that in the manifest I have android:theme="#android:style/Theme.NoTitleBar.Fullscreen" ... does that mean I need to make my button's parent android:theme="#android:style/Theme.NoTitleBar.Fullscreen.Widget.Button" ?? or something like that?
By default, a Button has a 9-patch background, not a simple color. This image has padding and a content area which alters the actual size of the button.
When you change the background, you're stripping that padding, and it appears smaller. The correct way to do this is to create a new 9-patch, based on the old, but with the colors changed.
The problem must be here:
android:layout_weight="0.12"
If you have an action_bar or something like that when you run your app the button is going to shrink. In your preview the action_bar doesn't appear (I'm just guessing).
EDIT:
Here is a sample of a custom button that I use in my app, I put a min height and width.
Instead of using: parent="#android:style/Widget.Button" I use: parent="android:Widget.Button"
<style name="ButtonCustom" parent="android:Widget.Button">
<item name="android:background">#drawable/btn_default_holo_light</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">64dip</item>
<item name="android:textColor">#fff</item>
</style>
I have a style I created like this:
<style name="myStyle" parent="#android:style/Theme.Dialog">
<item name="android:textColor">#FFFFFF</item>
<item name="android:background">#000099</item>
</style>
Then I created an xml and an activity, and in the manifest declared this
<activity android:name=".Try"
android:theme="#style/myStyle" >
</activity>
Then when I start this activity I have an xml with a background color (blue);
THe problem is , when I create an Alert Dialog
AlertDialog.Builder dialog = new AlertDialog.Builder....
It is also affected by this background (It looks more like a blue rectangle behind it that is bigger then the dialog and is coming out from all 4 sides).
I dont want it to be, I want to use another style for the alert dialog.
How can I disable this?
Are you saying that the background of your activity is too prominent when the dialog pops up? If so, you can blur what's in the background with the following code:
dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND);
Or are you saying that the background of your activity is being applied to the background of your dialog...?
I managed to fix that, well not entirley but to pass around it.
Instead of using:
#000099
I used
IMAGE_NAME
and I added a green rectangle image at the "drawable" folder.
This makes the background to become from an image instead of painting it, and the image does not affect the Dailog.
It will look a bit different (for example it will cover the white border as well) but it is better then before.