Custom font for clock textview - java

I am new in world of android developement and I want to make a clock such that each digit of time has it's own typeface.
Hour digits has it's own typeface and minutes digit has its own typeface.
How can i do this. Help me.

Let's say your font name is DemoFont . Make a Class which extends TextView. And initialize the font for the DemoFont .
Next place the .ttf file of that font in the assets folder.
public class DemoFont extends TextView {
public DemoFont (Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public DemoFont (Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public DemoFont (Context context) {
super(context);
init();
}
private void init() {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
"demofont.ttf");
setTypeface(tf);
}
}
Now, In your layout file you can use this like this way.
<YOUR_PACKAGE_NAME.DemoFont
android:layout_width="match_parent"
android:layout_height="wrap_content" />

First, you need to download a font file, which is usually of the .otf format. Then, you need to import this font into your assets folder in your android studio or eclipse project. After doing this you can create a new Typeface and set it to your text view. In terms of having different fonts for the hours and minutes digit, you need to create a layout with multiple text views. For example, you could do something like the following
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/hours_digit"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=": "
android:id="#+id/time_colon"
android:layout_toEndOf="#id/hours_digit" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/time_colon"
android:id="#+id/minutes_digit"/>
</RelativeLayout>
Another way to accomplish this, rather than setting a typeface to a textview every single time, is to create your own custom textview, so that the typeface will be applied whenever you're using it. For example, for the minutes text view, you could do:
public class MinutesTextView extends TextView {
// Constructor method for the text view...
public MinutesTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs);
}
// Constructor method for the text view...
public MinutesTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
// Constructor method for the text view...
public MinutesTextView(Context context) {
super(context);
init(null);
}
// Initializes any UI properties of the text view.
private void init(AttributeSet attrs) {
Typeface myTypeface = Typeface.createFromAsset(getContext().getAssets(), "Minutes-font-file.otf");
setTypeface(myTypeface);
}
}
and the, using the layout file from earlier.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.yourpackage.MinutesTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/hours_digit"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=": "
android:id="#+id/time_colon"
android:layout_toEndOf="#id/hours_digit" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/time_colon"
android:id="#+id/minutes_digit"/>
</RelativeLayout>

First copy the fonts to the assets folder in your project.
For Hour Textview
public class HourTextView extends TextView {
public HourTextView(Context context) {
super(context);
init(null);
}
public HourTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(attrs);
}
public HourTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
public HourTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
// Initializes any UI properties of the text view.
private void init(AttributeSet attrs) {
Typeface myTypeface = Typeface.createFromAsset(getContext().getAssets(), "Hour-font-file.otf");
setTypeface(myTypeface);
}
}
For Minute Textview
public class MinuteTextView extends TextView {
public MinuteTextView(Context context) {
super(context);
init(null);
}
public MinuteTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(attrs);
}
public MinuteTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
public MinuteTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
// Initializes any UI properties of the text view.
private void init(AttributeSet attrs) {
Typeface myTypeface = Typeface.createFromAsset(getContext().getAssets(), "Minute-font-file.otf");
setTypeface(myTypeface);
}
}
For Seconds Textview
public class SecondTextView extends TextView {
public SecondTextView(Context context) {
super(context);
init(null);
}
public SecondTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(attrs);
}
public SecondTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
public SecondTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
// Initializes any UI properties of the text view.
private void init(AttributeSet attrs) {
Typeface myTypeface = Typeface.createFromAsset(getContext().getAssets(), "Second-font-file.otf");
setTypeface(myTypeface);
}
}
and in xml file do this,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<com.yourpackage.HourTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="10"
android:id="#+id/hourText" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text=" : " />
<com.yourpackage.MinuteTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="45 "
android:id="#+id/minuteText" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text=" : " />
<com.yourpackage.SecondTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="28"
android:id="#+id/secondsText" />
</LinearLayout>

