1. Create a new Android Project<\/h2>\n
Open Eclipse IDE and go to File -> New -> Project -> Android -> Android Application Project.<\/p>\n
You have to specify the Application Name, the Project Name and the Package name in the appropriate text fields and then click Next.<\/p>\n In the next window make sure the \u201cCreate activity\u201d option is selected in order to create a new activity for your project, and click Next. This is optional as you can create a new activity after creating the project, but you can do it all in one step.<\/p>\n Select \u201cBlankActivity\u201d and click Next.<\/p>\n You will be asked to specify some information about the new activity. \u00a0In the Layout Name text field you have to specify the name of the file that will contain the layout description of your app. In our case the file\u00a0 Open\u00a0 And paste the following code :<\/p>\n main.xml:<\/em><\/span><\/p>\n The idea here is very simple. We have two\u00a0 You can preview the layout you’ve created in the Graphical Layout editor:<\/p>\n Use the Package Explorer to navigate to the Java file of the Activity you\u2019ve created:<\/p>\n For this example you don\u2019t have to change anything to the auto generated code so you can leave it as it is.<\/p>\n MainActivity.java:<\/em><\/span><\/p>\n This is how our Layout looks on the emulator:<\/p>\n In the above code we sort of hard coded everything\u00a0in the main layout of the activity. But you may want to inflate the contents of each layout\u00a0dynamically in your code. Or, more importantly you may want to make this layout reusable to your other activities, each one having their own contents to display and may be their own headers and footers.<\/p>\n To achieve that, we are simply going to separate every component from the other. We are going to create the header layout to a different XML file and do the same for the footer. Now, every activity that has its own content can include the header and the footer in their own Layouts.<\/p>\n To create a new XML Layout file containing the items you want to fill your\u00a0 Put a name for your new layout file, and select RelativeLayout from the list (although this is not absolutely necessary) and click \u201cFinish\u201d:<\/p>\n You need to create So,after the creation of the new layout XML files, this is the new Project Structure:<\/p>\n header.xml<\/em><\/span><\/p>\n footer.xml<\/em><\/span><\/p>\n main.xml<\/em><\/span><\/p>\n As you can see we’ve simply separated the RelativeLayouts of the header and the footer to different XML files. So now, you can include them in any Layout you want. You can do that by writting This is how our Layout looks on the emulator:<\/p>\n This was an Android example on how to create\u00a0fixed Header and Footer reusable layouts. Download the Eclipse Project of this tutorial:\u00a0AndroidLayoutsExample.zip<\/a> In this article we are going to see how you can create a simple Android Layout that includes a header part, a footer part and the content area. It is relatively easy to do that in the Android platform. The important bit is to try to make your layouts reusable and independent from one another, …<\/p>\n","protected":false},"author":7,"featured_media":46,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-17719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android-core"],"yoast_head":"\n![\"new-android-project\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/10\/new-android-project1.jpg\")
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/p>\nres\/layout\/main.xml<\/code>\u00a0will be created. Then, click Finish.<\/p>\n<\/p>\n2. Creating the layout of the Main Activity<\/h2>\n
res\/layout\/main.xml<\/code>\u00a0file :<\/p>\n<\/a><\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\" >\r\n\r\n <!-- Header aligned to top -->\r\n\r\n <RelativeLayout\r\n android:id=\"@+id\/header\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_alignParentTop=\"true\"\r\n android:background=\"#FC9\"\r\n android:gravity=\"center\" >\r\n\r\n <TextView\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_margin=\"5dp\"\r\n android:text=\"Fixed Header\"\r\n android:textColor=\"#000\"\r\n android:textSize=\"20sp\" \/>\r\n <\/RelativeLayout>\r\n\r\n <!-- Footer aligned to bottom -->\r\n\r\n <RelativeLayout\r\n android:id=\"@+id\/footer\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_alignParentBottom=\"true\"\r\n android:background=\"#FC0\"\r\n android:gravity=\"center\" >\r\n\r\n <TextView\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_margin=\"5dp\"\r\n android:text=\"Fixed Footer\"\r\n android:textColor=\"#000\"\r\n android:textSize=\"20sp\" \/>\r\n <\/RelativeLayout>\r\n\r\n <!-- Content below header and above footer -->\r\n\r\n <RelativeLayout\r\n android:id=\"@+id\/content\"\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"fill_parent\"\r\n android:layout_above=\"@id\/footer\"\r\n android:layout_below=\"@id\/header\"\r\n android:gravity=\"center\" >\r\n\r\n <TextView\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:text=\"Content\"\r\n android:textColor=\"#33E\"\r\n android:textSize=\"20sp\" \/>\r\n <\/RelativeLayout>\r\n\r\n<\/RelativeLayout><\/pre>\n
RelativeLayouts<\/code>, one aligned at the top of the screen, usingandroid:layout_alignParentTop=\"true\"<\/code>\u00a0property, and one aligned at the bottom of the screen usingandroid:layout_alignParentBottom=\"true\"<\/code>\u00a0property. Then we simply place a\u00a0RelativeLayout<\/code>\u00a0between these two view using\u00a0android:layout_above=\"@id\/footer\"<\/code>\u00a0and\u00a0android:layout_below=\"@id\/header\"<\/code>. These properties will place our\u00a0RelativeLayout<\/code> with id content<\/code>, representing the content area of our Layout, above the element with id\u00a0footer<\/code>\u00a0and bellow the element with id\u00a0header<\/code>.<\/a><\/p>\n2. Code the Main Activity<\/h2>\n
<\/a><\/p>\npackage com.javacodegeeks.android.androidlayoutsexample;\r\n\r\nimport android.os.Bundle;\r\nimport android.app.Activity;\r\nimport android.view.Menu;\r\n\r\npublic class MainActivity extends Activity {\r\n\r\n\t@Override\r\n\tprotected void onCreate(Bundle savedInstanceState) {\r\n\t\tsuper.onCreate(savedInstanceState);\r\n\t\tsetContentView(R.layout.main);\r\n\t}\r\n\r\n\t@Override\r\n\tpublic boolean onCreateOptionsMenu(Menu menu) {\r\n\t\t\/\/ Inflate the menu; this adds items to the action bar if it is present.\r\n\t\tgetMenuInflater().inflate(R.menu.main, menu);\r\n\t\treturn true;\r\n\t}\r\n}<\/pre>\n4. Run the application<\/h2>\n
<\/a><\/p>\nMaking your Layout flexible<\/h2>\n
ScrollView<\/code>\u00a0with. To create a new layout file, go to the Package Explorer and find\u00a0\/res\/layout<\/code>\u00a0folder. Right Click on the folder -> New -> Other -> Android -> Android XML Layout file:<\/p>\n<\/a><\/p>\n<\/a><\/p>\nfooter.xml<\/code> also.<\/p>\n<\/a><\/p>\n<RelativeLayout\r\n android:id=\"@+id\/footer\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_alignParentBottom=\"true\"\r\n android:background=\"#FC0\"\r\n android:gravity=\"center\" >\r\n\r\n <TextView\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_margin=\"5dp\"\r\n android:text=\"Fixed Footer\"\r\n android:textColor=\"#000\"\r\n android:textSize=\"20sp\" \/>\r\n <\/RelativeLayout><\/pre>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n android:id=\"@+id\/footer\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_alignParentBottom=\"true\"\r\n android:background=\"#FC0\"\r\n android:gravity=\"center\" >\r\n\r\n <TextView\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_margin=\"5dp\"\r\n android:text=\"Fixed Footer\"\r\n android:textColor=\"#000\"\r\n android:textSize=\"20sp\" \/>\r\n\r\n<\/RelativeLayout><\/pre>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\" >\r\n\r\n <!-- Header aligned to top -->\r\n\r\n <include layout=\"@layout\/header\" \/>\r\n\r\n <!-- Footer aligned to bottom -->\r\n\r\n <include layout=\"@layout\/footer\" \/>\r\n\r\n <!-- Content below header and above footer -->\r\n\r\n <RelativeLayout\r\n android:id=\"@+id\/content\"\r\n android:layout_width=\"fill_parent\"\r\n android:layout_height=\"fill_parent\"\r\n android:layout_above=\"@id\/footer\"\r\n android:layout_below=\"@id\/header\"\r\n android:gravity=\"center\" >\r\n\r\n <TextView\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:text=\"Content\"\r\n android:textColor=\"#33E\"\r\n android:textSize=\"20sp\" \/>\r\n <\/RelativeLayout>\r\n\r\n<\/RelativeLayout><\/pre>\n
<include layout=\"@layout\/header\" \/><\/code> to include the header and <include layout=\"@layout\/footer\" \/><\/code> (header<\/code> and footer<\/code> must correspond to the names you gave to the respective XML Layout files)<\/p>\nRun the application<\/h2>\n
<\/a><\/p>\nDownload Eclipse Project<\/h3>\n
\n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"