topics/ui/declaring-layout.jd

page.title=
page.tags=view,viewgroup
@jd:body

<div id="qv-wrapper">
<div id="qv">
  <h2></h2>
<ol>
  <li><a href="#write"> XML</a></li>
  <li><a href="#load"> XML </a></li>
  <li><a href="#attributes"></a>
    <ol>
      <li><a href="#id">ID</a></li>
      <li><a href="#layout-params"></a></li>
    </ol>
  </li>
  <li><a href="#Position"></a></li>
  <li><a href="#SizePaddingMargins"></a></li>
  <li><a href="#CommonLayouts"></a></li>
  <li><a href="#AdapterViews"></a>
    <ol>
      <li><a href="#FillingTheLayout"></a></li>
      <li><a href="#HandlingUserSelections"></a></li>
    </ol>
  </li>
</ol>

  <h2></h2>
  <ol>
    <li>{@link android.view.View}</li>
    <li>{@link android.view.ViewGroup}</li>
    <li>{@link android.view.ViewGroup.LayoutParams}</li>
  </ol>

  <h2></h2>
  <ol>
    <li><a href="{@docRoot}training/basics/firstapp/building-ui.html"></a>
</li> </div>
</div>

<p><a href="{@docRoot}guide/components/activities.html">Activity</a><a href="{@docRoot}guide/topics/appwidgets/index.html"></a>
UI</p>
<ul>
<li><strong> XML  UI </strong>Android  View  XML
</li>
<li><strong></strong>
View  ViewGroup  </li>
</ul>

<p>Android  UI XML  XML  </p>

<div class="sidebox-wrapper">
<div class="sidebox">
  <ul>
  <li><a href="{@docRoot}tools/sdk/eclipse-adt.html">ADT
  Plugin for Eclipse</a>  XML &mdash;
   XML  <strong>Layout</strong> </li>
  <li><a href="{@docRoot}tools/debugging/debugging-ui.html#hierarchyViewer"></a>&mdash;/


</li>
  <li> <a href="{@docRoot}tools/debugging/debugging-ui.html#layoutopt">layoutopt</a>
</li>
</div>
</div>

<p> XML  UI  UI  XML  XML  UI  XML  View
 {@link android.view.ViewGroup}
{@link android.view.View} </p>

<p> UI  XML  XML  XML EditText
<code>text</code>  <code>EditText.setText()</code>
 </p>

<p class="note"><strong></strong><a href="{@docRoot}guide/topics/ui/layout-objects.html"></a>

<a href="{@docRoot}resources/tutorials/views/index.html">Hello </a></p>

<h2 id="write"> XML</h2>

<p> Android  XML  HTML  UI  </p>

<p> ViewGroup  XML  {@link android.widget.LinearLayout}
 {@link android.widget.TextView}  {@link android.widget.Button}</p>
<pre>
&lt;?xml version="1.0" encoding="utf-8"?>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    &lt;TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    &lt;Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
&lt;/LinearLayout>
</pre>

<p> XML  Android  <code>res/layout/</code>  <code>.xml</code>
 </p>

<p><a href="{@docRoot}guide/topics/resources/layout-resource.html"></a> XML </p>

<h2 id="load"> XML </h2>

