Percentage of screen in android

For doing percentage of screen in android, we use PercentRelativeLayout:

Subclass of RelativeLayout that supports percentage based dimensions and margins. You can specify dimension or a margin of child by using attributes with “Percent” suffix.

The attributes that you can use are:

  • layout_widthPercent
  • layout_heightPercent
  • layout_marginPercent
  • layout_marginLeftPercent
  • layout_marginTopPercent
  • layout_marginRightPercent
  • layout_marginBottomPercent
  • layout_marginStartPercent
  • layout_marginEndPercent
  • layout_aspectRatio

In our dependencies

compile 'com.android.support:percent:22.2.0'

Follow this example:

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.thedeveloperworldisyours.percentrelativelayouts.MainActivity">
 
    <TextView
        android:id="@+id/activity_main_text_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerVertical="true"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="width 69%"
        app:layout_heightPercent="10%"
        app:layout_marginLeftPercent="4%"
        app:layout_widthPercent="69%" />
 
    <TextView
        android:id="@+id/activity_main_second_text_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/activity_main_text_view"
        android:background="@android:color/holo_red_dark"
        android:gravity="center"
        android:text="width 23%"
        app:layout_heightPercent="10%"
        app:layout_marginRightPercent="4%"
        app:layout_widthPercent="23%" />
</android.support.percent.PercentRelativeLayout>

We can see a big example:
null

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout 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"
    android:background="@color/activity_calculator_black_transparent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="90dp"
    android:weightSum="5"
    tools:context="com.thedeveloperworldisyours.unitconverterpro.calculator.CalculatorActivity">

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerVertical="true"
        android:background="@drawable/calculator_background"
        app:layout_heightPercent="53%"
        app:layout_marginLeftPercent="2%"
        app:layout_marginRightPercent="2%"
        app:layout_widthPercent="100%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.AutoResizeTextView
        android:id="@+id/activity_calculator_result"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_above="@+id/activity_calculator_divide"
        android:layout_toLeftOf="@+id/activity_calculator_remove"
        android:background="@drawable/calculator_text"
        android:inputType="text"
        android:maxLines="1"
        android:gravity="end"
        android:paddingRight="12dp"
        android:paddingLeft="12dp"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_marginLeftPercent="4%"
        app:layout_widthPercent="69%" />

    <ImageButton
        android:id="@+id/activity_calculator_remove"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_above="@+id/activity_calculator_divide"
        android:layout_alignParentRight="true"
        android:src="@mipmap/ic_backspace_calculator"
        android:background="@drawable/calculator_remove_button"
        app:layout_heightPercent="10%"
        app:layout_marginRightPercent="4%"
        app:layout_widthPercent="23%" />

    <!--fourth-->

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_seven"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_above="@+id/activity_calculator_multiply"
        android:layout_toLeftOf="@+id/activity_calculator_eight"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_seven"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_marginLeftPercent="4%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_eight"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_above="@+id/activity_calculator_multiply"
        android:layout_toLeftOf="@+id/activity_calculator_nine"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_eight"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_nine"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_above="@+id/activity_calculator_multiply"
        android:layout_toLeftOf="@+id/activity_calculator_divide"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_nine"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.BlackplotanButton
        android:id="@+id/activity_calculator_divide"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_above="@+id/activity_calculator_multiply"
        android:layout_alignParentRight="true"
        android:background="@drawable/calculator_operator_button"
        android:text="@string/activity_calculator_divide"
        android:textSize="@dimen/activity_calculator_size_text_operator"
        app:layout_heightPercent="10%"
        app:layout_marginRightPercent="4%"
        app:layout_widthPercent="23%" />

    <!--third-->

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_four"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/activity_calculator_five"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_four"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_marginLeftPercent="4%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_five"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/activity_calculator_six"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_five"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_six"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/activity_calculator_multiply"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_six"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.BlackplotanButton
        android:id="@+id/activity_calculator_multiply"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@drawable/calculator_operator_button"
        android:text="@string/activity_calculator_multiply"
        android:textSize="@dimen/activity_calculator_size_text_operator"
        app:layout_heightPercent="10%"
        app:layout_marginRightPercent="4%"
        app:layout_widthPercent="23%" />

    <!--second-->

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_one"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/activity_calculator_multiply"
        android:layout_toLeftOf="@+id/activity_calculator_two"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_one"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_marginLeftPercent="4%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_two"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/activity_calculator_multiply"
        android:layout_toLeftOf="@+id/activity_calculator_three"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_two"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_three"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/activity_calculator_multiply"
        android:layout_toLeftOf="@+id/activity_calculator_diminish"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_three"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.BlackplotanButton
        android:id="@+id/activity_calculator_diminish"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/activity_calculator_multiply"
        android:background="@drawable/calculator_operator_button"
        android:text="@string/activity_calculator_diminish"
        android:textSize="@dimen/activity_calculator_size_text_operator"
        app:layout_heightPercent="10%"
        app:layout_marginRightPercent="4%"
        app:layout_widthPercent="23%" />

    <!--last-->

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_dot"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/activity_calculator_diminish"
        android:layout_toLeftOf="@+id/activity_calculator_zero"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_dot"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_marginLeftPercent="4%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.StarjediButton
        android:id="@+id/activity_calculator_zero"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/activity_calculator_diminish"
        android:layout_toLeftOf="@+id/activity_calculator_equals"
        android:background="@drawable/calculator_button"
        android:text="@string/activity_calculator_zero"
        android:textSize="@dimen/activity_calculator_size_text"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.BlackplotanButton
        android:id="@+id/activity_calculator_equals"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/activity_calculator_diminish"
        android:layout_toLeftOf="@+id/activity_calculator_add"
        android:background="@drawable/calculator_equal_button"
        android:text="@string/activity_calculator_equals"
        android:textSize="@dimen/activity_calculator_size_text_operator"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="23%" />

    <com.thedeveloperworldisyours.unitconverterpro.common.view.BlackplotanButton
        android:id="@+id/activity_calculator_add"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/activity_calculator_diminish"
        android:background="@drawable/calculator_operator_button"
        android:text="@string/activity_calculator_plus"
        android:textSize="@dimen/activity_calculator_size_text_operator"
        app:layout_heightPercent="10%"
        app:layout_marginRightPercent="4%"
        app:layout_widthPercent="23%" />
</android.support.percent.PercentRelativeLayout>

Leave a Reply

Your email address will not be published. Required fields are marked *