15
Rajab Davudov Android UI Design: Layouts

Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Embed Size (px)

Citation preview

Page 1: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Rajab Davudov

Android UI Design: Layouts

Page 2: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

What is a Layout ?

• A type of resource that defines what is drawn on the screen.

• A type of View class whose primary purpose is to organize other controls.

Page 3: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Why a Layout ?

• More than 300 devices with different

– Screen sizes and dimensions– Screen densities– Android versions– OEM skins– Control interfaces

Page 4: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Android Layouts

• LinearLayout• RelativeLayout• TableLayout• FrameLayout• AbsoluteLayout• …

Page 5: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Linear Layout

In a linear layout, like the name suggests, all the elements are displayed in a linear fashion(below is an example of the linear layouts), either Horizontally or Vertically and this behavior is set in android:orientation which is an attribute of the node LinearLayout.

<LinearLayout android:orientation="vertical"> .... </LinearLayout>OR<LinearLayout android:orientation=“horizontal"> .... </LinearLayout>

Page 6: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Linear Layout

Page 7: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Relative Layout

In a relative layout every element arranges itself relative to other elements or a parent element.

As an example, lets consider the layout defined below. The “Cancel” button is placed relatively, to the right of the “Login” button parallel. Here is the code snippet that achieves the mentioned alignment (Right of Login button parallel)

Page 8: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Relative Layout

Page 9: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Table Layout

Table layouts in Android works in the same way HTML table layouts work. You can divide your layouts into rows and columns. Its very easy to understand. The image below should give you an idea

Page 10: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Table Layout

Page 11: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Absolute Layout

Non-professional and not recommended layout !!!

Page 12: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Custom Layout Resource

• res/– layout/– layout-land/– layout-xlarge-v11/– layout-xlarge-land-v11/

Page 13: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Density Independent Pixels

• dp or dip

Page 14: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Think, Design, Code !!!

Page 15: Rajab Davudov. What is a Layout ? A type of resource that defines what is drawn on the screen. A type of View class whose primary purpose is to organize

Rajab Davudov

Senior Developer at [email protected]

https://market.android.com/developer?pub=RADJAB

http://gplus.to/radjab

http://www.fb.me/rajab.davudov

http://www.linkedin.com/in/radjab

Market QR Code