Pleasing Android Layouts

satya - Sunday, September 13, 2009 1:07:23 PM

pleasing android layout xml samples

pleasing android layout xml samples

Search for: pleasing android layout xml samples

satya - Sunday, September 13, 2009 1:09:24 PM

android sample layouts

android sample layouts

Search for: android sample layouts

satya - Sunday, September 13, 2009 1:11:12 PM

start at the begining, introduction to layouts

start at the begining, introduction to layouts

satya - Sunday, September 13, 2009 1:22:47 PM

xml tags for any basic view

xml tags for any basic view

satya - Sunday, September 13, 2009 1:23:13 PM

android border setting view

android border setting view

Search for: android border setting view

satya - Sunday, September 13, 2009 1:25:46 PM

see this developer thread

see this

See border setting on stackoverflow

satya - Monday, September 14, 2009 10:24:27 AM

You can set a shape as the background of a layout. ex shape


<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <stroke android:width="4dp" android:color="#FF00FF00" /> 
    <padding android:left="7dp" android:top="7dp" 
            android:right="7dp" android:bottom="7dp" /> 
    <corners android:radius="4dp" /> 
</shape>

satya - Monday, September 14, 2009 10:25:39 AM

or read up on nine patch

or read up on nine patch

satya - Monday, September 14, 2009 10:30:09 AM

Here are some samples from the Android API samples

Here are some samples from the Android API samples

satya - Monday, September 14, 2009 10:30:31 AM

shape 1


<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#00000000"/>
    <stroke android:width="2dp" android:color="#ff000000"/>
    <padding android:left="1dp" android:top="1dp"
            android:right="1dp" android:bottom="1dp" />
</shape>

satya - Monday, September 14, 2009 10:32:01 AM

shape_2.xml


<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF0000FF"/>
    <stroke android:width="4dp" android:color="#FFFFFFFF"
            android:dashWidth="1dp" android:dashGap="2dp" />
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />
    <corners android:radius="4dp" />
</shape>

satya - Monday, September 14, 2009 10:32:37 AM

shape_3.xml


<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#00000000"/>
    <stroke android:width="4dp" android:color="#99000000"
            android:dashWidth="4dp" android:dashGap="2dp" />
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />
    <corners android:radius="4dp" />
</shape>

satya - Monday, September 14, 2009 10:33:02 AM

shape_4.xml


<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke android:width="1dp" android:color="#FF000000"
            android:dashWidth="1dp" android:dashGap="2dp" />
</shape>

satya - Monday, September 14, 2009 10:33:29 AM

shape_5.xml


<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
            android:angle="270"/>
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

satya - Friday, September 18, 2009 5:28:07 PM

Here are possible options for a textview

Here are possible options for a textview

satya - Friday, September 18, 2009 5:28:36 PM

Here is aligning a text view

Here is aligning a text view

satya - Friday, September 18, 2009 5:30:45 PM

possible values for android:gravity


top
bottom
left
right
center_vertical
center_horizontal
fill_horizontal
center
fill
clip_vertical
clip_horizontal

satya - Friday, September 18, 2009 5:34:47 PM

A discussion on text size, sp, dp etc

A discussion on text size, sp, dp etc

satya - Monday, September 21, 2009 6:17:20 PM

android layout view percentage width

android layout view percentage width

Search for: android layout view percentage width

satya - Monday, September 21, 2009 6:17:43 PM

See this discussion where it uses the layout_weight

See this discussion where it uses the layout_weight

satya - Monday, September 21, 2009 6:19:10 PM

Reference to View based XML defs

Reference to View based XML defs

satya - Monday, September 21, 2009 6:20:42 PM

some info on layout_weight

some info on layout_weight

satya - Monday, September 21, 2009 6:21:04 PM

android layout_weight

android layout_weight

Search for: android layout_weight

satya - Monday, September 21, 2009 6:22:18 PM

Here are some visual examples

Here are some visual examples

satya - Monday, September 21, 2009 6:25:35 PM

another example

another example

satya - Monday, September 21, 2009 6:29:47 PM

Here is another reference

Here is another reference

satya - Monday, September 21, 2009 6:42:45 PM

html color values

html color values

satya - Monday, September 21, 2009 6:46:00 PM

Here is an example


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/root_layout_id"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/shape1"
    >
<TextView  
	android:id="@+id/text1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Test view"
    />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/root_layout_id"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_weight="30" 
    android:text="Test view L"
    android:background="#FFCC66"
    />
<TextView  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_weight="70" 
    android:text="Test view R"
    android:background="#000099"
    />
