Search code examples
androidxamarinmodal-dialogpopupwindowlayout-inflater

Popup window not showing as expected (Android / Xamarin)


Good afternoon everyone!
I'm having some problems in a listView popup.
When clicking in any of the list elements, a popup will appear and show all the information of the game (its a TicTacToe history of the plays). I've done the layout for the modal and in the preview is showing as I want.
But when I run in my Android, some elements are "cut" as shown here...

Current activity code:

    private void List_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
    {
        LayoutInflater inflater = (LayoutInflater)this.GetSystemService(Context.LayoutInflaterService);
        View popup = inflater.Inflate(Resource.Layout.DesenhoJogo, null); //DesenhoJogo is my Layout for the modal
        PopupWindow janela = new PopupWindow(popup, ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent, false);
        janela.ShowAsDropDown(popup, Android.Views.ViewGroup.LayoutParams.WrapContent, Android.Views.ViewGroup.LayoutParams.WrapContent);

        Button voltar = popup.FindViewById<Button>(Resource.Id.btnVoltar);
        voltar.Click += (s, o) => { janela.Dismiss(); };
    }

EDIT: Layout code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:p1="http://schemas.android.com/apk/res/android"
    p1:orientation="vertical"
    p1:minWidth="25px"
    p1:minHeight="25px"
    p1:layout_width="match_parent"
    p1:layout_height="match_parent"
    p1:id="@+id/linearLayout1"
    p1:background="@drawable/fundoverde"
    p1:weightSum="3">
    <RelativeLayout
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/relativeLayout1"
        p1:layout_marginLeft="5dp"
        p1:layout_marginRight="5dp">
        <ImageView
            p1:src="@drawable/xbranco"
            p1:layout_width="35dp"
            p1:layout_height="35dp"
            p1:layout_margin="5dp"
            p1:id="@+id/xJogadorBranco" />
        <ImageView
            p1:src="@drawable/obranco"
            p1:layout_width="35dp"
            p1:layout_height="35dp"
            p1:layout_margin="5dp"
            p1:id="@+id/oJogadorBranco"
            p1:layout_below="@id/xJogadorBranco" />
        <TextView
            p1:text="Jogador 1"
            p1:layout_width="match_parent"
            p1:layout_height="35dp"
            p1:layout_toRightOf="@id/xJogadorBranco"
            p1:id="@+id/nomeJogador1"
            p1:layout_margin="5dp"
            p1:gravity="fill"
            p1:textSize="25dp" />
        <TextView
            p1:text="Jogador 2"
            p1:layout_width="match_parent"
            p1:layout_height="35dp"
            p1:layout_toRightOf="@id/oJogadorBranco"
            p1:id="@+id/nomeJogador2"
            p1:layout_margin="5dp"
            p1:gravity="fill"
            p1:textSize="25dp"
            p1:layout_below="@id/nomeJogador1" />
        <TextView
            p1:text="Jogadas: "
            p1:layout_width="match_parent"
            p1:layout_height="35dp"
            p1:id="@+id/jogadas"
            p1:gravity="center"
            p1:textSize="25dp"
            p1:layout_below="@+id/nomeJogador2"
            p1:layout_marginBottom="5dp"
            p1:layout_marginRight="5dp"
            p1:layout_marginLeft="5dp" />
        <TextView
            p1:text="Vencedor: "
            p1:layout_width="match_parent"
            p1:layout_height="35dp"
            p1:id="@+id/vencedor"
            p1:gravity="center"
            p1:textSize="25dp"
            p1:layout_below="@+id/jogadas"
            p1:padding="5dp"
            p1:layout_marginBottom="5dp"
            p1:layout_marginLeft="5dp"
            p1:layout_marginRight="5dp" />
    </RelativeLayout>
    <LinearLayout
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:orientation="vertical"
        p1:weightSum="3"
        p1:background="@drawable/velha"
        p1:layout_weight="3"
        p1:id="@+id/linearLayout5"
        p1:layout_marginBottom="10dp"
        p1:layout_marginLeft="5dp"
        p1:layout_marginRight="5dp"
        p1:layout_marginTop="5dp">
        <LinearLayout
            p1:layout_width="match_parent"
            p1:layout_height="0dp"
            p1:layout_weight="1"
            p1:orientation="horizontal"
            p1:weightSum="3"
            p1:id="@+id/linearLayout2">
            <Button xmlns:tools="http://schemas.android.com/tools"
                p1:id="@+id/pos00"
                p1:layout_width="0dp"
                p1:layout_height="fill_parent"
                p1:layout_weight="1"
                tools:visibility="visible"
                p1:scaleType="centerInside"
                p1:background="@android:color/transparent" />
            <Button xmlns:tools="http://schemas.android.com/tools"
                p1:id="@+id/pos01"
                p1:layout_width="0dp"
                p1:layout_height="fill_parent"
                p1:layout_weight="1"
                tools:visibility="visible"
                p1:scaleType="centerInside"
                p1:background="@android:color/transparent" />
            <Button xmlns:tools="http://schemas.android.com/tools"
                p1:id="@+id/pos02"
                p1:layout_width="0dp"
                p1:layout_height="fill_parent"
                p1:layout_weight="1"
                tools:visibility="visible"
                p1:scaleType="centerInside"
                p1:background="@android:color/transparent" />
        </LinearLayout>
        <LinearLayout
            p1:layout_width="match_parent"
            p1:layout_height="0dp"
            p1:layout_weight="1"
            p1:orientation="horizontal"
            p1:weightSum="3"
            p1:id="@+id/linearLayout3">
            <Button xmlns:tools="http://schemas.android.com/tools"
                p1:id="@+id/pos10"
                p1:layout_width="0dp"
                p1:layout_height="fill_parent"
                p1:layout_weight="1"
                tools:visibility="visible"
                p1:scaleType="centerInside"
                p1:background="@android:color/transparent" />
            <Button xmlns:tools="http://schemas.android.com/tools"
                p1:id="@+id/pos11"
                p1:layout_width="0dp"
                p1:layout_height="fill_parent"
                p1:layout_weight="1"
                tools:visibility="visible"
                p1:scaleType="centerInside"
                p1:background="@android:color/transparent" />
            <Button xmlns:tools="http://schemas.android.com/tools"
                p1:id="@+id/pos12"
                p1:layout_width="0dp"
                p1:layout_height="fill_parent"
                p1:layout_weight="1"
                tools:visibility="visible"
                p1:scaleType="centerInside"
                p1:background="@android:color/transparent" />
        </LinearLayout>
        <LinearLayout
            p1:layout_width="match_parent"
            p1:layout_height="0dp"
            p1:layout_weight="1"
            p1:orientation="horizontal"
            p1:weightSum="3"
            p1:id="@+id/linearLayout4">
            <Button xmlns:tools="http://schemas.android.com/tools"
                p1:id="@+id/pos20"
                p1:layout_width="0dp"
                p1:layout_height="fill_parent"
                p1:layout_weight="1"
                tools:visibility="visible"
                p1:scaleType="centerInside"
                p1:background="@android:color/transparent" />
            <Button xmlns:tools="http://schemas.android.com/tools"
                p1:id="@+id/pos21"
                p1:layout_width="0dp"
                p1:layout_height="fill_parent"
                p1:layout_weight="1"
                tools:visibility="visible"
                p1:scaleType="centerInside"
                p1:background="@android:color/transparent" />
            <Button xmlns:tools="http://schemas.android.com/tools"
                p1:id="@+id/pos22"
                p1:layout_width="0dp"
                p1:layout_height="fill_parent"
                p1:layout_weight="1"
                tools:visibility="visible"
                p1:scaleType="centerInside"
                p1:background="@android:color/transparent" />
        </LinearLayout>
    </LinearLayout>
    <Button
        p1:text="Voltar"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/btnVoltar"
        p1:layout_gravity="bottom"
        p1:textSize="20dp"
        p1:layout_marginLeft="5dp"
        p1:layout_marginRight="5dp"
        p1:layout_weight="0" />
