Question

I am a newbie and I have been working on an android layout for a few hours with no luck. I am trying to create a layout similar to this: http://i43.tinypic.com/254wkt5.png

I have four problems I’m trying to work through with the layout:

First, how do I make the images flush left as in the link above? Mine are all centered in the page. Also, how can I scale images of different sizes so that they are the same size – i.e., about the size of the android icon? The image I have is pretty large: http://i39.tinypic.com/2eo8dg7.png .

My third issue has to do with the Leave a tip buttons. How can they be arranged so that they are side by side within the same table row?

Finally, I thought layouts were scrollable by default. Its not possible for me to scroll to see the rest of my layout (which should be ok). Its the images and buttons that are confusing to me.

Here’s my xml:

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

     <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />
        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:scaleType="fitXY"
            android:src="@drawable/about"
            android:onClick="onClickAbout" />
    </LinearLayout>

   <TableLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tableLayout1"
        android:layout_width="wrap_content" 
        android:layout_height="fill_parent"
        android:stretchColumns="1">
        <TableRow>
            <TextView
                android:text="Community Summary"
                android:textSize="18sp"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </TableRow>
        <View android:layout_height="2dip" android:background="#FF909060" />   
         <TableRow>
            <TextView
                android:text="Leaderboard"
                android:textSize="16sp"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </TableRow>
        <TableRow>
            <ImageView
                android:id="@+id/firstPlaceIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/android"/>
             <TextView
                android:id="@+id/household1"
                android:text="Household 1"/>
        </TableRow>
        <TableRow>  
            <ImageView
                android:id="@+id/secondPlaceIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/android"/> 
            <TextView
                android:id="@+id/household1"
                android:text="Household 2" />
        </TableRow>
        <TableRow>  
           <ImageView
               android:id="@+id/thirdPlaceIcon"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/sample_0"/> 
           <TextView
               android:id="@+id/household3"
               android:text="Household 3" />
       </TableRow> 

       <View android:layout_height="1dip" android:background="#FF909060" />   
       <TableRow>
            <TextView
                android:text="How do I compare?"
                android:textSize="16sp"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </TableRow>
        <TableRow>
            <Button
                android:id="@+id/howdoICompareStatus"
                android:text="Compare me to others"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </TableRow>


       <View android:layout_height="1dip" android:background="#FF909060" />   
       <TableRow>
            <TextView
                android:text="Tips"
                android:textSize="16sp"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </TableRow>
        <TableRow>
            <TextView
                android:id="@+id/statusTips"
                android:text="Temporary Tips Text"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </TableRow>

       <View android:layout_height="1dip" android:background="#FF909060" /> 

        <TableRow>
            <TextView
                android:text="Status"
                android:textSize="16sp"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </TableRow>
       <TableRow>
           <TextView
                android:id="@+id/communitysize"
                android:text=""
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"/> 
      </TableRow>
      <TableRow>
          <TextView
                android:id="@+id/tbd"
                android:text="More features coming soon!"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"/>
     </TableRow>       
    </TableLayout> 


</LinearLayout>

Any tips or resources would help. A sample xml would be great!

I’ve tried this based on the first suggestion with no luck getting the line gradient to appear below the first piece of text:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout style="@style/TitleBar"
        android:id="@+id/titleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:onClick="onClickHome" />
        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:scaleType="fitXY"
            android:src="@drawable/about"
            android:onClick="onClickAbout" />
    </LinearLayout>
    <LinearLayout
          android:id="@+id/top_linear"
          android:layout_height="80dp"
          android:layout_width="match_parent"
          android:orientation="vertical"
          android:layout_below="@+id/titleBar" >  
     <LinearLayout 
          android:id="@+id/linear2"
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent"
          android:layout_below="@id/top_linear"
          android:stretchColumns="1">
         <TextView
              android:id="@+id/communitySummary"
              android:text="Community Summary"
              android:textSize="18sp"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent" />
         <View 
              android:id="@+id/dividerSummary"
              android:background="@drawable/black_white_gradient"
              android:layout_alignBottom="@+id/communitySummary"
              android:layout_height="1dp" 
              android:layout_width="fill_parent"/>  
      </LinearLayout>      
</LinearLayout>
</RelativeLayout>

