I am able to get the pop up window but the background is transparent also I am able to read the contents of the activity behind it. I want to dim the background so the pop up and the older activity gets differentiated.
You can do it in 2 ways
1. by adding background color with transparency, to the parent of your popup layout.
example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cc000000">
<YOUR_POPUP_VIEW
.... />
</RelativeLayout>
WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
layoutParams.dimAmount = #WHAT_EVER_VALUE_YOU_WANT_TO_KEEP; //Generally in between 0.70f to 0.80f
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
getWindow().setAttributes(layoutParams);
From API 31+, there are two window attributes we can use to achieve that.
<item name="android:windowBlurBehindEnabled">true</item>
<item name="android:windowBlurBehindRadius">Xdp</item>
If your foal is to run an Activity Dialog-alike, then we have more flags we might want to explore:
<!-- Removes Window Title. windowActionBar=false is not needed. -->
<item name="windowNoTitle">true</item>
<!-- When enabling Blur, we also need to provide the blur radius. -->
<!-- Only available on Min Sdk 21. -->
<item name="android:windowBlurBehindEnabled">true</item>
<item name="android:windowBlurBehindRadius">12dp</item>
<!-- In case we want our Activity to behave like a Dialog. -->
<item name="android:windowCloseOnTouchOutside">true</item>
<item name="android:windowIsFloating">true</item>
<!-- We can mix blur + dim or we can just go with blur. This is to remove the dimmed bg. -->
<item name="android:backgroundDimEnabled">false</item>
I haven't figured out what's the best option for retro-compatibility purposes, but as soon as I find it I'll update the post.
Related
I need to make two themes for android app. Dark and Light theme. And I want to use custom colors, sizes, fonts... So I want to make something like:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<!-- sizes, fonts... -->
</style>
<style name="AppTheme.Dark" parent="AppTheme">
</style>
<style name="AppTheme.Light" parent="AppTheme">
</style>
and then I want to make Dark and Light theme to extend AppTheme and just to change colors.
So I need some tutorials, tips or whatever how to do this most efficiently.
I appreciate every advice, thank you. :)
I think you are on a good track, you would define different styles for each and every theme, something like this:
<style name="AppTheme.Dark" parent="AppTheme">
<item name="colorPrimary">/* color for dark theme */ </item>
<item name="android:windowBackground">/* color for dark theme */ </item>
// default font color for dark theme
// etc.
</style>
<style name="AppTheme.Light" parent="AppTheme">
<item name="colorPrimary">/* color for light theme */ </item>
<item name="android:windowBackground">/* color for light theme */ </item>
// default font color for light theme
// etc.
</style>
AppTheme would define the style common to both Dark & Light themes.
Also, you would have a setting in your app that keeps track of current user theme. So let's imagine that this setting is kept in SharedPreferences. Then, every time an Activity is created, you would check the current setting and apply the corresponding theme:
#Override
protected void onCreate(Bundle savedInstanceState) {
boolean darkModeIsEnabled = // read the setting from SharedPreferences
if (darkModeIsEnabled) {
setTheme(R.style.AppTheme_Dark)
} else {
setTheme(R.style.AppTheme_Light)
}
super.onCreate(savedInstanceState)
setContentView(R.layout.my_activity)
}
One last point, you probably will want the users to switch the theme from the app, in that case you would need to recreate the activity/activities so that the new theme is applied.
For an example app you could have a look here. You can inspect the themes.xml file to see how there it's done.
How do we change the background's foreground color when we show a DialogFragment, like when we click on the fab in the evernote or messenger app, I know the way to do it will probably be diffrent but that's the kind of effect I'm looking for
I have found a work around for this problem. Here is the code.
In styles.xml design a custom theme.
styles.xml
<style name="AppTheme.CustomTheme">
<item name="android:windowIsFloating">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
In manifest file use this style on the popup window.
Android Manifest
<activity android:name=".DialogDesign"
android:theme="#style/AppTheme.CustomTheme"
android:screenOrientation="portrait"></activity>
In layout.xml file use 3 different relativeLayouts, one as root, another as faded background and another as pop-up window.
activity_dialog_design.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DialogDesign">
<RelativeLayout
android:id="#+id/fadedBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7fffffff"
android:layout_margin="0dp"/>
<RelativeLayout
android:layout_width="300dp"
android:layout_height="500dp"
android:layout_alignParentBottom="true"
android:layout_marginTop="100dp"
android:layout_marginBottom="100dp"
android:layout_centerHorizontal="true"
android:background="#android:color/white"/>
</RelativeLayout>
In activity.java file set the height and width of the faded window.
DialogDesign.java
public class DialogDesign extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dialog_design);
RelativeLayout fadedBg=(RelativeLayout)findViewById(R.id.fadedBg);
WindowManager.LayoutParams params = getWindow().getAttributes();
params.height = 1800;
params.width = 1100;
this.getWindow().setAttributes(params);
}
}
There, It is done! Add whatever you want to add in the inner most relative layout.
Easy answer
The amount by which the content behind a floating window (such as dialog) goes darker is determined by backgroundDimAmount attribute in your theme:
<style name="AppTheme" parent="#style/Theme.AppCompat">
<item name="android:backgroundDimAmount">0.6</item>
</style>
It is limited to black color. 0.6 is the default value.
EDIT
The above answer did not work, looks like the value needs to be applied to the dialog theme, not the activity theme.
<style name="AppTheme" parent="#style/Theme.AppCompat">
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert</item>
</style>
<style name="AppTheme.Dialog.Alert" parent="#style/Theme.AppCompat.Dialog.Alert">
<item name="android:backgroundDimAmount">0.6</item>
</style>
Difficult answer
Achieving a different color would require disabling this system dim and heavily customizing dialog background. I'll leave this to someone else.
It might be some late to answer. but i combined some solutions and gained the proper way to achieve this goal.
first create the following theme in your styles.xml:
<style name="MyCustomTheme" parent="#android:style/Theme.Panel">
<item name="android:backgroundDimEnabled">true</item>
<item name="android:backgroundDimAmount">0.7</item>
</style>
first enable an attribute named 'backgroundDimEnabled' to make the screen foreground darker when dialogs showing on the screen. then set a float value for amount of darkness.(0 < value < 1)
and use this theme in the onCreateDialog Method in your dialog fragment.
#Override
public Dialog onCreateDialog(#Nullable Bundle savedInstanceState) {
final AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), R.style.MyCustomTheme);
View addDialogView = getActivity().getLayoutInflater().inflate(R.layout.word_detail_fragment, null);
builder.setView(addDialogView);
return builder.create();
}
I learned how to color an Android activity status bar thanks to this solution: How to change status bar color to match app in Lollipop? [Android]
However it doesn't say how to make this for the entire app (all activities).
i don't want to duplicate those 4 lines of code into each Activity, and if I make a Java class for Utils, I can't reach my colors by using R.color.blue or getResources(....).
Is there a way to do this through the Manifest, perhaps? Or any other way?
Thank you!
You should create your own style in values/styles.xml. Then make your own theme with such parameters. Loock code below
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_secondary</item>
<item name="colorAccent">#color/color_accent</item>
<item name="android:statusBarColor">#color/color_primary</item><!--this is what you need-->
</style>
Or just use method (for Lolipop):
public abstract void setStatusBarColor (int color)
I try the new Material Design on a Nexus 7 and have the following strange behaviour. The Overflow Menu Icon has a different color on the first app launch.
I changed the android:textColorPrimary color and read this tutorial.
First App launch:
Second App launch:
As you see the color of the primary text color is not set on the first launch. It is only set if i press the home button and relaunch the app. Here is my styles.xml file:
<style name="AppBaseTheme" parent="android:Theme.Material.Light">
<item name="android:colorPrimary">#FF4444</item>
<item name="android:colorPrimaryDark">#CC0000</item>
<item name="android:textColorPrimary">#000000</item>
</style>
Can someone explain, why that behaviour occurs?
I set android:minSdkVersion="21" and don't want to use support libraries.
I experienced the same problem when running a PreferenceActivity which cannot use appcompat-v7 library on a LOLLIPOP device. When this activity is opened for the first time the overflow icon is always white completely ignoring android:textColorPrimary and android:colorControlNormal. Subsequent runs or orientation changes however result in proper coloring.
I created a gist which will help you mitigate this. The code binds a global layout observer to the toolbar and when it finds an overflow icon it replaces it and unbinds the observer. So don't use it in places where you don't expect an overflow icon because the observer won't get unbound in that case.
Link to gist: https://gist.github.com/consp1racy/4b640679de553fdb3046
Just add the secondary text color for the options menu, i.e.:
<item name="android:textColorSecondary">#color/text_color</item>
In some circumstances the secondary color is set to the primary color. I don't know yet why.
Add these items too:
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
If this didn't help, then try this:
<style name="AppBaseTheme" parent="android:Theme.Material.Light">
<item name="android:itemTextAppearance">#style/TextAppearance</item>
</style>
<style name="TextAppearance">
<item name="android:textColor">#android:color/white</item>
</style>
This would works for Holo.Light.DarkActionBar
If you want to use material design in pre-21 devices you need to extend Theme.AppCompat.Light.NoActionBar theme. To do that, you need to add compile com.android.support:appcompat-v7:21.0.0 as a dependency of your project, this way you will be able to use the Toolbar in your layout.
Then define your theme in values/themes.xml::
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/my_awesome_color</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/my_awesome_darker_color</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#color/accent</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight & colorSwitchThumbNormal. -->
</style>
and your the toolbar in your layout/my_activity.xml:
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
You have optional attrs to define the theme and popupTheme as well:
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
Chris Banes wrote a good article about this that you should read https://chris.banes.me/2014/10/17/appcompat-v21/
I read on the comments of the questions that you are using eclipse, I highly recommend to use android studio + gradle and no eclipse.
Just add android:theme="#style/ThemeOverlay.AppCompat.Dark"to the Toolbar
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
overflow menu icon will be white now :)
I am trying to do something that I feel to be very simple in concept. I would like my app to be supported all the way back to API 10 (Gingerbread). To make this look good, I need to make a slight change to the color of the text on my buttons when the device is running API 10. Thus, I want to create two styles: one of which will be used when the device is using API 10 (I want the text color of the buttons to be black in this case), and another when the device is using API 11 or above (the text color will be the default ICS grayish in this case). To do this, I am using a values and a values-v11 folder. Inside the values folder is a themes.xml file with the following code:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="buttonColorStyle">
<item name="android:textAppearanceButton">#style/buttonTextColor</item>
</style>
<style name="buttonTextColor">
<item name="android:textColor">#FFFFFF</item>
</style>
</resources>
However, when I load up my app with target SDK set to 10, the text color of the buttons is unchanged from the default grayish. Also, here is the code for one of my buttons which should use this style:
<Button
style="#style/buttonColorStyle"
android:id="#+id/thirdSectionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="sectionButtonClicked"
android:text="Section 3"
android:textSize="11.5sp" />
Anyone have any ideas?
You have to do something like this:
<style name="MyStlye">
<item name="android:textAppearanceButton">#style/BtnText</item>
</style>
<style name="BtnText" parent="android:TextAppearance.Small.Inverse">
<item name="android:textColor">#android:color/black</item> // or whatever color
</style>
why not setting the same nice style for all versions?
you can use this library (also suggested at the android developers blog here) for making all of the devices use the holo theme.
alternatively , just leave the current style , so that the user will feel more "at home" with his current style of the OS (since it can change between companies) .