Pleasing Android Layouts

Pleasing Android Layouts

pleasing android layout xml samples

Search for: pleasing android layout xml samples

android sample layouts

Search for: android sample layouts

start at the begining, introduction to layouts

xml tags for any basic view

android border setting view

Search for: android border setting view

see this

See border setting on stackoverflow 


<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>

or read up on nine patch

Here are some samples from the Android API samples


<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>


<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>


<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>


<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>


<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>

Here are possible options for a textview

Here is aligning a text view


top
bottom
left
right
center_vertical
center_horizontal
fill_horizontal
center
fill
clip_vertical
clip_horizontal

A discussion on text size, sp, dp etc

android layout view percentage width

Search for: android layout view percentage width

See this discussion where it uses the layout_weight

Reference to View based XML defs

some info on layout_weight

android layout_weight

Search for: android layout_weight

Here are some visual examples

another example

Here is another reference

html color values


<?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>

Search for: linearlayout layout_height options


<?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>



<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>


<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 


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


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

icon design guidelines

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.

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

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.

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. 


header (fixed height)
  height:10
  weight:0

Body (Elastic)
  height:match_parent
  weight:1

footer (Fixed height)
  height:10
  weight:0

html colors


<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>

Pleasures of relative layout

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


<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>

Stock icons and icon design guidelines from Android

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?

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. 


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


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

That would be wrong: textSize can be only a dimension


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

How to use Android style textAppearance?

Search for: How to use Android style textAppearance?

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. 


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


<?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!! 


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


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