Android: How to customize AlertDialog, Dialog an Spinner titles - android

I want to customize all dialogs, alertDialogs and spinner. I want to change the color of text and the background of the title bar.
I try to explain better:
I want the text (JOLLY BAR DI ...) to be white and the background of the title (from the top of the dialog to the soft-blue line below the title included) to be blue (#044592).
How can I do it?

Ok, I've almost solved the problem (I'm answering my own question because it may help others with the same problem as mine).
The problem remains for spinners, DatePickers etc.
For the AlertDialogs I do something like this:
AlertDialog.Builder builder = new AlertDialog.Builder(MyActivity.this, AlertDialog.THEME_HOLO_LIGHT);
//Then I do what I need with the builder (except for setTitle();
LayoutInflater inflater = getLayoutInflater();
View view=inflater.inflate(R.layout.dialog_custom_title, null);
TextView title = (TextView)view.findViewById(R.id.myTitle);
title.setText("Title I want to show");
builder.setCustomTitle(view);
AlertDialog alert = builder.create();
alert.show();
dialog_custom_titile.xml :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#044592" >
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myTitle"
android:layout_width="fill_parent"
android:textSize="20dp"
android:layout_height="70dp"
android:layout_marginLeft="25dp"
android:paddingTop="22dp"
android:textColor="#android:color/white"
android:textStyle="bold" />
</RelativeLayout>
for the Activities that I want to look like Dialogs I do like this:
I declare them in the Manifest.xml as follows:
<activity
android:name="com.aveschini.AnotherActivity"
android:screenOrientation="portrait"
android:label="My Dialog"
android:theme="#style/MyDialog"
android:windowSoftInputMode="adjustPan" />
then, in the res/values/styles.xml file I do like this:
<style name="AppTheme" parent="android:Theme.Holo.Light" />
<style name="MyDialog" parent="android:Theme.Holo.Light.Dialog">
<item name="android:windowTitleStyle">#style/DialogWindowTitle</item>
</style>
<style name="DialogWindowTitle">
<item name="android:textAppearance">#style/TextAppearance.DialogWindowTitle</item>
<item name="android:background">#044592</item>
</style>
<style name="TextAppearance.DialogWindowTitle" parent="android:TextAppearance">
<item name="android:textColor">#android:color/white</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">20sp</item>
</style>
I still get the light blue divider between the title and the body... still working on it.
As already said, I still don't know how to deal with Spinners, DatePicker, etc...
That's the result:
AlertDialog:
And an Activity with the look of a dialog:

Related

Is there any way to remove the background of an AlertDialog?

I'm trying to change the background color of an Android AlertDialog.
Every post I've seen is about changing the color of the AlertDialog, but not the background behind.
Any help would be appreciated.
<style name="MyDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:background">#color/myColor</item>
and then apply it in the Builder constructor:
AlertDialog alertDialog = new AlertDialog.Builder(getContext(), R.style.MyDialogTheme)
...
.create();
for more info see see this post
you can reduce the dim Amount
dialog.getWindow().setDimAmount(0.5f);
To get a background color you need to make a custom Alert Dialog.
There is one way to do what you asked for but its not that much of a good solution
First, set custom dialog theme like this.
styles.xml
<style name="CustomDialogTheme" parent="android:Theme.Dialog">
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
CustomDialog.java
Apply the theme and construct your custom_dialog view as follows.
public HTCustomDialog(Context context) {
super(context, R.style.CustomDialogTheme);
setContentView(R.layout.custom_dialog);
}
custom_dialog.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/main_solid_80">
<RelativeLayout
android:id="#+id/dialog_root"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:background="#drawable/bg_popup"
android:padding="16dp">
</RelativeLayout>
Now that CustomDialog view is a full-screen view, set background of your root layout to whatever color you'd like.
I got this answer from here take a look .

Popup window android with alpha back view

how is posible to do it, I actually have this code:
public void openDialog() {
final Dialog dialog = new Dialog(this); // Context, this, etc.
dialog.setContentView(R.layout.fragment_wrongpass_reg);
dialog.setTitle("cualquier cosa");
dialog.show();
}
I need to put the the back screen with alpha, making it almost transparent as in this image:
here is the image
You need to create a full screen dialog set it with a custom theme.
create a full screen dialog and set its content with inside padding.
something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cb000000"
android:padding="20dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
....
....
YOUR CONTENT
....
..../>
</RelativeLayout>
The custom theme should be something like this one:
<style name="Dialog_Fullscreen">
<item name="android:windowActionBar">false</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
finally, set it to the dialog, like this:
final dialog = new Dialog(context, R.style.Dialog_Fullscreen);

Why textcolor atribute in styles.xml doesn't affect my checkbox?

I'm setting the design of my app in styles.xml. I have this custom_checkbox.xml:
<CheckBox
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/checkboxForActionBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="10%"
android:textColor="#android:color/white"
app:theme="#style/AppTheme"
/>
And I set the checkbox colors at styles.xml, with colorControlNormal and colorControlActivated:
<?xml version="1.0" encoding="utf-8"?>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorAccent">#color/accent</item>
<item name="android:textColor">#color/primary_text</item>
<item name="android:colorControlNormal">#android:color/white</item>
<item name="android:colorControlActivated">#color/accent</item>
</style>
Also, I have an alertDialog with checkboxes created with:
final AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(getContext(), R.style.CustomDialog)).setTitle("Title here").setMultiChoiceItems(mItems, mSelection, this);
The colors from the checkboxes were set in the styles.xml, except the textColor atribute.
The thing is: The text in the checkboxes at the alertDialog do not get the color set at the android:textColor in the styles.xml. Also, when I erase android:textColor atribute from my custom_checkbox, the textColor atribute in AppTheme do not set the color of the text.
Why is that happening? Is textColor the correct atribute at Styles.xml to set the color of this kind of text?
I've just discovered. textColorPrimaryDisableOnly fixed the text in my custom_checkbox, and textColorAlertDialogListItem fixes in dialog lists.
Just add these in the styles.xml:
<item name="android:textColorPrimaryDisableOnly">#android:color/white</item>
<item name="android:textColorAlertDialogListItem">#android:color/white</item>

