android - Android how to make buttons fit on various screen sizes

Question

I've an app that has a menu of about 10 buttons. On my test phone(HTC ONE X), all of the buttons are displayed correctly. On my other test phone(HTC Desire C) a couple of buttons are off the screen. The bottom 2 buttons and textviews are missing.

How can I make the whole layout fit various screen sizes? Do i have to get the screen size at run-time eg use getDisplayMetrics etc?

Thanks in advance, Matt.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/carefreebgscaledlighting"
    android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">


    <TextView
        android:id="@+id/textviewcompanyname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#003F87" />

    <TextView
        android:id="@+id/spacerasnexttextviewclasheswithbg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textAppearance="?android:attr/textAppearanceLarge"
         />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/stringloggedinscreen"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#003F87" />

<Button
    android:id="@+id/buttonsignin"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/stringbuttonsignin" />
<Button
    android:id="@+id/buttongetrota"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/stringbuttongetrota" />


<Button
    android:id="@+id/buttongetphonenumbers"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/stringbuttongetphonenumbers" />


    <Button
        android:id="@+id/viewtransactionsactual"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="View Transactions" />


    <Button
        android:id="@+id/buttondeletecarertable"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/stringbuttondeletetable" />

     <Button
        android:id="@+id/buttonloadtransactionsmap"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/stringloadtransactionmap" />


     <Button
         android:id="@+id/buttonloneworker"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:text="@string/buttonloneworker" /> 


      <Button
         android:id="@+id/buttonsendOutstandingTransactions"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:text="@string/stringSendOutstandingTransactions" /> 

      <Button
         android:id="@+id/buttoncreatemanuallogout"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:text="@string/stringbuttoncreatemanuallogout" />



     <RelativeLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" >

         <TextView
        android:id="@+id/textViewYouAreSignedIn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentTop="true"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#FFFFFF"
         />

          <TextView
        android:id="@+id/textViewUnsentTransactions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/textViewYouAreSignedIn"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#FFFFFF"
         />

         <TextView
        android:id="@+id/textViewVersionmenuscreen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/stringtextviewversion"

        android:layout_alignParentBottom="true"/>
     </RelativeLayout>

    </LinearLay

out>

score 2 · Accepted Answer

You either need to develop for the smallest screen size you'll use, or you need separate layouts, where the smaller layouts put less on a row and are wrapped in a ScrollView.

score 2 · Accepted Answer

Why don't you put the parent layout in a ScrollView, this way when the screen is too small the user will be able to scroll down to see hidden items. Your layout should look like this:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" 
xmlns:android="http://schemas.android.com/apk/res/android">
>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/carefreebgscaledlighting"
android:orientation="vertical">


<TextView
    android:id="@+id/textviewcompanyname"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#003F87" />

<TextView
    android:id="@+id/spacerasnexttextviewclasheswithbg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textAppearance="?android:attr/textAppearanceLarge"
     />

<TextView
    android:id="@+id/textview1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/stringloggedinscreen"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#003F87" />

    <Button
    android:id="@+id/buttonsignin"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/stringbuttonsignin" />
    <Button
    android:id="@+id/buttongetrota"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/stringbuttongetrota" />


   <Button
   android:id="@+id/buttongetphonenumbers"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:text="@string/stringbuttongetphonenumbers" />


   <Button
    android:id="@+id/viewtransactionsactual"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="View Transactions" />


  <Button
    android:id="@+id/buttondeletecarertable"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/stringbuttondeletetable" />

 <Button
    android:id="@+id/buttonloadtransactionsmap"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/stringloadtransactionmap" />


 <Button
     android:id="@+id/buttonloneworker"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_gravity="center"
     android:text="@string/buttonloneworker" /> 


  <Button
     android:id="@+id/buttonsendOutstandingTransactions"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_gravity="center"
     android:text="@string/stringSendOutstandingTransactions" /> 

  <Button
     android:id="@+id/buttoncreatemanuallogout"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_gravity="center"
     android:text="@string/stringbuttoncreatemanuallogout" />



  <RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent" >

     <TextView
    android:id="@+id/textViewYouAreSignedIn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_alignParentTop="true"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#FFFFFF"
     />

      <TextView
    android:id="@+id/textViewUnsentTransactions"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_below="@id/textViewYouAreSignedIn"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#FFFFFF"
     />

     <TextView
    android:id="@+id/textViewVersionmenuscreen"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/stringtextviewversion"

    android:layout_alignParentBottom="true"/>
   </RelativeLayout>

  </LinearLayout>
  </ScrollView>

android - Android how to make buttons fit on various screen sizes

2 回答 2

Related