Develop Reference

When Rendering FontAwesome Icons on Android, some Icons are rendered with Overlapping Chinese Characters

As part of one of the views in my app, I have a place where users can choose to navigate to one of many other pages depending on which icon is tapped. To render these icons, we are using a combination of custom-designed icons and the FontAwesome icon library.
However, on some devices, such as the Samsung Galaxy S7, some of the icons do not always render as expected. In particular one of them renders in an overlapping fashion with a Chinese character. So far we have been unable to figure out why this is happening, so any help would be greatly appreciated.
We are using Xamarin Android and MvvmCross to create our app.
Some of the view code for the main layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
style="#style/RelativeLayoutPageStyle"
android:background="#color/white">
<RelativeLayout
style="#style/RelativeHeader"
android:id="#+id/linearLayout1">
<FontAwesomeIcon
android:id="#+id/flag"
android:layout_alignParentLeft="true"
style="#style/MenuButton" />
<ImageView
android:id="#+id/Header"
style="#style/HeaderLogo"
android:layout_centerInParent="true"
android:src="#drawable/TitleWithIcon" />
<FontAwesomeIcon
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ViewFailedRecordButton"
android:layout_toLeftOf="#+id/ViewAssignmentsButton"
android:layout_toRightOf="#id/Header"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:textColor="#b8860b"
android:text="\uf06a"
android:textSize="16dp"
local:MvxBind="Click ViewFailedRecordsCommand;Visibility BooleanVisibility(FailedRecordsDetected)" />
<FontAwesomeIcon
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ViewAssignmentsButton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="\uf022"
android:textSize="16dp"
local:MvxBind="Click ViewAssignmentCommand;Visibility BooleanVisibility(HaveAssignmentsForUser);TextColor AssignmentButtonColor, Converter=NativeColor" />
</RelativeLayout>
<LinearLayout
style="#style/CollectionViewHeader"
android:id="#+id/collectionViewHeader"
android:layout_below="#id/linearLayout1"
local:MvxBind="BackgroundColor HeaderBackgroundColor, Converter=NativeColor">
<TextView
android:layout_centerInParent="true"
style="#style/TextViewHeaderResponsive"
local:MvxBind="Text HeaderText" />
</LinearLayout>
<GridView
android:id="#+id/gridView"
android:layout_below="#id/collectionViewHeader"
android:layout_above="#+id/collectionViewFooter"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="2" />
<LinearLayout
style="#style/CollectionViewFooter"
android:id="#id/collectionViewFooter"
android:layout_alignParentBottom="true"
local:MvxBind="Visibility HideOnEmptyText(FooterText);BackgroundColor FooterBackgroundColor, Converter=NativeColor;Click FooterClickCommand">
<TextView
android:layout_centerInParent="true"
style="#style/StatusBarFooterTextView"
local:MvxBind="Text FooterText" />
</LinearLayout>
</RelativeLayout>
<MvxListView
android:id="#+id/left_drawer"
style="#style/Menu"
local:MvxItemTemplate="#layout/drawerlistitem"
local:MvxBind="ItemsSource NavigationCellModels" />
</android.support.v4.widget.DrawerLayout>
View for the Template used in the above GridView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
local:MvxBind="Click ClickCommand">
<RelativeLayout
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<FontAwesomeIcon
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="100dp"
android:layout_gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
local:MvxBind="Text RecordableDataTypeToIcon(RecordableDataType);Visibility IsRecordableDataTypeFontAwesome(RecordableDataType);TextColor Color, Converter=NativeColor" />
<CbtGlyphIcon
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="100dp"
android:layout_gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
local:MvxBind="Text RecordableDataTypeToIcon(RecordableDataType);Visibility IsRecordableDataTypeCbtGlyphValueConverter(RecordableDataType);TextColor Color, Converter=NativeColor" />
</RelativeLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:textSize="20sp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="10dp"
android:maxLines="2"
android:ellipsize="end"
local:MvxBind="Text Title;TextColor Color, Converter=NativeColor" />
</LinearLayout>
Code for the FontAwesomeIcon Class:
public class FontAwesomeIcon : TextView
{
private Context _context;
protected FontAwesomeIcon(IntPtr javaReference, JniHandleOwnership transfer)
: base(javaReference, transfer)
{
Initialise(null, null);
}
public FontAwesomeIcon(Context context)
: base(context)
{
Initialise(context, null);
}
public FontAwesomeIcon(Context context, IAttributeSet attrs)
: base(context, attrs)
{
Initialise(context, attrs);
}
public FontAwesomeIcon(Context context, IAttributeSet attrs, int defStyle)
: base(context, attrs, defStyle)
{
Initialise(context, attrs);
}
private void Initialise(Context context, IAttributeSet attrs)
{
_context = context ?? Application.Context;
Typeface = Android.Graphics.Typeface.CreateFromAsset(context.Assets, "FontAwesome.otf");
}
}
Finally here's a screenshot of what I'm seeing:

