Skip to main content

Android percent support library sample (Android)

In this post I'm gonna show you guys a demo of percent layout of android from support library. Since many a time in our awesome RelativeLayout we insert LinearLayout just to get the property of layout_weight for accessing.

 Now android has a new support library to remove this dependencies. Refer


 Before beginning some pre-requestic (at the time for development):

 Android SDK v22
Android Build Tools v22.0.1
Android Percent Support Repository v23.0.0

Android Support appcompat-v7:22.2.1

 So let's get started:

Step 1: Add below line into apps build.gradle.
compile 'com.android.support:percent:23.0.0'
Step 2:  Add any one of below as the parent of the layout.Its similar to our RelativeLayout or FrameLayout.

 
<android.support.percent.PercentRelativeLayout> 
or
<android.support.percent.PercentFrameLayout>
Step 3: Now we gonna use layout_heightPercent and layout_widthPercent  property's to specify our height and width in percentage.

 Consider this simple layout.
Layout design:
<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/idRL_Header"
        android:layout_height="0dp"
        android:layout_width="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="100%"
        android:background="@color/colorPrimaryDark">

        <TextView
            android:id="@+id/idHeader"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Dashboard"
            android:layout_marginTop="10dp"
            android:textColor="@color/colorWhite"
            android:gravity="center"
            android:textSize="@dimen/txt_size_dash_header"
            android:fontFamily="cursive"
            android:textStyle="bold"/>

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/idRL_Logo"
        android:layout_below="@+id/idRL_Header"
        android:layout_height="0dp"
        android:layout_width="0dp"
        app:layout_heightPercent="40%"
        app:layout_widthPercent="100%"
        android:gravity="center"
        android:background="@color/colorAccent">

        <android.support.percent.PercentRelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center">

            <ImageView
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_heightPercent="75%"
                app:layout_widthPercent="75%"
                android:background="@drawable/percent"/>

        </android.support.percent.PercentRelativeLayout>

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/idRL_Menu"
        android:layout_below="@+id/idRL_Logo"
        android:layout_height="0dp"
        android:layout_width="0dp"
        app:layout_heightPercent="40%"
        app:layout_widthPercent="100%">

        <android.support.percent.PercentRelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RelativeLayout
                android:id="@+id/idRL_RowOne"
                android:layout_height="0dp"
                android:layout_width="0dp"
                app:layout_heightPercent="50%"
                app:layout_widthPercent="100%">

                <android.support.percent.PercentRelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <RelativeLayout
                        android:id="@+id/idRR_MenuOne"
                        android:layout_height="0dp"
                        android:layout_width="0dp"
                        app:layout_heightPercent="100%"
                        app:layout_widthPercent="33.3%"
                        android:background="@color/colorPrimary">

                        <android.support.percent.PercentRelativeLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:padding="2dp">

                            <ImageView
                                android:id="@+id/idImg_MenuOne"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="75%"
                                app:layout_widthPercent="100%"
                                android:src="@drawable/icon" />

                            <TextView
                                android:layout_below="@+id/idImg_MenuOne"
                                android:id="@+id/idTxtMenuOne"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="25%"
                                app:layout_widthPercent="100%"
                                android:text="One"
                                android:gravity="center"
                                android:textSize="@dimen/txt_size_menu"
                                android:textColor="@color/colorWhite" />

                        </android.support.percent.PercentRelativeLayout>

                    </RelativeLayout>

                    <RelativeLayout
                        android:id="@+id/idRR_MenuTwo"
                        android:layout_toRightOf="@+id/idRR_MenuOne"
                        android:layout_height="0dp"
                        android:layout_width="0dp"
                        app:layout_heightPercent="100%"
                        app:layout_widthPercent="33.3%"
                        android:background="@color/colorPrimaryDark"
                        android:orientation="vertical">

                        <android.support.percent.PercentRelativeLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:padding="2dp">

                            <ImageView
                                android:id="@+id/idImg_MenuTwo"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="75%"
                                app:layout_widthPercent="100%"
                                android:src="@drawable/icon" />

                            <TextView
                                android:layout_below="@+id/idImg_MenuTwo"
                                android:id="@+id/idTxtMenuTwo"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="25%"
                                app:layout_widthPercent="100%"
                                android:text="Two"
                                android:gravity="center"
                                android:textSize="@dimen/txt_size_menu"
                                android:textColor="@color/colorWhite" />

                        </android.support.percent.PercentRelativeLayout>

                    </RelativeLayout>

                    <RelativeLayout
                        android:id="@+id/idRR_MenuThree"
                        android:layout_toRightOf="@+id/idRR_MenuTwo"
                        android:layout_height="0dp"
                        android:layout_width="0dp"
                        app:layout_heightPercent="100%"
                        app:layout_widthPercent="33.3%"
                        android:background="@color/colorPrimary"
                        android:orientation="vertical">

                        <android.support.percent.PercentRelativeLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:padding="2dp">

                            <ImageView
                                android:id="@+id/idImg_MenuThree"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="75%"
                                app:layout_widthPercent="100%"
                                android:src="@drawable/icon" />

                            <TextView
                                android:layout_below="@+id/idImg_MenuThree"
                                android:id="@+id/idTxtMenuThree"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="25%"
                                app:layout_widthPercent="100%"
                                android:text="Three"
                                android:gravity="center"
                                android:textSize="@dimen/txt_size_menu"
                                android:textColor="@color/colorWhite" />

                        </android.support.percent.PercentRelativeLayout>

                    </RelativeLayout>

                </android.support.percent.PercentRelativeLayout>

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/idRL_RowTwo"
                android:layout_below="@+id/idRL_RowOne"
                android:layout_height="0dp"
                android:layout_width="0dp"
                app:layout_heightPercent="50%"
                app:layout_widthPercent="100%">

                <android.support.percent.PercentRelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <RelativeLayout
                        android:id="@+id/idRR_MenuFour"
                        android:layout_height="0dp"
                        android:layout_width="0dp"
                        app:layout_heightPercent="100%"
                        app:layout_widthPercent="33.3%"
                        android:background="@color/colorPrimaryDark">

                        <android.support.percent.PercentRelativeLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:padding="2dp">

                            <ImageView
                                android:id="@+id/idImg_MenuFour"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="75%"
                                app:layout_widthPercent="100%"
                                android:src="@drawable/icon" />

                            <TextView
                                android:layout_below="@+id/idImg_MenuFour"
                                android:id="@+id/idTxtMenuFour"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="25%"
                                app:layout_widthPercent="100%"
                                android:text="Four"
                                android:gravity="center"
                                android:textSize="@dimen/txt_size_menu"
                                android:textColor="@color/colorWhite" />

                        </android.support.percent.PercentRelativeLayout>

                    </RelativeLayout>

                    <RelativeLayout
                        android:id="@+id/idRR_MenuFive"
                        android:layout_toRightOf="@+id/idRR_MenuFour"
                        android:layout_height="0dp"
                        android:layout_width="0dp"
                        app:layout_heightPercent="100%"
                        app:layout_widthPercent="33.3%"
                        android:background="@color/colorPrimary"
                        android:orientation="vertical">

                        <android.support.percent.PercentRelativeLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:padding="2dp">

                            <ImageView
                                android:id="@+id/idImg_MenuFive"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="75%"
                                app:layout_widthPercent="100%"
                                android:src="@drawable/icon" />

                            <TextView
                                android:layout_below="@+id/idImg_MenuFive"
                                android:id="@+id/idTxtMenuFive"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="25%"
                                app:layout_widthPercent="100%"
                                android:text="Five"
                                android:gravity="center"
                                android:textSize="@dimen/txt_size_menu"
                                android:textColor="@color/colorWhite" />

                        </android.support.percent.PercentRelativeLayout>

                    </RelativeLayout>

                    <RelativeLayout
                        android:id="@+id/idRR_MenuSix"
                        android:layout_toRightOf="@+id/idRR_MenuFive"
                        android:layout_height="0dp"
                        android:layout_width="0dp"
                        app:layout_heightPercent="100%"
                        app:layout_widthPercent="33.3%"
                        android:background="@color/colorPrimaryDark"
                        android:orientation="vertical">

                        <android.support.percent.PercentRelativeLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:padding="2dp">

                            <ImageView
                                android:id="@+id/idImg_MenuSix"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="75%"
                                app:layout_widthPercent="100%"
                                android:src="@drawable/icon" />

                            <TextView
                                android:layout_below="@+id/idImg_MenuSix"
                                android:id="@+id/idTxtMenuSix"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                app:layout_heightPercent="25%"
                                app:layout_widthPercent="100%"
                                android:text="Six"
                                android:gravity="center"
                                android:textSize="@dimen/txt_size_menu"
                                android:textColor="@color/colorWhite" />

                        </android.support.percent.PercentRelativeLayout>

                    </RelativeLayout>

                </android.support.percent.PercentRelativeLayout>

            </RelativeLayout>

        </android.support.percent.PercentRelativeLayout>

    </RelativeLayout>

