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

Get Phone Number from Contact List - Android Tutorial

When you create an application to send sms or an application to make calls, getting a destination number from the contacts list is a common task. In this Android tip, I am going to show the code to fetch a number from the contacts list. Now let me tell you how to achieve the goal. First, you need to create an Intent object for the PICK_ACTION action. To open the contacts list, the table that contains the contacts information must be specified as a parameter of the constructor of the Intent class. You can refer to the table using ContactsContract.Contacts.CONTENT_URI. Then call the startActivityForResult () method passing the Intent object and request code to open the contacts list. After a contact is selected from the contacts list, to get the result, you need to override the onActivityResult(int reqCode, int resultCode, Intent data) method of the activity. You can call the getData() method of the data parameter to get the table or uri that contains the selected contact. From the t
1 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

Set Focus on Spinner when select Item on Vertical Scroll - Android Tutorial

We may face an issue on Spinner lies on long vertical scroll, (i.e.) when selected and item from dropdown the focus moves to top of scroll. To avoid this please follow this piece of code spinner.setFocusableInTouchMode( true ); spinner.setOnFocusChangeListener( new View.OnFocusChangeListener() {     @Override     public void onFocusChange(View v, boolean hasFocus) {         if (hasFocus) {             if (spinner.getWindowToken() != null ) {                 spinner.performClick();             }         }     } });   _______________________________________________________________________________ Happy Coding...
Post a Comment
Read more