sans-serif-light with "fake bold" - android

I have set up the following theme for my app:
<style name="AppTheme" parent="Theme.Sherlock.Light">
<item name="android:textViewStyle">#style/RobotoTextViewStyle</item>
</style>
<style name="RobotoTextViewStyle" parent="android:Widget.TextView">
<item name="android:fontFamily">sans-serif-light</item>
</style>
Therefor when I create a TextView I get the "roboto light" font which I want. Some TextViews however, I would like to set the textStyle="bold" attribute but it doesn't work since the light font doesn't have a "native" (?) bold variant.
On the other side if I programmatically use the setTypeface method I could get a bold font:
textView.setTypeface(textView.getTypeface(), Typeface.BOLD);
This font is derived from the roboto light and looks really good.
I would like to have this bold light font but I wonder what the most elegant way to do it is.
Can it be done solely using xml?
What is the best implementation if I need to create a "BoldTextView extends TextView"?

I ended up creating a class for it:
public class FakeBoldTextView extends TextView {
public FakeBoldTextView(Context context) {
super(context);
setTypeface(getTypeface(), Typeface.BOLD);
}
public FakeBoldTextView(Context context, AttributeSet attrs) {
super(context, attrs);
setTypeface(getTypeface(), Typeface.BOLD);
}
public FakeBoldTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setTypeface(getTypeface(), Typeface.BOLD);
}
}
And using it in XML like this:
<the.package.name.FakeBoldTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Example string" />

Related

Android - Custom Font Button - color specified in style not being set

I have created a MyButton class to set and display a custom
`public class MyButton extends android.support.v7.widget.AppCompatButton {
public MyButton(Context context) {
super(context);
init();
}
public MyButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/Filmcryptic.ttf");
setTypeface(tf);
}
}
`
In my styles.xml file, I have set a style like this, where I only want to override the textcolor and the size -
<style name="taWhiteButtonText" parent="#android:style/TextAppearance">
<item name="android:textColor">#FF0000</item>
<item name="android:textSize">20dp</item>
</style>
In my layout file, I am using it so -
<com.xx.yyy.MyButton
android:id="#+id/button_start_quiz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/chalkbutton"
android:text="Start Quiz"
style="#style/taWhiteButtonText"
/>
The problem I face is that the font size changes as I update the style, but the font color does not get reflected.
What am I doing wrong?
Change your parent in style.xml file.
<style name="taWhiteButtonText" parent="Widget.AppCompat.Button">
<item name="android:textColor">#FF0000</item>
<item name="android:textSize">20dp</item>
</style>

How to change the font family of SwitchCompat?

