Wie würdet ihr dieses Scribble als Layout umsetzen?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Wie würdet ihr dieses Scribble als Layout umsetzen?

    Hallo Zusammen,

    leider habe ich immer noch Verständnisprobleme bezüglich des umsetzten von Layouts,
    weswegen ich schnell ein Scribble erstellen habe und euch fragen wollte, wie ihr es umsetzten würdet:


    (Der graue Hintergrund soll später ein Bild sein)
    Bis jetzt sieht mein XML-Code zur Darstellung wie folgt aus:

    XML-Quellcode

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. xmlns:app="http://schemas.android.com/apk/res-auto"
    4. xmlns:tools="http://schemas.android.com/tools"
    5. android:layout_width="match_parent"
    6. android:layout_height="match_parent"
    7. tools:context="de.anluin.test.activities.MainActivity">
    8. <ImageView
    9. android:layout_width="match_parent"
    10. android:layout_height="wrap_content"
    11. android:layout_gravity="bottom"
    12. android:adjustViewBounds="true"
    13. android:scaleType="centerCrop"
    14. android:src="@drawable/login_background"
    15. app:layout_marginBottomPercent="10%" />
    16. <ImageView
    17. android:layout_width="match_parent"
    18. android:layout_height="wrap_content"
    19. android:adjustViewBounds="true"
    20. android:scaleType="centerCrop"
    21. android:src="@drawable/login_header" />
    22. <LinearLayout
    23. android:layout_width="0dp"
    24. android:layout_height="wrap_content"
    25. android:layout_gravity="center_horizontal"
    26. android:orientation="vertical"
    27. app:layout_marginTopPercent="55%"
    28. app:layout_widthPercent="65%">
    29. <de.anluin.test.widgets.EditText
    30. android:layout_width="match_parent"
    31. android:layout_height="wrap_content"
    32. android:layout_marginBottom="8dp"
    33. android:background="@drawable/edittext_background"
    34. android:gravity="center"
    35. android:hint=„Nutzername“
    36. android:inputType="textPersonName"
    37. android:maxLines="1"
    38. android:padding="8dp"
    39. app:font="@string/fontAlegreyaBold" />
    40. <de.anluin.test.widgets.EditText
    41. android:layout_width="match_parent"
    42. android:layout_height="wrap_content"
    43. android:layout_marginBottom="8dp"
    44. android:background="@drawable/edittext_background"
    45. android:gravity="center"
    46. android:hint="E-Mail Adresse"
    47. android:inputType="textEmailAddress"
    48. android:maxLines="1"
    49. android:padding="8dp"
    50. app:font="@string/fontAlegreyaBold" />
    51. <de.anluin.test.widgets.EditText
    52. android:layout_width="match_parent"
    53. android:layout_height="wrap_content"
    54. android:layout_marginBottom="8dp"
    55. android:background="@drawable/edittext_background"
    56. android:gravity="center"
    57. android:hint="Passwort"
    58. android:inputType="textPassword"
    59. android:maxLines="1"
    60. android:padding="8dp"
    61. app:font="@string/fontAlegreyaBold" />
    62. </LinearLayout>
    63. <de.anluin.test.widgets.Button
    64. android:layout_width="match_parent"
    65. android:layout_height="0dp"
    66. android:layout_gravity="bottom"
    67. android:background="@color/colorAccent"
    68. android:gravity="center"
    69. android:text="Weiter >>"
    70. android:textColor="@color/colorTextLight"
    71. android:textSize="30sp"
    72. app:font="@string/fontAlegreyaBold"
    73. app:layout_heightPercent="10%" />
    74. </android.support.percent.PercentFrameLayout>
    Alles anzeigen



    Ich gehe davon aus, dass man es wesentlich geschickter/besser anstellen kann und daher meine Frage:
    Wir würdet ihr es umsetzen?
  • Sieht schon so aus wie es soll, habe jedoch beim Header den Text, Hintergrund und Logo in ein Bild gesteckt...
    Den Text über den drei Feldern habe ich aber tatsächlich vergessen...

    Ich komme mit dem Designer überhaupt nicht klar, weswegen ich eig. nur in XML die Layouts erstelle.
    Ab und an versuche ich mich dran, gebe jedoch recht schnell auf, da ich den total unpraktisch finde und schneller mit XML zum Ziel komme.
  • Könntest Du mir evtl. zeigen, wie du es umgesetzt hättest?
    Würde auch gern vom verwende von Bildern zum positionieren anderer Elemente weg kommen, auch wenn es schnell zum erfolgt führt, ist es einfach falsch.
    Ich habe mir deswegen auch eine eigene Layout-ViewGroup programmiert, welche mir einige nette Features bietet - jedoch muss es doch auch mit den gegebenen Möglichkeiten von Android möglich sein, nich?
  • hallo verstehe nicht ganz was du willst. Es soll schon ein layout in XML sein oder willst du es programmatisch in Java machen.

    Würde header Hintergrund und den anderen Hintergrund auch über imageview anzeigen. Den Rest mit einem linearer relativ layout machen.
    Ein Feedback auf Tipps ist auch schön. :P
  • Mein Ziel ist es, dass Layout mit XML umzusetzen.
    Aktuell ist der Header einfach nur ein Bild, auf welches bereits Text & Logo drauf ist, würde jedoch gerne einzelne Views dafür verwenden wollen um später via XML auch mehrere Sprachen anbieten zu können (so müsste ich für jede Sprache ein eigenes Bild erstellen).
  • Hallo ich würde es etwa so machen.

    <?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:id="@+id/gesamt"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
    android:id="@+id/imageLogo"
    android:layout_width="match_parent"
    android:layout_height="160dp"


    android:adjustViewBounds="true"
    android:background="@color/gelb"

    android:scaleType="centerCrop"
    android:src="@drawable/ic_mood_grey600_18dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

    <ImageView
    android:id="@+id/Hintergrund"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    android:layout_alignBottom="@+id/button1"
    android:layout_below="@+id/imageLogo"
    android:adjustViewBounds="true"
    android:background="@color/lv_bg_footer"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_mood_grey600_18dp" />


    <LinearLayout
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="120dp"


    android:orientation="vertical"
    android:visibility="visible"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">


    <TextView
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:paddingBottom="8dp"
    android:paddingTop="10dp"
    android:text="TextView"
    android:textAppearance="@style/TextAppearance.AppCompat.Display2" />

    <TextView
    android:id="@+id/textView2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    android:text="Text Text Text Text" />

    <TextView
    android:id="@+id/textView3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/rumpf"

    android:gravity="center_horizontal"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:text="Text Text Text Text" />


    </LinearLayout>




    <ImageView
    android:id="@+id/logo"
    android:layout_width="wrap_content"
    android:layout_height="60dp"

    android:layout_below="@+id/header"
    android:layout_centerHorizontal="true"
    android:src="@drawable/ic_launcher"
    tools:layout_width="60dp" />

    <LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/logo"
    android:layout_alignBottom="@+id/button1">

    <TextView
    android:id="@+id/textView4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/rumpf"

    android:gravity="center_horizontal"
    android:paddingBottom="15dp"
    android:paddingTop="15dp"
    android:text="Text Text Text Text"
    android:textAppearance="@style/TextAppearance.AppCompat.Display2" />

    <EditText
    android:id="@+id/editText2"
    android:layout_width="327dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:ems="10"
    android:gravity="center_horizontal"
    android:inputType="textPersonName"
    android:paddingBottom="20dp"
    android:paddingTop="15dp"
    android:text="Name" />

    <EditText
    android:id="@+id/editText3"
    android:layout_width="330dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:ems="10"
    android:gravity="center_horizontal"
    android:inputType="textPersonName"
    android:paddingBottom="15dp"
    android:paddingTop="15dp"
    android:text="Name" />

    <EditText
    android:id="@+id/editText4"
    android:layout_width="330dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:ems="10"
    android:gravity="center_horizontal"
    android:inputType="textPersonName"
    android:paddingBottom="15dp"
    android:paddingTop="15dp"
    android:text="Name" />

    </LinearLayout>

    <Button
    android:id="@+id/button1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentStart="true"
    android:text="Button" />


    </RelativeLayout>
    Ein Feedback auf Tipps ist auch schön. :P