GridLayout with SquareRelativeLayout item

I succeed to create a SquareRelativeLayout. Then I use this CustomLayout as one grid item of a GridLayout. I have 5 items for now (but it can be variable). For the first row, everything is fine. My item has a size of 400*400 but for the second row I have something like 400*429. I think my issue come from above, indeed I use a LinearLayout and my GridLayout has a height of layout:weight 0.50. Here is my current layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66000000">
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="0dp" ... />
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:grid="http://schemas.android.com/apk/res-auto"
android:id="#+id/droparea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.50"
grid:columnCount="3"
grid:orientation="horizontal">
<SquareRelativeLayout
android:id="#+id/relativelayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
...
</SquareRelativeLayout>
<SquareRelativeLayout
android:id="#+id/relativelayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
...
</SquareRelativeLayout>
<SquareRelativeLayout
android:id="#+id/relativelayout3"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
...
</SquareRelativeLayout>
<SquareRelativeLayout
android:id="#+id/relativelayout4"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
....
</SquareRelativeLayout>
<SquareRelativeLayout
android:id="#+id/relativelayout5"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
...
</SquareRelativeLayout>
</android.support.v7.widget.GridLayout>
<include layout="#layout/draggable_linearlayout"/>
</LinearLayout>
</RelativeLayout>
And here is the code of my SquareRelativeLayout :
import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
public class SquareRelativeLayout extends RelativeLayout {
public SquareRelativeLayout(Context context) {
super(context);
}
public SquareRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
}
So I want to be able to set a variable height for my GridLayout but to keep squared items. Is it possible to let GridLayout fill the 29dp ? Did I miss an attribute ? If you can help me, don't hesitate :)

It was simple, but yesterday I didn't think about it. You just need to use a ParentLayout for the GridLayout and then set to the layout_height of the GridLayout the attribute wrap_content and that's it :)

Android : Drawable next to TextView with weight to each TextView in LinearLayout

I am trying to achieve the result as shown in Pic1. Tried setting gravity, paddingleft etc but the drawable image comes in the right end and not next to Text(SHown in Pic 2). Can anyone suggest how to align the image next to TextView? Also how to set the size of drawable?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/separator"
android:padding="10dp">
<TextView
android:id="#+id/sms"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:drawableEnd="#drawable/message"
android:drawableRight="#drawable/message"
android:gravity="center"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:text="SMS" />
<TextView
android:id="#+id/call"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableEnd="#drawable/call"
android:drawableRight="#drawable/call"
android:gravity="center"
android:text="CALL" />
<TextView
android:id="#+id/email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:drawableEnd="#drawable/mail"
android:drawablePadding="3dp"
android:drawableRight="#drawable/mail"
android:text="MAIL" />

Try to build around this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:orientation="horizontal"
android:padding="10dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:id="#+id/sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:drawableRight="#drawable/message"
android:text="SMS" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:id="#+id/call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/call"
android:gravity="center"
android:text="CALL" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/mail"
android:gravity="center"
android:text="MAIL" />
</LinearLayout>
</LinearLayout>

The main problem is that, you are setting the layoutWidth=0dp and weight 1. This makes every TextView take maximum width according to the weight. The drawableRight/drawableEnd sets the drawable resource to be drawn at the rightmost edge of the view. If you want to keep this layout just wrap it in another viewGroup like #Dhinakaran has shown. Better approach would be to use a tab layout.

