FlexboxLayout avec des boutons avec des images de fond, comment maintenir leur taille

Question

ceci est mon fichier XML:

<?xml version="1.0" encoding="utf-8"?> 

<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:background="@drawable/main_bg" 
    android:orientation="vertical" 
    app:alignContent="stretch" 
    app:alignItems="stretch" 
    app:flexWrap="wrap" 
    android:id="@+id/activity_main" 
    > 


<com.google.android.flexbox.FlexboxLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:flexDirection="column" 

    > 

    <com.google.android.flexbox.FlexboxLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:flexDirection="row" 
     app:layout_flexBasisPercent="25%" 
     > 
    <com.google.android.flexbox.FlexboxLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:flexDirection="column" 
     app:layout_flexBasisPercent="50%" 

     > 

     <Button 
      android:id="@+id/istilldontknow" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:background="@android:color/holo_green_dark" 
      android:text="istilldontknow" 
      android:textColor="@android:color/white" 
      /> 

     <Button 
      android:id="@+id/istilldontknow" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:background="@android:color/holo_green_light" 
      android:text="@string/istilldontknow" 
      android:textColor="@android:color/white" 
      /> 
    </com.google.android.flexbox.FlexboxLayout> 



    <Button 
     android:id="@+id/istilldontknow" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/holo_orange_light" 
     android:text="@string/istilldontknow" 
     android:textColor="@android:color/white" 
     app:layout_flexBasisPercent="50%" 
     /> 

    </com.google.android.flexbox.FlexboxLayout> 



<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:weightSum="10" 
    android:orientation="vertical" 
    app:layout_flexGrow="1" 
    > 


    <Button 
     android:id="@+id/events" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/holo_blue_bright" 
     android:text="@string/Event" 
     android:textColor="@android:color/white" 
     android:layout_weight="4"/> 

    <Button 
     android:id="@+id/checkin" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/holo_purple" 
     android:text="@string/checkin" 
     android:textColor="@android:color/white" 
     android:layout_weight="4"/> 


    <Button 
     android:id="@+id/podcast" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:background="@android:color/holo_blue_dark" 
     android:text="Play some Music" 
     android:textColor="@android:color/white" 
     android:layout_weight="2" 

     /> 



</LinearLayout> 

</com.google.android.flexbox.FlexboxLayout> 

</com.google.android.flexbox.FlexboxLayout> 

Comme vous pouvez le voir, je suis une image de fond qui est tiré de l'Internet, rien à ce moment spécial

Bon, maintenant, je veux faire mon écran d'accueil ressembler à ceci avec les hauteurs et largeurs données je définis dans le schéma de couleurs dans le fichier XML ci-dessus: Main Activity

comme vous pouvez le voir dans le fichier PS, il est un TextLayer avec la conception de texte, et un calque qui contient l'arrière-plan du bouton avec un arrière-plan complexe (faites attention à "Jouer de la musique" avec le Wave-Form en arrière-plan plus les éléments individuels sur le bouton lui-même). Jusqu'ici tout va bien, j'ai tout d'abord essayé la méthode la plus simple, exporter l'image en -png, la mettre dans mes Drawables, puis mettre mon "android: background =" sur le bouton. C'est le résultat: Button with Background

Comme vous pouvez le voir ici, l'image ne correspond pas à la façon dont je le veux et aussi le texte obtient une mauvaise échelle. J'ai donc essayé de créer un fichier .9.png qui contient le texte et le calque d'arrière-plan mais la mise à l'échelle est horrible car je ne peux étirer mon image que dans certaines zones ne contenant pas de texte ou de motif.

Comment dois-je procéder?

Answer 1

Il suffit de remplacer android:layout_height="wrap_content" du bouton requis par android:layout_height="0dp" et il en résultera quelque chose comme ceci.

Image:

XML:

<?xml version="1.0" encoding="utf-8"?> 
<com.google.android.flexbox.FlexboxLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/activity_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
app:alignContent="stretch" 
app:alignItems="stretch" 
app:flexWrap="wrap"> 


<com.google.android.flexbox.FlexboxLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:flexDirection="column"> 

    <com.google.android.flexbox.FlexboxLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:alignItems="stretch" 
     app:flexDirection="row" 
     app:layout_flexBasisPercent="25%"> 

     <com.google.android.flexbox.FlexboxLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      app:flexDirection="column" 
      app:flexWrap="nowrap" 
      app:layout_flexBasisPercent="50%"> 

      <Button 
       android:id="@+id/istilldontknow" 
       android:layout_width="wrap_content" 
       android:layout_height="match_parent" 
       android:background="@android:color/holo_green_dark" 
       android:text="i still dont know" 
       android:textColor="@android:color/white" /> 

      <Button 
       android:id="@+id/istilldontknow1" 
       android:layout_width="wrap_content" 
       android:layout_height="match_parent" 
       android:background="@android:color/holo_green_light" 
       android:text="i still dont know" 
       android:textColor="@android:color/white" /> 
     </com.google.android.flexbox.FlexboxLayout> 


     <Button 
      android:id="@+id/istilldontknow11" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:background="@android:color/holo_orange_light" 
      android:text="i still dont know" 
      android:textColor="@android:color/white" 
      app:layout_flexBasisPercent="50%" /> 

    </com.google.android.flexbox.FlexboxLayout> 


    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:weightSum="10" 
     app:layout_flexGrow="1"> 


     <Button 
      android:id="@+id/events" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="4" 
      android:background="@drawable/nav_bg" 
      android:text="EVENT" 
      android:textColor="@android:color/white" /> 

     <Button 
      android:id="@+id/checkin" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="4" 
      android:background="@drawable/nav_bg" 
      android:text="CHECK IN" 
      android:textColor="@android:color/white" /> 


     <Button 
      android:id="@+id/podcast" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="2" 
      android:background="@drawable/nav_bg" 
      android:scaleType="centerCrop" 
      android:text="Play some Music" 
      android:textColor="@android:color/white" 

      /> 


    </LinearLayout> 

</com.google.android.flexbox.FlexboxLayout> 

</com.google.android.flexbox.FlexboxLayout>