Ausstattung - eine Taste oben auf zwei Tasten

Question

Ich bin unerfahren mit Android und arbeitet an einem Layout, das einen unteren Bereich mit 3 Tasten haben soll angezeigt auf diese Weise:

ich es geschafft, fast bekommen es so, außer dass je nach Bildschirm die unteren Tasten sich gegenseitig überlappen oder zu weit weg sind. Die Knöpfe sollen perfekt unter dem "APPLY" Knopf ausgerichtet sein, aber ich kann nicht scheinen, es richtig zu machen.

Hier ist mein aktueller Code:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:paddingBottom="20dp"> 

    <RelativeLayout 
     android:id="@+id/relapply" 
     android:layout_width="match_parent" 
     android:layout_height="50dp" 
     android:gravity="center_horizontal" 
     android:orientation="horizontal"> 

     <Button 
      android:id="@+id/apply" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/ripple_buttons_carousel" 
      android:text="@string/apply_button" 
      android:textSize="15sp" 
      android:textColor="@android:color/white" 
      android:width="320dp" 
      android:layout_alignParentTop="true" 
      android:layout_centerHorizontal="true" /> 
    </RelativeLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:gravity="bottom" 
     android:layout_below="@id/relapply"> 

     <Button 
      android:id="@+id/discard" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/ripple_buttons_carousel" 
      android:text="@string/discard_button" 
      android:textSize="15sp" 
      android:textColor="@android:color/white" 
      android:layout_marginStart="30dp" 
      android:width="154dp" 
      android:layout_alignParentStart="true"/> 

     <RelativeLayout 
      android:layout_width="12dp" 
      android:layout_height="30dp" 
      android:layout_toLeftOf="@id/save"> 
     </RelativeLayout> 

     <Button 
      android:id="@+id/save" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/ripple_buttons_carousel" 
      android:text="@string/save_button" 
      android:textSize="15sp" 
      android:textColor="@android:color/white" 
      android:layout_marginEnd="30dp" 
      android:width="154dp" 
      android:layout_alignParentEnd="true" /> 
    </RelativeLayout> 

</RelativeLayout> 

Dies ist mein Code für das Layout, in dem die Tasten in und dann alles in einer linearen Layout XML-Testdatei ich gemacht.. Irgendwelche Tipps, wie man das verbessert?

Danke!

Answer 1

Zunächst einmal haben Sie viel zu viel relativen Layouts, viel mehr als Sie brauchen. Sie dieses Layout hier versuchen kann (entfernte ich den Hintergrund und fest einprogrammiert den Text zu Demonstrationszwecken)

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_margin="8dp"> 

    <Button 
     android:id="@+id/apply" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_centerHorizontal="true" 
     android:text="Top Button" 
     android:textColor="@android:color/white" 
     android:textSize="15sp" /> 


    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/apply" 
     android:orientation="horizontal"> 

     <Button 
      android:id="@+id/discard" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:text="Bottom Left Button" 
      android:textColor="@android:color/white" 
      android:textSize="15sp" /> 

     <Button 
      android:id="@+id/save" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:text="Bottom Right Button" 
      android:textColor="@android:color/white" 
      android:textSize="15sp" /> 

    </LinearLayout> 
</RelativeLayout> 

Sie die Layout-Ränder auf dem äußeren relative Layout festlegen (zB android:layout_margin="8dp"

das Layout wie das funktioniert : in der oberen Reihe gibt es nur den obersten Knopf Darunter gibt es ein horizontales lineares Layout zwei Tasten mit

android:layout_width="0dp" 
android:layout_weight="1" 

Dies stellt sicher, beid Tasten enthält, überspannen. ebenso horizontal (weil sie die gleiche Breite haben). Wenn Sie das gesamte Layout wollen, müssen nur eine bestimmte Breite der android:layout_width="match_parent" aus der relativen Layout auf android:layout_width="320dp"

Answer 2

Sie wie folgt tun:

<LinearLayout 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:padding="16dp" 
    android:background="@color/background_floating_material_dark"> 

    <Button 
     android:id="@+id/apply" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@drawable/ripple_buttons_carousel" 
     android:text="@string/apply_button" 
     android:textSize="15sp" 
     android:textColor="@android:color/white" 
     android:layout_marginBottom="10dp" /> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:weightSum="2"> 

     <Button 
      android:id="@+id/discard" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:background="@drawable/ripple_buttons_carousel" 
      android:text="@string/discard_button" 
      android:textSize="15sp" 
      android:textColor="@android:color/white" 
      android:layout_weight="0.9" /> 

     <LinearLayout 
      android:orientation="horizontal" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="0.2"></LinearLayout> 

     <Button 
      android:id="@+id/save" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:background="@drawable/ripple_buttons_carousel" 
      android:text="@string/save_button" 
      android:textSize="15sp" 
      android:textColor="@android:color/white" 
      android:layout_weight="0.9" /> 

    </LinearLayout> 
</LinearLayout> 

Und der Ausgang ist in der Nähe dazu:

Answer 3

Sie können auch den folgenden Code verwenden ..... Dies ist einfach und einfach.

<LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:padding="5dp"> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="Apply" /> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="5dp" 
      android:orientation="horizontal" 
      android:weightSum="2"> 

      <Button 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_marginRight="5dp" 
        android:layout_weight="1" 
        android:text="Discard" /> 

      <Button 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="5dp" 
        android:layout_weight="1" 
        android:text="Save" /> 

     </LinearLayout> 

    </LinearLayout>