Styling dialog boxes in Android

I've been trying to set a basic (not at all custom) dialog box using a fragment, and having difficulties. As you can see in the attached in image, the background shadow isn't correct and the title has white at the left and right hand side.
Following advice from How to style AlertDialogs like a pro I tried setting the alert dialog style through my app, and copying the style out of the Android SDK but this doesn't seem to make much difference.
<!-- Local copy of android:Theme.Holo.Dialog.Alert -->
<style name="Theme_Holo_Dialog_Alert" parent="#android:style/Theme.Holo.Light.Dialog">
<item name="android:windowBackground">#drawable/dialog_full_holo_light</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:buttonBarStyle">#android:style/Holo.Light.ButtonBar.AlertDialog</item>
<item name="android:borderlessButtonStyle">#android:style/Widget.Holo.Light.Button.Borderless.Small</item>
<item name="listPreferredItemPaddingLeft">16dip</item>
<item name="listPreferredItemPaddingRight">16dip</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
</style>
<!-- Local copy of android:DialogWindowTitle.Holo -->
<style name="DialogWindowTitle_Holo">
<item name="android:maxLines">1</item>
<item name="android:scrollHorizontally">true</item>
<item name="android:textAppearance">#android:style/TextAppearance.Holo.DialogWindowTitle</item>
</style>
and I tried setting the style directly using
ContextThemeWrapper ctw = new ContextThemeWrapper(getActivity(), R.style.Theme_Holo_Dialog_Alert);
AlertDialog.Builder builder = new AlertDialog.Builder(ctw);
and also
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), AlertDialog.THEME_HOLO_LIGHT);
None of which make a difference to the background shadow or the title styling.
Any ideas?
Update 1: The layout of the dialog is set using a fragment and added to the builder as a view:
LayoutInflater inflater = getActivity().getLayoutInflater();
_layoutView = inflater.inflate(R.layout.fragment_edit_cycles, null);
builder.setView(_layoutView);
using the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="10dp"
android:paddingBottom="20dp"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<NumberPicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editStageCyclesSpin" />
</LinearLayout>
Update 2: Removed the padding and changed the height/width in response to Alok Nair
I removed the padding and changed the layout width and height but unfortunately this had no effect on the white space in the title
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<NumberPicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editStageCyclesSpin" />
</LinearLayout>

Changing the background color of searchview autocomplete dropdown

I have a searchview with a content provider for custom suggestions, which are displayed in a dropdown. However, the dropdown background is dark while the text is black so it's not very visible. My app theme is inheriting from Theme.AppCompat.Light so everything else in my app is black text on a light background.
I want to change the background of the dropdown so the text is readable but I haven't found any way of doing so. The closest I got was following the solution here: Style Android SearchView Drop down popup
But when the dropdown appears, stuff looks messed up.
Is there any working solution for this?
Applying styles you can change the dropdown background color and the items text color and size
<!-- ToolBar -->
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:dropDownItemStyle">#style/myDropDownItemStyle</item>
<item name="android:dropDownListViewStyle">#style/myDropDownListViewStyle</item>
</style>
<style name="myDropDownItemStyle" parent="Widget.AppCompat.DropDownItem.Spinner">
<item name="android:textColor">#color/secondary_text_default_material_light</item>
<item name="android:textSize">14dp</item>
</style>
<style name="myDropDownListViewStyle" parent="Widget.AppCompat.ListView.DropDown">
<item name="android:background">#FFF</item>
</style>
Here's one possibility.
Define a query suggestion row layout, e.g. R.layout.li_query_suggestion, that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#android:id/text1"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:gravity="center_vertical"
android:minHeight="56dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#android:color/black"
tools:text="Blah blah blah"/>
Notice that the background color is white and the text color is black. You can, of course, change these values.
Then, in your cursor adapter, specify the layout you created as the row layout. E.g.:
CursorAdapter suggestionAdapter = new SimpleCursorAdapter(
getActivity(),
R.layout.li_query_suggestion,
null,
new String[]{"name"},
new int[]{android.R.id.text1},
0);
This will give you something that looks like the following:
Just fyi, my current theme looks like this:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/light_blue_500</item>
<item name="colorPrimaryDark">#color/light_blue_700</item>
<item name="colorAccent">#color/pink_a200</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="searchViewStyle">#style/CustomSearchView</item>
</style>
i think you should use
SearchView.SearchAutoComplete autoCompleteTextView = (SearchView.SearchAutoComplete) searchView.findViewById(R.id.search_src_text);
if (autoCompleteTextView != null) {
autoCompleteTextView.setDropDownBackgroundDrawable(getResources().getDrawable(R.drawable.abc_popup_background_mtrl_mult));
}
this can set the SearchAutoComplete dropdown background to Light
Simple solution
int autoCompleteTextViewID = getResources().getIdentifier("search_src_text", "id", getPackageName());
mSearchAutoCompleteTextView = mSearchView.findViewById(autoCompleteTextViewID);
mSearchAutoCompleteTextView.setDropDownBackgroundResource(R.color.white);

Categories

Resources