Tag Archives: layout

Video, Xamarin & C#

Add a relative layout to an Android screen in Xamarin

In the tutorials so far, we have been designing Android app screens in Xamarin using a Linear Layout. A Linear Layout basically arranges buttons, text views, text fields and other elements within boundaries. These elements are usually stacked. However, Relative Layouts allow us to position elements relative to each other.

image11

Note: If you change to a Relative Layout, you will need to add elements to your screen through code instead of dragging and dropping items on from the toolbox. It is best to drag all of the elements on that you need (eg. buttons, text boxes), and then switch to a relative layout.

This tutorial assumes you already know how to create an Android app project in Xamarin. If you don’t know how to, then go back to the first tutorial.

Step 1

Open the Main.axml file (in the Resources > layouts folder) for your Android app in Xamarin. Drag a few elements on to your screen (eg. three buttons as shown below).

image4

Step 2

Click on the Source tab. Remove any gravity properties from the linear layout and remove the android:orientation=”vertical” line. Where the code says LinearLayout, replace it with RelativeLayout (both in the opening and closing tags).

image5

Go back to the Designer view and you will notice that all of the buttons are now on top of each other.

image6

Step 3

Go back to the Source tab and start typing a new line inside the Button tag for the first button. Start typing layout and you will see many options to select from. Select the android:layout_below option by double-clicking it or press Enter.

image7

Complete the line by typing android:layout_below=”@id/button1” and then close the button tag using />  …this will set the second button to be positioned below the first button. Do the same for the third button but set it so it is placed under the second button (replace @id/button1 or @id/button2 with the names of your buttons/elements).

image8

Now go back to the Designer view and you should see the three buttons placed below each other as shown below.

image9

Experiment with the different layout options from the list, for example layout_toRightof will place an element to the right side of another element.

image10

This is what the screen will look like when button2 is set to be placed to the right of button1.

image11

That’s it! You can use different combinations of layout properties to arrange the elements on your screen and position each element in relation to other elements.

InDesign, Video

Getting started with Adobe InDesign

This tutorial explains how to prepare your work files and folders, set up your documents and how to modify page layouts and columns. You will also learn how to organise your projects, arrange pages, import images, add text and use some of the drawing and shape tools.

Watch the video below and then try out InDesign for yourself.

HTML5 and CSS3, Video

Creating a single-column CSS layout

This tutorial will use what we already know about HTML and CSS from the previous tutorials and introduce a couple of new concepts in order to create a basic layout for a web page.

In this tutorial we will use the following CSS properties that we looked at in the previous tutorial:

      • float property – with the float property, an element can be pushed to the left or right letting other elements on the web page wrap around it. It is often used to arrange images and for div layouts.
      • clear property – with the clear property, we can specify which side or sides of an element that are floating elements aren’t allowed to be. The float property can be set to none, left, right, both, or inherit (inherit from the parent element). Setting the clear property to ‘both’ for a div means that no other floating divs can be to the left or the right of this div.

    For this tutorial we will make a web page with a header, a navigation sidebar (or menu), the main content section, and a footer. The layout will look something like this:

    CSS layout
    The layout contains four divs: header, nav, section, and footer.

    Watch the video below and then scroll down to check out the sample HTML and CSS code.

    Here is the HTML code for the web page. There are four divs with the IDs header, nav, section, and footer. The CSS external stylesheet is in a resources directory and is called theme.css.

    <!DOCTYPE html>
<html>
<head>
 <title>Basic CSS Layout</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/theme.css" type="text/css"/>
</head>
<body>
 
<div id="header">
 <h1>My website</h1>
</div>
 
<div id="nav">
 <a href="#">Home</a><br>
 <a href="#">About</a><br>
 <a href="#">Products</a><br>
 <a href="#">Support</a><br>
 <a href="#">Contact us</a><br>
</div>
 
<div id="section">
 <h2>Welcome to my website</h2>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
 
<div id="footer">
 Copyright....2015.
</div>
</body>
</html>

    And here is the CSS code in the external stylesheet.

    #header{
 background-color:#0C60CE;
 color:#FFFFFF;
 text-align:center;
 padding:5px;
}
 
#nav{
 line-height:25px;
 background-color:#7D9DC7;
 height:300px;
 width:150px;
 float:left;
 padding:5px;
}
 
#section{
 width:500px;
 float:left;
 padding:10px;
}
 
#footer{
 background-color:#0C60CE;
 color:#FFFFFF;
 clear:both;
 text-align:center;
 padding:20px;
}

    Tips:

    • You already know how to add background images to a div or body of a web page. Why not use an image for your header div’s background instead? Or try using gradients (something we will look at in a later tutorial).
    • Try adding a sidebar to the right and try using buttons for the menu instead of boring text links.
    • If you don’t know what a div is, then you’ve skipped some tutorials – go back here 😉
    HTML & CSS

    HTML & CSS Layout Template

    You can use the code below to set up an HTML document with a CSS layout including header, footer, sidebar, horizontal navigation menu, and single-column main content area.

    Here is a preview of what the template looks like. Click on the image to see a demo page.

     

    You can copy and paste the source code below into your own HTML file and save it as yourfilename.html before viewing it in a browser.

    <html lang="en">
<head>
<meta charset="utf-8"/>
<title>My page title</title>
<!-- This is a basic HTML template with a CSS layout -->
<style>
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 color:#333
}
 
p {
 padding: 10px;
}
 
#wrapper {
 margin: 0 auto;
 width: 1000px;
}
 
#header {
 float: left;
 height: 75px;
 width: 1000px;
 background: #6352FF;
}
 
#menu {
 float: left;
 height: 40px;
 width: 1000px;
 background: #96C7FF;
}
 
#content {
 float: left;
 background: #FFFFFF;
 width: 850px;
}
 
#leftcolumn {
 background: #C9D8FF;
 width: 150px;
 float: left;
}
 
#footer {
 height: 40px;
 width: 1000px;
 background: #6352FF;
 clear: both;
}
 
ul#menutabs {
list-style: none;
margin: 0;
padding: 8px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap
}
ul#menutabs li {
display: inline;
margin: 0 3px;
}
ul#menutabs a {
text-decoration: none;
padding: 0 0 3px;
border-bottom: 2px solid #FFF;
color: #8D9091;
 }
ul#menutabs a#current {
border-color: #0024B5;
color:#0029CC
}
ul#menutabs a:hover {
border-color: #0024B5;
color: #666
}
 
 
</style>
</head>
<body>
 <div id="wrapper">
 <div id="header">
 <h1>This is the Header</h1>
 </div>
 <div id="menu">
 <ul id="menutabs">
 <li><a id="current" href="#">Home</a></li>
 <li><a href="link1.html">Link 1</a></li>
 <li><a href="link2.html">Link 2</a></li>
 <li><a href="link3.html">Link 3</a></li>
 <li><a href="link4.html">Link 4</a></li>
</ul>
 </div>
 <div id="leftcolumn">
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 </div>
 <div id="content">
 <p>The main content goes here.</p>
 <p>The main content goes here.</p>
 <p>The main content goes here.</p>
 <p>The main content goes here.</p>
 </div>
 <div id="footer">
 <p>This is the Footer</p>
 </div>
 </div>
</body>
</html>