</LinearLayout>
</LinearLayout>

satya - Tuesday, September 22, 2009 9:34:50 AM

linearlayout layout_height options

Search for: linearlayout layout_height options

satya - Tuesday, September 22, 2009 10:00:22 AM

This is a pretty decent layout


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="150dp"
    android:layout_height="120dp"
    android:background="@drawable/box1"
    >
<TextView  
	android:id="@+id/bdw_w_name"
    android:layout_width="fill_parent" 
    android:layout_height="30dp" 
    android:text="Anonymous"
    android:background="@drawable/box1"
    android:gravity="center"
    />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="60dp"
    >
	<TextView  
		android:id="@+id/bdw_w_days"
	    android:layout_width="wrap_content" 
	    android:layout_height="fill_parent" 
	    android:text="0"
	    android:gravity="center"
	    android:textSize="30sp"
	    android:layout_weight="50" 
	    />
	<TextView 
	   android:id="@+id/bdw_w_button_buy"
	    android:layout_width="wrap_content" 
	    android:layout_height="fill_parent" 
	    android:textSize="20sp"
	    android:text="Buy"
	    android:layout_weight="50" 
	    android:background="#FF6633"
	    android:gravity="center"
	/>
</LinearLayout>
<TextView  
	android:id="@+id/bdw_w_date"
    android:layout_width="fill_parent" 
    android:layout_height="30dp" 
    android:text="1/1/2000"
    android:background="@drawable/box1"
    android:gravity="center"
    />
</LinearLayout>

satya - Tuesday, September 22, 2009 2:51:59 PM

Here is how the above layout looks like

satya - Tuesday, September 22, 2009 2:52:55 PM

The box1 file is as follows


<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <stroke android:width="4dp" android:color="#888888" /> 
    <padding android:left="2dp" android:top="2dp" 
            android:right="2dp" android:bottom="2dp" /> 
    <corners android:radius="4dp" /> 
</shape>

satya - Monday, January 31, 2011 6:44:40 PM

You can use the base color from Android


<TextView android:id="@+id/textViewId"  
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"

    android:background="@android:color/white"

    android:text="@string/hello"
    />

But again you have only limited colors. You can check them out by doing

android.R.color.

Then eclipse will prompt what is out there. the set is very small. This could be useful to quickly try somethign. Otherwise you will need your own color set

satya - Monday, January 31, 2011 6:53:26 PM

Here is a way to control the text size


<TextView android:id="@+id/textViewId"  
....
    android:textSize="@dimen/medium_size"
...
    />

satya - Monday, January 31, 2011 6:53:59 PM

Defining the dimension above


<resources>
    <string name="hello">Hello World</string>
    <dimen name="forty_pixels">40px</dimen>
    <dimen name="medium_size">100sp</dimen>
</resources>

satya - Thursday, February 03, 2011 10:59:26 AM

icon design guidelines

icon design guidelines

satya - Thursday, February 03, 2011 11:03:27 AM

Not sure how legitimate this is: http://www.androidicons.com/

Not sure how legitimate this is: http://www.androidicons.com/

Just a reference. I have not verified this site for authenticity. Use it as you see fit.

satya - Friday, February 11, 2011 12:57:52 PM

Note on layoutparams

Note on layoutparams

The dimension can be one of

?FILL_PARENT (renamed MATCH_PARENT in API Level 8 and higher), which means that the view wants to be as big as its parent (minus padding)

?WRAP_CONTENT, which means that the view wants to be just big enough to enclose its content (plus padding)

?an exact number

satya - Friday, February 11, 2011 1:04:51 PM

layout weight and gravity are properties of LinearLayout

layout weight and gravity

gravity indicates alignment

weight Indicates how much of the extra space in the LinearLayout will be allocated to the view associated with these LayoutParams.

satya - Friday, February 11, 2011 1:05:46 PM

More on layout_weight

Indicates how much of the extra space in the LinearLayout will be allocated to the view associated with these LayoutParams. Specify 0 if the view should not be stretched. Otherwise the extra pixels will be pro-rated among all views whose weight is greater than 0.

satya - Saturday, March 05, 2011 10:42:23 AM

A vertical sandwich layout


header (fixed height)
  height:10
  weight:0

Body (Elastic)
  height:match_parent
  weight:1

footer (Fixed height)
  height:10
  weight:0

satya - Monday, November 07, 2011 10:52:55 AM

html colors

html colors

satya - Monday, November 07, 2011 10:53:31 AM

a resource file for you


