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>
Related
I have been trying to set the Bottomsheet the way Google is using in their apps such as GOOGLE NEWS etc,
This is how Google's Bottomsheet looks like the following
Where my Bottomsheet looks like the following
Stright away you will notice two things,
There are no rounded corners
The navigation at the bottom is not blended
My code for bottomsheet is the following (i removed the controls for simplicity purposes)
MyBottomSheet.xml
<?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:id="#+id/bottom_sheet"
android:elevation="10dp"
android:minHeight="300dp"
app:behavior_peekHeight="120dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginBottom="30dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--controls here-->
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
And I am calling it in my code as follows
View view = LayoutInflater.Inflate(Resource.Layout.MyBottomSheet, null);
Dialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(view);
How can I get Rounded corners and make sure the bottom navigation does not go transparent?
To get the Google's modal BottomSheet design, implement it the following way. Start by creating a shape drawable which will be used as background for the bottom sheet:
bg_bottomsheet.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="#dimen/bottom_sheet_corner_radius"
android:topRightRadius="#dimen/bottom_sheet_corner_radius" />
<padding android:top="#dimen/bottom_sheet_top_padding" />
<solid android:color="#color/white" />
Now create a custom style for the BottomSheet widget.
style-v21.xml
<resources>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#color/white</item>
</style>
</resources>
styles.xml
<resources>
<style name="BottomSheet" parent="#style/Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/bg_bottom_sheet_dialog_fragment</item>
</style>
<style name="BaseBottomSheetDialog" parent="#style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">#style/BottomSheet</item>
</style>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />
</resources>
Now, extend the BottomSheetDialogFragment and set the new theme on it. That's it!
Now, I use this
<!-- Stuff to make the bottom sheet with round top borders -->
<style name="BottomSheetShapeAppearance" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeTopRight">16dp</item>
</style>
<style name="BottomSheetModal" parent="Widget.Design.BottomSheet.Modal">
<item name="shapeAppearance">#style/BottomSheetShapeAppearance</item>
<item name="behavior_peekHeight">140dp</item>
<item name="behavior_fitToContents">true</item>
<item name="behavior_halfExpandedRatio">0.5</item>
</style>
<style name="BaseBottomSheetMenu" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">#style/BottomSheetModal</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
<style name="BottomSheetMenuTheme" parent="#style/BaseBottomSheetMenu" />
You can change general theme support in Theme.MaterialComponents.DayNight.BottomSheetDialogextend by
Theme.MaterialComponents.DayNight.BottomSheetDialog for Dark Mode
In create BotoomSheet load specific theme
override fun getTheme(): Int = R.style.BottomSheetMenuTheme
Try to Use below code
View view = LayoutInflater.Inflate(Resource.Layout.MyBottomSheet, null);
Dialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(view);
((View) view.getParent()).setBackgroundColor(getContext().getResources().getColor(android.R.color.transparent));
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) ((View) view.getParent())
.getLayoutParams();
((View) view.getParent()).setLayoutParams(layoutParams);
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);
I have layout with centered Image View.
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/WHITE">
<ImageView
android:id="#+id/powered_by"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/powered_by" />
<ImageView
android:id="#+id/splash_logo"
android:src="#drawable/logo"
app:layout_widthPercent="70%"
app:layout_heightPercent="70%"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:visibility="invisible" />
</android.support.percent.PercentRelativeLayout>
Here is theme setting for my activity
<style name="SplashTheme" parent="android:Theme.Holo.Light">
<item name="android:windowBackground">#drawable/splash</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
When i change parent theme to android:Theme.DeviceDefault.Light, ImageView appears a little bit higher, not in center of the screen. It seems like parent view for my device now starts not from the bottom of the screen, but from the bottom toolbar (i use Nexus 5X with on-screen buttons).
I want to use device default theme for a modern dialog appearance, but i also need to have this image view exactly in center on all devices.
How to do it?
It seems like android:Theme.DeviceDefault.Light is not setting android:windowFullScreen. So you will need to create your own theme with the parent android:Theme.DeviceDefault.Light and change the values for the items you want to change
<style name="TestTheme" parent="android:Theme.DeviceDefault.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
edit:
for anyone coming across this, the way I got it to work is to either:
Set the layout directly for each preference item, as in:
<CheckboxPreference
android:layout="#layout/checkbox_preference_item"/>
OR set the style via a theme as I was doing before, but define a widgetlayout and set it instead of an actual layout, like so, where preferenceStyle is set to #style/Preference and checkBoxPreferenceStyle is set to #style/Preference.Checkbox:
<Style name="Preference">
<item name="android:layout">#layout/checkbox_preference_item</item>
</Style>
<Style name="Preference.Checkbox">
<item name="android:widgetLayout">#layout/your_custom_widget</item>
</Style>
I'm trying to customize the layout of a Checkbox Preference item and the checkbox itself is not showing up. I'm modeling after android code and not sure where I'm going wrong. The text views are working fine as well as the rest of the layout but the checkbox is not showing up. Would appreciate any help with this.
Relevant code:
theme.xml:
<style name="Theme.Settings" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/SettingsActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:preferenceCategoryStyle">#style/PreferenceCategory</item>
<item name="android:preferenceStyle">#style/Preference</item>
<item name="android:checkBoxPreferenceStyle">#style/Checkbox</item>
</style>
style.xml
<style name="Checkbox">
<item name="android:layout">#layout/checkbox_preference_item</item>
</style>
<style name="Preference.Text">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textSize">#dimen/preferences_item_font</item>
<item name="android:textColor">#color/preference_text</item>
</style>
<style name="Preference.Text.Extra" parent="Preference.Text">
<item name="android:textSize">#dimen/preferences_header_font</item>
</style>
checkbox_preference_item.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/preferences_item_height"
android:background="#color/white"
android:paddingLeft="#dimen/preferences_item_left">
<LinearLayout android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:gravity="center_vertical">
<TextView android:id="#android:id/title"
style="#style/Preference.Text"/>
<TextView android:id="#android:id/summary"
style="#style/Preference.Text.Extra"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible"
android:id="#android:id/widget_frame"
android:layout_alignParentRight="true"/>
</RelativeLayout>
I am not seeing a CheckBox in the layout xml. Am I missing something? You need to specify something like:
<CheckBox android:id="..." ... />
Then you may need to specify something like
<CheckBoxPreference android:key="..." ... />
in the preference xml file. Setting should be android:widgetLayout to the custom CheckBox.
See this post may help you more customizing checkbox preference
I'm trying to make a custom progress bar with custom indeterminate view using animation_list with multiple images .. i've got it to work but it does something weird a part of the image is repeated like so ..
Here is the code:
Dialog dialog = new Dialog(getActivity(), R.style.CustomProgressDialog);
View customView = ((LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(R.layout.custom_loader_layout, null, false);
dialog.setContentView(customView);
dialog.setCancelable(false);
dialog.setCanceledOnTouchOutside(false);
Here is the layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:gravity="center"
android:orientation="vertical" >
<ProgressBar
android:id="#+id/imgProgreso"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:background="#android:color/transparent"
android:indeterminateDrawable="#drawable/loader_drawable" />
<TextView
android:id="#+id/txtmensajedialogprogress"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:background="#android:color/transparent"
android:gravity="center_vertical|center_horizontal"
android:text="Wait ..."
android:textColor="#android:color/black"
android:textSize="15dp"
android:textStyle="normal" />
and here is the custom style
<style name="CustomProgressDialog" parent="#android:Theme.Dialog" >
<item name="android:windowFrame">#null</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowTitleStyle">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:background">#android:color/transparent</item>
</style>
NOTE: worth mentioning this problem seems to happen when i use the custom style to make background transparent
Any help would be really appreciated :)
The answer was using an ImageView instead of a a custom layout resource while setting a background for the animation-list for some reason drawing that background for the animation-list got messed up.
It simply goes something like that ..
Dialog dialog = new Dialog(getActivity(), R.style.CustomProgressDialog);
ImageView customView = new ImageView(getActivity());
customView.setBackgroundResource(R.drawable.bg_loader);
customView.setImageDrawable(getResources().getDrawable(R.drawable.custom_loader));
while R.drawable.custom_loader is the animation-list