public class MainActivity extends AppCompatActivity {
public TextView textView;
int countInt;
private int mInterval = 1000; // 1 second by default, can be changed later
private Handler mHandler;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView=(TextView)findViewById(R.id.textView);
mHandler = new Handler();
startRepeatingTask();
}
Runnable mStatusChecker = new Runnable() {
#Override
public void run() {
try {
countInt=countInt+1;
textView.setText(String.valueOf(countInt));
} finally {
mHandler.postDelayed(mStatusChecker, mInterval);
}
}
};
void startRepeatingTask() {
mStatusChecker.run();
}
void stopRepeatingTask() {
mHandler.removeCallbacks(mStatusChecker);
}
}

Related

how to create a custom component with a xml file android

I have an xml file and I want to change it to a component by using a class which extends View.
how Can I do that ??
java code :
public class custom extends View {
public custom(Context context) {
super(context);
}
public custom(Context context , AttributeSet attrs) {
super(context , attrs);
}
}
and this is my xml code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.apd.ecryptfolders.custom">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"/>
Thanks!
You have to create a class that extends layout root view and then inflate the xml layout
public class CustomView extends RelativeLayout {
public CustomView(Context context) {
super(context);
View view = inflate(getContext(), R.layout.layout_name, null);
addView(view);
// init layout
}
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
View view = inflate(getContext(), R.layout.layout_name, null);
addView(view);
// here you can apply custom attributes
// init layout
}
}
These links can help you:
https://developer.android.com/training/custom-views/create-view
https://developer.android.com/guide/topics/ui/custom-components

My Toolbar compound view doesn't align with parent view group properly

I am in need of a custom toolbar for a new app that I am writing. When I try to add the view to my main layout it doesn't align properly. Can someone please explain why?
public class LjCustomToolbar extends Toolbar {
private Context context;
private LayoutInflater layoutInflater;
private TextView toolbar_title;
public LjCustomToolbar(Context context) {
super(context);
initialize(context);
}
public LjCustomToolbar(Context context, AttributeSet attrs) {
super(context, attrs);
initialize(context);
}
public LjCustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initialize(context);
}
private void initialize(Context context) {
this.context = context;
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
layoutInflater.inflate(R.layout.custom_toolbar, this);
}
}
custom_toolbar.xml
<Toolbar
style="#style/LjToolBarDefault"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
style="#style/LjBodyNormalText"
android:textColor="#color/white"
android:layout_gravity="center"
android:id="#+id/toolbar_title_text" />
</Toolbar>
activity_main.xml
<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:gravity="center_horizontal"
android:background="#color/lj_color_primary">
<us.lj.CustomViews.LjCustomToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
Click here to see my current layout
Can you show a screenshot, to see what is not working.
Why do you want to customize the Toolbar? If you want to add another views inside the toolbar you can do it in xml as all other UI elements

Custom TextView cuts off using wrap_content

I created a custom TextView, in order to add a new font:
public class CustomTextView extends TextView{
public CustomTextView(Context context, AttributeSet attrs, int defStyle){
super(context, attrs, defStyle);
setTypeface(SplashActivity.SECRET_CODE_TYPEFACE, Typeface.NORMAL);
}
public CustomTextView(Context context, AttributeSet attrs){
super(context, attrs);
setTypeface(SplashActivity.SECRET_CODE_TYPEFACE, Typeface.NORMAL);
}
public CustomTextView(Context context){
super(context);
setTypeface(SplashActivity.SECRET_CODE_TYPEFACE, Typeface.NORMAL);
}
}
Now, when I use this TextView, the text is cut off:
And here is my XML:
<com.whereisthemonkey.sqlsheetmanager.Graphics.CustomTextView
android:layout_width="match_parent"
android:text="#string/title"
android:textSize="56sp"
android:layout_height="wrap_content"
android:gravity="center" />
android:padding="10dp"
Add padding into your text view,as shown below:
<com.whereisthemonkey.sqlsheetmanager.Graphics.CustomTextView
android:layout_width="match_parent"
android:text="#string/title"
android:textSize="56sp"
android:padding="10dp"
android:layout_height="wrap_content"
android:gravity="center" />