Instead of using multiple Linear Layouts, you can use a Relative Layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight=".33"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/textView"
android:layout_toRightOf="#+id/textView"
android:src="#android:drawable/btn_star"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight=".33"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/textView2"
android:layout_toRightOf="#+id/textView2"
android:src="#android:drawable/btn_star"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight=".33"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/textView3"
android:layout_toRightOf="#+id/textView3"
android:src="#android:drawable/btn_star"/>
</RelativeLayout>
</LinearLayout>
Result

Created a custom button which doesnt require layout nestings and can align drawable images as required.
Layout file button.xml:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/custom_button"
style="#style/custom_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:gravity="center" />
Custom Button Class:
public class DrawableAlignedButton extends RelativeLayout {
private View view;
private Button button;
/**
* #param context
* used to inflate the View.
* #param attrs
* XML defined attributes.
*/
public DrawableAlignedButton(final Context context, final AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
/**
* #param context
* used to inflate the View.
*/
public DrawableAlignedButton(final Context context) {
super(context);
init(context, null);
}
/**
* #param context
* used to inflate the View.
* #param attrs
* XML defined attributes.
* #param style
* the style for the View.
*/
public DrawableAlignedButton(final Context context, final AttributeSet attrs, final int style) {
super(context, attrs, style);
init(context, attrs);
}
private void init(final Context context, final AttributeSet attributeSet) {
view = ((Activity) getContext()).getLayoutInflater().inflate(R.layout.button, this, true);
button = (Button) view.findViewById(R.id.custom_button);
String buttonText = null;
int drawableStart = 0;
int drawableEnd = 0;
if (attributeSet != null) {
final TypedArray a = context.getTheme().obtainStyledAttributes(attributeSet, R.styleable.CustomButtonStyle, 0, 0);
buttonText = a.getString(R.styleable.CustomButtonStyle_buttonText);
drawableStart = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableStart, 0);
drawableEnd = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableEnd, 0);
a.recycle();
}
FontUtil.getInstance(context).useNormalRegularFont(button);
if (buttonText != null) {
button.setText(buttonText);
}
button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0);
}
/**
* Sets the button text.
*
* #param text
* the text to be set.
*/
public void setButtonText(final String text) {
if (button != null) {
button.setText(text);
}
}
/**
* Sets the drawable to the button.
*
* #param drawableStart
* the drawable to set at the beginning of the text.
* #param drawableEnd
* the drawable to set at the end of the text.
*/
public void setDrawableStart(final int drawableStart, final int drawableEnd) {
if (button != null) {
button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0);
}
}
}
How to use it in the XML :
<com.package.view.DrawableAlignedButton
xmlns:drawableAlignedButton="http://schemas.android.com/apk/res-auto"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/transparent_button_selector"
drawableAlignedButton:buttonDrawableStart="#drawable/small_active"
drawableAlignedButton:buttonText="Button Text" />

Align custom view in relative layout dynamically not working android

I have a created a custom view , in relative layout .
I'm able to align it in in center/left/right through xml but not
programatically
.
Custom View
public class HotspotView extends RelativeLayout {
public HotspotView(Context context) {
super(context);
init(context);
}
public HotspotView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public HotspotView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
private void init(Context context) {
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.hotspot_view, this);
}
}
Custom view xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/hotspot_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tohome"
/>
</RelativeLayout>
Activity xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
>
<VideoView
android:id="#+id/vv_frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:clickable="true"
android:onClick="onclick"
android:visibility="gone" />
<ImageView
android:id="#+id/iv_frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description"
android:onClick="onclick"
android:scaleType="fitXY"
android:visibility="gone"
/>
<ImageView
android:id="#+id/lv_frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:contentDescription="#string/content_description"
android:onClick="onclick"
android:visibility="gone" />
<
<android.gesture.GestureOverlayView
android:id="#+id/gesture_area"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:alpha="1.0"
android:background="#android:color/transparent"
android:gestureColor="#android:color/white"
android:onClick="onclick"
android:visibility="visible" />
<WebView
android:id="#+id/ticker_webview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:visibility="gone"></WebView>
<WebView
android:id="#+id/wv_frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:onClick="onclick"
android:scaleType="fitXY"
android:visibility="gone"
/>
<ProgressBar
android:id="#+id/webview_progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:visibility="gone" />
<com.devstring.imageframe.views.HotspotView
android:id="#+id/hotspot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:visibility="visible" />
</RelativeLayout>
Code:
RelativeLayout.LayoutParams lp = new
RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT);
lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
ImageFrameActivity.hotspotView.setLayoutParams(lp);
ImageFrameActivity.hotspotView.setVisibility(View.VISIBLE);
I have gone through various similar questions but I'm not able to resolve the problem.

