locked
Android App screen differs from Designer View in Visual Studio RRS feed

  • Question

  • User193986 posted

    I have read quite a lot information about this, but can't seem to get it right. For some reason I can't get the application screen simular as what I designed in Visual Studio.

    I have updated my AndroidManifext.xml to:

        <?xml version="1.0" encoding="utf-8"?>
        <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="Doorgang_Lite.Doorgang_Lite" android:versionCode="1" android:versionName="1.0">
          <uses-sdk android:minSdkVersion="16" />
          <application 
           android:label="Doorgang_Lite"
           android:theme="@android:style/Theme.NoTitleBar"/>    
        </manifest>
    

    But no lick so far.

    Below Layout was created in Visual Studio 2015 (Xamarin Android Form).

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="16dp"
        android:paddingRight="16dp">
        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="25dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="Please enter your pincode" />
        <ImageView
            android:id="@+id/NmbOne"
            android:src="@drawable/oc"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/name"
            android:layout_alignParentLeft="true" />
        <ImageView
            android:id="@+id/NmbTwo"
            android:src="@drawable/oc"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/name"
            android:layout_toRightOf="@+id/NmbOne" />
        <ImageView
            android:id="@+id/NmbThree"
            android:src="@drawable/oc"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/name"
            android:layout_toRightOf="@+id/NmbTwo" />
        <ImageView
            android:id="@+id/NmbFour"
            android:src="@drawable/oc"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/name"
            android:layout_toRightOf="@+id/NmbThree" />
        <TextView
            android:id="@+id/name2"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true" />
        <ImageView
            android:id="@+id/TWEE"
            android:src="@drawable/twee"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name2"
            android:layout_centerHorizontal="true" />
        <ImageView
            android:id="@+id/EEN"
            android:src="@drawable/een"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name2"
            android:layout_toLeftOf="@+id/TWEE" />
        <ImageView
            android:id="@+id/DRIE"
            android:src="@drawable/drie"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name2"
            android:layout_toRightOf="@+id/TWEE" />
        <ImageView
            android:id="@+id/VIJF"
            android:src="@drawable/vijf"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Twee"
            android:layout_centerHorizontal="true" />
        <ImageView
            android:id="@+id/VIER"
            android:src="@drawable/vier"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Een"
            android:layout_toLeftOf="@+id/VIJF" />
        <ImageView
            android:id="@+id/ZES"
            android:src="@drawable/zes"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Drie"
            android:layout_toRightOf="@+id/Vijf" />
        <ImageView
            android:id="@+id/ACHT"
            android:src="@drawable/acht"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Vijf"
            android:layout_centerHorizontal="true" />
        <ImageView
            android:id="@+id/ZEVEN"
            android:src="@drawable/zeven"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Vier"
            android:layout_toLeftOf="@+id/ACHT" />
        <ImageView
            android:id="@+id/NEGEN"
            android:src="@drawable/negen"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Zes"
            android:layout_toRightOf="@+id/Acht" />
        <ImageView
            android:id="@+id/NL"
            android:src="@drawable/nl"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Acht"
            android:layout_centerHorizontal="true" />
        <ImageView
            android:id="@+id/BLANCO"
            android:src="@drawable/blanco"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Zeven"
            android:layout_toLeftOf="@+id/NL" />
        <ImageView
            android:id="@+id/BACK"
            android:src="@drawable/back"
            android:background="#000000"
            android:padding="1dp"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/Negen"
            android:layout_toRightOf="@+id/NL" />
    </RelativeLayout>
    

    Saturday, February 4, 2017 6:03 PM

Answers

  • User192947 posted

    Hi friend, @HaBe1963

    Try to use LinearLayout .. Like, <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout1"> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> <LinearLayout android:orientation="vertical" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/linearLayout2" android:gravity="center"> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout3" android:gravity="center"> <ImageView android:src="@drawable/nb1" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/nb2" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <ImageView android:src="@drawable/nb3" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout3" android:gravity="center"> <ImageView android:src="@drawable/nb4" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/nb5" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <ImageView android:src="@drawable/nb6" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout3" android:gravity="center"> <ImageView android:src="@drawable/nb7" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/nb8" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <ImageView android:src="@drawable/nb9" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout3" android:gravity="center"> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/nb0" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <ImageView android:src="@drawable/back" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> </LinearLayout> </LinearLayout>

    In the included project you will find the ressources that i used. You will only need to includ ressource and Copy/Paste this code.

    I hope that helps you.. Mabrouk Mahdhi, www.mahdhi.com

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Saturday, February 4, 2017 9:13 PM
  • User193986 posted

    Thx Mabrouk. But the solution was much more simpler.

    One needs to be very carefully with caps and small caps in your XML files. In my case for example I referred one time to ID ""@+id/ACHT" and in a next case to "@+id/Acht".

    Building this didn't cause issues, but the result in your app is what has been described above.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Saturday, February 4, 2017 9:30 PM

All replies

  • User192947 posted

    Hi friend, @HaBe1963

    Try to use LinearLayout .. Like, <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout1"> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> <LinearLayout android:orientation="vertical" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/linearLayout2" android:gravity="center"> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout3" android:gravity="center"> <ImageView android:src="@drawable/nb1" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/nb2" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <ImageView android:src="@drawable/nb3" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout3" android:gravity="center"> <ImageView android:src="@drawable/nb4" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/nb5" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <ImageView android:src="@drawable/nb6" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout3" android:gravity="center"> <ImageView android:src="@drawable/nb7" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/nb8" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <ImageView android:src="@drawable/nb9" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout3" android:gravity="center"> <ImageView android:src="@drawable/blank" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> <ImageView android:src="@drawable/nb0" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <ImageView android:src="@drawable/back" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/imageView1" /> </LinearLayout> </LinearLayout> </LinearLayout>

    In the included project you will find the ressources that i used. You will only need to includ ressource and Copy/Paste this code.

    I hope that helps you.. Mabrouk Mahdhi, www.mahdhi.com

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Saturday, February 4, 2017 9:13 PM
  • User193986 posted

    Thx Mabrouk. But the solution was much more simpler.

    One needs to be very carefully with caps and small caps in your XML files. In my case for example I referred one time to ID ""@+id/ACHT" and in a next case to "@+id/Acht".

    Building this didn't cause issues, but the result in your app is what has been described above.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Saturday, February 4, 2017 9:30 PM