Johanne Smith
Johanne Smith

Reputation: 75

Android Widget Layouts

I have struggled with creating Android layouts and I'm still looking for a really solid tutorial that provides useful examples.

Currently, I am trying to create a Widget to be similar to many of the existing Android widgets on the market. For example, the simple weather widget that contains the temperature on the right side of the widget (next to an image) and general text on the right of the widget that includes more information such as the forecast. I have the following code and my image fails to load correctly. The text fails to load on the widget also. Can someone help to guide me so that I can at least see the image and some of the text:

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget"
    android:layout_width="fill_parent"
    android:orientation="horizontal"
    android:background="@drawable/appwidget_bg" 
    android:layout_height="fill_parent">

    <ImageButton 
    android:id="@+id/message_button"
    android:layout_width="100px"
    android:layout_height="wrap_content"
    android:src="@drawable/messages"
    android:scaleType="fitXY"
    />

   <ImageView
       android:id="@+id/divider"
       android:layout_width="1dip"
       android:layout_height="match_parent"
       android:background="@drawable/appwidget_divider"
       android:layout_alignRight="@+id/message_button"
       />    
   <TextView 
        android:id="@+id/current_kw"
        android:layout_toRightOf="@+id/divider"
        android:layout_width="80px"
        android:layout_height="wrap_content"
        android:textSize="18dp"
        android:textColor="#ffffff"
        android:typeface="sans"
        android:text="TBD"
        android:gravity="center_horizontal|center_vertical"
    />  

    <ImageView
       android:id="@+id/divider2"
       android:layout_width="1dip"
       android:layout_height="match_parent"
       android:background="@drawable/appwidget_divider"
       android:layout_alignRight="@+id/current_kw"
       />       

    <TextView 
          android:id="@+id/temp"
          android:layout_toRightOf="@+id/divider2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_horizontal"
          android:textSize="10sp"
          android:textColor="#ffffff"
          android:paddingLeft="1dp"
          android:fadingEdgeLength="2dip"
          android:text="Temperature"
         />    

        <TextView 
            android:id="@+id/estimate_cost"
            android:layout_toRightOf="@+id/current_kw"
            android:layout_below="@+id/temp"
            android:paddingLeft="1dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your estimated cost:"
            android:textSize="10sp"
            android:gravity="center_horizontal"
            android:layout_weight="1.0"
           />

        <TextView
         android:id="@+id/communitysize"
         android:layout_toRightOf="@+id/current_kw"
         android:layout_below="@+id/estimate_cost"
         android:text="Size of the community: "
         android:textSize="10sp"
         android:paddingTop="1dp"
         android:layout_width="wrap_content"
         android:gravity="center_horizontal"
         android:layout_height="wrap_content" /> 

</RelativeLayout>

Upvotes: 1

Views: 3648

Answers (1)

Sunny Kumar Aditya
Sunny Kumar Aditya

Reputation: 2846

Try This tutorial

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

    <ImageButton 
    android:id="@+id/message_button"
    android:layout_centerVertical="true"
    android:layout_width="0dip"
    android:layout_height="75dip"
    android:layout_weight="1.0"
    android:src="@drawable/icon"
    android:scaleType="center"
    />
<LinearLayout
    android:id="@+id/linearLayout2" 
    android:layout_width="0dip"
    android:layout_weight="2"
    android:layout_height="fill_parent" 
    android:orientation="vertical"
    android:layout_gravity="center_vertical"
    android:paddingLeft="18dip"
    android:paddingRight="8dip"
   >
   <ImageView
       android:layout_width="1dip"
       android:layout_height="wrap_content"
       android:background="@drawable/icon"
       />    

    <TextView 
          android:id="@+id/temp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="12sp"
          android:textColor="#000000"
          android:singleLine="true"
          android:fadingEdge="horizontal"
          android:fadingEdgeLength="2dip"
          android:text="TBD"
          android:ellipsize="none"
         />    
         <TextView 
            android:id="@+id/communitystatus"
            android:textSize="12sp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:lines="1"
            android:ellipsize="marquee"
            android:fadingEdge="horizontal"
            android:marqueeRepeatLimit="marquee_forever"
            android:scrollHorizontally="true"

            android:focusable="true"
            android:focusableInTouchMode="true"
            android:textColor="#000000"
            android:text="Simple application that shows how to use marquee, with a long text"
         />
        <TextView
         android:id="@+id/communitysize"
         android:text="Size of the community: "
         android:textSize="12sp"
         android:layout_below="@+id/CommunityStatusHeader"
         android:paddingTop="5dp"
         android:layout_width="wrap_content"
         android:gravity="center_horizontal"
         android:layout_height="wrap_content" android:textColor="#000000"/> 
        <TextView 
            android:id="@+id/estimate_cost"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your estimated cost:"
            android:textSize="12sp"
            android:layout_weight="1.0"
            android:typeface="sans" 
            android:gravity="center_horizontal" 
            android:textColor="#000000"/>
</LinearLayout>
</LinearLayout>

Upvotes: 1

Related Questions