I have a TextView
showing time. The time updates every second.
I used DIN font. I have set TextView
to center align(vertical). Why does the colon align to the baseline? Who knows how to fix this issue?
<TextView android:id="@+id/time" android:layout_width="wrap_content" android:layout_height="48px" android:layout_below="@id/temperature" android:layout_centerHorizontal="true" android:layout_marginBottom="-5px" android:fontFamily="DIN" android:gravity="center" android:textColor="@color/white" android:textSize="39px" />
4 Answers
Answers 1
That is the default way how the font renders the colon character. There is no way in which you can change that, unless you create seperate TextViews for the colons. Alternatively you can use a different font and check if any of the other fonts actually centers the colon chararacter. Use the following to do this:
android:fontFamily="sans-serif" // roboto regular android:fontFamily="sans-serif-light" // roboto light android:fontFamily="sans-serif-condensed" // roboto condensed android:fontFamily="sans-serif-thin" // roboto thin (android 4.2) android:fontFamily="sans-serif-medium" // roboto medium (android 5.0)
For a better explanation of the fonts which can be used, you may check the official documentation.
Hope this helps :)
Answers 2
You can divide into 5 TextView and add android:layout_marginTop="3px" on the ones with numbers.
Answers 3
Because the colon is such a simple shape you can build it from smaller elements, either text views, graphic primitives, or just two views, in a vertical linear layout.
For example, start by creating a simple dot as a shape drawable (dot.xml in the drawable folder):
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#ccc"/> </shape>
Create a view with this drawable as the background (clock_dot.xml in the layout folder):
<?xml version="1.0" encoding="utf-8"?> <View xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="3sp" android:layout_height="3sp" android:background="@drawable/dot" android:layout_margin="3sp" android:layout_weight="0" />
Stack two dots to create the colon character (clock_colon.xml in the layout folder):
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_gravity="center_vertical" android:gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="match_parent"> <include layout="@layout/clock_dot"/> <include layout="@layout/clock_dot"/> </LinearLayout>
Create a text view with two digits (clock_digits.xml):
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:textColor="#ccc" android:textSize="24sp" android:text="12" />
Then build a timer layout from the digits layout and the colon layout:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <include layout="@layout/clock_digits"/> <include layout="@layout/clock_colon"/> <include layout="@layout/clock_digits"/> <include layout="@layout/clock_colon"/> <include layout="@layout/clock_digits"/> </LinearLayout>
You get something like this:
Answers 4
Draw an background image and set it to Edit text Back ground
0 comments:
Post a Comment