Android Percent Layout Support and Vertical TextView With Examples

In this tutorial, we’ll discuss and implement Android Percent Layout Support Library. Furthermore, we’ll be creating a Vertical TextView. Finally, we’ll merge the two concepts to code an interesting Login Screen design concept in our application.

Android Percent Layout Support Overview

Android Percent Layout support were introduced with the Android API 23. This library allows us to specify a percentage value for layout_width, layout_height and layout_margin.

Therefore, a PercentRelativeLayout is a RelativeLayout with an added functionality of assigning weights to the child view(similarly PercentFrameLayout), a feature which has been always there in LinearLayouts.

Hence, we can put a percentage(out of 100) on child view components present in Percent Layout in terms of width, height, margins.

PercentRelativeLayout and PercentFrameLayout help us in reducing the view complexity since we’re no longer forced to encapsulate our child view with a LinearLayout and use weights for child views.

To use Percent Layout support, add the following dependency to the build.gradle file.
compile 'com.android.support:percent:25.3.1'

Adding the above dependency allows us to use android.support.percent.PercentRelativeLayout and android.support.percent.PercentFrameLayout in our application.

As a result, we can now replace the RelativeLayout and FrameLayout tags in our xml with PercentRelativeLayout and PercentFrameLayout respectively.

Android Percent Support Layout Example

Let’s see a sample implementation of layout_widthPercent.

app:layout_widthPercent: Here we set our views width in percentage.

Note: In PercentRelativeLayout, layout_width and layout_height attributes are optional if we have specified layout_widthPercent or layout_heightPercent attribute.

sample.xml Code

Output :

android-percent-layout-width-implementation

We’ve set the layout_widthPercent to 75 in the above implementation. In addition, setting it to 100 would be equivalent to match_parent. We can implement the other layout params that are given below in a similar manner.

  1. layout_heightPercent
  2. layout_marginPercent
  3. layout_marginLeftPercent
  4. layout_marginRightPercent
  5. layout_marginTopPercent
  6. layout_marginBottomPercent
  7. layout_marginStartPercent
  8. layout_marginEndPercent

Android Vertical TextView

The standard TextView widget that we use displays the text horizontally only. Hence, we’ll be creating a custom TextView that allows us to display the text vertically.

The code for the VerticalTextView.java class is given below:

  • By default, rotated text is from top to bottom. If we set android:gravity="bottom", then it’s drawn from bottom to top. We save the state of the rotated text (top to bottom/ bottom to top) in the boolean variable topDown.
  • In the onMeasure() method we swap the width and height to draw the text rotated.
  • Finally, in the onDraw() method based on the topDown boolean flag, we apply a rotation dependent on the gravity setting.

Going further, let’s code an interesting Login UI Concept using Percent Layout support and Vertical TextView.

Android Percent Layout and Vertical TextView Project Structure

android-percent-layout-vertical-textview-project-structure-1-269x450

Take note of the xml files in the anim folder. They’ll be used to animate between the sign in and register layouts and buttons.

Android Percent Layout and Vertical TextView Code

Add the following dependency in the build.gradle file.

The xml layout code for activity_main.xml is given below :

Take note of the percentages specified in the above code.

We let the layout_sign_in.xml occupy majority portion of the screen initially. Besides we’ve hidden the VerticalTextView for SIGN IN. Eventually, these things would be reversed when the layout_register.xml screen is laid.

The xml layout code for layout_sign_in.xml is given below.

The xml layout code for layout_register.xml is given below.

In addition, the background for each EditText is defined under the drawable folder in the file shape.xml as shown below.

The code for the MainActivity.java is given below.

Few inferences drawn from the above code are:

    1. We interchange the percentage widths(using float values) of the LinearLayouts held inside PercentRelativeLayout namely layout_sign_in and layout_register.
    2. Besides we animate the above-mentioned layouts along with showing a transition from the VerticalTextView to its respective Button.
    3. hideSoftKeyboard() is invoked every time a VerticalTextView is clicked in order to dismiss any previously opened keyboard.

Note: To hide the keyboard when the application launches, we set the windowSoftInputMode to hidden in the AndroidManifest.xml file as shown below.

Consequently, the output of the application in action is given below.
android-percent-layout-vertical-textview-output

This brings an end to this tutorial. You can download the final Android VerticalTextViewAndPercentLayout Project from the link below.

Reference: android.support.percent

By admin

Leave a Reply