Layout für alle Geräte?

Beko04 · 8. Juni 2018

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

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"&gt;


    &lt;Button
        android:id="@+id/button2"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/tasklist"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /&gt;


    &lt;Button
        android:id="@+id/button3"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/calendar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" /&gt;


    &lt;Button
        android:id="@+id/button4"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/shoppingcard"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button3" /&gt;


    &lt;Button
        android:id="@+id/button5"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/design"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button4" /&gt;


    &lt;Button
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginBottom="15dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/settings"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button5" /&gt;


&lt;/android.support.constraint.ConstraintLayout&gt;

Alles anzeigen

Freue mich auf eure Antworten!

LG Beko

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

Beko04 · 9. Juni 2018

Weiss niemand warum das so ist?

nono124 · 10. Juni 2018

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.

https://codelabs.developers.go…odelabs/constraint-layout

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

app-entwicklung.info/2016/12/hallo-constraintlayout/

Beko04 · 10. Juni 2018

Zitat von jogimuc

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.

https://codelabs.developers.go…odelabs/constraint-layout

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

app-entwicklung.info/2016/12/hallo-constraintlayout/

Alles anzeigen

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

Beko04 · 11. Juni 2018

Kennt hier niemand eine Lösung? Egal was ich mache, welches Tutorial ich befolge das Layout verschiebt sich immer komplett auf drei Geräten die ich teste...

nono124 · 11. Juni 2018

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.

nono124 · 11. Juni 2018

Ansonsten wenn dir das Costraint Layout nicht liegt.
Kannst du es auch mit dem Linear Layout oder dem Relativ Layout versuchen.

Welche Display Grössen und Auflösungen DPI von den Geräten sind das?
es wird immer ein paar unteschiede geben.

Beko04 · 11. Juni 2018

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

nono124 · 12. Juni 2018

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

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp"&gt;


    &lt;Button
        android:id="@+id/button1"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@+id/guideline1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"        /&gt;


    &lt;Button
        android:id="@+id/button2"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline1"  /&gt;


    &lt;Button
        android:id="@+id/button3"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" /&gt;


    &lt;Button
        android:id="@+id/button4"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline3" /&gt;


    &lt;Button
        android:id="@+id/button5"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline4" /&gt;




    &lt;android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" /&gt;


    &lt;android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.4" /&gt;


    &lt;android.support.constraint.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.6" /&gt;


    &lt;android.support.constraint.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8" /&gt;










&lt;/android.support.constraint.ConstraintLayout&gt;

Alles anzeigen

https://constraintlayout.com/layouts/percentlayout.html

Beko04 · 12. Juni 2018

Hallo jogimuc, vielen vielen Dank für deine Unterstützung. Ich werde das heute Abend ausprobieren und mich wieder melden. Die mdpi - hdpi - xhdpi usw. kommen die in den values Ordner rein bzw. wie muss ich die erstellen.

LG Beko

Layout für alle Geräte?

Jetzt mitmachen!

Teilen

Benutzer online in diesem Thema