try this :
RelativeLayout.LayoutParams lp =
(RelativeLayout.LayoutParams) ImageFrameActivity.hotspotView.getLayoutParams();
lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
ImageFrameActivity.hotspotView.setLayoutParams(lp);

Try using
lp.gravity = Gravity.LEFT;

Creating a button for scientific calculator

..
As shown in the figure i have to create buttons with two functions. For example, in the bottom first row the "0" has another function called "Rnd" and "." has functions "Ran# RanInt".
I have taken this up as a project and I am stuck - I can't get the buttons, and the name above the button as shown in figure to be in a correct alignment.
Also, I am not sure this is the correct method, I have used GridLayout as shown in code, I used a LinearLayout inside of GridLayout for the buttons and they seem to fit - but I can't make the text to be placed above the buttons as shown in figure.
The font file can be downloaded from here ... download casio fx-es plus series. I have renamed the file ES-03 as casiofont.ttf in my program.
screen shot
<TextView
android:layout_width="wrap_content"
android:layout_height="10dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="space to show enabled functions"
android:id="#+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignEnd="#+id/webView2" />
<WebView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/webView2"
android:layout_below="#+id/textView"
android:layout_alignParentStart="true"></WebView>
<GridLayout
android:id="#+id/gridlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentStart="true"
android:rowCount="9"
android:columnCount="6"
android:layout_below="#+id/webView2">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_row="0"
android:layout_column="0"
android:weightSum="5"
android:id="#+id/linearLayout"
android:layout_below="#+id/webView2"
android:layout_alignParentStart="true"
android:layout_alignEnd="#+id/gridlayout">
<TextView
android:id="#+id/rnd"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textStyle="bold"
android:gravity="center"
android:text="#string/rnd"
android:layout_weight="1"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_row="0" />
<TextView
android:id="#+id/ran_ranint"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textStyle="bold"
android:gravity="center"
android:text="#string/ran_ranint"
android:layout_column="1"
android:layout_columnSpan="1"
android:layout_row="0" />
<com.example.girikarnal.engineringcalc.CalculatorButtonTextView
android:id="#+id/pi_e1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/pi_e"
android:layout_column="2"
android:layout_row="0" />
<TextView
android:id="#+id/pi_e2"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/e"
android:layout_weight="0.78"
android:layout_column="2"
android:layout_width="wrap_content"
android:layout_row="0" />
<com.example.girikarnal.engineringcalc.CalculatorButtonTextView
android:layout_width="41dp"
android:layout_height="wrap_content"
android:id="#+id/drg_ans"
android:text="#string/dgr_ans"
android:gravity="center"
android:layout_weight="0.80" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/linearlayout1"
android:layout_row="1"
android:layout_column="0">
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/zero"
android:text="#string/zero_Rnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="1"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/dot"
android:text="#string/dot_or_ran"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="2"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/multiple_of_ten"
android:text="#string/multiple_of_ten_or_pi_e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="3"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/ans"
android:text="#string/ans_or_DRG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="4"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/equals"
android:text="#string/equals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="5"
android:layout_row="1" />
</LinearLayout>
</GridLayout>
</RelativeLayout>
CalculatorButton
public class CalculatorButtonButton extends Button {
public CalculatorButtonButton(Context context) {
super(context);
init();
}
public CalculatorButtonButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CalculatorButtonButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CalculatorButtonButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/casiofont.ttf");
// String s="tf";
// SpannableString spanString = new SpannableString(s);
// spanString.setSpan(new StyleSpan(Typeface.BOLD), 0, spanString.length(), 0);
setTypeface(tf);
}
}
CalculatorTextView
public class CalculatorButtonTextView extends TextView {
// Constructors
public CalculatorButtonTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public CalculatorButtonTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CalculatorButtonTextView(Context context) {
super(context);
init();
}
// This class requires casiofont.ttf to be in the assets/fonts folder
private void init() {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/casiofont.ttf");
setTypeface(tf);
}
}