<p> XML
{@link android.view.View}
{@link android.app.Activity#onCreate(android.os.Bundle) Activity.onCreate()}
 <code>{@link android.app.Activity#setContentView(int) setContentView()}</code>
<code>R.layout.<em>layout_file_name</em></code>

XML
<code>main_layout.xml</code> Activity </p>
<pre>
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}
</pre>

<p> Activity Android
 Activity
<code>onCreate()</code>
<a href="{@docRoot}guide/components/activities.html#Lifecycle">Activity</a></p>


<h2 id="attributes"></h2>

<p> ViewGroup  XML
TextView  <code>textSize</code>
 View
 View  <code>id</code>
 View
 ViewGroup
</p>

<h3 id="id">ID</h3>

<p> ID ID  View
 ID  XML
 <code>id</code>  ID
View  XML  {@link android.view.View}
XML  ID
</p>
<pre>android:id="&#64;+id/my_button"</pre>

<p> @  XML
ID  ID  (+)
 <code>R.java</code> Android  ID
 Android  ID
<code>android</code> </p>
<pre>android:id="&#64;android:id/empty"</pre>
<p> <code>android</code>  <code>android.R</code>
 ID</p>

<p></p>
<ol>
  <li>/ ID
<pre>
&lt;Button android:id="&#64;+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#64;string/my_button_text"/>
</pre>
  </li>
  <li> view
 <code>{@link android.app.Activity#onCreate(Bundle) onCreate()}</code>
<pre>
Button myButton = (Button) findViewById(R.id.my_button);
</pre>
  </li>
</ol>
<p> {@link android.widget.RelativeLayout}
 view  ID  ID
</p>
<p>ID

</p>


<h3 id="layout-params"></h3>

<p> <code>layout_<em>something</em></code>  XML
 ViewGroup </p>

<p> ViewGroup  {@link
android.view.ViewGroup.LayoutParams}

 1
</p>

<img src="{@docRoot}images/layoutparams.png" alt="" />
<p class="img-caption"><strong> 1. </strong>
</p>

<p> LayoutParams

LayoutParams LayoutParams </p>

<p><code>layout_width</code>
<code>layout_height</code>
LayoutParams  <p>

<p>

 </p>

<ul>
  <li><var>wrap_content</var>
</li>
  <li><var>match_parent</var>  API  8  <var>fill_parent</var>
</li>
</ul>

<p>

(<var>dp</var>) <var>wrap_content</var>
<var>match_parent</var><a href="{@docRoot}guide/topics/resources/available-resources.html#dimension"></a>


</p>


<h2 id="Position"></h2>
   <p>
   <em></em><em></em>


   </p>

   <p>

   {@link android.view.View#getLeft()}  {@link android.view.View#getTop()}  X
  Y

 <code>getLeft()</code>  20 20


   </p>

   <p>
    {@link android.view.View#getRight()}  {@link android.view.View#getBottom()}


 {@link android.view.View#getRight()}
   <code>getLeft() + getWidth()</code>
   </p>


<h2 id="SizePaddingMargins"></h2>
   <p>


   </p>

   <p>
   <em></em><em></em>


    {@link android.view.View#getMeasuredWidth()}
    {@link android.view.View#getMeasuredHeight()}
   </p>

   <p>
   <em></em><em></em><em></em><em></em>


   {@link android.view.View#getWidth()}  {@link android.view.View#getHeight()}
   </p>

   <p>


    2
 2
   {@link android.view.View#setPadding(int, int, int, int)}
   {@link android.view.View#getPaddingLeft()}{@link android.view.View#getPaddingTop()}{@link android.view.View#getPaddingRight()}  {@link android.view.View#getPaddingBottom()}

   </p>

   <p>


   {@link android.view.ViewGroup}
   {@link android.view.ViewGroup.MarginLayoutParams}
   </p>

   <p>
   <a href="{@docRoot}guide/topics/resources/more-resources.html#Dimension"></a>
   </p>


<style type="text/css">
div.layout {
  float:left;
  width:200px;
  margin:0 0 20px 20px;
}
div.layout.first {
  margin-left:0;
  clear:left;
}
</style>


<h2 id="CommonLayouts"></h2>

<p>{@link android.view.ViewGroup}

Android </p>

<p class="note"><strong></strong>
UI

</p>

<!--
<h2 id="framelayout">FrameLayout</h2>
<p>{@link android.widget.FrameLayout FrameLayout} is the simplest type of layout
object. It's basically a blank space on your screen that you can
later fill with a single object &mdash; for example, a picture that you'll swap in and out.
All child elements of the FrameLayout are pinned to the top left corner of the screen; you cannot
specify a different location for a child view. Subsequent child views will simply be drawn over
previous ones,
partially or totally obscuring them (unless the newer object is transparent).
</p>
-->


<div class="layout first">
  <h4><a href="layout/linear.html"></a></h4>
  <a href="layout/linear.html"><img src="{@docRoot}images/ui/linearlayout-small.png" alt="" /></a>
  <p>
</p>
</div>

<div class="layout">
  <h4><a href="layout/relative.html"></a></h4>
  <a href="layout/relative.html"><img src="{@docRoot}images/ui/relativelayout-small.png" alt="" /></a>
  <p> A
 B </p>
</div>

<div class="layout">
  <h4><a href="{@docRoot}guide/webapps/webview.html">Web </a></h4>
  <a href="{@docRoot}guide/webapps/webview.html"><img src="{@docRoot}images/ui/webview-small.png" alt="" /></a>
  <p></p>
</div>


<h2 id="AdapterViews" style="clear:left"></h2>

<p>
{@link android.widget.AdapterView} {@link android.widget.AdapterView}
 {@link android.widget.Adapter}
{@link android.widget.Adapter}
 {@link android.widget.AdapterView}
&mdash;{@link android.widget.Adapter} {@link android.widget.AdapterView}
</p>

<p></p>

<div class="layout first">
  <h4><a href="layout/listview.html"></a></h4>
  <a href="layout/listview.html"><img src="{@docRoot}images/ui/listview-small.png" alt="" /></a>
  <p></p>
</div>

<div class="layout">
  <h4><a href="layout/gridview.html"></a></h4>
  <a href="layout/gridview.html"><img src="{@docRoot}images/ui/gridview-small.png" alt="" /></a>
  <p></p>
</div>


<h3 id="FillingTheLayout" style="clear:left"></h3>

<p> {@link android.widget.AdapterView}  {@link android.widget.Adapter}  {@link android.widget.AdapterView} {@link android.widget.ListView}
{@link android.widget.GridView}
{@link
android.view.View}</p>

<p>Android  {@link android.widget.Adapter}
{@link android.widget.AdapterView}
</p>

<dl>
  <dt>{@link android.widget.ArrayAdapter}</dt>
    <dd>{@link
android.widget.ArrayAdapter}  {@link
java.lang.Object#toString()}  {@link
android.widget.TextView}
      <p> {@link
android.widget.ListView}
{@link android.widget.ArrayAdapter}</p>
<pre>
ArrayAdapter&lt;String> adapter = new ArrayAdapter&lt;String>(this,
        android.R.layout.simple_list_item_1, myStringArray);
</pre>
<p></p>
<ul>
  <li> {@link android.content.Context}</li>
  <li> {@link android.widget.TextView} </li>
  <li></li>
</ul>
<p> {@link android.widget.ListView}
{@link android.widget.ListView#setAdapter setAdapter()}</p>
<pre>
ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);
</pre>

      <p> {@link
java.lang.Object#toString()}
{@link android.widget.TextView}
{@link android.widget.ImageView} {@link
android.widget.ArrayAdapter}  {@link android.widget.ArrayAdapter#getView
getView()} </p>

</dd>

  <dt>{@link android.widget.SimpleCursorAdapter}</dt>
    <dd> {@link android.database.Cursor}
{@link android.widget.SimpleCursorAdapter}  {@link android.database.Cursor}
 {@link android.database.Cursor}

{@link
android.database.Cursor}
 {@link
android.database.Cursor}
</p>
<pre>
String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME,
                        ContactsContract.CommonDataKinds.Phone.NUMBER};
int[] toViews = {R.id.display_name, R.id.phone_number};
</pre>
<p> {@link android.widget.SimpleCursorAdapter}
 {@link android.database.Cursor} </p>
<pre>
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
        R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
ListView listView = getListView();
listView.setAdapter(adapter);
</pre>
<p>{@link android.widget.SimpleCursorAdapter}
{@code
fromColumns}  {@code toViews}  {@link android.database.Cursor} </p>.</dd>
</dl>


<p>
{@link android.widget.ArrayAdapter#notifyDataSetChanged()}
</p>


<h3 id="HandlingUserSelections"></h3>

<p> {@link android.widget.AdapterView.OnItemClickListener}
 {@link android.widget.AdapterView} </p>

<pre>
// Create a message handling object as an anonymous class.
private OnItemClickListener mMessageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        // Do something in response to the click
    }
};

listView.setOnItemClickListener(mMessageClickedHandler);
</pre>