web-dev-qa-db-fra.com

Comment ajuster la taille des boutons en fonction de la taille de l'écran dans Android Studio

Je suis nouveau dans le développement Android et je fabrique une calculatrice dans un studio Android. Ma calculatrice fonctionne bien, mais il y a un problème de disposition. Je l'ai installée sur ma tablette. Les boutons étaient très petits, comme je les ai conçus dans Android Studio sur un émulateur. augmente à mesure que la taille de l'écran change.

Ma conception de la calculatrice dans Android Studio 

Calculator design

<?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:background="#ff000000">
    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/clear"
        Android:layout_alignParentTop="true"
        Android:layout_alignParentLeft="true"
        Android:layout_alignParentStart="true"
        Android:layout_marginTop="110dp"
        Android:background="@drawable/clear_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/plus_minus"
        Android:layout_alignBottom="@+id/clear"
        Android:layout_toRightOf="@+id/clear"
        Android:layout_toEndOf="@+id/clear"
        Android:layout_marginLeft="-11dp"
        Android:background="@drawable/pm_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/per"
        Android:layout_alignBottom="@+id/plus_minus"
        Android:layout_toRightOf="@+id/plus_minus"
        Android:layout_toEndOf="@+id/plus_minus"
        Android:layout_marginLeft="-11dp"
        Android:background="@drawable/per_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/div"
        Android:layout_alignTop="@+id/per"
        Android:layout_toRightOf="@+id/per"
        Android:layout_toEndOf="@+id/per"
        Android:layout_marginLeft="-11dp"
        Android:background="@drawable/div_btn"
        Android:layout_alignParentRight="false" />

    <TextView
        Android:layout_width="fill_parent"
        Android:layout_height="70dp"
        Android:textAppearance="?android:attr/textAppearanceLarge"
        Android:id="@+id/disp"
        Android:layout_above="@+id/plus_minus"
        Android:layout_alignParentLeft="true"
        Android:layout_alignParentStart="true"
        Android:layout_alignParentRight="true"
        Android:layout_alignParentEnd="true"
        Android:textColor="@Android:color/white"
        Android:textSize="32sp"
        Android:inputType="none"
        Android:textStyle="normal"
        Android:gravity="right" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/seven"
        Android:layout_below="@+id/clear"
        Android:layout_toLeftOf="@+id/plus_minus"
        Android:layout_toStartOf="@+id/plus_minus"
        Android:layout_marginTop="-10dp"
        Android:layout_alignParentTop="false"
        Android:layout_alignParentLeft="true"
        Android:background="@drawable/seven_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/eight"
        Android:layout_alignTop="@+id/seven"
        Android:layout_alignLeft="@+id/plus_minus"
        Android:layout_alignStart="@+id/plus_minus"
        Android:background="@drawable/eight_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/nine"
        Android:layout_alignBottom="@+id/seven"
        Android:layout_alignLeft="@+id/per"
        Android:layout_alignStart="@+id/per"
        Android:background="@drawable/nine_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/mul"
        Android:layout_alignTop="@+id/nine"
        Android:layout_alignLeft="@+id/div"
        Android:layout_alignStart="@+id/div"
        Android:background="@drawable/mul_btn" />

    <Button
        Android:layout_width="103dp"
        Android:layout_height="90dp"
        Android:id="@+id/four"
        Android:layout_below="@+id/seven"
        Android:layout_alignRight="@+id/seven"
        Android:layout_alignEnd="@+id/seven"
        Android:layout_marginTop="-10dp"
        Android:layout_alignParentLeft="false"
        Android:background="@drawable/four_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/five"
        Android:layout_alignBottom="@+id/four"
        Android:layout_alignLeft="@+id/eight"
        Android:layout_alignStart="@+id/eight"
        Android:background="@drawable/five_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/six"
        Android:layout_alignTop="@+id/five"
        Android:layout_alignLeft="@+id/nine"
        Android:layout_alignStart="@+id/nine"
        Android:background="@drawable/six_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/sub"
        Android:layout_toEndOf="@+id/nine"
        Android:layout_alignTop="@+id/six"
        Android:layout_alignLeft="@+id/mul"
        Android:layout_alignStart="@+id/mul"
        Android:background="@drawable/min_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/one"
        Android:layout_below="@+id/four"
        Android:layout_alignLeft="@+id/four"
        Android:layout_alignStart="@+id/four"
        Android:layout_marginTop="-10dp"
        Android:layout_alignParentLeft="false"
        Android:background="@drawable/one_btn" />

    <Button
        Android:layout_width="203dp"
        Android:layout_height="90dp"
        Android:id="@+id/zero"
        Android:layout_below="@+id/one"
        Android:layout_alignLeft="@+id/one"
        Android:layout_alignStart="@+id/one"
        Android:layout_marginTop="-10dp"
        Android:background="@drawable/zero_btn"
        Android:layout_alignParentLeft="true"
        Android:layout_marginLeft="-7dp" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/two"
        Android:layout_above="@+id/zero"
        Android:layout_alignLeft="@+id/five"
        Android:layout_alignStart="@+id/five"
        Android:background="@drawable/two_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/three"
        Android:layout_below="@+id/five"
        Android:layout_alignLeft="@+id/six"
        Android:layout_alignStart="@+id/six"
        Android:layout_marginTop="-10dp"
        Android:background="@drawable/three_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/add"
        Android:layout_toEndOf="@+id/three"
        Android:layout_below="@+id/six"
        Android:layout_alignLeft="@+id/sub"
        Android:layout_alignStart="@+id/sub"
        Android:layout_marginTop="-10dp"
        Android:background="@drawable/plus_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/dot"
        Android:layout_below="@+id/two"
        Android:layout_alignRight="@+id/three"
        Android:layout_alignEnd="@+id/three"
        Android:layout_marginTop="-10dp"
        Android:background="@drawable/dot_btn" />

    <Button
        Android:layout_width="100dp"
        Android:layout_height="90dp"
        Android:id="@+id/equ"
        Android:layout_toEndOf="@+id/dot"
        Android:layout_below="@+id/three"
        Android:layout_alignLeft="@+id/add"
        Android:layout_alignStart="@+id/add"
        Android:layout_marginTop="-10dp"
        Android:background="@drawable/equ_btn" />