<resources>
    <color name="black">#000000</color>
    <color name="red">#FF0000</color>
    <color name="white">#FFFFFF</color>
    <color name="gray">#C0C0C0</color>
    <color name="yellow">#FFFF00</color>
    <color name="blue">#0000FF</color>
    <color name="green">#00FF00</color>
</resources>

satya - Mon Aug 20 2012 13:51:00 GMT-0400 (Eastern Daylight Time)

Pleasures of relative layout

Pleasures of relative layout

satya - Tue Aug 21 2012 13:02:52 GMT-0400 (Eastern Daylight Time)

Your layout filename can use an '_' (underscore) but not a '-' (dash)

Your layout filename can use an '_' (underscore) but not a '-' (dash)

satya - Tue Aug 21 2012 15:49:03 GMT-0400 (Eastern Daylight Time)

This seem to work for a 3 to 1 split of a screen


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  android:id="@+id/glViewId"
    android:layout_width="match_parent" 

    android:layout_height="0sp" 
    android:layout_weight="3"

    android:text="Place holder for GL"
    android:background="@drawable/shape2"
    />
<TextView  android:id="@+id/debugTextViewId"
    android:layout_width="match_parent" 

    android:layout_height="0sp"
    android:layout_weight="1"

    android:background="@drawable/shape2"
    android:text="A Simple Main Activity. Click Menu to Proceed"
    />
</LinearLayout>

satya - Thu Nov 29 2012 21:16:43 GMT-0500 (Eastern Standard Time)

Stock icons and icon design guidelines from Android

Stock icons and icon design guidelines from Android

satya - 3/16/2013 4:05:48 PM

In Android how to specify a text size relative to the default size?

In Android how to specify a text size relative to the default size?

Search for: In Android how to specify a text size relative to the default size?

satya - 3/16/2013 4:23:57 PM

Here is an example of a relative layout

satya - 3/16/2013 4:25:41 PM

B2 above needs to aligned to right and it is sufficient...

to say B1 is just left of B2. You dont need to say B1 is also aligned to the parent right. If you say it B1 and B2 will be overlapped.

satya - 3/17/2013 8:25:56 AM

Ok I give in: Relative layout quickref


android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_alignParentBottom
android:layout_centerHorizontal
android:layout_centerVertical
android:layout_centerInParent
android:layout_toLeftOf
android:layout_toRightOf
android:layout_above
android:layout_below

satya - 3/17/2013 9:02:48 AM

I suppose you could do this for varying the textsize for contrast


android:textSize="@android:style/TextAppearance.Small"

satya - 3/17/2013 9:22:53 AM

That would be wrong: textSize can be only a dimension

That would be wrong: textSize can be only a dimension

satya - 3/17/2013 9:23:22 AM

So the right thing is


android:textAppearance="@android:style/TextAppearance.Small"

satya - 3/17/2013 9:25:30 AM

How to use Android style textAppearance?

How to use Android style textAppearance?

Search for: How to use Android style textAppearance?

satya - 3/20/2013 11:36:17 AM

sp and dp

when you specify size in "dp" or "dip" (density independent pixels), Android will adjust the scaling to keep the size relatively the same. This means in a high density device it will take more pixels.

On the same device an "sp" (scalable pixels) will adjust to the level of magnification that the user wants.

Typically scalable graphics like "Text" uses "sp" as it won't loose clarity when scaled up or down.

satya - 4/10/2013 9:37:57 AM

Another vertical elastic multi-layered sandwich


header (fixed height)
  height:10dp
  weight:0

lead (fixed height)
  height:wrap_content
  weight:0

Body (Elastic)
  height:match_parent
  weight:1
  layout_margin:10dp; //if needed

footer (Fixed height)
  height:wrap_content
  weight:0

another footer (Fixed height)
  height:wrap_content
  weight:0

satya - 4/10/2013 9:41:52 AM

You may want to lead your layout files like this


<?xml version="1.0" encoding="utf-8"?>
<!-- 
*********************************************
* create_word_meaning.xml
* prefix: cwm_
* Create a word meaning
* Input controls:
*    word
*    details: created by, on
*     meaning text area
*    submit button
*********************************************
-->

The prefix will let you prefix your ids so that they don't conflict in the R.id namespace!!

satya - 4/10/2013 9:49:48 AM

Correspondingly in your activity top do this


/*
 * Given a word create a meaning for it.
 * uses layout: create_word_meaning (cwm_)
 */

satya - 11/9/2013 11:57:10 AM

You can make your activities a lighter theme


<activity android:name="com.androidbook.asynctask.TestProgressBarDriverActivity"
                  android:label="Test Progress bars"
                  android:theme="@android:style/Theme.Light"/>