Le bouton n'a pas la bonne largeur android

Question

J'ai un TableLayout avec des lignes contenant Button. Je veux que tous les boutons aient la même largeur mais ils agissent comme si leur largeur était match_parent quand ils sont rendus même si je leur ai donné une largeur spécifique. Ils ne sont pas gérés n'importe où dans Java, donc le problème devrait se situer dans le XML seulement.

Voici mon XML:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 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="com.mridulahuja.kudamm.activities.ComponentDetailsActivity"> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:src="@drawable/light_green_background" 
     android:scaleType="fitXY" 
     android:alpha="0.5" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" /> 

    <ScrollView 
     android:id="@+id/scrollView" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginTop="8dp" 
     android:background="@null" 
     android:scrollbars="vertical" 
     app:layout_constraintHorizontal_bias="1.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent"> 

     <TableLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:animateLayoutChanges="true"> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

       <com.mridulahuja.kudamm.tools.ExpandableTextView 
        android:id="@+id/txtComponentInfo" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:padding="5dp" 
        android:text="component info" 
        android:textColor="#000000" 
        android:textSize="20sp" /> 
      </TableRow> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

       <View 
        android:layout_height="10dp" 
        android:layout_width="match_parent" 
        /> 

      </TableRow> 


      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:gravity="center"> 

       <Button 
        android:id="@+id/btnDataAtAGlance" 
        android:layout_height="wrap_content" 
        android:layout_width="250dp" 
        android:gravity="center" 
        android:textSize="18sp" 
        android:textColor="#ffffff" 
        android:background="@drawable/green_button_style" 
        android:text="Data at a glance" 
        /> 

      </TableRow> 


      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

       <View 
        android:layout_height="10dp" 
        android:layout_width="match_parent" 
        /> 

      </TableRow> 


      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:gravity="center"> 

       <Button 
        android:id="@+id/btnDimensionsAtAGlance" 
        android:layout_height="wrap_content" 
        android:layout_width="250dp" 
        android:gravity="center" 
        android:layout_gravity="center" 
        android:padding="10sp" 
        android:textSize="18sp" 
        android:textColor="#ffffff" 
        android:background="@drawable/green_button_style" 
        android:text="Dimensions at a glance" 
        /> 

      </TableRow> 

      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

       <View 
        android:layout_height="10dp" 
        android:layout_width="match_parent" 
        /> 

      </TableRow> 


      <TableRow 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:gravity="center"> 

       <Button 
        android:id="@+id/btnDownloadPdfCatalogue" 
        android:layout_height="wrap_content" 
        android:layout_width="250dp" 
        android:gravity="center" 
        android:layout_gravity="center" 
        android:padding="10sp" 
        android:textSize="18sp" 
        android:textColor="#ffffff" 
        android:background="@drawable/green_button_style" 
        android:text="PDF Catalogue" 
        /> 

      </TableRow> 

     </TableLayout> 

    </ScrollView> 

</RelativeLayout> 

Ceci est le point de vue rendu sur Android Studio:

Et ceci est le point de vue rendu sur mobile: (voir le premier bouton => ce est en train de se passer tous les boutons lorsque je rends leur XML similaire)

Pourquoi cela se produit-il?

Answer 1

dp varie d'un périphérique à l'autre. Pour contourner le problème, définissez le width de tous les boutons sur match_parent et ajoutez marginLeft et marginRight sur chacun d'entre eux. Ou Utiliser plusieurs fichiers dimens.xml pour différentes densités, comme suggéré par Ibrahim dans le commentaire.

Answer 2

Enlever le android:layout_gravity="center" de chaque bouton, vous avez déjà spécifié android:gravity="center" pour le TableRow (qui fait la même chose). Vous dites que le bouton doit être centré à l'intérieur de son parent, et par android:gravity="center" vous dites que l'enfant de cet élément (qui est le bouton) doit être centré à l'intérieur. M. Android était confus, donc il a changé la largeur que vous avez défini à wrap_content et centré le bouton.

Note: Votre premier bouton ne précise pas layout_gravity et qui est la raison pour laquelle il est affiché comme prévu