Layout für alle Geräte?

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

  • Layout für alle Geräte?

    Guten Abend zusammen,

    Ich bastle mir eine ToDo App zusammen und habe Probleme mit dem Layout.

    Immer wenn ich in Android Studio etwas Designe wie auf dem Bild zu sehen ist: Android Studio Screenshot

    kommt das ganze auf dem Handy ganz anders raus. Hier ein Screenshot von einem Wiko Highway Pure 4G

    Was mache ich den genau falsch? Warum wird das nicht automatisch angepasst nach Grösse des Geräts?

    Anbei noch der XML Code.


    XML-Quellcode

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <android.support.constraint.ConstraintLayout 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=".MainActivity">
    8. <Button
    9. android:id="@+id/button2"
    10. android:layout_width="110dp"
    11. android:layout_height="110dp"
    12. android:layout_marginStart="15dp"
    13. android:layout_marginTop="15dp"
    14. android:background="@drawable/tasklist"
    15. app:layout_constraintStart_toStartOf="parent"
    16. app:layout_constraintTop_toTopOf="parent" />
    17. <Button
    18. android:id="@+id/button3"
    19. android:layout_width="110dp"
    20. android:layout_height="110dp"
    21. android:layout_marginStart="15dp"
    22. android:layout_marginTop="20dp"
    23. android:background="@drawable/calendar"
    24. app:layout_constraintStart_toStartOf="parent"
    25. app:layout_constraintTop_toBottomOf="@+id/button2" />
    26. <Button
    27. android:id="@+id/button4"
    28. android:layout_width="110dp"
    29. android:layout_height="110dp"
    30. android:layout_marginStart="15dp"
    31. android:layout_marginTop="20dp"
    32. android:background="@drawable/shoppingcard"
    33. app:layout_constraintStart_toStartOf="parent"
    34. app:layout_constraintTop_toBottomOf="@+id/button3" />
    35. <Button
    36. android:id="@+id/button5"
    37. android:layout_width="110dp"
    38. android:layout_height="110dp"
    39. android:layout_marginStart="15dp"
    40. android:layout_marginTop="20dp"
    41. android:background="@drawable/design"
    42. app:layout_constraintStart_toStartOf="parent"
    43. app:layout_constraintTop_toBottomOf="@+id/button4" />
    44. <Button
    45. android:layout_width="110dp"
    46. android:layout_height="110dp"
    47. android:layout_marginBottom="15dp"
    48. android:layout_marginStart="15dp"
    49. android:layout_marginTop="20dp"
    50. android:background="@drawable/settings"
    51. app:layout_constraintBottom_toBottomOf="parent"
    52. app:layout_constraintStart_toStartOf="parent"
    53. app:layout_constraintTop_toBottomOf="@+id/button5" />
    54. </android.support.constraint.ConstraintLayout>
    Alles anzeigen


    Freue mich auf eure Antworten!

    LG Beko :saint:

    Edit: Alle Bilder im Anhang
    Edit2: Auf meinem Huawei MediaPad M5 (8.40") sieht es auch komplett anders aus
    Bilder
    • AStudio.PNG

      27,62 kB, 799×740, 39 mal angesehen
    • ScreenshotHuawei.jpg

      173,6 kB, 1.600×2.560, 39 mal angesehen
    • ScreenShotWiko.png

      54,98 kB, 720×1.280, 32 mal angesehen

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Beko04 ()

  • Hallo du benutzt das Constrain layout da musst du auch immer mindestens zweiAngespuckte setzen.
    Dann hast du alle Elemente von oben zu einander ausgerichtet das letzte nachunten . bei verschiedenen Display Größen sind die Abstände dann anders. Richtedas erste nach oben unten links aus , alle anderen links und zum vorhergehenden.

    codelabs.developers.google.com/codelabs/constraint-layout

    google.de/url?sa=t&rct=j&q=&es…Vaw1UI9jZX3jpLTugREHUP2Rm

    app-entwicklung.info/2016/12/hallo-constraintlayout/
    Ein Feedback auf Tipps ist auch schön. :P
  • jogimuc schrieb:

    Hallo du benutzt das Constrain layout da musst du auch immer mindestens zweiAngespuckte setzen.
    Dann hast du alle Elemente von oben zu einander ausgerichtet das letzte nachunten . bei verschiedenen Display Größen sind die Abstände dann anders. Richtedas erste nach oben unten links aus , alle anderen links und zum vorhergehenden.

    codelabs.developers.google.com/codelabs/constraint-layout

    google.de/url?sa=t&rct=j&q=&es…Vaw1UI9jZX3jpLTugREHUP2Rm

    app-entwicklung.info/2016/12/hallo-constraintlayout/
    Hallo, ich habe es genau so gemacht wie du es mir gesagt hast, ist immer noch ein wirr warr.

    Gibt es da keine einfache möglichkeit das alles automatisch an der Displaygrösse angepasst wird?

    LG Beko
  • Bin im momet nicht an einen Rechner mit Android Studio.


    Da mir das nur mit XML zu umständlich ist, und dir auch nichts falsches geben möchte kann ich dir jetzt keine Antwort geben.


    nur soviel wie so machst du immer app:layout_constraintStart_toStartOf="parent" bei jeden Button?


    Du Musst die Button von einander abhängig machen nicht immer wieder von oben.


    Ich sagte das erste Element soll oben und Links fest gemacht werden.
    Die weiteren Links und Oben vom Vorhergehenden Element.


    Wie gesagt kenne ich die Statements jetzt nicht auswendig.
    Ein Feedback auf Tipps ist auch schön. :P
  • Hallo,

    Das Wiko ist 4" das Huawei Tablet 8.4".

    Aber ich habe nun schonmal eine provisorische Lösung gefunden. Ich habe weitere activity_main Layouts erstellt in (small, medium, large, xlarge), dort kann ich den Code einfach copy pasten, auf den Geräten testen und je nach dem z.B für das Tablet nur noch die activity_main (large) bearbeiten. Die grösse vom Gerät wird automatisch übernommen, auch da gibt es aber ab und zu fehler.

    Ich werde mich noch weiter erkundingen heute Abend dann meld ich mich nochml.

    lg beko
  • Hallo
    Erstens hat mich nicht nur die Größe des Displays interessiert, sondern auch die Auflösung in Pixel oder DPI. Denn die Dpi ist maßgebend.
    Die gleichen abstände habe ich durch 4 Hilfslinien mit 20%, 40%, 60%, und 80% realisiert, und die Button daran ausgerichtet.
    Für die Grösse der Butten hast du feste werte vergeben finde ich nicht so sinnvoll. Bei kleinen Display werden sie zu groß und bei großen Displays zu klein. Dargestellt. Sinnvoller ist da auf wrab_content zu gehen und die Icon in den verschiedenen Auflösungen in den Ordnern mipmap-hdpi, -mdpi, -hdpi, -xhdpi, -xxhdpi, xxxhdpi abzulegen. Adroid wählt dann selber das richtige Icon aus.


    XML-Quellcode

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <android.support.constraint.ConstraintLayout 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=".MainActivity"
    8. tools:layout_editor_absoluteY="25dp">
    9. <Button
    10. android:id="@+id/button1"
    11. android:layout_width="110dp"
    12. android:layout_height="110dp"
    13. android:layout_marginBottom="8dp"
    14. android:layout_marginLeft="16dp"
    15. android:layout_marginStart="16dp"
    16. android:layout_marginTop="8dp"
    17. android:background="@mipmap/ic_launcher"
    18. app:layout_constraintBottom_toTopOf="@+id/guideline1"
    19. app:layout_constraintStart_toStartOf="parent"
    20. app:layout_constraintTop_toTopOf="parent" />
    21. <Button
    22. android:id="@+id/button2"
    23. android:layout_width="110dp"
    24. android:layout_height="110dp"
    25. android:layout_marginBottom="8dp"
    26. android:layout_marginLeft="16dp"
    27. android:layout_marginStart="16dp"
    28. android:layout_marginTop="8dp"
    29. android:background="@mipmap/ic_launcher"
    30. app:layout_constraintBottom_toTopOf="@+id/guideline2"
    31. app:layout_constraintStart_toStartOf="parent"
    32. app:layout_constraintTop_toTopOf="@+id/guideline1" />
    33. <Button
    34. android:id="@+id/button3"
    35. android:layout_width="110dp"
    36. android:layout_height="110dp"
    37. android:layout_marginBottom="8dp"
    38. android:layout_marginLeft="16dp"
    39. android:layout_marginStart="16dp"
    40. android:layout_marginTop="8dp"
    41. android:background="@mipmap/ic_launcher"
    42. app:layout_constraintBottom_toTopOf="@+id/guideline3"
    43. app:layout_constraintStart_toStartOf="parent"
    44. app:layout_constraintTop_toTopOf="@+id/guideline2" />
    45. <Button
    46. android:id="@+id/button4"
    47. android:layout_width="110dp"
    48. android:layout_height="110dp"
    49. android:layout_marginBottom="8dp"
    50. android:layout_marginLeft="16dp"
    51. android:layout_marginStart="16dp"
    52. android:layout_marginTop="8dp"
    53. android:background="@mipmap/ic_launcher"
    54. app:layout_constraintBottom_toTopOf="@+id/guideline4"
    55. app:layout_constraintStart_toStartOf="parent"
    56. app:layout_constraintTop_toTopOf="@+id/guideline3" />
    57. <Button
    58. android:id="@+id/button5"
    59. android:layout_width="110dp"
    60. android:layout_height="110dp"
    61. android:layout_marginBottom="8dp"
    62. android:layout_marginLeft="16dp"
    63. android:layout_marginStart="16dp"
    64. android:layout_marginTop="8dp"
    65. android:background="@mipmap/ic_launcher"
    66. app:layout_constraintBottom_toBottomOf="parent"
    67. app:layout_constraintStart_toStartOf="parent"
    68. app:layout_constraintTop_toTopOf="@+id/guideline4" />
    69. <android.support.constraint.Guideline
    70. android:id="@+id/guideline1"
    71. android:layout_width="wrap_content"
    72. android:layout_height="wrap_content"
    73. android:orientation="horizontal"
    74. app:layout_constraintGuide_percent="0.2" />
    75. <android.support.constraint.Guideline
    76. android:id="@+id/guideline2"
    77. android:layout_width="wrap_content"
    78. android:layout_height="wrap_content"
    79. android:orientation="horizontal"
    80. app:layout_constraintGuide_percent="0.4" />
    81. <android.support.constraint.Guideline
    82. android:id="@+id/guideline3"
    83. android:layout_width="wrap_content"
    84. android:layout_height="wrap_content"
    85. android:orientation="horizontal"
    86. app:layout_constraintGuide_percent="0.6" />
    87. <android.support.constraint.Guideline
    88. android:id="@+id/guideline4"
    89. android:layout_width="wrap_content"
    90. android:layout_height="wrap_content"
    91. android:orientation="horizontal"
    92. app:layout_constraintGuide_percent="0.8" />
    93. </android.support.constraint.ConstraintLayout>
    Alles anzeigen
    constraintlayout.com/layouts/percentlayout.html
    Ein Feedback auf Tipps ist auch schön. :P

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von jogimuc ()