My solution for now. I still need to figure out how to put the information next to the three images but I think I’ll get it:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android" 
        android:id="@+id/myinfo_root"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:scrollbars="vertical"
        >
    <LinearLayout style="@style/TitleBar">
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_home"
            android:src="@drawable/title_home"
            android:scaleType="fitXY"
            android:onClick="onClickHome" />
        <ImageView style="@style/TitleBarSeparator" />
        <TextView style="@style/TitleBarText" />
        <ImageButton style="@style/TitleBarAction"
            android:contentDescription="@string/description_about"
            android:src="@drawable/about"
            android:scaleType="fitXY"
            android:onClick="onClickAbout" />
    </LinearLayout>
    <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
    <RelativeLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/relative_layout"
      android:layout_height="wrap_content"
      android:layout_width="fill_parent"
      android:padding="10dp" >  
     <TextView
          android:id="@+id/communitySummary"
          android:text="Community Summary"
          android:textSize="18sp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
          <View 
              android:id="@+id/dividerSummary"
              android:background="@drawable/black_white_gradient"
              android:layout_below="@+id/communitySummary"
              android:layout_height="1dp" 
              android:layout_width="fill_parent"/>  
          <TextView
              android:id="@+id/leaderboard"
              android:paddingTop="10dp"
              android:text="Leaderboard"
              android:textSize="16sp"
              android:layout_below="@+id/dividerSummary"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />

          <ImageView
              android:id="@+id/firstPlaceIcon"
              android:layout_width="80dp"
              android:layout_height="80dp"
              android:layout_below="@+id/leaderboard"
              android:src="@drawable/image20" 
              /> 
          <TextView
             android:id="@+id/top_spot"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:layout_marginLeft="10px"
             android:layout_toLeftOf="@id/firstPlaceIcon"
             android:text="Top spot: "/>   
          <TextView
             android:id="@+id/household1"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:layout_below="@+id/top_spot"
             android:text=""/>  
         <ImageView
             android:id="@+id/secondPlaceIcon"
             android:layout_width="80dp"
             android:layout_height="80dp"
             android:layout_below="@+id/firstPlaceIcon"
             android:src="@drawable/image15"/>
         <ImageView
             android:id="@+id/thirdPlaceIcon"
             android:layout_width="80dp"
             android:layout_height="80dp"
             android:layout_below="@+id/secondPlaceIcon"
             android:src="@drawable/image10"/>     
         <View 
              android:id="@+id/dividerLeaderboard"
              android:background="@drawable/black_white_gradient"
              android:layout_below="@+id/thirdPlaceIcon"
              android:layout_height="1dp" 
              android:layout_width="fill_parent"/>  
         <TextView
             android:id="@+id/howdoICompareText"
             android:text="How do I compare?"
             android:paddingTop="10dp"
             android:layout_below="@+id/dividerLeaderboard"
             android:textSize="16sp"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />
         <Button
             android:id="@+id/howdoICompareStatus"
             android:text="Compare me to others"
             android:layout_width="wrap_content"
             android:layout_below="@+id/howdoICompareText"
             android:layout_height="wrap_content" />    
         <View 
              android:id="@+id/dividerCompareStatus"
              android:paddingTop="10dp"
              android:background="@drawable/black_white_gradient"
              android:layout_below="@+id/howdoICompareStatus"
              android:layout_height="1dp" 
              android:layout_width="fill_parent"/>    
         <TextView
             android:id="@+id/waystoSaveHeader"
             android:text="Ways to Save"
             android:layout_below="@+id/dividerCompareStatus"
             android:textSize="16sp"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />
        <TextView
             android:id="@+id/waystoSave"
             android:text=""
             android:layout_below="@+id/waystoSaveHeader"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />
         <TextView
             android:id="@+id/leaveaMessageHeader"
             android:text="Leave a message to your community"
             android:paddingTop="10dp"
             android:layout_below="@+id/waystoSave"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />     
         <Button
             android:id="@+id/leaveMsgBtn"
             android:text="Leave a Message"
             android:layout_width="wrap_content"
             android:layout_below="@+id/leaveaMessageHeader"
             android:layout_height="wrap_content" />     
         <TextView
             android:id="@+id/seeMessagesHeader"
             android:text="See community messages"
             android:layout_below="@+id/leaveMsgBtn"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />     
         <Button
             android:id="@+id/sendMsgBtn"
             android:text="See messages"
             android:layout_width="wrap_content"
             android:layout_below="@+id/seeMessagesHeader"
             android:layout_height="wrap_content" />    
         <View 
              android:id="@+id/dividerWaystoSave"
              android:paddingTop="10dp"
              android:background="@drawable/black_white_gradient"
              android:layout_below="@+id/sendMsgBtn"
              android:layout_height="1dp" 
              android:layout_width="fill_parent"/>       
         <TextView
             android:id="@+id/CommunityStatusHeader"
             android:text="Community Status"
             android:layout_below="@+id/dividerWaystoSave"
             android:textSize="16sp"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />
        <TextView
             android:id="@+id/communitysize"
             android:text=""
             android:layout_below="@+id/CommunityStatusHeader"
             android:paddingTop="5dp"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />         
 </RelativeLayout>  
 </ScrollView>             
 </LinearLayout>

Answer 1

First think you should know is that in the mock-up image, that doesn’t look like a table layout (Maybe the top blue bar, but it can be done with two linear layouts or images pretty easy), it can be done with tables but is a waste of time and energy 🙂
So here is an idea:
Use a Relative layout that fills all the screen:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</RelativeLayout>

After that use a LinearLayout

<LinearLayout
    android:id="@+id/top_linear"
    android:layout_height="80dp"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_alignParentTop="true"
>
</LinearLayout>

that will hold either another two nested layouts or two images.

After that you set another LinearLayout below it android:layout_below="@id/top_linear that will hold the title.

After that you will fill some linear layouts with image and text (same horizontal orientation) one below other to obtain the images/text section.

Delimiters (those lines grey / black) can be obtain like this:

<View
  android:layout_width="match_parent"
  android:layout_height="2dp"
  android:background="#000000"
 />

Note that the color for the background can be any hexa, and if you want to be lighter on top, or any other styles, you should consider using a gradient.

And so on 🙂

Good luck,
Arkde