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"></a><a href="{@docRoot}guide/topics/appwidgets/index.html"> </a> UI   2
</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  [<strong></strong>] XML

</li>
  <li><a href="{@docRoot}tools/debugging/debugging-ui.html#hierarchyViewer">Hierarchy Viewer</a>


</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>EditText.setText()</code>  <code>text</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 Views</a>
</p>

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

<p>Android  XML HTML UI  </p>

<p>  1  View  ViewGroup  {@link android.widget.TextView}  {@link android.widget.Button}  {@link android.widget.LinearLayout}  XML
</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> XML <a href="{@docRoot}guide/topics/resources/layout-resource.html">Layout Resources</a></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>


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

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


</p>


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

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


  ViewGroup View

</p>

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

<p> View  View  ID  ID  ID  <code>id</code>  XML  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>View  ID {@link android.widget.RelativeLayout}  ID

</p>
<p> ID

</p>


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

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

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

 1  ViewGroup  ViewGroup
</p>

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

<p> LayoutParams
 LayoutParams  LayoutParams
 </p>

<p> ViewGroup <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>  ViewGroup
</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> 2


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

   </p>

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

{@link android.view.View#getMeasuredWidth()}  {@link android.view.View#getMeasuredHeight()}


   </p>

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

ViewGroup {@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>  1  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> 1
</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"></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} {@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> 1 </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.ListView}  {@link android.widget.GridView}  {@link android.widget.AdapterView}  {@link
android.view.View}

</p>

<p>Android  {@link android.widget.AdapterView}  {@link android.widget.Adapter}
 2
</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.ImageView} {@link android.widget.TextView} {@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} 2
</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 toViews}  {@code
fromColumns}  {@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>