Just create a custom view.
Something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:text="text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="btn"
android:layout_width="match_parent"
android:layout_height="fill_parent" />
</LinearLayout>
CalcBtn class
public class CalcBtn extends LinearLayout {
public CalcBtn(Context context) {
super(context);
init(context);
}
public CalcBtn(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public CalcBtn(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
View.inflate(context, R.layout.calc_btn, this);
}
}
And then use it in your layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:orientation="horizontal"
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">
<com.example.example.CalcBtn
android:layout_width="100dp"
android:layout_height="wrap_content" />
<com.example.example.CalcBtn
android:layout_width="60dp"
android:layout_height="wrap_content" />
<com.example.example.CalcBtn
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.example.example.CalcBtn
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Well it's not clear how exactly you want to lay out your buttons, but firstly you got several things wrong in your usage of GridLayout:
the row and column counts seem wrong (don't you have 2 rows and 5 columns ?)
there's no need for a LinearLayout within the GridLayout ; each child of GridLayout will be assigned a cell in the grid, so you can lay text and button views directly under the grid layout (cf. example below)
Additionally:
most likely the GridLayout height should be wrap_content given the rest of the layout
no need to specify a column span of 1, that's the default (that's not even a span actually...)
no need to specify children layout widths and heights (they're not taken into account in GridLayout)
no need to specify children column and row indexes, they'll be added to the grid in the order they are declared
no need to specify the row numbers either, it can be inferred from the columns number and the number of children
So, you could declare your grid with something like this:
<GridLayout
android:id="#+id/gridlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:columnCount="5">
<TextView
android:id="#+id/textView1"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text1"/>
<TextView
android:id="#+id/textView2"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text2"/>
<!-- ... etc add you remaining 3 labels here -->
<Button
android:id="#+id/button1"
android:text="#string/textButton1"/>
<Button
android:id="#+id/button2"
android:text="#string/textButton2"/>
<!-- ... etc add you remaining 3 buttons here -->
</GridLayout>
But if I understand correctly you want to create equally sized columns and rows (and maybe stretch or shrink them ?), and GridLayout (from my experience) can be very tricky to adapt to these use cases (if you want to go down that road, try using Spaces rather than fiddling with row / column and elements attributes). TableLayout works way better for this though. You'd write something like this instead:
<TableLayout
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:shrinkColumns="*">
<TableRow>
<TextView
android:id="#+id/textView1"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text1"/>
<TextView
android:id="#+id/textView2"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text2"/>
<!-- ... etc add you remaining 3 labels here -->
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:text="#string/textButton1"/>
<Button
android:id="#+id/button2"
android:text="#string/textButton2"/>
<!-- ... etc add you remaining 3 buttons here -->
</TableRow>
</TableLayout>
Or, if you want your columns to be equally sized and take up all the width available to the TableLayout, using weights:
<TableLayout
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="#+id/textView1"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text1"
android:layout_width="0dp"
android:layout_weight="1"/>
<TextView
android:id="#+id/textView2"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text2"
android:layout_width="0dp"
android:layout_weight="1"/>
<!-- ... etc add you remaining 3 labels here -->
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:text="#string/textButton1"
android:layout_width="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button2"
android:text="#string/textButton2"
android:layout_width="0dp"
android:layout_weight="1"/>
<!-- ... etc add you remaining 3 buttons here -->
</TableRow>
</TableLayout>
You could also use nested LinearLayouts (a horizontal one with 5 nested vertical ones or vice-versa), this is basically what TableLayout does (TableLayout and TableRow are LinearLayouts).
By the way these examples are with "plain" text views and buttons, but you can of course use your Casio-font-enabled custom ones in place it won't make any difference.
So although GridLayout is usable and should consume less system resources than TableLayout, the latter may be easier to configure to match your desired layout.
For details I recommend checking the GridLayout guide and the TableLayout one.