How to edit dimension of customview in Android Studio?

I want to give custom dimension to custom view but when i open the app, it show me the image in small dimension. In the customview i put a GIF image.
The CustomGifView.java
public class CustomGifView extends View {
private InputStream gifInputStream;
private Movie gifMovie;
private int movieWidth, movieHeight;
private long movieDuration;
private long mMovieStart;
public CustomGifView(Context context) {
super(context);
init(context);
}
public CustomGifView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public CustomGifView(Context context, AttributeSet attrs,
int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context){
setFocusable(true);
gifInputStream = context.getResources()
.openRawResource(R.drawable.caricamento);
gifMovie = Movie.decodeStream(gifInputStream);
movieWidth = gifMovie.width();
movieHeight = gifMovie.height();
movieDuration = gifMovie.duration();
}
#Override
protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
setMeasuredDimension(movieWidth, movieHeight);
}
public int getMovieWidth(){
return movieWidth;
}
public int getMovieHeight(){
return movieHeight;
}
public long getMovieDuration(){
return movieDuration;
}
#Override
protected void onDraw(Canvas canvas) {
long now = android.os.SystemClock.uptimeMillis();
if (mMovieStart == 0) { // first time
mMovieStart = now;
}
if (gifMovie != null) {
int dur = gifMovie.duration();
if (dur == 0) {
dur = 1000;
}
int relTime = (int)((now - mMovieStart) % dur);
gifMovie.setTime(relTime);
gifMovie.draw(canvas, 0, 0);
invalidate();
}
}
The caricamento.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:components="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#398596">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Caricamento in corso..."
android:id="#+id/textView"
android:textColor="#ffffff"
android:layout_marginBottom="37dp"
android:layout_above="#+id/textView4"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Tip: Lo sapevi che il QR Scanner rileva automaticamente il codice del tavolo?"
android:id="#+id/textView4"
android:layout_marginBottom="76dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="55dp" />
<com.faddex.ristorante.CustomGifView
android:layout_width="300dp"
android:layout_height="300dp"
android:id="#+id/view"
android:layout_above="#+id/textView"
android:layout_centerHorizontal="true" />
As you can see at the end i give 300dp - 300dp but when i open the activity in the smartphone it show always small dimension, even if i change to 10000dp - 10000dp

Android scrollview remove blue light

When you scroll on Android using scrollview, it generates a blue light the direction you are scrolling in. How would I remove the blue light?
My manifest:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sobreScrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#android:color/transparent"
android:scrollingCache="false"
android:fadingEdge="none"
android:fadingEdgeLength="0dp"
android:scrollbars="none"
android:scrollbarStyle="insideOverlay"
>
<LinearLayout
android:id="#+id/contentSobre"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
Java source code:
package com.my.app.section;
import android.content.Context;
import android.util.AttributeSet;
import com.my.app.BaseSection;
import com.my.app.R;
public class SobreSection extends BaseSection {
public SobreSection(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public SobreSection(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SobreSection(Context context) {
super(context);
}
#Override
protected void onFinishInflate() {
// TODO Auto-generated method stub
super.onFinishInflate();
findViewById(R.id.sobreScrollView).setVerticalFadingEdgeEnabled(false);
findViewById(R.id.sobreScrollView).setVerticalScrollBarEnabled(false);
}
}
Try adding this to your ScrollView in your layout.xml:
android:overScrollMode="never"
or add this to your code:
findViewById(R.id.sobreScrollView).setOverScrollMode(ScrollView.OVER_SCROLL_NEV‌​ER);
Add this extra line to your ScrollView definition:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sobreScrollView"
...
android:overScrollMode="never">

Categories