android erası 2 - ui və layoutlar
TRANSCRIPT
![Page 1: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/1.jpg)
Rajab Davudov
Android UI Design: Layouts
![Page 2: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/2.jpg)
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: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/3.jpg)
Why a Layout ?
• More than 300 devices with different
– Screen sizes and dimensions– Screen densities– Android versions– OEM skins– Control interfaces
![Page 4: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/4.jpg)
Android Layouts
• LinearLayout• RelativeLayout• TableLayout• FrameLayout• AbsoluteLayout• …
![Page 5: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/5.jpg)
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: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/6.jpg)
Linear Layout
![Page 7: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/7.jpg)
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: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/8.jpg)
Relative Layout
![Page 9: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/9.jpg)
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: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/10.jpg)
Table Layout
![Page 11: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/11.jpg)
Absolute Layout
Non-professional and not recommended layout !!!
![Page 12: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/12.jpg)
Custom Layout Resource
• res/– layout/– layout-land/– layout-xlarge-v11/– layout-xlarge-land-v11/
![Page 13: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/13.jpg)
Density Independent Pixels
• dp or dip
![Page 14: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/14.jpg)
Think, Design, Code !!!
![Page 15: Android Erası 2 - UI və layoutlar](https://reader034.vdocuments.net/reader034/viewer/2022052523/555ac7e7d8b42a761a8b4f29/html5/thumbnails/15.jpg)
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