I've noticed that the SwitchCompat's font does not seem to change with what I've set in the fontFamily field. I've also tried using styles with custom fontFamily (which works on TextViews) and even the switchTextAppearance field. It does apply on the preview (I know the preview is not really accurate) but not when I tried running it on my test device.
Here's my SwitchCompat:
<android.support.v7.widget.SwitchCompat
style="#style/MyStyle.Body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/my_font_family"
android:text="Enable"
app:switchTextAppearance="#style/MyStyle.Body"/>
and here's my style:
<style name="MyStyle.Body" parent="Base.TextAppearance.AppCompat.Body1">
<item name="android:textSize">14sp</item>
<item name="android:fontFamily">#font/my_font_family</item>
<item name="android:textColor">#color/color_primary_text</item>
</style>
As you can see, I only really want to change it's font
EDIT
I've changed my style to this
<style name="MyStyle.Switch" parent="Widget.AppCompat.CompoundButton.Switch">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#color/color_primary_text</item>
<item name="android:fontFamily">#font/my_font_family</item>
<item name="fontFamily">#font/my_font_family</item>
</style>
still doesn't work though
XML settings is not working, therefore I use following code:
someSwitch.setTypeface(ResourcesCompat.getFont(context, R.font.roboto));
Try
parent="Base.TextAppearance.AppCompat.Body1"
replace into this
parent="TextAppearance.AppCompat.Widget.Switch"
Try below
public class CustomSwitchCompact extends SwitchCompat {
public CustomSwitchCompact(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public CustomSwitchCompact(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomSwitchCompact(Context context) {
super(context);
init();
}
private void init() {
if (!isInEditMode()) {
Typeface myFonts = Typeface.createFromAsset(getContext().getAssets(),
"fonts/Roboto_Bold.ttf");
setTypeface(myFonts);
}
}
}
XML file
<com.test.CustomSwitchCompact
android:id="#+id/switch_compat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:checked="false"
android:padding="20dp"
android:text="SwitchCompat"
android:textOff="OFF"
android:textOn="ON"
app:showText="true" />
Another way to achieve SwitchCompact with custom font
<android.support.v7.widget.SwitchCompat
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="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/adamSwitch"
android:textColor="#color/top_color"
android:textAppearance="#color/top_color"
android:gravity="center"
app:showText="true"
android:fontFamily="#font/my_font_family"
app:theme="#style/Custom.Widget.SwitchCompat"
app:switchPadding="5dp"
/>
in style.xml
<style name="Custom.Widget.SwitchCompat" parent="Widget.AppCompat.CompoundButton.Switch" >
<item name="android:textColorPrimary">#color/blue</item>
<item name="android:textSize">14sp</item>
<item name="android:fontFamily">#font/my_font_family</item>
<item name="android:textColor">#color/color_primary_text</item>
</style>
The only thing that works for me is setSwitchTypeface, not setTypeface:
my_switch.setSwitchTypeface(ResourcesCompat.getFont(context, R.font.my_font))
I've used android:textAppearance instead of android:switchTextAppearance and custom font works now. Also my switch style have Widget.AppCompat.CompoundButton.Switch as parent

Custom style for all Edit Texts in the application

I have an Android application which uses Material design theme with backward compatibility through AppCompat.
There are multiple Textview's and EditText's in my application. I would like the same properties to be applied to all these TextView's and EditText's across the application. In order to achieve this, i have defined a custom style as shown below:
<!-- Base application theme. -->
<style name="ParentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="ArabicTheme" parent="ParentTheme">
<item name="android:editTextStyle">#style/arabicEditText</item>
<item name="android:textViewStyle">#style/arabicTextView</item>
</style>
<style name="arabicEditText" parent="#android:style/Widget.EditText">
<item name="android:gravity">right</item>
<item name="android:ellipsize">end</item>
</style>
<style name="arabicTextView" parent="#android:style/Widget.TextView">
<item name="android:gravity">right</item>
</style>
In my AndroidManifest.xml file under the <Application> tag, i have set android:theme="#style/ArabicTheme".
Below is the output of the activity:
As seen in the above output, the Style is being applied to TextView only. However, The same is not being applied to EditText.
Incase, if i explicitly specify these properties to the EditText in the corresponding Actitivy's xml as shown below:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Name"
android:ellipsize="end"
android:gravity="right"
android:ems="10"
android:layout_below="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:id="#+id/editText" />
i.e I have explicitly added android:ellipsize="end" and android:gravity="right" to the <EditText>, and only then the output is as expected:
Like i said, i have multiple TextView's and EditText's and i cannot explicitly add these properties to all of them. So, is there a way i can achieve this using Styles or any other approach? Am i doing something wrong here?
Your approach is correct. Just remove android: from the editText's attribute name:
<item name="editTextStyle">#style/arabicEditText</item>
I cannot explain this though. I guess appCompat things don't reuse android attributes, but add another ones with similiar names. Same goes with colorPrimary, srcCompat and others.
I have been doing this
public class LightEditText extends android.widget.EditText{
public LightEditText(Context context) {
super(context);
setFont();
}
public LightEditText(Context context, AttributeSet attrs) {
super(context, attrs);
setFont();
}
public LightEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setFont();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public LightEditText(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
setFont();
}
/**
* This method is used to set the given font to the TextView.
*/
private void setFont() {
Typeface typeface = TypefaceCache.get(getContext().getAssets(), "fonts/Roboto-Light.ttf");
setTypeface(typeface);
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
Then inside your xml file
<com.packagename.LightEditText
android:id="#+id/edtTaskName"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
Do the above method for setting common properties(fontType,style..etc) to editext

How to inhrit style="?android:listSeparatorTextViewStyle" style and change the line color to blue?

I want to have a line below a text view with a blue color I came across this post in this post having this as a one of the answer I tried it and is working fine but I want to change the color of the textview and the line below it.
just add this style:
style="?android:listSeparatorTextViewStyle"
to your TextView
I also have tried extracting the style but it is giving me error while inheriting the said style
My style is as follows
<style name="blueBoldText" parent="?android:listSeparatorTextViewStyle">
<item name="android:textColor">#color/DarkTurquoise</item>
<item name="android:textStyle">bold</item>
</style>
Actually, the value of the attribute
?android:listSeparatorTextViewStyle
is
#android:style/Widget.Holo.Light.TextView.ListSeparator
So you can inherit this style instead.
You can extend TextView and set listSeparatorTextViewStyle.
public class HeaderView extends TextView {
public HeaderView(Context context) {
super(context, null, android.R.attr.listSeparatorTextViewStyle);
}
public HeaderView(Context context,
AttributeSet attrs) {
super(context, attrs, android.R.attr.listSeparatorTextViewStyle);
}
}
then
<com.gmail.sikambr.alib.HeaderView
style="#style/your_style"
android:text="..."
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

How to set style or font to text of a TextView in android?

I want to set style or font to the text in a TextView like the image shown below:
<TextView
style="#style/CodeFont"
android:text="#string/hello" />
You need to Make that codefont style:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CodeFont" parent="#android:style/TextAppearance.Medium">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#00FF00</item>
<item name="android:typeface">monospace</item>
</style>
</resources>
Straight from : http://developer.android.com/guide/topics/ui/themes.html
You need a custom font and then you can do this:
Typeface mFont = Typeface.createFromAsset(getAssets(), "fonts/myFont.ttf");
MyTextView.setTypeface(mFont);
You have to create a "fonts" folder in your assets folder. Drop your font in there.
You could also create a custom TextView of course. Refer to this answer, I gave a while back, if you prefer that.
There is another way if you want to change it on many TextViews, Use a class:
public class MyTextView extends TextView {
public MyTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public MyTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyTextView(Context context) {
super(context);
init();
}
private void init() {
if (!isInEditMode()) {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/Ubuntu-L.ttf");
setTypeface(tf);
}
}
}
and in the Layout replace:
<TextView
...
/>
With:
<com.WHERE_YOUR_CLASS_IS.MyTextView
...
/>
You could create a layout.xml file that would have your textview in it. Something like :
textView.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
style="#android:style/Holo.ButtonBar" >
If you dont want this then you could create your custom style. Something like this :
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Custom" parent="#android:style/TextAppearance.Large" >
<item name="android:typeface">monospace</item>
</style>
</resources>
and in the layout file change the style to something like :
style="#style/Custom"

Categories

Resources