I am trying to change the background of a ProgressDialog. I searched the net and found various suggestions (like How to remove border from Dialog?), but I am unable to replace the actual background of the ProgressDialog. Instead I get another background (yellow) behind the dialog:
My style:
<style name="StyledDialog" parent="#android:style/Theme.Dialog">
<item name="android:windowBackground">#drawable/panel_background</item>
</style>
The code that launches the ProgressDialog:
ProgressDialog dialog = new ProgressDialog(this, R.style.StyledDialog);
dialog.setTitle("The title");
dialog.setMessage("The message.");
dialog.show();
The drawable is the same 9 patch that is included in the SDK, I just changed to color. I would greatly appreciate some hints what I am doing wrong.
The comment of Aleks G (below the question) points in the right direction. The appearance of the dialog is defined by a separate style (android:alertDialogStyle). But one cannot apply the style directly to a ProgressDialog. Now, how do I get that yellow background?
Step 1: Define a theme that inherits from Theme.Dialog:
<style name="MyTheme" parent="#android:style/Theme.Dialog">
<item name="android:alertDialogStyle">#style/CustomAlertDialogStyle</item>
<item name="android:textColorPrimary">#000000</item>
</style>
There, you can define things like the background color for the whole window (yellow in the question), font colors etc. What's really important is the definition of android:alertDialogStyle. This style controls the appearance of the black area in the question.
Step 2: Define the CustomAlertDialogStyle:
<style name="CustomAlertDialogStyle">
<item name="android:bottomBright">#color/yellow</item>
<item name="android:bottomDark">#color/yellow</item>
<item name="android:bottomMedium">#color/yellow</item>
<item name="android:centerBright">#color/yellow</item>
<item name="android:centerDark">#color/yellow</item>
<item name="android:centerMedium">#color/yellow</item>
<item name="android:fullBright">#color/yellow</item>
<item name="android:fullDark">#color/yellow</item>
<item name="android:topBright">#color/yellow</item>
<item name="android:topDark">#color/yellow</item>
</style>
This sets the black area in the question to yellow.
Step 3: Apply MyTheme to the ProgressDialog, not CustomAlertDialogStyle:
ProgressDialog dialog = new ProgressDialog(this, R.style.MyTheme);
And here's the result:
The same procedure works with AlertDialog (which is the parent class of ProgressDialog).
You can try my gist. It basicly sets a color filter on drawable.
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.ProgressBar;
public class ColoredProgressBar extends ProgressBar {
public ColoredProgressBar(Context context) {
super(context);
if (!isInEditMode())
init();
}
public ColoredProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
if (!isInEditMode())
init();
}
public ColoredProgressBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
if (!isInEditMode())
init();
}
/**
* Changes color.
*/
private void init() {
getIndeterminateDrawable().setColorFilter(Color.BLUE, android.graphics.PorterDuff.Mode.MULTIPLY);
}
}
Related
I have an Android application which uses Material design theme with backward compatibility through AppCompat.
There are multiple Textview's and EditText's in my application. I would like the same properties to be applied to all these TextView's and EditText's across the application. In order to achieve this, i have defined a custom style as shown below:
<!-- Base application theme. -->
<style name="ParentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="ArabicTheme" parent="ParentTheme">
<item name="android:editTextStyle">#style/arabicEditText</item>
<item name="android:textViewStyle">#style/arabicTextView</item>
</style>
<style name="arabicEditText" parent="#android:style/Widget.EditText">
<item name="android:gravity">right</item>
<item name="android:ellipsize">end</item>
</style>
<style name="arabicTextView" parent="#android:style/Widget.TextView">
<item name="android:gravity">right</item>
</style>
In my AndroidManifest.xml file under the <Application> tag, i have set android:theme="#style/ArabicTheme".
Below is the output of the activity:
As seen in the above output, the Style is being applied to TextView only. However, The same is not being applied to EditText.
Incase, if i explicitly specify these properties to the EditText in the corresponding Actitivy's xml as shown below:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Name"
android:ellipsize="end"
android:gravity="right"
android:ems="10"
android:layout_below="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:id="#+id/editText" />
i.e I have explicitly added android:ellipsize="end" and android:gravity="right" to the <EditText>, and only then the output is as expected:
Like i said, i have multiple TextView's and EditText's and i cannot explicitly add these properties to all of them. So, is there a way i can achieve this using Styles or any other approach? Am i doing something wrong here?
Your approach is correct. Just remove android: from the editText's attribute name:
<item name="editTextStyle">#style/arabicEditText</item>
I cannot explain this though. I guess appCompat things don't reuse android attributes, but add another ones with similiar names. Same goes with colorPrimary, srcCompat and others.
I have been doing this
public class LightEditText extends android.widget.EditText{
public LightEditText(Context context) {
super(context);
setFont();
}
public LightEditText(Context context, AttributeSet attrs) {
super(context, attrs);
setFont();
}
public LightEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setFont();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public LightEditText(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
setFont();
}
/**
* This method is used to set the given font to the TextView.
*/
private void setFont() {
Typeface typeface = TypefaceCache.get(getContext().getAssets(), "fonts/Roboto-Light.ttf");
setTypeface(typeface);
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
Then inside your xml file
<com.packagename.LightEditText
android:id="#+id/edtTaskName"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
Do the above method for setting common properties(fontType,style..etc) to editext
In my Android app I have two different themes (light and dark).
For example:
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorPrimary">#android:color/black</item>
<item name="colorPrimaryDark">#android:color/black</item>
<item name="colorAccent">#android:color/holo_red_dark</item>
<item name="android:textColor">#android:color/white</item>
<item name="windowActionModeOverlay">true</item>
</style>
<style name="AppThemeLight" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionModeOverlay">true</item>
</style>
So, now I can apply, for example, different text colors to a TextView (white for dark theme and black for light):
<item name="android:textViewStyle">#style/TextViewDark</item>
<style name="TextViewDark">
<item name="android:textColor">?android:attr/colorAccent</item>
</style>
But it will apply to all TextViews.
The main question, is it possible to make in XML (not programmatically) next:
Light theme: Half of TextViews text color black, and another half green.
Black theme: TextViews that black in Light theme - red, and another half - blue (which are green in Light theme).
Create 2 classes extends TextView
public class OneTextView extends TextView {
public OneTextView(Context context) {
super(context);
init(context);
}
public OneTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public OneTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context){
int[] attrs = new int[] { R.attr.myFirstColor};
TypedArray ta = context.obtainStyledAttributes(attrs);
int appColor = ta.getColor(0, 0);
ta.recycle();
// set theme color
setTextColor(appColor);
}
}
public class SecondTextView extends TextView {
public SecondTextView(Context context) {
super(context);
init(context);
}
public SecondTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public SecondTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context){
int[] attrs = new int[] { R.attr.mySecondColor};
TypedArray ta = context.obtainStyledAttributes(attrs);
int appColor = ta.getColor(0, 0);
ta.recycle();
// set theme color
setTextColor(appColor);
}
}
each class you can use in xml like this
<com.route.to.class.OneTextView
android:layout_width="match_parent"
android:layout_height="match_parent" />
OneTextView can have black and red colors
SecondTextView can have green and blue colors
define attr.xml in values
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="myFirstColor" format="color" />
<attr name="mySecondColor" format="color" />
</resources>
Then in your styles.xml, define colors for each theme:
<style name="Theme.MyApp" parent="#style/Theme.Light">
<item name="myFirstColor">#color/black</item>
<item name="mySecondColor">#color/green</item>
</style>
<style name="Theme.MyApp.Dark" parent="#style/Theme.Dark">
<item name="myFirstColor">#color/green</item>
<item name="mySecondColor">#color/blue</item>
</style>
you have defined in styles.xml
<style name="TextViewDark">
<item name="android:textColor">?android:attr/colorAccent</item>
</style>
<style name="TextViewLight">
<item name="android:textColor">#color/green</item>
</style>
then you can use it in main.xml
<LinearLayout>
<TextView
android:id="#+id/light_text_view"
android:text"i´m use light theme"
style="#style/TextViewLight"/>
<TextView
android:id="#+id/dark_text_view"
android:text"i´m use darktheme"
style="#style/TextViewDark"/>
</LinearLayout>
you don´t need to define styles in AppThemes
When I changed my minSdkVersion then I am getting this error:
android.view.InflateException: Binary XML file line #43: Error inflating class TextView
Eariler it was working fine before I have made the changes.
Here is my style :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<style name="AppTheme.Dark" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/white</item>
<item name="colorControlNormal">#color/greyDark</item>
<item name="colorControlActivated">#color/off_white</item>
<item name="android:windowBackground">#color/pink</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textStyle">normal</item>
<item name="android:windowContentTransitions" tools:targetApi="lollipop">true</item>
<item name="android:windowAllowEnterTransitionOverlap" tools:targetApi="lollipop">true</item>
<item name="android:windowAllowReturnTransitionOverlap" tools:targetApi="lollipop">true</item>
<item name="android:windowSharedElementEnterTransition" tools:targetApi="lollipop">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition" tools:targetApi="lollipop">#android:transition/move</item>
</style>
<style name="AlertDialogCustom" parent="#android:style/Theme.Dialog">
<item name="android:textColor">#color/pink</item>
<item name="android:typeface">normal</item>
<item name="android:height">5dp</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#color/white</item>
</style>
I guess there is something wrong with the parent property of a style.
If you are changing your version then also change the support library.You have to change the support lib like for e.g.for api 23 you have to chnage the appcompact library version to 23.
Hope this help.:)
You should try changing
<style name="AlertDialogCustom" parent="#android:style/Theme.Dialog">
to
<style name="AlertDialogCustom" parent="Theme.AppCompat.Dialog">
This is the issue with your font family which you are using in style. May be sans-serif-light font is not available in your assests>>fonts folder. So check with this how to use custom fonts in android.
Here are the steps to follow:
Android Studio:
Step1: Adding font family files to app
A) Go to the (project folder)
B) Then app>src>main
C) Create folder 'assets>fonts' into the main folder.
D) Put your 'abc.ttf' or 'abc.otf' font file into the fonts folder.
Step 2:
Now Create attrs.xml under res folder if it's not exists and add declare-styleable
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Font">
<attr name="typeface">
<enum name="FuturaLT" value="0" />
<enum name="FuturaLT_Heavy" value="1" />
<enum name="FuturaLT_Light" value="2" />
</attr>
</declare-styleable>
</resources>
//Here FuturaLT/FuturaLT_Heavy/FuturaLT_Light are file names
Note: – enum name should be font type name with underscore(_) uses, it will be easy for you to understand font family usage in your native code. No special character or other letter, otherwise you will got error in gen folder for same attribute id.
Step 3: Create your custom view(Button, TextView, EditText) class:-
package com.myapp.views;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.widget.TextView;
import com.myapp.R;
public class CustomTextView extends TextView {
public CustomTextView(Context context) {
super(context);
}
public CustomTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
try {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.Font);
int font = a.getInt(R.styleable.Font_typeface, 0);
a.recycle();
String str;
switch (font) {
case 1:
str = "fonts/FuturaLT.otf";
break;
case 2:
str = "fonts/FuturaLT_Heavy.otf";
break;
case 3:
str = "fonts/FuturaLT_Light.otf";
break;
default:
str = "fonts/FuturaLT.otf";
break;
}
setTypeface(FontManager.getInstance(getContext()).loadFont(str));
} catch (Exception e) {
e.printStackTrace();
}
}
#SuppressWarnings("unused")
private void internalInit(Context context, AttributeSet attrs) {
}
}
Step 4: Add FontManager.java support class
package com.myapp.views;
import android.content.Context;
import android.graphics.Typeface;
import java.util.HashMap;
import java.util.Map;
public class FontManager {
private Map<String, Typeface> fontCache = new HashMap<String, Typeface>();
private static FontManager instance = null;
private Context mContext;
private FontManager(Context mContext2) {
mContext = mContext2;
}
public synchronized static FontManager getInstance(Context mContext) {
if (instance == null) {
instance = new FontManager(mContext);
}
return instance;
}
public Typeface loadFont(String font) {
if (false == fontCache.containsKey(font)) {
fontCache.put(font, Typeface.createFromAsset(mContext.getAssets(), font));
}
return fontCache.get(font);
}
}
Step 5: Usage in XML layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.myapp.views.CustomTextView
android:id="#+id/tv_time_slot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
app:typeface="FuturaLT" />
</LinearLayout>
You can also use in java code directly:
Typeface tf = Typeface.createFromAsset(getAssets(), "fonts/FuturaLT.ttf");
tvText.setTypeface(tf);
Note:- If you don't use here FontManager to apply typeface and directly use
then you are not able to see your views in graphics preview.
Normal styling for a specific View:
<style name="Theme" parent="#android:style/Theme">
<item name="android:buttonStyle">#style/Button</item>
<item name="customDialogStyle">#style/CustomDialogStyle</item>
</style>
<style name="Button" parent="#android:style/Widget.Button">
<item name="android:textColor">#000000</item>
<item name="android:background">#FFFFFF</item>
</style>
<style name="Button.Dark">
<item name="android:textColor">#FFFFFF</item>
<item name="android:background">#000000</item>
</style>
<style name="CustomDialogStyle">
<item name="android:buttonStyle">#style/Button.Dark</item>
</style>
Some custom attributes:
<attr name="customDialogStyle" format="reference" />
<declare-styleable name="CustomDialog">
<attr name="android:buttonStyle" />
</declare-styleable>
Now with my CustomView:
public class CustomDialogContainer extends LinearLayout
{
public CustomDialogContainer(Context c) { this(c, null); }
public CustomDialogContainer(Context c, AttributeSet a) { this(c, a, R.attr.customDialogStyle); }
public CustomDialogContainer(Context c, AttributeSet a, int d) { super(c, a, d); init(c, a, d); }
private void init(Context c, AttributeSet a, int d)
{
final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomDialog, d, R.style.CustomDialogStyle);
// tried getInteger and some others too
int style = a.getResourceId(R.styleable.CustomDialog_buttonStyle, android.R.attr.buttonStyle);
a.recycle();
Button bOK = new Button(c, attrs, style);
// and tried
Button bCancel = new Button(c, null, style);
// even
Button anyOne = new Button(new ContextThemeWrapper(c, style));
addView(bOK);
addView(bCancel);
}
}
This is the very basic of my DialogContainer that has all the basics (Icon, Title, Cancel, OK, Container for other views). But what I'm obviously trying to do is apply a different style from reference to the buttons on the DialogContainer.
Doesn't matter where this is. If I create any other ViewGroup or so and want to add some of my own CustomViews to it, if custom styling can't be done this way then I have no clue what they thought while creating Android.
An activity with dark buttons and a bright Dialog with bright buttons - can't be too weird?
The alternative is to add say, all the attributes individually: background, textColor, textAppearance, and so on. I thought programmers wanted to be effective.
If someone knows how to do this, I'd appreciate some input.
In my Android application I need to apply style for a group of buttons, instead of styling each button individual. Something like this:
<?xml version="1.0" encoding="utf-8"?>
<!-- put here style="#ststyle/Button_Style" -->
<Button android:id="#+id/button1" android:text="#string/b01" />
<Button android:id="#+id/button2" android:text="#string/b02" />
<Button android:id="#+id/button4" android:text="#string/b03" />
<!-- end style -->
You can write the style for button like this ;
style_btn.xml
<style name="style_btn" parent="Wrap">
<item name="android:background">#drawable/btn_bg</item>
<item name="android:gravity">center</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_marginTop">4dp</item>
<item name="android:minWidth">90dp</item>
</style>
apply that style to your button :
<Button
android:id="#+id/attach_file"
style="#style/style_btn"
android:layout_centerVertical="true"
android:background="#drawable/orange_bg"
android:drawablePadding="10dp"
android:drawableRight="#drawable/attach"
android:text="#string/str_email_attach" />
If you need the style to all of the buttons in your application, mention in your App theme style, Then no need to apply for every button.
<style name="YourTheme" parent="android:Theme.Light">
<item name="android:buttonStyle">#style/Button</item>
</style>
If you need the style to particluar button , then apply to every button
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Button"
android:text="Button" />
I know I'm late joining the party but I stumbled across this when trying to figure out the same problem myself.
What I did was:
Depending on how may button groups you have (say 3 for example) you need to subclass button and create three custom button classes (see below)
//Custom button 1
public class CustomButton1 extends Button {
public CustomButton1(Context context, AttributeSet attrs) {
super(context, attrs, R.attr.attrStyle1);
}
public CustomButton1(Context context, AttributeSet attrs, int defStyle) {
super(context, null, R.attr.attrStyle1);
}
}
//Custom button 2
public class CustomButton2 extends Button {
public CustomButton2(Context context, AttributeSet attrs) {
super(context, attrs, R.attr.attrStyle2);
}
public CustomButton2(Context context, AttributeSet attrs, int defStyle) {
super(context, null, R.attr.attrStyle2);
}
}
//Custom button 3
public class CustomButton3 extends Button {
public CustomButton3(Context context, AttributeSet attrs) {
super(context, attrs, R.attr.attrStyle3);
}
public CustomButton3(Context context, AttributeSet attrs, int defStyle) {
super(context, null, R.attr.attrStyle3);
}
}
You can see from the custom classes I have passed a custom attr. These I define in my styles.xml and use them as reference. See my styles.xml below:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="theme1">
<item name="#attr/attrStyle1">#style/CustomButton1</item>
<item name="#attr/attrStyle2">#style/CustomButton2</item>
<item name="#attr/attrStyle3">#style/CustomButton3</item>
<item name="android:background">#color/warning_yellow_colour</item>
</style>
<style name="CustomButton1" parent = "#android:style/Widget.Button">
<item name="android:textColor">#color/white_colour</item>
<item name="android:padding">20dp</item>
<item name="android:background">#color/banner_background_sensor_colour</item>
</style>
<style name="CustomButton2" parent = "#android:style/Widget.Button">
<item name="android:textColor">#color/white_colour</item>
<item name="android:padding">20dp</item>
<item name="android:background">#color/button_red_colour</item>
</style>
<style name="CustomButton3" parent = "#android:style/Widget.Button">
<item name="android:textColor">#color/white_colour</item>
<item name="android:padding">20dp</item>
<item name="android:background">#color/text_blue_colour</item>
</style>
<attr name="attrStyle1" format="reference"/>
<attr name="attrStyle2" format="reference"/>
<attr name="attrStyle3" format="reference"/>
By linking the style to the attr, you then apply that style to your custom class, which you can then duplicate as many times as needed
CustomButton1 theme1 = (CustomButton1)findViewById(R.id.theme1);
CustomButton2 theme2 = (CustomButton2)findViewById(R.id.theme2);
CustomButton3 theme3 = (CustomButton3)findViewById(R.id.theme3);
Hopefully this is of benefit to someone!