</android.support.percent.PercentRelativeLayout>
Thus by using the android percent support library we have made our layout simple by removing boilerplate layout.

 Actually this should be a part of Android quite for a while but unfortunate that it didn't. It is too late to add this capability to native Android's RelativeLayout/FrameLayout since user who use the device with old OS version will not be able to use this feature. That's why Android team decided to release this as Support Library and I support the idea.

 Please give a try. It helps a lot making your code cleaner and better =)

 _______________________________________________________________
Happy Coding...


Comments

Post a Comment

Popular posts from this blog

Zoom Image - Android Tutorial

Here we are going to see how to zoom an image in Imageview Will see it through a sample 1. Create xml with an ImageView <? xml version="1.0" encoding="utf-8" ?> < androidx.constraintlayout.widget.ConstraintLayout       xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity" >     < LinearLayout         android:layout_width="200dp"         android:layout_height="200dp"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"    ...
Post a Comment
Read more

Spinner with Search on DropDown - Android Tutorial

If you have more values on Dropdown of Spinner its hard to select the last item by making a long scroll. To overcome this issue Android introduced a component called  AutoCompleteTextView Yes it is!!! Then why Spinner with Search? There may be some requirement even though gave much knowledge about it. There is a simple and good library that helps us to achieve this -  SearchableSpinner Gradle dependencies {     ...     implementation 'com.toptoche.searchablespinner:searchablespinnerlibrary:1.3.1' } Usage Now replace your Normal Android Spinner on XML with the following < com.toptoche.searchablespinnerlibrary.SearchableSpinner     android:id="@+id/id_city"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:background="@android:color/transparent"     android:padding="5dp" /> ______________________________________...
Post a Comment
Read more

Multi language support

This post will help you yo learn how to make Multi language supported app in android. Why Multi language? In order to targeting global audience, it will be beneficial if you make your app localized. While localizing, you should think about text, audio, currency, numbers and graphics depending upon the region or country. But in this tutorial language only covered. Note: Whenever you are making any android application, Always declare text you want to use in your application in strings.xml only. <string name="hello">Hello World!</string> How String Localization Works? By default android considers English as primary language and loads the string resources from res >> values >> strings.xml . When you want to make Multilanguage supported app, you need to create a values folder by appending a Hyphen (-) and the ISO language code. For example for Hindi, values-hi named folder should be created and keep a strings.xml file in it wit...
Post a Comment
Read more