</RelativeLayout>
androidxmlandroid-layout
11
user889030

Vous devez utiliser layout_weight pour obtenir ce que vous voulez, et cela sera utilisé en encapsulant chaque rangée de boutons dans une LinearLayout et tout ce que LinearLayouts et TextView sera enveloppé dans une grande LinearLayout au lieu de votre RelativeLayout comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/main_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="#ff000000"
    Android:orientation="vertical"
    Android:weightSum="6" >

    <TextView
        Android:id="@+id/disp"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1"
        Android:gravity="center"
        Android:inputType="none"
        Android:textAppearance="?android:attr/textAppearanceLarge"
        Android:textColor="@Android:color/white"
        Android:textSize="32sp"
        Android:textStyle="normal" />

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1"
        Android:orientation="horizontal"
        Android:weightSum="4" >

        <Button
            Android:id="@+id/clear"
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="4"
            Android:background="@drawable/clear_btn" />

        <!-- then the three remaining buttons -->

        <LinearLayout />

        <!-- then the four remaining rows -->


        <!-- in the last row the "0" button will have layout_weight="2" NOT "1" -->
    </LinearLayout>

</LinearLayout>

METTRE À JOUR:

utilisez ImageButtons au lieu de Buttons pour une meilleure évolutivité, et voici comment vous devez l'utiliser:

    <ImageButton
            Android:id="@+id/clear"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="4"
            Android:background="@Android:color/transparent"
            Android:src="@drawable/clear_btn"
            Android:scaleType="fitCenter" />

    <!-- and so for all Buttons -->

Notez ici nous avons changé:

1- layout_height: de wrap_content à match_parent.

2- background: supprimer le drawable (clear_btn) et le rendre transparent.

et nous avons ajouté:

1- src: en lui assignant le dessinable (clear_btn).

2- scaleType: le rendre fitCenter pour le faire évoluer dans toute la surface disponible sans endommager le taux d’extensibilité de l’image.

P.S : si vous voulez que le bouton prenne toute la zone, qu’il soit évolutif ou non, changez scaleType de fitCenter à fitXY (vous en aurez peut-être besoin pour le bouton " 0 ").

10
Muhammed Refaat

Lors de la définition de la hauteur/largeur d'un bouton dans Android, l'utilisation de valeurs de pixels à densité fixe donnera une taille exacte sur tous les écrans. En utilisant des valeurs de largeur telles que wrap_content, fill_parent, poids, etc., le bouton ressemblera à la densité de l'écran.

Essayez de suivre ce lien une fois: - Meilleures pratiques pour l’interface utilisateur

1
Atish Agrawal

Si vous souhaitez prendre en charge plusieurs écrans, ne faites jamais glisser et redimensionnez les vues manuellement.

Vous pouvez vérifier à la fois les attributs Android:layout_weight et LinearLayout

1
Ahmed Hegazy

Solution 1: veuillez utiliser dimens.xml pour spécifier avec et la hauteur des boutons.

pour tablette, veuillez créer le dossier values-sw600dp, values-sw720dp et y placer votre fichier dimens.xml.

Solution 2:

Use linearlayout and layout_weight property.
1
kanivel

<Android.support.v7.widget.RecyclerView  
Android:id="@+id/sampleRecyclerView"  
Android:scrollbars="vertical"  
Android:layout_width="fill_parent"  
Android:layout_height="fill_parent">

<Button Android:id="@+id/sampleButton"
 Android:width="0dp"
 Android:height="50dp">
</Button>
</Android.support.v7.widget.RecyclerView>

Je pense que le point ici est <Button> </Button> dans une mise en page linéaire.

Android:width="0dp" // This line changes width as of linear layout.
Android:height="50dp">
0
A.G