{"id":252,"date":"2017-01-21T05:53:28","date_gmt":"2017-01-21T05:53:28","guid":{"rendered":"http:\/\/abhiandroid.com\/materialdesign\/?page_id=252"},"modified":"2019-06-13T10:03:39","modified_gmt":"2019-06-13T10:03:39","slug":"percentframelayout","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/materialdesign\/percentframelayout","title":{"rendered":"PercentFrameLayout Tutorial With Example In Android Studio"},"content":{"rendered":"

In Android PercentFrameLayout is a subclass of FrameLayout that supports percentage based margin and dimensions for Views(Button, TextView or any other view).<\/p>\n

PercentFrameLayout class extends from FrameLayout class so it supports all the features, attributes of FrameLayout and it has percentage dimensions so it also supports some features of Linear Layout. In Simple words we can say that PercentFrameLayout has features of both Layouts with reduced view complexity.<\/p>\n

Percent Support Library:<\/strong><\/span> Percent Support Library provides feature to set the dimensions and margins in the term of Percentage. It has two pre built Layouts- the PercentFrameLayout and PercentRelativeLayout<\/a>. This library is pretty easy to use because it has same Relative Layout and Frame Layout that we are familiar with, just with some additional new features. In this article we only discuss\u00a0PercentFrameLayout.<\/p>\n

Important Note \u2013<\/strong>\u00a0\u00a0To use PercentFrameLayout first include\u00a0Percent Support Library dependency file in build.grade(Module: app).<\/p>\n

Gradle Scripts > build.gradle (Module:App) -> inside dependencies<\/span><\/strong><\/p>\n

dependencies {\r\ncompile 'com.android.support:percent:23.3.0'\r\n}\r\n<\/pre>\n
Need of PercentFrameLayout:<\/strong><\/h4>\n
In Android there are lot of Layout’s that can be used at the time of development but at last we ends up with our main three layouts LinearLayout, RelativeLayout and FrameLayout. In many situations\u00a0when\u00a0we need to create complex view then we use weight property of LinearLayout to distribute view across screens. But while using weight property we must have noticed that we have to add a default container view to encapsulate our child view. We can follow this approach but it adds an additional view hierarchy in our layout’s which is of no use except holding weight sum value and child view. After the introduction of PercentFrameLayout we can put percentage dimension and margins to our view that helps us to remove the problem of existing FrameLayout.<\/p>\n
Short Description About FrameLayout In Android:<\/strong><\/span><\/p>\n
In Android Frame Layout is one of the simplest layout used to organize view controls. It is designed to block an area on the screen. Frame Layout should be used to hold child view, because it can be difficult to display single views at a specific area on the screen without overlapping each other. You can read full FrameLayout tutorial here<\/a>.<\/p>\n
Important<\/b><\/span>\u00a0Note:<\/strong><\/p>\n
In PercentFrameLayout, it is not necessary to specify layout_width and layout_height attributes if we specify layout_widthPercent attribute. If in case we want the view to be able to take up more space than what percentage value permits then we can add layout_width and layout_height attributes with wrap_content value. In that case if the size of content is larger than percentage size then it will be automatically resized using wrap_content rule. If we don’t use layout_height and layout_width attribute then Android Studio shows us an error marker on element in the editor but it will be automatically ignored at runtime.<\/p>\n
Basic PercentFrameLayout XML Code:<\/strong><\/span><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentFrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <!-- Add Child View's Here... -->\r\n<\/android.support.percent.PercentFrameLayout>\r\n<\/pre>\n
\n
Attributes of PercentFrameLayout:<\/strong><\/h4>\n
Now let\u2019s we discuss some common attributes of a PercentFrameLayout that helps us to configure it in our layout (xml). It supports all the attributes of FrameLayout but here we are only discuss some additional attributes.<\/p>\n
Important Note –<\/strong><\/span> Before using below code please include Percent Support Library dependency file in build.grade(Module: app).<\/p>\n
Gradle Scripts > build.gradle (Module:App) -> inside dependencies<\/span><\/strong><\/p>\n
dependencies {\r\ncompile 'com.android.support:percent:23.3.0'\r\n}<\/pre>\n
1. layout_widthPercent:<\/strong><\/span> This attribute is used to set the width of the view in percentage.<\/p>\n
Below we set 50% value for the widthPercent and wrap_content value for the height of the TextView.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentFrameLayout\r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <TextView\r\n        app:layout_widthPercent=\"50%\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:textColor=\"#000\"\r\n        android:textSize=\"20sp\"\r\n        android:text=\"AbhiAndroid\" \/>\r\n<\/android.support.percent.PercentFrameLayout>\r\n<\/pre>\n
\"PercentFrameLayout
\n2. layout_heightPercent:<\/strong> <\/span>This attribute is used to set the height of the view in percentage.
\nBelow we set 20% value for the heightPercent and wrap_content value for the width of the TextView.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentFrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:text=\"AbhiAndroid\"\r\n        android:textColor=\"#000\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_heightPercent=\"20%\" \/>\r\n<\/android.support.percent.PercentFrameLayout>\r\n<\/pre>\n
\"PercentFrameLayout<\/p>\n
3. layout_marginPercent:<\/strong><\/span> This attribute is used to set the margin for view in term of percentage. This attribute set the same margin from all the sides.
\nBelow we set wrap_content vlaue for height and width and 20% margin from all the sides of TextView.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentFrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"AbhiAndroid\"\r\n        android:textColor=\"#000\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_marginPercent=\"20%\" \/>\r\n<\/android.support.percent.PercentFrameLayout>\r\n<\/pre>\n
\"PercentFrameLayout
\n4. layout_marginLeftPercent:<\/strong> <\/span>This attribute is used to set the percentage margin to the left side of the view.<\/p>\n
Below we set wrap_content value for height and width and 15% margin to the left side of the TextView.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentFrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"AbhiAndroid\"\r\n        android:textColor=\"#000\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_marginLeftPercent=\"15%\" \/>\r\n<\/android.support.percent.PercentFrameLayout>\r\n<\/pre>\n
\"PercentFrameLayout
\n5. layout_marginTopPercent:<\/strong><\/span> This attribute is used to set the percentage margin to the top side of the view.<\/p>\n
Below we set wrap_content value for height and width and 15% margin to the top side of the TextView.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentFrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"AbhiAndroid\"\r\n        android:textColor=\"#000\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_marginTopPercent=\"15%\" \/>\r\n<\/android.support.percent.PercentFrameLayout>\r\n<\/pre>\n
\"PercentFrameLayout
\n6. layout_marginRightPercent:<\/strong><\/span> This attribute is used to set the percentage margin to the right side of the view.<\/p>\n
Below we set wrap_content value for height and width and 15% margin to the right side of the TextView. In this example we set right gravity of TextView so that we can easily check the use of this attribute.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentFrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_gravity=\"right\"\r\n        android:text=\"AbhiAndroid\"\r\n        android:textColor=\"#000\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_marginRightPercent=\"15%\" \/>\r\n<\/android.support.percent.PercentFrameLayout>\r\n<\/pre>\n
\"PercentFrameLayout
\n7. layout_marginBottomPercent:<\/strong><\/span> This attribute is used to set the percentage margin from bottom side of the view.<\/p>\n
Below we set wrap_content value for height and width and 15% margin from the bottom side of the TextView. In this example we set bottom gravity of TextView so that we can easily check the use of this attribute.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentFrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_gravity=\"bottom\"\r\n        android:text=\"AbhiAndroid\"\r\n        android:textColor=\"#000\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_marginBottomPercent=\"10%\" \/>\r\n<\/android.support.percent.PercentFrameLayout>\r\n<\/pre>\n
\"PercentFrameLayout<\/p>\n
\n
PercentFrameLayout Example In Android Studio:<\/strong><\/h4>\n
Below is the example of PercentFrameLayout in which we create a Registration Form with 3 fields User Name, Phone No and Password. In this example we take 3 EditText and 1 Register Button.\u00a0And for these views we set the dimensions and margin in form of percentage. If a user click on the Register Button then a \u201cThank You\u201d message with user name is displayed on the screen with the help of Toast.<\/p>\n
Download Code<\/a> ?<\/a><\/p>\n
\"PercentFrameStep 1:<\/strong><\/span> Create A New Project And Name It PercentFrameLayout<\/p>\n
Step 2<\/strong><\/span>: Open Gradle Scripts > build.gradle and add Percent Support Library dependency.<\/p>\n
apply plugin: 'com.android.application'\r\nandroid {\r\ncompileSdkVersion 24\r\nbuildToolsVersion \"24.0.1\"\r\ndefaultConfig {\r\napplicationId \"abhiandroid.percentframelayout\"\r\nminSdkVersion 16\r\ntargetSdkVersion 24\r\nversionCode 1\r\nversionName \"1.0\"\r\n}\r\nbuildTypes {\r\nrelease {\r\nminifyEnabled false\r\nproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'\r\n}\r\n}\r\n}\r\ndependencies {\r\ncompile fileTree(dir: 'libs', include: ['*.jar'])\r\ntestCompile 'junit:junit:4.12'\r\ncompile 'com.android.support:appcompat-v7:24.1.1'\r\ncompile 'com.android.support:percent:23.3.0' \/\/ Percent Support Library\r\n}\r\n<\/pre>\n
Step 3:<\/strong> <\/span>Open res -> layout -> activity_main.xml (or) main.xml and add following code:
\nIn this Step we take 3 EditText’s and 1 Register Button and for these views we set the dimensions and margin in form of percentage. Note that in all the view’s i didn’t take layout_width attribute and it still works fine. Android Studio shows a error line on element but it will be automatically ignored at runtime.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentFrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:background=\"@drawable\/background\">\r\n<!--\r\n    3 EditText's for user Name, Phone No and Password\r\n-->\r\n    <EditText\r\n        android:id=\"@+id\/userName\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_gravity=\"center_horizontal\"\r\n        android:hint=\"User Name\"\r\n        android:imeOptions=\"actionNext\"\r\n        android:singleLine=\"true\"\r\n        android:textColor=\"#fff\"\r\n        android:textColorHint=\"#fff\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_marginTopPercent=\"15%\"\r\n        app:layout_widthPercent=\"80%\" \/>\r\n    <EditText\r\n        android:id=\"@+id\/phoneNo\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_gravity=\"center_horizontal\"\r\n        android:hint=\"Phone No\"\r\n        android:imeOptions=\"actionNext\"\r\n        android:inputType=\"number\"\r\n        android:singleLine=\"true\"\r\n        android:textColor=\"#fff\"\r\n        android:textColorHint=\"#fff\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_marginTopPercent=\"25%\"\r\n        app:layout_widthPercent=\"80%\" \/>\r\n    <EditText\r\n        android:id=\"@+id\/password\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_gravity=\"center_horizontal\"\r\n        android:hint=\"Password\"\r\n        android:imeOptions=\"actionDone\"\r\n        android:singleLine=\"true\"\r\n        android:textColor=\"#fff\"\r\n        android:textColorHint=\"#fff\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_marginTopPercent=\"34%\"\r\n        app:layout_widthPercent=\"80%\" \/>\r\n    <Button\r\n        android:id=\"@+id\/register\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_gravity=\"center\"\r\n        android:background=\"@color\/colorPrimary\"\r\n        android:text=\"Register\"\r\n        android:textColor=\"#fff\"\r\n        android:textSize=\"20sp\"\r\n        app:layout_widthPercent=\"80%\" \/>\r\n<\/android.support.percent.PercentFrameLayout>\r\n<\/pre>\n
Step 4 :<\/strong> <\/span>Open src -> package -> MainActivity.java<\/p>\n
In this step we open the MainActivity and add the code for initiates the views(EditText and Button). After that we implement setOnClickListener event on Register Button so that whenever a user click on Button a thank you message appear if a user fill all the fields or an error message appear if fields are empty telling user\u00a0‘Please Fill All The Fields’ is displayed on the screen by using a Toast.<\/p>\n
package abhiandroid.percentframelayout;\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.view.View;\r\nimport android.widget.Button;\r\nimport android.widget.EditText;\r\nimport android.widget.Toast;\r\npublic class MainActivity extends AppCompatActivity {\r\nButton register;\r\nEditText userName, phoneNo, password;\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\n\/\/ init the View's\r\nuserName = (EditText) findViewById(R.id.userName);\r\nphoneNo = (EditText) findViewById(R.id.phoneNo);\r\npassword = (EditText) findViewById(R.id.password);\r\nregister = (Button) findViewById(R.id.register);\r\n\/\/ perform setOnClickListener Event on Register Button\r\nregister.setOnClickListener(new View.OnClickListener() {\r\n@Override\r\npublic void onClick(View view) {\r\nif (userName.getText().toString().trim().length() > 0 && phoneNo.getText().toString().trim().length() > 0 && password.getText().toString().trim().length() > 0) {\r\n\/\/ display a thanks you message with user name\r\nToast.makeText(getApplicationContext(), \"Thank You \" + userName.getText().toString(), Toast.LENGTH_SHORT).show();\r\n} else {\r\n\/\/ display an error message that fill user name and password\r\nToast.makeText(getApplicationContext(), \"Please Fill All The Fields.!!\", Toast.LENGTH_SHORT).show();\r\n}\r\n}\r\n});\r\n}\r\n}\r\n<\/pre>\n
Output:<\/strong><\/p>\n
Now run the App and you will see login form which is designed using PercentFrameLayout.<\/p>\n","protected":false},"excerpt":{"rendered":"
In Android PercentFrameLayout is a subclass of FrameLayout that supports percentage based margin and dimensions for Views(Button, TextView or any other view). PercentFrameLayout class extends from FrameLayout class so it supports all the features, attributes of FrameLayout and it has percentage dimensions so it also supports some features of Linear Layout. In Simple words we … Continue reading PercentFrameLayout Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"footnotes":""},"class_list":["post-252","page","type-page","status-publish","hentry"],"psp_head":"PercentFrameLayout Tutorial With Example In Android Studio \u2013 Android Material Design Tutorial<\/title>\r\n<meta name=\"description\" content=\"Complete Tutorial on PercentFrameLayout to show view based on percentage margin with example & source code in Android Studio. In Android PercentFrameLayout is a subclass of FrameLayout that supports percentage based margin and dimensions for Views(Button, TextView or any other view).\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/materialdesign\/percentframelayout\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/252\/revisions"}],"predecessor-version":[{"id":695,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/252\/revisions\/695"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/media?parent=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}