</LinearLayout>


Any ideias how to solve it?
PS: Started Xamarin two weeks ago, so some coding understendment for me is beeing a little bit hard =/
Thanks!

EDIT - SOLUTION:
I followed jzeferino tips, and researched a bit more. Even after his tips, the layout still wasn't as it should be. So I realized that the problem was with the STATUS BAR height. After changing some minor problems in my layout, all I had to do was create a method to get and return its height

public int getStatusBarHeight()
{
    int statusBarHeight = 0;
    int resourceId = Resources.GetIdentifier("status_bar_height", "dimen", "android");
    if (resourceId > 0)
    {
        statusBarHeight = Resources.GetDimensionPixelSize(resourceId);
    }
    return statusBarHeight;
}


In order to use it as a parameter in the following line janela.ShowAsDropDown(popup, Android.Views.ViewGroup.LayoutParams.MatchParent, tam); Where int tam = getStatusBarHeight();
And the final result is this one


Solution

  • I need to change up some things. Try to not use so many fixed dimensions on layout_height and layout_width. You were using wights incorrect. I removed it.

    Final code (note i need to change the name of resources):

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/background"
        android:orientation="vertical">
    
        <RelativeLayout
            android:id="@+id/relativeLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp">
    
            <ImageView
                android:id="@+id/xJogadorBranco"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_margin="5dp"
                android:src="@drawable/icno" />
    
            <ImageView
                android:id="@+id/oJogadorBranco"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_below="@id/xJogadorBranco"
                android:layout_margin="5dp"
                android:src="@drawable/icno" />
    
            <TextView
                android:id="@+id/nomeJogador1"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:layout_margin="5dp"
                android:layout_toRightOf="@id/xJogadorBranco"
                android:gravity="fill"
                android:text="Jogador 1"
                android:textSize="25dp" />
    
            <TextView
                android:id="@+id/nomeJogador2"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:layout_below="@id/nomeJogador1"
                android:layout_margin="5dp"
                android:layout_toRightOf="@id/oJogadorBranco"
                android:gravity="fill"
                android:text="Jogador 2"
                android:textSize="25dp" />
    
            <TextView
                android:id="@+id/jogadas"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/nomeJogador2"
                android:layout_margin="3dp"
                android:gravity="center"
                android:text="Jogadas: "
                android:textSize="25dp" />
    
            <TextView
                android:id="@+id/vencedor"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/jogadas"
                android:layout_margin="3dp"
                android:gravity="center"
                android:text="Vencedor: "
                android:textSize="25dp" />
        </RelativeLayout>
    
        <LinearLayout
            android:id="@+id/linearLayout5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:background="@drawable/grid"
            android:orientation="vertical">
    
            <LinearLayout
                android:id="@+id/linearLayout2"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">
    
                <Button xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/pos00"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:scaleType="centerInside"
                    tools:visibility="visible" />
    
                <Button xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/pos01"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:scaleType="centerInside"
                    tools:visibility="visible" />
    
                <Button xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/pos02"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:scaleType="centerInside"
                    tools:visibility="visible" />
            </LinearLayout>
    
            <LinearLayout
                android:id="@+id/linearLayout3"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">
    
                <Button xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/pos10"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:scaleType="centerInside"
                    tools:visibility="visible" />
    
                <Button xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/pos11"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:scaleType="centerInside"
                    tools:visibility="visible" />
    
                <Button xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/pos12"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:scaleType="centerInside"
                    tools:visibility="visible" />
            </LinearLayout>
    
            <LinearLayout
                android:id="@+id/linearLayout4"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">
    
                <Button xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/pos20"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:scaleType="centerInside"
                    tools:visibility="visible" />
    
                <Button xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/pos21"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:scaleType="centerInside"
                    tools:visibility="visible" />
    
                <Button xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/pos22"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:scaleType="centerInside"
                    tools:visibility="visible" />
            </LinearLayout>
        </LinearLayout>
    
        <Button
            android:id="@+id/btnVoltar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:text="Voltar"
            android:textSize="20dp" />
    </LinearLayout>
    

    Result:

    enter image description here