Android Percentage Layouts

Hi Developers,

Today we will learn how  to support percentage based dimensions in Android app.

Follow these steps to make the basic setup

  • Create the new project in Android Studio
  • Create the blank Activity MainActivity
  • Now you should have MainActivity.java and activity_main.xml in the layout folder.
  • Percentage Layout support comes in Percent Support Lib
  • Edit your build.gradle and add the following line in dependencies
compile 'com.android.support:percent:23.3.0'

Now you are ready with the basic setup to use the Percentage based layout in your app.

The Percent package provides APIs to support adding and managing percentage based dimensions in your app.

We will use  android.support.percent.PercentRelativeLayout as a root of our activity_main.xml

Edit the activity_main.xml and add the following code


<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="touchscreen.percentlayouthelper.MainActivity">
    <TextView
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:background="@android:color/holo_orange_dark"
        android:id="@+id/layout_one"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:text="@string/layout_percent_one"/>
    <TextView
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:background="@android:color/holo_blue_light"
        android:id="@+id/layout_two"
        android:layout_toRightOf="@id/layout_one"
        android:text="@string/layout_percent_one"
        android:gravity="center"
        android:textStyle="bold"
        android:textColor="#ffffff"/>
    <TextView
        app:layout_widthPercent="100%"
        app:layout_heightPercent="50%"
        android:background="@android:color/holo_purple"
        android:id="@+id/layout_three"
        android:layout_below="@id/layout_two"
        android:text="@string/layout_percent_three"
        android:gravity="center"
        android:textStyle="bold"
        android:textColor="#ffffff"/>
</android.support.percent.PercentRelativeLayout>

We have put three TextView in the layout relative to each other.

On the upper half of the screen we have added two TextView and on the lower half we have added one TextView.

As you can see have not set layout_width and layout_height, instead we are using  layout_widthPercent and layout_heightPercent

The dimensions for the view are as follows

  1. First TextView has 50% width and 50% height
  2. Second TextView has 50% width and 50% height
  3. Third   TextView has 100% width and 50% height

Now run the project and you can see the following output.

percentage_layout

We have added different colors as a background to the TextView for better identification of the TextView size.

You can use the following attributes to the Views in the PercentRelativeLayout

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

You can download PercentLayoutHelper the full source code and android studio project.

Thanks!

Posted in advanced

Android Circular TextView

Hello Developers,

While developing the Android applications, we might need to show some text in the circle.

Android does not provide the Circular TextView. So we will create the Circular TextView by applying the XML drawable as a background to TextView.

Follow these steps to create the Circular TextView

  • Create the new project in Android Studio and name it CircularTextview
  • Create the blank Activity MainActivity
  • Now you should have MainActivity.java and activity_main.xml in the layout folder.
  • Now we need to create some xml drawable files.
  • Create the file state_normal.xml and add the following code in it.

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<solid android:color=”@color/color_state_normal” />
<size android:height=”130dp”
android:width=”130dp”/>
<corners
android:topLeftRadius=”65dp”
android:topRightRadius=”65dp”
android:bottomLeftRadius=”65dp”
android:bottomRightRadius=”65dp”/>
</shape>

There are few important points to here in the xml.

  1. We have defined the drawable as shape in the xml.
  2. The solid tag defines that we need to fill the shape with the color  “color_state_normal”.
  3. The size tag defines the height and width of the shape, in this case it is 130dp each.
  4. Next the very important part, we have defined the corners of the the shape in terms of radius.
  5. Note that we have kept each corner exactly half of the width or height. This is the most important part for the shape to be Circular, otherwise we will not get exact circle shape.
  • Now add another xml state_pressed.xml and add the following code in it.

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<solid android:color=”@color/color_state_pressed” />
<size android:height=”130dp”
android:width=”130dp”/>
<corners
android:topLeftRadius=”65dp”
android:topRightRadius=”65dp”
android:bottomLeftRadius=”65dp”
android:bottomRightRadius=”65dp”/>
</shape>

You should have noticed that we just have changed the color and rest of the things are same as state_normal.xml

  • By this time you must have got compilation error for the colors defined in both of the drawable xml files.
  • So lets add the colors.xml in values folder and dd the following lines in it.

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<color name=”color_state_pressed”> #660099 </color>
<color name=”color_state_normal”> #6633CC </color>

</resources>

  • Now add another drawable xml selector.xml in drawable folder and add following code in it.

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>
<item android:state_pressed=”true” android:drawable=”@drawable/state_pressed”/>
<item android:state_focused=”true” android:drawable=”@drawable/state_normal”/>
<item android:state_window_focused=”true” android:drawable=”@drawable/state_normal”/>
</selector>

Here we are simply defining which drawable to draw in which state, in pressed state we are showing         state_pressed drawable and in focused state we are showing state_normal drawable.

  • Now go to the activity_main.xml and add the following code

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent”
android:layout_height=”match_parent” android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
android:paddingBottom=”@dimen/activity_vertical_margin” tools:context=”.MainActivity”
android:layout_centerInParent=”true”>

<TextView android:text=”@string/hello_world” android:layout_width=”130dp”
android:layout_height=”130dp”
android:background=”@drawable/selector”
android:gravity=”center”
android:layout_centerInParent=”true”
android:textStyle=”bold”
android:clickable=”true”
android:textColor=”@android:color/white”/>

</RelativeLayout>

We have defined the TextView and set the selector.xml as its background.

Now build and run the project and you can see the following output.

circular_textview

  • Additionally we can see the change in color when we tap on the circle.

You can download the whole Android Studio project CircularTextView

Posted in Custom Component