Les lignes TableLayout ne rétrécissent pas de manière égale mais seulement la dernière rangée le fait sur différentes tailles d'écran.

Question

J'ai créé une table dans laquelle je veux afficher 9 animaux et un bouton fléché suivant. Chaque rangée a 3 animaux, donc 3 rangées pour les animaux et une dernière rangée pour le prochain bouton fléché. Mon problème est que sur des tailles d'écran différentes, les lignes ne rétrécissent pas de manière égale, mais seulement la dernière rangée en résulte, le bouton fléché suivant disparaît.

C'est à quoi il ressemble sur un Nexus 4

Et ce à quoi il ressemble un écran plus petit qui a une taille de 3,2"

Et voici ma Code XML

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/activity_animals" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
android:background="@color/background" 
tools:context="kidsbook.jok.kidsbook.Animals"> 

<TableLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_above="@+id/ads_text" 
    android:weightSum=".9" 
    android:id="@+id/animalsPage1" 
    android:visibility="visible"> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:weightSum=".9"> 

     <Button 
      android:background="@drawable/cat" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/catSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/dog" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/dogSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/chicken" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/chickenSounds" 
      android:layout_weight=".3"/> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:weightSum=".9"> 

     <Button 
      android:background="@drawable/horse" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/horseSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/frog" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/frogSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/pig" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/pigSounds" 
      android:layout_weight=".3"/> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:weightSum=".9"> 

     <Button 
      android:background="@drawable/cock" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/cockSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/donkey" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/donkeySounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/sheep" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/sheepSounds" 
      android:layout_weight=".3"/> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:gravity="end" 
     android:weightSum="1"> 

     <Button 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight=".22" 
      android:id="@+id/nextButtonAnimalsTo2" 
      android:background="@drawable/next_arrow" 
      android:onClick="toPage2from1"/> 
    </TableRow> 

</TableLayout> 

<TextView 
    android:text="@string/ads" 
    android:layout_gravity="center" 
    android:layout_width="match_parent" 
    android:minHeight="50dp" 
    android:layout_height="wrap_content" 
    android:gravity="center" 
    android:textSize="20sp" 
    android:id="@+id/ads_text" 
    android:layout_alignParentBottom="true"/> 

</RelativeLayout> 

Toutes les suggestions et l'aide seraient très appréciées et je vous remercie tous à l'avance.

Answer 1

@Smolikas, je pense que vos vues se chevauchent dans un petit écran parce que vous utilisez RelativeLayout. Vous pouvez utiliser LinearLayout avec l'orientation verticale à l'intérieur de scrollview. Cela fonctionnera pour vous.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/scrollView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fillViewport="true"> 

    <LinearLayout 
     android:id="@+id/activity_animals" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:paddingBottom="@dimen/activity_vertical_margin" 
     android:paddingLeft="@dimen/activity_horizontal_margin" 
     android:paddingRight="@dimen/activity_horizontal_margin" 
     android:paddingTop="@dimen/activity_vertical_margin"> 

Votre TableLayout & Textview.

</LinearLayout> 
</ScrollView> 

Answer 2

Essayez cette mise en page: utiliser un Linearlayout au lieu de Relativelayout et de gérer le poids de mise en page et weightsum correctement pour diviser l'écran.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_animals" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/color_white" 
    android:orientation="vertical" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:weightSum="5"> 

    <TableLayout 
     android:id="@+id/animalsPage1" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_above="@+id/ads_text" 
     android:layout_weight="4" 
     android:visibility="visible" 
     android:weightSum="4"> 

     <TableRow 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:weightSum="3"> 

      <Button 
       android:id="@+id/catSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/dogSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/chickenSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 
     </TableRow> 

     <TableRow 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:weightSum="3"> 

      <Button 
       android:id="@+id/horseSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/frogSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/pigSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 
     </TableRow> 

     <TableRow 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:weightSum="3"> 

      <Button 
       android:id="@+id/cockSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/donkeySounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/sheepSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 
     </TableRow> 

     <TableRow 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:gravity="end" 
      android:weightSum="3"> 

      <Button 
       android:id="@+id/nextButtonAnimalsTo2" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" 
       android:onClick="toPage2from1" /> 
     </TableRow> 

    </TableLayout> 

    <TextView 
     android:id="@+id/ads_text" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_alignParentBottom="true" 
     android:layout_gravity="center" 
     android:layout_weight="1" 
     android:gravity="center" 
     android:text="Your TEXT" 
     android:textColor="#000000" 
     android:textSize="20sp" /> 

</LinearLayout> 

sortie: