TextInputLayout floating label custom font and edittext custom font - android

I have layout like this -
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/form_username"/>
</android.support.design.widget.TextInputLayout>
As per our UI design document, we need to have different custom font for Floating label and Edittext.
Any help is appreciated. Thank you.

you can do this by this way,
As of Design Library v23, you can use TextInputLayout#setTypeface().
This will set the typeface on both the expanded and floating hint.
Using a custom span
final SpannableString ss = new SpannableString("Error");
ss.setSpan(new FontSpan(tf), 0, ss.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
til.setError(ss);
private static final class FontSpan extends MetricAffectingSpan {
private final Typeface mNewFont;
private FontSpan(Typeface newFont) {
mNewFont = newFont;
}
#Override
public void updateDrawState(TextPaint ds) {
ds.setTypeface(mNewFont);
}
#Override
public void updateMeasureState(TextPaint paint) {
paint.setTypeface(mNewFont);
}
}

For custom fonts in EditText you can use following class:
public class CustomEditText extends AppCompatEditText {
public CustomEditText (Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs);
}
public CustomEditText (Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
public CustomEditText (Context context) {
super(context);
init(null);
}
Typeface myTypeface;
private void init(AttributeSet attrs) {
if (attrs != null) {
TypedArray a = getContext().obtainStyledAttributes(attrs,
R.styleable.CustomTextView);
String fontName = "Orkney Medium.otf";
if (fontName != null && !isInEditMode()) {
myTypeface = Typeface.createFromAsset(getContext().getAssets(),
fontName);
}
setTypeface(myTypeface);
a.recycle();
}
}
}
XML Code :
<com.utils.CustomEditText
android:id="#+id/edt_first_name_register"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:hint="#string/hint_first_name"
android:inputType="textCapWords"
android:imeOptions="actionNext"
android:singleLine="true"
android:digits="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
android:paddingTop="#dimen/15dp"
android:textColor="#color/black"
android:textSize="20sp" />
For TextInputLayout custom classes does not work in all cases, But you can do something like this for optimized solution.
Put this in your Java Class :
public static void setTextInputLayoutTypeFace(Context mContext, TextInputLayout... textInputLayout) {
for (TextInputLayout til : textInputLayout) {
Typeface typeface = Typeface.createFromAsset(mContext.getAssets(), "Orkney Regular.otf");
til.setTypeface(typeface);
}
}
Call the above method using :
setTextInputLayoutTypeFace(mContext, tlFirstNameRegister, tlLastNameRegister,
tlUsernameRegister, tlEmailIdRegister, tlDateOfBirthRegister, tlMobileRegister, tlPasswordRegister,
tlConfPasswordRegister);
Its not the best solution. But it will work.

Related

AppCompatEditText Custom Typeface doesn't work properly

I am trying to create a new and Custom AppCompatEditText while extending from AppCompatEditText, when I'm changing the typeface in my class and use that class in my XML while making the view, the font will remain the same as default, can anyone please tell me what is the problem here?
public class MAppEditText extends AppCompatEditText {
public MAppEditText(#NonNull #NotNull Context context) {
super(context);
init();
}
public MAppEditText(#NonNull #NotNull Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public MAppEditText(#NonNull #NotNull Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
Typeface tf;
if (getTypeface().isBold()) {
tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/yekan_bold.ttf");
} else {
tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/yekan_regular.ttf");
}
setTypeface(tf);
}
}
I also made a custom AppCompatTextView with this method and it works just fine, but with AppCompatEditText is different.
Are you sure you used the same object in the xml too?
<MAppEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"/>

Android - Custom EditText with different input types

I'm trying to make a custom EditText for currency which means I need to have a prefix of it for the currency and I have to limit users' input to numbers only.
This is my custom EditText code
public OpenSansEditText(Context context, AttributeSet attrs) {
super(context, attrs);
paint = getPaint();
applyCustomFont(context, attrs);
}
public OpenSansEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
paint = getPaint();
applyCustomFont(context, attrs);
}
private void applyCustomFont(Context context, AttributeSet attrs) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.OpenSansET);
...
// Prefix
String prefix = a.getString(R.styleable.OpenSansET_prefix);
if (prefix != null) {
mPrefix = prefix;
} else {
mPrefix = "";
}
// Prefix Color
int prefixColor = a.getColor(R.styleable.OpenSansET_prefixColor, 0);
if (prefix != null) {
mPrefixColor = prefixColor;
} else {
mPrefixColor = ContextCompat.getColor(context, R.color.miBlack);
}
a.recycle();
}
...
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (!mPrefix.equals("")) {
getPaint().getTextBounds(mPrefix, 0, mPrefix.length(), mPrefixRect);
mPrefixRect.right += getPaint().measureText(" "); // add some offset
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (!mPrefix.equals("")) {
paint.setColor(mPrefixColor);
canvas.drawText(mPrefix, super.getCompoundPaddingLeft(), getBaseline(), paint);
}
}
#Override
public int getCompoundPaddingLeft() {
return mPrefix.equals("") ? super.getCompoundPaddingLeft()
: super.getCompoundPaddingLeft() + mPrefixRect.width();
}
This is how I use it in xml :
<com.asta.www.classes.OpenSansEditText
android:id="#+id/shopping_filter_priceMinRange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:gravity="center"
android:hint="#string/min"
android:textColor="#color/miBlack"
android:textColorHint="#color/miGrey"
app:prefix="$"
app:prefixColor="#color/miBlack" />
<com.asta.www.classes.OpenSansEditText
android:id="#+id/shopping_filter_priceMaxRange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:gravity="center"
android:hint="#string/max"
android:inputType="number"
android:textColorHint="#color/miGrey"
app:prefix="$"
app:prefixColor="#color/miBlack" />
Which yields :
Only the first one without inputType as number has the currency sign shown, whereas the second ET doesn't have its currency sign shown.
How to achieve currency prefix as text and still keeping inputType to numbers only for user? And I don't want to use two views, namely EditText and TextView to left of it, both inside a ViewGroup to achieve that.
For this type of scenarios I use Compound views. Please see below code for more information.
First create a layout for your custom view like below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txt_prefix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$" />
<EditText
android:id="#+id/et_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number" />
</LinearLayout>
Now create a new class which should extends the LinearLayout. See below code.
public class OpenSansEditText extends LinearLayout {
private TextView txtPrefix;
private EditText etValue;
private String prefix = "$";
private int prefixColor = Color.BLACK;
public OpenSansEditText(Context context) {
super(context);
initializeViews(context, null);
}
public OpenSansEditText(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
initializeViews(context, attrs);
}
public OpenSansEditText(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initializeViews(context, attrs);
}
private void initializeViews(Context context, AttributeSet attrs) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.opensansedittext_view, this,true);
if (attrs != null) {
TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.OpenSansEditText);
prefix = a.getString(R.styleable.OpenSansEditText_prefix);
prefixColor = a.getColor(R.styleable.OpenSansEditText_prefixColor, Color.BLACK);
}
}
public CharSequence getValue(){
return etValue.getText();
}
public CharSequence getPrefix(){
return txtPrefix.getText();
}
#Override
protected void onFinishInflate() {
super.onFinishInflate();
txtPrefix = (TextView) findViewById(R.id.txt_prefix);
etValue = (EditText) findViewById(R.id.et_value);
txtPrefix.setText(prefix);
txtPrefix.setTextColor(prefixColor);
}
}
And then add your attributes to attribute xml file Ex: (attrs.xml in my case)
<resources>
<declare-styleable name="OpenSansEditText">
<attr name="prefix" format="string"/>
<attr name="prefixColor" format="color"/>
</declare-styleable>
</resources>
Now you can use it anywhere in the project as below
<com.asta.www.classes.OpenSansEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
app:prefix="$"
app:prefixColor="#f00"/>
Hope this will help you to solve your problem. Thanks...
In the end I found this link https://gist.github.com/kennydude/5407963 which helps me in the right direction. So what it does is I think making the prefix as Drawable using this class :
private class TagDrawable extends Drawable {
public String text = "";
public void setText(String s){
text = s;
// Tell it we need to be as big as we want to be!
setBounds(0,0,getIntrinsicWidth(),getIntrinsicHeight());
invalidateSelf();
}
#Override
public void draw(#NonNull Canvas canvas) {
// I don't know why this y works here, but it does :)
// (aka if you are from Google/are Jake Wharton and I have done it wrong, please tell me!)
canvas.drawText( text, 0, mLine0Baseline + canvas.getClipBounds().top, mTextPaint );
}
#Override public void setAlpha(int i) {}
#Override public void setColorFilter(ColorFilter colorFilter) {}
#Override public int getOpacity() {return PixelFormat.UNKNOWN;}
#Override public int getIntrinsicHeight (){
return (int)mFontHeight;
}
#Override public int getIntrinsicWidth(){
return (int)mTextPaint.measureText( text );
}
}
And draw it to the left of the TextView like
TagDrawable left = new TagDrawable();
left.setText("$");
setCompoundDrawablesRelative(left, null, null, null);
The link I supplied even has suffix support which I haven't tried.

how to use custom fonts on textview in android

For implementing custom font i seen few examples here issue is different,I am taking custom font in one abstract class which is used in all over the application.i am unable to change the fonts.
thanks in advance.
Create the custom class like below.
public class CustomTextView extends TextView {
public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs);
}
public CustomTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
public CustomTextView(Context context) {
super(context);
init(null);
}
private void init(AttributeSet attrs) {
if (attrs!=null) {
TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CustomTextView);
String fontName = a.getString(R.styleable.CustomTextView_fontName);
if (fontName!=null) {
Typeface myTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/"+fontName);
setTypeface(myTypeface);
}
a.recycle();
}
}
}
and add your font in assets>fonts folder.
add following in attrs.xml
<declare-styleable name="CustomTextView">
<attr name="fontName" format="string" />
</declare-styleable>
to use.
<com.abc.cusomclass.CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fontName="/*name of your font from assets/font folder*/"/>
You can do like this.
You have to add your .tff file on the assets folder
ArialMTBoldRegularTextView.java:
public final class ArialMTBoldRegularTextView extends CustomTextView {
public static final String FONT_PATH = "arial-rounded-mt-bold.ttf";
public ArialMTBoldRegularTextView(Context context) {
super(context);
setFont(FONT_PATH);
}
public ArialMTBoldRegularTextView(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
setFont(FONT_PATH);
}
public ArialMTBoldRegularTextView(Context context, AttributeSet attributeSet, int defStyleAttr) {
super(context, attributeSet, defStyleAttr);
setFont(FONT_PATH);
}
public void setFont(String fontPath) {
changeFont(this, fontPath);
}
public static void changeFont(final CompoundButton button, final String fontPath) {
Typeface typeface = Typeface.createFromAsset(button.getContext().getAssets(), fontPath);
button.setTypeface(typeface);
}
}
CustomTextView.java
public class CustomTextView extends TextView {
public CustomTextView(Context context) {
super(context);
}
public CustomTextView(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
}
public CustomTextView(Context context, AttributeSet attributeSet, int defStyleAttr) {
super(context, attributeSet, defStyleAttr);
}
public Typeface getFont(final Context context, final String fontPath) {
return Typeface.createFromAsset(context.getAssets(), fontPath);
}
public void changeFont(final TextView textView, final String fontPath) {
Typeface typeface = Typeface.createFromAsset(textView.getContext().getAssets(), fontPath);
textView.setTypeface(typeface);
}
public void changeFont(final CompoundButton button, final String fontPath) {
Typeface typeface = Typeface.createFromAsset(button.getContext().getAssets(), fontPath);
button.setTypeface(typeface);
}
}
and fater in xml:
<packagename.views.ArialMTBoldRegularTextView
android:layout_width="wrap_content"
android:layout_height="35dp"
android:gravity="center"
android:text="Pseudo"/>
try this for custom font fron Assets
// Font path
String fontPath = "fonts/Face Your Fears.ttf";
// text view label
TextView txtGhost = (TextView) findViewById(R.id.ghost);
// Loading Font Face
Typeface tf = Typeface.createFromAsset(getAssets(), fontPath);
// Applying font
txtGhost.setTypeface(tf);
for more information check this,
http://www.androidhive.info/2012/02/android-using-external-fonts/
now android Support Library 26 supports using fonts directly from your XML see the doc for more details.
The better way of doing this is to make custom TextView with custom font like this:
Java
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;
public class RegularProximaTextView extends TextView {
public static Typeface FONT_NAME;
public RegularProximaTextView(Context context) {
super(context);
if(FONT_NAME == null) FONT_NAME =
Typeface.createFromAsset(context.getAssets(), "fonts/Mark Simonson -
Proxima Nova Regular.otf");
this.setTypeface(FONT_NAME);
}
public RegularProximaTextView(Context context, AttributeSet attrs) {
super(context, attrs);
if(FONT_NAME == null) FONT_NAME =
Typeface.createFromAsset(context.getAssets(), "fonts/Mark Simonson -
Proxima
Nova Regular.otf");
this.setTypeface(FONT_NAME);
}
public RegularProximaTextView(Context context, AttributeSet attrs, int
defStyle) {
super(context, attrs, defStyle);
if(FONT_NAME == null) FONT_NAME =
Typeface.createFromAsset(context.getAssets(), "fonts/Mark Simonson -
Proxima Nova Regular.otf");
this.setTypeface(FONT_NAME);
}
}
XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:id="#+id/activity_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:background="#color/colorGreyBar"
>
<com.tracer.joblogic.v2.helpers.custom_ui.RegularProximaTextView
android:id="#+id/tvTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:textColor="#color/colorButtonRed"
android:text="Some text"
android:textSize="8sp"
/>
</android.support.design.widget.CoordinatorLayout>

How to add svg icon to TextView with default text font?

here is my custom text view:
public class CustomTextView extends TextView {
public CustomTextView (Context context) {
super(context);
}
public CustomTextView (Context context, AttributeSet attrs) {
super(context, attrs);
setCustomFont(context, attrs);
}
public CustomTextView (Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setCustomFont(context, attrs);
}
private void setCustomFont(Context ctx, AttributeSet attrs) {
setCustomFont(ctx);
}
public boolean setCustomFont(Context ctx) {
Typeface tf = null;
try {
tf = Typeface.createFromAsset(ctx.getAssets(), "icons/svg_icons.ttf");
} catch (Exception e) {
return false;
}
setTypeface(tf);
return true;
}
}
my icon code is :
<string name="svg_warning" translatable="false"></string>
I'm adding svg icon to TextView with text by this:
mytextview.setText(String.format("Please Select a Country %s",getResources().getString(R.string.svg_warning)));
But font of "Please Select a Country" is not the same like default Android font. How to add svg icon to TextView with default Android's text font?
Result:
holy shit i never knew textviews supported svg like this!
As I can see from your code your customTextView will have the Typeface you just set in the setCustomFont method. What you can do is have 2 textviews, one your customTextView for the svg and left to it enclosed in a horizontal LinearLayout a normal TextView. You can't have one font to some text in a textview and another font for the rest of the text, in web can you have 2 different fonts for a p tag?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

FontFamily doesn't apply after upgrading support library

I have a TextView:
<TextView
android:id="#+id/digits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:translationY="5dp"
android:text=""
android:textSize="128sp"
android:textColor="#color/white"
android:fontFamily="fonts/Roboto-Thin.ttf"
/>
In my gradle file I used to have
dependencies {
compile 'com.android.support:support-v4:19.1.0'
}
Everything was great, TextView had proper font and typeface.
But, when I changed support library version (so I can use new SwipeToRefreshLayout) to:
dependencies {
compile 'com.android.support:support-v4:21.0.2'
}
Then my TextView is not applying Robot Thin font, text is bolded.
How come does it work this way? I think problem is only with Roboto-Thin, because other TextViews that have Roboto-Regular are working properly. Any ideas guys?
Create a Custom TextView class
public class CustomTextView extends TextView {
public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public CustomTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomTextView(Context context) {
super(context);
init();
}
public void init() {
if (!isInEditMode()) {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/Roboto-Thin.ttf");
setTypeface(tf, 1);
}
}
public void setNewText(CharSequence text) {
// code to check text for null omitted
super.setText(text, BufferType.SPANNABLE);
}
}
After this, change your
<TextView
to
<CustomTextView
Is the better way-out to this error

Categories

Resources