{"id":367,"date":"2015-12-26T12:50:45","date_gmt":"2015-12-26T12:50:45","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=367"},"modified":"2018-07-17T05:14:35","modified_gmt":"2018-07-17T05:14:35","slug":"ui-layout-material","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/","title":{"rendered":"Android UI,Layout &#038; Material Design Tutorial, Examples And Code"},"content":{"rendered":"<p>Android UI designing can be done either in XML or programmatically in application. But the Android UI designer mostly prefer XML for defining UI because it separate the presentation from the code and makes easier to visualize, manage, edit and debug the App.<\/p>\n<p>Here our in depth tutorial will teach you Android UI designing step by step starting with XML basic, layout, widgets and attributes with examples. Following it you will learn different UI Design techniques, patterns &amp; principles and finally we will show you lots of examples where we will discuss designing of different Apps from scratch to finish.<\/p>\n<hr \/>\n<h4><strong>Prerequisites For Designing Android UI:<\/strong><\/h4>\n<p><span style=\"color: #008000;\"><strong>Android Studio And SDK:<\/strong><\/span><\/p>\n<p>Android Studio is the official IDE for developing Android App created by Google. It has a very simple layout editor which support drag and drop for designing UI where one can drag layout, widgets, text fields etc. and drop it on the Virtual mobile screen to design Android UI. It also has the properties option where one can easily fill attribute like color, text etc to give attractive and pretty look to UI. The Studio also has Text option where one can see the XML code of the UI and edit it.<\/p>\n<p>If you are new to it\u00a0then check our <a href=\"\/androidstudio\/\">Android Studio guide<\/a>.<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-385\" src=\"\/ui\/wp-content\/uploads\/2015\/12\/Android-Studio-Layout-Editor.jpg\" alt=\"Android Studio Layout Editor\" width=\"611\" height=\"391\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/Android-Studio-Layout-Editor.jpg 611w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/Android-Studio-Layout-Editor-300x192.jpg 300w\" sizes=\"auto, (max-width: 611px) 100vw, 611px\" \/><\/center><\/p>\n<hr \/>\n<h4><strong>Android Designing Tutorial:<\/strong><\/h4>\n<p>New to Android UI? Begin from here.<\/p>\n<p><span style=\"color: #008000;\"><strong><span style=\"text-decoration: underline;\">XML In Android<\/span><\/strong><\/span><\/p>\n<ul>\n<li>First understand basics of <a href=\"\/ui\/xml\">XML In Android<\/a><\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline; color: #008000;\"><strong>Layout in Android:<\/strong><\/span><\/p>\n<p><strong>Layout &#8211;<\/strong>\u00a0Layout are used to define the actual UI(User interface) of our application. It holds all the elements (i.e. views) or the tools that we want to use in our application. For example,\u00a0<a href=\"\/ui\/textview\" target=\"_self\" data-ail=\"2049\">TextView<\/a>, Button and other UI elements.<\/p>\n<p><strong>Types Of Layout And Few Important ViewGroup In Android<\/strong><\/p>\n<ol>\n<li><a href=\"\/ui\/constraintlayout\">Constraint Layout<\/a><\/li>\n<li><a href=\"\/ui\/linear-layout\">Linear Layout<\/a><\/li>\n<li><a href=\"\/ui\/relative-layout\">Relative Layout<\/a><\/li>\n<li><a href=\"\/ui\/tablelayout\">Table Layout<\/a><\/li>\n<li><a href=\"\/ui\/framelayout\">FrameLayout<\/a><\/li>\n<li><a href=\"\/ui\/absolute-layout\">Absolute Layout<\/a><\/li>\n<li><a href=\"\/ui\/listview\">ListView<\/a><\/li>\n<li><a href=\"\/ui\/gridview\">GridView<\/a><\/li>\n<\/ol>\n<p>Also Read: <a href=\"\/ui\/nesting-of-layouts-android.html\">Nesting Of Layout in Android<\/a><\/p>\n<p><span style=\"text-decoration: underline; color: #008000;\"><strong>Adapter In Android (Very Important To Learn)<\/strong><\/span><\/p>\n<p><a href=\"\/ui\/adapter\">Adapter<\/a> &#8211;\u00a0Adapter acts as\u00a0a bridge between UI component and data source that helps us to fill data in UI component. It holds the data and send the data to an Adapter view then view can takes the data from the adapter view and shows the data on different views like as <a href=\"\/ui\/listview\" target=\"_self\" data-ail=\"999\">ListView<\/a>, <a href=\"\/ui\/gridview\" target=\"_self\" data-ail=\"999\">GridView<\/a>, <a href=\"\/ui\/spinner\" target=\"_self\" data-ail=\"999\">Spinner<\/a> etc.<\/p>\n<p><strong>Different types of Adapter in Android:<\/strong><\/p>\n<ol>\n<li><a href=\"\/ui\/baseadapter-tutorial-example.html\">BaseAdapter<\/a><\/li>\n<li><a href=\"\/ui\/simpleadapter.html\">SimpleAdapter<\/a><\/li>\n<li><a href=\"\/ui\/custom-simpleadapter.html\">Custom SimpleAdapter<\/a><\/li>\n<li><a href=\"\/ui\/arrayadapter-tutorial-example.html\">ArrayAdapter<\/a><\/li>\n<li><a href=\"\/ui\/baseadapter-tutorial-example.html\">BaseAdapter<\/a><\/li>\n<\/ol>\n<p><span style=\"text-decoration: underline; color: #008000;\"><strong>Important Android UI Tutorials<\/strong><\/span><\/p>\n<p>List of all miscellaneous Android UI tutorials<\/p>\n<table style=\"width: 100%;\" border=\"1\">\n<caption>Android UI Tutorial<\/caption>\n<tbody>\n<tr>\n<th>Topics (Follow the link to read tutorial)<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/listview\">ListView<\/a><\/td>\n<td>It\u00a0helps in\u00a0displaying the data in the form of a scrollable list.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/gridview\">GridView<\/a><\/td>\n<td>It display items in two dimensional scrolling grid (rows and columns), the grid items are not necessarily predetermined but they are automatically inserted to the layout using a ListAdapter.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/scrollview\">ScrollView And Horizontal<\/a><\/td>\n<td>It is used to scroll the items in vertical direction and Horizontal ScrollView scroll the items in horizontal direction<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/spinner\">Spinner<\/a><\/td>\n<td>Spinner\u00a0provides a quick way to select one value from a set of values. Android spinners are nothing but the drop down-list seen in other programming languages.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/custom-spinner-examples.html\">Custom Spinner<\/a><\/td>\n<td>When we want to display a spinner item with image, text etc<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/textview\">TextView<\/a><\/td>\n<td>It display\u00a0text to the user<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/edittext\">EditText<\/a><\/td>\n<td>It\u00a0provide an input or text field where user can enter something like his name details, phone number etc<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/button\">Button<\/a><\/td>\n<td>It is a push button\u00a0which\u00a0can be clicked, or pressed by the user to perform an action<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/imageview\">ImageView<\/a><\/td>\n<td>It is\u00a0used to display an image file in application<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/imagebutton\">ImageButton<\/a><\/td>\n<td>It is used to display a normal button with a custom image in a button<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/checkbox\">CheckBox<\/a><\/td>\n<td>It\u00a0is a type of two state button either unchecked or checked in Android. We can use it in\u00a0to take survey in\u00a0Android app where we will\u00a0list few options and allow user to choose using CheckBox.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/switch\">Switch<\/a><\/td>\n<td>It is\u00a0off\/on button which indicate the current state of Switch. It is commonly used in selecting on\/off in Sound, Bluetooth, WiFi etc.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/radiobutton\">RadioButton And RadioGroup<\/a><\/td>\n<td>In Android, RadioButton are mainly used together in a RadioGroup. In RadioGroup checking the one radiobutton out of several radio button added\u00a0in it will automatically unchecked all the others.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/ratingbar\">RatingBar<\/a><\/td>\n<td>It is\u00a0used to get the rating from the app user.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/webview\">WebView<\/a><\/td>\n<td>It is\u00a0a view which is used to display the web pages in application.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/autocompletetextview\">AutoCompleteTextView<\/a><\/td>\n<td>It is a view i.e similar to <a href=\"\/ui\/edittext\">EditText<\/a>, except that it displays a list of completion suggestions automatically while the user is typing.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/multiautocompletetextview\">MultiAutoCompleteTextView<\/a><\/td>\n<td>MultiAutoCompleteTextView is similar to AutoCompleteTextView except that it can hold multiple string words value at single time<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/progressbar\">ProgressBar<\/a><\/td>\n<td>It is\u00a0used to display the status of work being done like analyzing status of work or downloading a file etc.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/timepicker\">Timepicker<\/a><\/td>\n<td>It\u00a0is a widget used for selecting the time of the day in either AM\/PM mode or 24 hours mode<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/datepicker\">DatePicker<\/a><\/td>\n<td>It is\u00a0a widget used to select a date\u00a0by day, month and year<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/calendarview\">Calendar View<\/a><\/td>\n<td>It\u00a0is used for displaying Calendar and selecting dates<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/analogclock-digitalclock-textclock\">AnalogClock, DigitalClock And TextClock<\/a><\/td>\n<td>AnalogClock is a two handed clock one for hour indicator and the other for minute indicator and DigitalClock &amp; TextClock both looks like your normal digital watch on hand which displays the hours minutes and seconds in digital format<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/seekbar\">SeekBar<\/a><\/td>\n<td>It\u00a0is an extension of <a href=\"\/ui\/progressbar\" target=\"_self\" data-ail=\"1079\">ProgressBar<\/a> that adds a draggable thumb, a user can touch the thumb and drag left or right to set the value for current progress<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/expandablelistview\">ExpandableListView<\/a><\/td>\n<td>It is\u00a0a View that shows items in a vertically scrolling two level list<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/chronometer\">Chronometer<\/a><\/td>\n<td>It\u00a0implements a simple timer<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/zoomcontrols\">ZoomControls<\/a><\/td>\n<td>It display simple set of controls that is used for zooming and provides callback to register for events<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/checkedtextview\">CheckedTextView<\/a><\/td>\n<td>It is an extension of normal <a href=\"\/ui\/textview\" target=\"_self\" data-ail=\"1447\">TextView<\/a> that supports the checkable <a href=\"\/java\/interface\" target=\"_self\" data-ail=\"1447\">interface<\/a> and displays it<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/videoview\">VideoView<\/a><\/td>\n<td>It is used to\u00a0display a video file<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/tabhost\">TabHost<\/a><\/td>\n<td>It is\u00a0a Container for tabbed window view.\u00a0Whenever we need to enter or display a lot of information in one activity. A simple and effective method is to use tabs in your interface form which is done using TabHost in Android.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/searchview\">SearchView<\/a><\/td>\n<td>It provide search user interface where users can enter a search query and then submit a request to search provider<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/slidingdrawer\">SlidingDrawer<\/a><\/td>\n<td>It is used to hide the content out of the screen and allows the user to drag a handle to bring the content on screen<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/textswitcher\">TextSwitcher<\/a><\/td>\n<td>It is\u00a0used to animate a label(i.e. text) on screen<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/viewswitcher\">ViewSwitcher<\/a><\/td>\n<td>It is used for switching between views which can hold only two child views for switching<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/viewflipper\">ViewFlipper<\/a><\/td>\n<td>ViewSwitcher can hold\u00a0only two\u00a0child views but\u00a0ViewFlipper can holds two or more child views and show one at a time<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/viewstub\">ViewStub<\/a><\/td>\n<td>It is a\u00a0zero sized invisible View that can be used to lazily inflate layout resource at runtime<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/gallery\">Gallery<\/a><\/td>\n<td>It is a view used to show items in a center locked, horizontally scrolling list and user will select a view and\u00a0then user selected view will be shown in the center of the Horizontal list<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/countdown-timer\">CountDownTimer<\/a><\/td>\n<td>CountDownTimer in Android is used to\u00a0set a countdown based on interval\u00a0set by you and it will stop when the time has come in future.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/alertdialog\">Alert Dialog<\/a><\/td>\n<td>Alert Dialog in an android UI prompts a small window to make decision on mobile screen. Sometimes before making a decision it is required to give an alert to the user without moving to next activity.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/progressdialog\">ProgressDialog<\/a><\/td>\n<td>Android Progress Dialog is a UI which shows the progress of a task like you want user to wait until the previous lined up task is completed and for that purpose you can use progress dialog.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/ui\/html\">HTML in Android<\/a><\/td>\n<td>In Android, many times while designing an application we might be in a situation where we would like to use HTML content and display in our App screen. It may be to display some static content like help, support, FAQ and others pages.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4><strong>What&#8217;s Next Tutorial To Learn:<\/strong><\/h4>\n<ul>\n<li><a href=\"\/materialdesign\/\">Learn Android Material Design<\/a><\/li>\n<li><a href=\"\/programming\/\">Advance Android Programming Tutorial<\/a><\/li>\n<li><a href=\"\/createandroidapp\/\">Tutorial To Create Android App In Android Studio [Step by Step]<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Android UI designing can be done either in XML or programmatically in application. But the Android UI designer mostly prefer XML for defining UI because it separate the presentation from the code and makes easier to visualize, manage, edit and debug the App. Here our in depth tutorial will teach you Android UI designing step &hellip; <a href=\"https:\/\/abhiandroid.com\/ui\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Android UI,Layout &#038; Material Design Tutorial, Examples And Code<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home_posts.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-367","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"<title>Android UI And Layout Design Tutorial, Examples And Code \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"In depth Tutorial with examples on Android UI layout, adapter, viewgroup and view to design awesome UI step by step in Android Studio.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=367"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/367\/revisions"}],"predecessor-version":[{"id":2748,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/367\/revisions\/2748"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}