{"id":36,"date":"2013-05-07T15:54:48","date_gmt":"2013-05-07T15:54:48","guid":{"rendered":"https:\/\/code4reference.com\/?p=36"},"modified":"2013-05-07T15:54:48","modified_gmt":"2013-05-07T15:54:48","slug":"code4referenceandroid-orientation-specific-layouts","status":"publish","type":"post","link":"https:\/\/code4reference.com\/?p=36","title":{"rendered":"Code4ReferenceAndroid orientation specific layouts"},"content":{"rendered":"<p>Sometimes the same layout doesn\u2019t scale well for both the orientations i.e landscape and portrait. It\u2019s always suggested to have different layout file for different screen orientation. Managing two layout for different orientations is quite easy. You can manage in two different ways.<\/p>\n<ol>\n<li>By using resource\/layout folder.<\/li>\n<li>By dynamically set the layout.<\/li>\n<\/ol>\n<h2>resource\/layout folder<\/h2>\n<p>This is the preferred way of managing the layouts. By convention, Android expects landscape specific layout file in <code>res\/layout-land<\/code> and portrait layout file in <code>res\/layout-port<\/code>.<\/p>\n<h2>Dynamically set the layout<\/h2>\n<p><code>Configuration<\/code> class helps to determine the current orientation. <code>Configuration<\/code> class object is being passed as an argument in <code>onConfigurationChanged<\/code> method. This method is a callback method and gets called whenever there is change in configuration specified in the Activity attribute in AndroidManifest.xml file. This <code>android:configChanges<\/code> attribute should be set to <code>orientation<\/code> in the Manifest file. If you don\u2019t include this attribute in Android Manifest file, then the <code>onConfigurationChanged<\/code> will not get invoked when there is change in the orientation.<\/p>\n<h2>Restricted layout<\/h2>\n<p>Sometimes we may need to restrict the layout to specific orientation. For example, if you are displaying a list of items, then you would prefer to display in portrait mode because here more number of list items can be displayed as compared to landscape mode. You can restrict the activity layout to the portrait mode with the help of <code>android:screenOrientation<\/code> attribute. You can notice this attribute in the AndroidManifest.xml file below. This attribute <code>android:screenOrientation=\"landscape\"<\/code> of activity will restrict the activity in landscape mode whereas <code>android:screenOrientation=\"portrait\"<\/code> will restrict the activity in Portrait mode. When you define this attribute in the AndroidManifest file, make sure to put the xml layout file in <code>res\/layout<\/code> folder.<\/p>\n<h3>Source code<\/h3>\n<p>Create a project, give an appropriate project and package name for this project. In the main layout file add three buttons. These three buttons will launch different Activities and these Activities handle layout in a specific way. Attach <code>onClick<\/code> method to each button.<\/p>\n<pre>\n\n    \n\n\n\n\n<\/pre>\n<p>Define the <code>MainActivity<\/code> class which contains <code>OnClick()<\/code> methods\u2019 definition.<\/p>\n<pre>\npackage com.code4reference.orientationspecificlayout;\n\nimport android.app.Activity;\nimport android.content.Intent;\nimport android.os.Bundle;\nimport android.view.View;\n\npublic class MainActivity extends Activity {\n    \n    @Override\n    public void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n    }\n    \n    \/**\n     *Starts Automatic Orientation detection Activity.  \n     * @param view\n     *\/\n    public void autoOrientationDetection(View view){\n        Intent intent = new Intent(this, AutomaticOrientation.class);\n        startActivity(intent);\n    }\n    \/**\n     * Starts the dynamic orientation detection Activity.\n     * @param view\n     *\/\n    public void dynamicOrientationDetection(View view){\n        Intent intent = new Intent(this, DynamicOrientationDetection.class);\n        startActivity(intent);\n    }\n    \/**\n     * Starts the activity which has restricted layout.\n     * @param view\n     *\/\n    public void restrictedOrientation(View view){\n        Intent intent = new Intent(this, RestrictedOrientation.class);\n        startActivity(intent);\n    }\n    \n}\n\n<\/pre>\n<p>Create a layout file named <code>activity_automatic.xml<\/code> in <code>res\/layout-land<\/code>. This layout file is landscape specific and gets automatically picked up when the phone is in landscape orientation.<\/p>\n<pre>\n\n\n    \n\n\n\n<\/pre>\n<p>Now create another layout file with the same name(<code>activity_automatic.xml<\/code>) in <code>res\/layout-port<\/code> folder. Notice that the different values have been set for color and text of the <code>TextView<\/code> in these layout files.<\/p>\n<pre>\n\n\n    \n\n\n<\/pre>\n<p>Create another class called <code>AutomationOrientation<\/code> which extends <code>Activity<\/code> class. In this class we just set the view of the Activity with the layout file.<\/p>\n<pre>\npackage com.code4reference.orientationspecificlayout;\n\nimport android.app.Activity;\nimport android.os.Bundle;\n\npublic class AutomaticOrientation extends Activity {\n\n        @Override\n        protected void onCreate(Bundle savedInstanceState) {\n                super.onCreate(savedInstanceState);\n                setContentView(R.layout.activity_automatic);\n        }\n\n}\n<\/pre>\n<p>Now, create the landscape and portrait layout files which will be selected and populated programmatically. In this part, we are going to detect the orientation of the phone and manually set the appropriate layout. As you can notice, I have named the layout files as <code>activity_dynamic_land.xml<\/code> and <code>activity_dynamic_port.xml<\/code>. These layout files are same as the above counterparts.<\/p>\n<pre>\n\n\n    \n\n\n<\/pre>\n<pre>\n\n\n    \n\n\n<\/pre>\n<p>Now define the <code>DynamicOrientationDetection<\/code> class which detects the current orientation and set the appropriate view with help of layout file. Notice that <code>onConfigurationChanged<\/code> method has been overridden in the class. This method gets called when the specified configuration changes for the activity. As you will notice <code>android:configChanges=\"orientation\"<\/code> has been added in the AndroidManifest.xml file while including the <code>DynamicOrientationDetection<\/code> class. Now whenever orientation changes, the <code>onConfigurationChanged<\/code> method gets called.<\/p>\n<pre>\npackage com.code4reference.orientationspecificlayout;\n\nimport android.app.Activity;\nimport android.content.res.Configuration;\nimport android.os.Bundle;\n\npublic class DynamicOrientationDetection extends Activity {\n\n        @Override\n        protected void onCreate(Bundle savedInstanceState) {\n                super.onCreate(savedInstanceState);\n                \/\/The below code provide the current orientation of the screen.\n                setSpecificLayout(this.getResources().getConfiguration().orientation);\n        }\n    \n        @Override\n        public void onConfigurationChanged(Configuration newConfig) {\n                super.onConfigurationChanged(newConfig);\n                setSpecificLayout(newConfig.orientation);\n        }\n        \n        \/**\n         * Set the specific layout based on the orientation.\n         * @param orientation\n         *\/\n        public void setSpecificLayout(int orientation){\n                \/\/Based on the current orientation, the specific \n                \/\/layout is set.\n        if (orientation == Configuration.ORIENTATION_LANDSCAPE){\n                setContentView(R.layout.activity_dynamic_land);\n        }\n        else if (orientation == Configuration.ORIENTATION_PORTRAIT){\n                setContentView(R.layout.activity_dynamic_port);\n        }\n    }\n}\n\n<\/pre>\n<p>We are going to restrict the orientation of the Activity below in landscape mode by defining this attribute <code>android:screenOrientation=\"landscape\"<\/code> in <code>AnroidManifest.xml<\/code> file. Define the layout file in <code>res\/layout<\/code><\/p>\n<pre>\n\n    \n\n\n<\/pre>\n<p>Define the <code>RestrictedOrientation<\/code> and set the layout in <code>onCreate<\/code> method.<\/p>\n<pre>\npackage com.code4reference.orientationspecificlayout;\n\nimport android.app.Activity;\nimport android.os.Bundle;\n\npublic class RestrictedOrientation extends Activity {\n\n        @Override\n        protected void onCreate(Bundle savedInstanceState) {\n                super.onCreate(savedInstanceState);\n                setContentView(R.layout.activity_restricted);\n        }\n\n}\n\n<\/pre>\n<p>After adding the three Activities in it, the AndroidManifest.xml file should look similar to the one given below:<\/p>\n<pre>\n\n\n    \n\n    \n        \n            \n                  \n                \n            \n        \n         \n            \n                \n            \n        \n        \n            \n                \n            \n        \n        \n         \n            \n                \n            \n        \n    \n\n\n<\/pre>\n<p>Once you are done with coding, just execute the project and you will see the application as shown below.<br \/>\nYou can download the source code from <a href=\"http:\/\/github.com\/rakeshcusat\/Code4Reference\/tree\/master\/AndroidProjects\/OrientationSpecificLayout\">github\/Code4Reference<\/a><\/p>\n<table>\n<tr>\n<td><img alt='orientation-options-app-5497264' src='https:\/\/code4reference.com\/wp-content\/uploads\/2013\/05\/orientation-options-app-5497264.png' \/><\/td>\n<td><img alt='portrait-orientation-specific-layout-2037535' src='https:\/\/code4reference.com\/wp-content\/uploads\/2013\/05\/portrait-orientation-specific-layout-2037535.png' \/><\/td>\n<\/tr>\n<tr>\n<th><img alt='landscape-orientation-specific-layout-2123246' src='https:\/\/code4reference.com\/wp-content\/uploads\/2013\/05\/landscape-orientation-specific-layout-2123246.png' \/><\/th>\n<\/tr>\n<\/table>\n<p>Please feel free to leave comments about post or website.Thanks <img alt='icon_wink-3366201' src='https:\/\/code4reference.com\/wp-content\/uploads\/2013\/05\/icon_wink-3366201.gif' \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes the same layout doesn\u2019t scale well for both the orientations i.e landscape and portrait. It\u2019s always suggested to have different layout file for different screen orientation. Managing two layout for different orientations is quite easy. You can manage in two different ways. By using resource\/layout folder. By dynamically set the layout. resource\/layout folder This [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-36","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/code4reference.com\/index.php?rest_route=\/wp\/v2\/posts\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4reference.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4reference.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4reference.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code4reference.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=36"}],"version-history":[{"count":0,"href":"https:\/\/code4reference.com\/index.php?rest_route=\/wp\/v2\/posts\/36\/revisions"}],"wp:attachment":[{"href":"https:\/\/code4reference.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4reference.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4reference.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}