Develop Reference

How to set custom layout for AlertDialog?

Call my dialog:
alertDialog = showInfoDialog(message = "$wrongPasscodeMessage\n$retryMessage")
And here is the method:
fun FragmentActivity.showInfoDialog(message: String?): AlertDialog? {
return try {
val customLayout = layoutInflater.inflate(R.layout.custom_layout, null)
AlertDialog.Builder(this)
.setView(customLayout)
.setMessage(message)
.setCancelable(false)
.show()
} catch (e: java.lang.Exception) {
e.log()
null
}
}
And here is my custom layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:background="#color/red"
android:paddingStart="#dimen/dp_44"
android:paddingEnd="#dimen/dp_44"
app:cardCornerRadius="#dimen/dp_12" />
But i don't know why my dialog hasn't background red and rounded corners?
What am I missing?
UPDATE:
For example if i change my custom_layout:
<?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"
android:background="#color/red" >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/googleg_disabled_color_18"/>
</LinearLayout>
I get smth like this:
But i want smth like this

You don't need a CardView to achieve a AlertDialog with rounded corners:
Just use the standard constructor:
new MaterialAlertDialogBuilder(this, R.style.DialogOverlay)
.setMessage("Wrong Passcode\nTry again in 5 minutes")
.show();
with a custom theme overlay to center the message:
<style name="DialogOverlay" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="materialAlertDialogBodyTextStyle">#style/BodyText</item>
</style>
<style name="BodyText" parent="MaterialAlertDialog.MaterialComponents.Body.Text">
<item name="android:gravity">center_horizontal</item>
</style>
If you want to change the rounded corners just add the shapeAppearanceOverlay in your theme overlay:
<style name="DialogOverlay" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
...
<item name="shapeAppearanceOverlay">#style/DialogCorners</item>
</style>
<style name="DialogCorners">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">12dp</item>
</style>

Create a drawable xml of something along the lines of this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorPrimary"/>
<corners android:radius="20dp" />
</shape>
The radius in the shape provides your rounded corners. Now you can set this drawable as the background to your LinearLayout for a dialog, or use a custom <style> in your res/styles.xml:
<style name="CustomAlertDialog" parent="Theme.AppCompat.DayNight.Dialog.Alert">
<item name="android:windowBackground">#drawable/dialog_background</item>
<item name="textAllCaps">false</item>
</style>
and use that style in your AlertDialog.Builder:
AlertDialog.Builder(this, R.style.CustomAlertDialog).setView(...
Using the style allows you to easily use the shape consistently across all your dialogs within the app.

android - how to set gradient for statsbar without effecting navigationbar?

I'm trying to add a gradient to my statusbar , this is my code :
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
it moves up the toolbar on the status bar and also covers up the navigation bar with the activity's content like this . I made my toolbar height bigger and solve the first problem but is there any way to preventing this code covering my navigation bar ?
anyway , is there any better way to add gradient to my statusbar without changing the toolbar height ?

Just follow the following thing it will work for you, in my case its working perfect
Make layout like bellow
main_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
android:background="#mipmap/ic_launcher"
android:fitsSystemWindows="true"
tools:context=".SplashActivity">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="#dimen/_150sdp"
app:layout_constraintEnd_toEndOf="parent"
android:src="#drawable/cell_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="#dimen/_150sdp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
and bellow tow flags
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
Apply bellow theme to your screen
<style name="AppThemeTrans" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#FFFFFF</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:navigationBarColor">#color/navigationBarColor</item> <!--Change Navigationbar background color here-->
</style>

Custom style attributes for SwitchPreferenceCompat (support v7)

I am trying to add some space to the the top of my SwitchPreferenceCompat which is inside of a PreferenceFragmentCompat. Basically I just need some room between it and the top Toolbar, either by expanding its height or with a padding gap without adding a white space that will interfere with the elevation shadow of the Toolbar. I believe I can achieve this by adding a custom style to the SwitchPreferenceCompat, but I am having trouble getting that to work.
Here is what I have tried:
In my styles.xml-
<style name="SwitchPreferenceNew" parent="Preference.SwitchPreferenceCompat.Material">
<item name="android:paddingTop">20dp</item>
</style>
In my app_preferences.xml-
<android.support.v7.preference.SwitchPreferenceCompat
style="#style/SwitchPreferenceNew"
android:defaultValue="false"
android:icon="#drawable/ic_power_settings_new_black_48dp"
android:key="prefsActivate"
android:summary=""
android:title="Activate reminders" />
I think I am just not overriding the style correctly, but I am having trouble finding out how to do it with the SwitchPreferenceCompat. Thank you in advance!

I know this is late but i get result from following code:
my app theme:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="preferenceTheme">#style/my_preference_theme</item>
</style>
my preference theme:
<style name="my_preference_theme" parent="#style/PreferenceThemeOverlay">
<item name="switchPreferenceCompatStyle">#style/preference_switch_compat</item>
</style>
in my PreferenceSwitchCompat i used layout property and you should create new layout for your view
<style name="preference_switch_compat">
<item name="android:layout">#layout/switch_layout</item>
</style>
this is here you must customize your view:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.SwitchCompat
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/switchWidget"
android:background="#f00"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
hope to help to someone.

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>

Actionbar logo padding left

The actionbar shows a space on the left side of the logo. This space is reserved for the upindicator i think.
I want to give this space a defined distance of 20dp for example.
How can i do this?
I can set the padding of the icon to 0, but that does not remove the space between the logo and the left side of the screen.
I tried to solve it by using a custom layout. But there is a little problem. Every time the activity launches, first the normal actionbar appears and then shows the custom layout.
This is how i show my custom view:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom);
// Set up the action bar.
final ActionBar actionBar = getActionBar();
//set custom actionbar
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(R.layout.actionbar);
//Displays the custom design in the actionbar
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
}
This is in my styles.xml:
<!--Customize the actionbar-->
<item name="android:windowActionBarOverlay">false</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionButtonStyle">#style/MyActionButton</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/green2</item>
<item name="android:icon">#drawable/app_icon_small</item>
<!-- Support library compatibility -->
</style>
<style name="MyActionButton" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:paddingRight">#dimen/padding_border</item>
<item name="android:paddingLeft">#dimen/padding_border</item>
<item name="android:src">#drawable/icon_plus</item>
<!--<item name="android:minWidth">0dp</item>-->
<!--<item name="android:paddingLeft">0dp</item>-->
<!--<item name="android:paddingRight">15dp</item>-->
<!-- Support library compatibility -->
</style>
This is the layout of the custom view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:background="#color/green2">
<ImageView
android:id="#+id/header"
android:contentDescription="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/padding_border"
android:paddingRight="#dimen/padding_border"
android:src="#drawable/app_icon_small"/>
<EditText
android:id="#+id/et_actionbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="YOLO"
android:gravity ="center"
android:textColor="#android:color/black"
android:textStyle="bold"
android:background="#android:color/transparent"
/>
</LinearLayout>

You can create xml file(your_xml_file) in folder /res/drawable, like this:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/menu_button"
android:right="20dp"/>
</layer-list>
and add it to code:
<activity android:name=...
android:logo="#drawable/your_xml_file" >

To reduce the space between the left side of the screen and the logo I used it:
<style name="AppTheme" parent="android:Theme.Holo">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:layout_marginLeft">-11dp</item>
</style>