CODEWITHSUNDEEP
androidandroid-layoutandroid-alertdialogandroid-dialog
d91
d91

Reputation: 83

Custom Alertdialog width is bigger than the shown width in layout xml

I am trying to create custom alertdialog. Here is my alertdialog custom layout xml

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:orientation="horizontal">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Processing" />
</LinearLayout>
</RelativeLayout>

and the code from activity where i call custom alertdialog

   LayoutInflater inflater = MainActivity.this.getLayoutInflater();
   View dialogView = inflater.inflate(R.layout.layoutalertprogress, null);
   AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(MainActivity.this);
   alertDialogBuilder.setView(dialogView);
   alertDialog = alertDialogBuilder.create();
    if(!alertDialog.isShowing())
      {
           alertDialog.show();
      }

problem is even in layout file linearlayout width is wrapped to its content like this layout demo

the real width of alertdialog looks like this in runtime enter image description here so the real width of alertdialog is wider (wider than the layout shown above). It seems that linearlayout width is not wrapped to its contents so there is big unused space from its edges to its child elements. how to make this linearlayout width to wrap its contents so the unused space from its edges can be removed? Thanks

Upvotes: 1

Views: 1215

Answers (5)

Ahsan Ullah Rasel
Ahsan Ullah Rasel

Reputation: 941

Use simply just setLayout method with your desired width and height. This will make your dialog width and height as specified. Kotlin version,

private fun showDialog() {
    val dialog = AlertDialog.Builder(this)
    val layout = LayoutInflater.from(this).inflate(R.layout.custom_dialog_layout, null, false)
    dialog.setView(layout)

    val alert = dialog.create()

    alert.show()
    alert.window?.setBackgroundDrawableResource(android.R.color.transparent)
    alert.window?.setLayout(600, 600)
}

Upvotes: 2

karan
karan

Reputation: 8853

change your relative layout as below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:orientation="horizontal">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Processing" />
</LinearLayout>
</LinearLayout>

Create a theme for alertdialog in style.xml as below

<style name="AlertDialogCustom" parent="AlertDialog.AppCompat">
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
        <item name="android:textSize">10sp</item>
        <item name="android:layout_width">wrap_content</item>
</style>

Create below method to call your dialog.

public void showDemoDialog() {
        LayoutInflater inflater = MainActivity.this.getLayoutInflater();
        View dialogView = inflater.inflate(R.layout.demodg, null);
        AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(MainActivity.this, R.style.AlertDialogCustom);
        alertDialogBuilder.setView(dialogView);
        AlertDialog alertDialog = alertDialogBuilder.create();
        if (!alertDialog.isShowing()) {
            alertDialog.show();
            alertDialog.getWindow().setLayout(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        }

    }

This is the result when run on device. enter image description here

Upvotes: 0

Sz-Nika Janos
Sz-Nika Janos

Reputation: 821

I faced the same problem and the solution which worked for me is:

Create a theme with the followings:

<style name="yourThemeName" parent="Theme.AppCompat.Dialog">
       ...
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

And then in code:

 inflatedView= layoutInflater.inflate(R.layout.yourLayoutId, null)
  dialog = AlertDialog.Builder(this, R.style.yourThemeName)
            .setView(inflatedView)
  dialog.show()

Upvotes: 0

Bunny
Bunny

Reputation: 1064

Try this

set background color to child LinearLayout 

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:background="@android:color/white"
        android:orientation="horizontal">

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Processing" />
    </LinearLayout>
</RelativeLayout>

and then add this line in your java code

 alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

after this

AlertDialog alertDialog = alertDialogBuilder.create();

Upvotes: 2

user10594948
user10594948

Reputation: 

  LayoutInflater inflater = MainActivity.this.getLayoutInflater();
                View dialogView = inflater.inflate(R.layout.layoutalertprogress, null);
                AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(MainActivity.this);
                alertDialogBuilder.setView(dialogView);
                AlertDialog alertDialog = alertDialogBuilder.create();
                alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00000000")));
                if(!alertDialog.isShowing())
                {
                    alertDialog.show();
                }

Upvotes: 0

Related Questions