Android responsive layout

Question

I am building application (calculator). I use table layout with buttons inside. It looks perfect on screen of Samsung Galaxy II, however it looks very bad on bigger screens. The buttons hight is very small. How I can stretch the buttons on bigger screens?

The layout XML is bellow:

<ScrollView xmlns:android="http://schemas.an
    xmlns:tools="http://schemas.android.com/
    android:layout_width="match_parent"     
    android:layout_height="match_parent"    
    android:gravity="right"                 
    android:paddingBottom="@dimen/activity_v
    android:paddingLeft="@dimen/activity_hor
    android:paddingRight="@dimen/activity_ho
    android:paddingTop="@dimen/activity_vert
    tools:context=".MainActivity" >         


<TableLayout                                
    android:layout_width="match_parent"     
    android:layout_height="match_parent"    
    android:gravity="right"                 
    >                                       



    <TableRow                               
        android:id="@+id/tableRow1"         
        android:layout_width="match_parent" 
        android:layout_height="0dp">        

        <Button                             
            android:id="@+id/Button01"      
            android:layout_width="0dp"      
            android:layout_weight="0.33"    
            android:layout_height="fill_pare
            android:text="@string/button_1" 
            android:visibility="visible" /> 

        <Button                             
            android:id="@+id/Button02"      
            android:layout_width="0dp"      
            android:layout_weight="0.34"    
            android:layout_height="fill_pare
            android:text="@string/button_2" 

        <Button                             
            android:id="@+id/Button03"      
            android:layout_width="0dp"      
            android:layout_weight="0.33"    
            android:layout_height="fill_pare
            android:text="@string/button_3" 

    </TableRow>                             

    <TableRow                               
        android:id="@+id/tableRow2"         
        android:layout_width="match_parent" 
        android:layout_height="0dp" >       

    <Button                                 
        android:id="@+id/Button04"          
        android:layout_width="0dp"          
            android:layout_weight="0.33"    
        android:layout_height="fill_parent" 
        android:text="@string/button_4" />  

    <Button                                 
        android:id="@+id/Button05"          
        android:layout_width="0dp"          
        android:layout_weight="0.34"        
        android:layout_height="fill_parent" 
        android:text="@string/button_5" />  

    <Button                                 
        android:id="@+id/Button06"          
        android:layout_width="0dp"          
        android:layout_weight="0.33"        
        android:layout_height="fill_parent" 
        android:text="@string/button_6" />  

     </TableRow>                            

    <TableRow                               
        android:id="@+id/tableRow3"         
        android:layout_width="match_parent" 
        android:layout_height="0dp" >       

        <Button                             
            android:id="@+id/Button07"      
            android:layout_width="0dp"      
            android:layout_weight="0.33"    
            android:layout_height="fill_pare
            android:text="@string/button_7" 

        <Button                             
            android:id="@+id/Button08"      
            android:layout_width="0dp"      
            android:layout_weight="0.34"    
            android:layout_height="fill_pare
            android:text="@string/button_8" 

        <Button                             
            android:id="@+id/Button09"      
            android:layout_width="0dp"      
            android:layout_weight="0.33"    
            android:layout_height="fill_pare
            android:text="@string/button_9" 

    </TableRow>                             

    <TableRow                               
        android:id="@+id/tableRow4"         
        android:layout_width="match_parent" 
        android:layout_height="0dp" >       

        <Button                             
            android:id="@+id/ButtonUndo"    
            android:layout_width="0dp"      
            android:layout_weight="0.33"    
            android:layout_height="fill_pare
            android:text="@string/button_und

        <Button                             
            android:id="@+id/Button00"      
            android:layout_width="0dp"      
            android:layout_weight="0.34"    
            android:layout_height="fill_pare
            android:text="@string/button_0" 

        <Button                             
            android:id="@+id/ButtonCheck"   
            android:layout_width="0dp"      
            android:layout_weight="0.33"    
            android:layout_height="fill_pare
            android:text="@string/button_che

    </TableRow>                             

    <TableRow                               
        android:id="@+id/ResTable"          
        android:layout_width="match_parent" 
        android:layout_height="0dp" >       

        <TableLayout                        
            android:layout_weight="0.3"     
            android:id="@+id/table_score_cor

            <TableRow                           
                android:id="@+id/tableRow5_11"  
                android:layout_width="wrap_conte
                android:layout_height="fill_pare
                android:gravity="center_vertical
                    <TextView                     
                    android:id="@+id/labelCorrec
                    android:layout_width="wrap_c
                    android:layout_height="fill_
                    android:ems="4"             
                    android:text="@string/correc
                    android:gravity="center_vertic
                    android:textSize="15sp" />    
                </TableRow>                   

            <TableRow                           
                android:id="@+id/tableRow5_12"  
                android:layout_width="wrap_conte
                android:layout_height="0dp" >   

                <TextView                     
                    android:id="@+id/scoreCorr
                    android:layout_width="0dp"
                    android:layout_height="fil
                    android:ems="4"           
                    android:gravity="center_ve
                    android:text=""           
                    android:textSize="30sp"   
                    android:textStyle="bold" /
            </TableRow>                     
        </TableLayout>                      

        <ImageView                            
            android:id="@+id/imageView1"      
            android:layout_width="wrap_content
            android:layout_height="fill_parent
            android:layout_weight="0.3"       
            android:contentDescription="@strin
            android:fitsSystemWindows="true"  
            android:scaleType="fitCenter"     
            android:src="@drawable/trees" />  

        <TableLayout                        
            android:id="@+id/table_score_inc
            android:layout_weight="0.3">      

            <TableRow                       
                android:id="@+id/tableRow5_21"  
                android:layout_width="wrap_conte
                android:layout_height="fill_pare
                android:gravity="center_vertical
                <TextView                     
                    android:id="@+id/labelIncorrec
                    android:layout_width="wrap_con
                    android:layout_height="fill_pa
                    android:ems="4"             
                    android:text="@string/incorrec
                    android:gravity="center_vertic
                    android:textSize="15sp" />    
            </TableRow>                       
            <TableRow                           
                android:id="@+id/tableRow5_22"  
                android:layout_width="wrap_conte
                android:layout_height="fill_pare

                <TextView                     
                    android:id="@+id/scoreInco
                    android:layout_width="0dp"
                    android:layout_height="fil
                    android:ems="4"           
                    android:gravity="center_ve
                    android:text=""           
                    android:textSize="30sp"   
                    android:textStyle="bold" /
            </TableRow>                       
        </TableLayout>                        

        </TableRow>                           

        <TableRow                             
            android:id="@+id/tableRow_menu"   
            android:layout_width="wrap_content
            android:layout_height="fill_parent
            <Button                             
                android:id="@+id/ButtonPlus"    
                android:layout_width="0dp"    
                android:layout_height="38dp"
                android:layout_weight="0.25"  
                android:text="@string/action_p
            <Button                             
                android:id="@+id/ButtonMinus"   
                android:layout_width="0dp"    
                android:layout_height="38dp"
                android:layout_weight="0.25"  
                android:text="@string/action_m
            <Button                             
                android:id="@+id/ButtonMult"    
                android:layout_width="0dp"    
                android:layout_height="38dp"
                android:layout_weight="0.25"  
                android:text="@string/action_m
                        <Button                     
                android:id="@+id/ButtonDivide"  
                android:layout_width="0dp"    
                android:layout_height="38dp"
                android:layout_weight="0.25"  
                android:text="@string/action_d
            </TableRow>                         

            </TableLayout>                      

</ScrollView>                               

Answer 1

Over and all, you need to create different layouts/drawables for supporting all the screens. It depends on your requirement, say for example, if you would want to include 2 buttons in small screen and 4 buttons on large screens then obvious you have to create different layouts.

If you would want to display same number of buttons in all screens then I would suggest you to prepare different set of images/drawables and include them in your project. Here you don't need to do anything other than placing images in particular drawable folders.

One more thing, If its a plain background then you can create 9-patch image so that it can stretch with whatever size you want or your device supports.

More study:

1. http://developer.android.com/guide/practices/screens_support.html
2. Supporting Different Screen Sizes
3. Supporting Different Densities
4. Implementing Adaptative UI Flows

Answer 2

I recommend you to read this documentation http://developer.android.com/guide/practices/screens_support.html.

or this article "Designing for Multiple Screens" http://developer.android.com/training/multiscreen/index.html