I've developed a game, which has boxes of textview with 1 letter within it.
in the emulator everything works fine, but, when i try to see it on my phone, the letter shifts down, and cuts the letter in the middle.
currently, my style is as so :
<style name="MoveLetter">
<item name="android:layout_width">#dimen/BoxSize</item>
<item name="android:layout_height">#dimen/BoxSize</item>
<item name="android:background">#drawable/blue_box_md_lighter</item>
<item name="android:contentDescription">#string/temp</item>
<item name="android:gravity">center</item>
<item name="android:scaleType">fitCenter</item>
<item name="android:textStyle">bold</item>
<item name="android:typeface">serif</item>
<item name="android:visibility">visible</item>
</style>
I use this style in my xml(partly) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/game7_336letters"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/woodbackground1lighter_a_rotated"
android:orientation="vertical" >
<TextView style="#style/MoveLetter" android:id="#+id/game7_moveletter1"
android:layout_marginLeft="180dp" android:layout_marginTop="30dp" android:textIsSelectable="true" />
<TextView style="#style/MoveLetter" android:id="#+id/game7_moveletter2"
android:layout_marginLeft="240dp" android:layout_marginTop="30dp" android:textIsSelectable="true" />
<TextView style="#style/MoveLetter" android:id="#+id/game7_moveletter3"
android:layout_marginLeft="300dp" android:layout_marginTop="30dp" android:textIsSelectable="true" />
<TextView style="#style/MoveLetter" android:id="#+id/game7_moveletter4"
android:layout_marginLeft="180dp" android:layout_marginTop="175dp" android:textIsSelectable="true" />
<TextView style="#style/MoveLetter" android:id="#+id/game7_moveletter5"
android:layout_marginLeft="240dp" android:layout_marginTop="175dp" android:textIsSelectable="true" />
<TextView style="#style/MoveLetter" android:id="#+id/game7_moveletter6"
android:layout_marginLeft="300dp" android:layout_marginTop="175dp" android:textIsSelectable="true" />
I've tried many options to add to the style - PaddingBottom,PaddingTop, layout_gravity = center, gravity = layout_horizontal, gravity = layout_vertical : all didn't help.
as far as right / left alignment - its good, the letter is in the center of the textview.
i'd appreciate any help you may have to offer..
Try specifying textSize, and make it smaller than your BoxSize dimen. Different letters have different dimensions, so it will be tricky to get right across different density devices.
incase anyone else has this issue : i figure out a way to pass the problem :
if you set the padding on code behaind, problem solved (for me at least..)
TextView tv = findViewById(...);
tv.setPadding( 0, -25,0,0);
Related
So I have 3 vertical aligned TextViews. The second one has a larger font size.
Now, if the second TextView holds a string starting with e.g. a 'B' it looks like the View is indented:
Here's my XML layout:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView style="#style/TextAppearance.LabelSmall"
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1" />
<TextView style="#style/TextAppearance.LabelBig"
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B TextView2" />
<TextView style="#style/TextAppearance.LabelSmall"
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView3" />
</LinearLayout>
And here's the corresponding styles.xml file:
<resources>
<style name="TextAppearance.LabelBig" parent="TextAppearance.MaterialComponents.Headline3">
<item name="fontFamily">#font/opensans_regular</item>
<item name="android:fontFamily">#font/opensans_regular</item>
<item name="android:textSize">48sp</item>
</style>
<style name="TextAppearance.LabelSmall" parent="TextAppearance.MaterialComponents.Body1">
<item name="fontFamily">#font/opensans_regular</item>
<item name="android:fontFamily">#font/opensans_regular</item>
<item name="android:textSize">16sp</item>
</style>
</ressources>
Is there any way to make these TextViews look equally indented?
Thanks for your help.
You don't need to use three textviews for single line text, just go for the spannable.
Find some info here: https://medium.com/androiddevelopers/spantastic-text-styling-with-spans-17b0c16b4568
I am setting style,color and size to textview , that is working
this is my code `
<android.support.v7.widget.AppCompatTextView
android:id="#+id/txt_agent_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:gravity="center"
android:textColor="#000"
android:textSize="14sp"
android:textStyle="italic"/>
Please check your parent layout is correct some times transparent layer or such things create visualise problem with colour
<android.support.v7.widget.AppCompatTextView
android:id="#+id/txt_agent_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:gravity="center"
android:text="AppCompatTextView"
android:textColor="#FFFFFF"
android:textSize="114dp"
android:textStyle="italic" />
Use Dimension for setting up a text size ,always avoid hard coding
If you want to set same style for text-color,text-size and text-style than you can create something like
<style name="MyTextAppearance" parent="TextAppearance.AppCompat">
<item name="android:textColor">?android:textColorPrimary</item>
<item name="android:textSize">#dimen/abc_text_size_body_1_material</item>
<item name="textColor">?textColorPrimary</item>
<item name="textStyle">italic</item>
</style>
If coloumn 3 has large text, column 2 disappears. Column 2 also disappears if I set android:stretchColumns="2,3". I'd like to set a minWidths to column 2. But this attribute is getting ignored.
I'm helping myself right now by setting android:stretchColumns="3" and android:shrinkColumns="3" and applying a maxWidth to the TextView on position 2. This almost does the job, but minWidth would be more the solution.
<TableLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:shrinkColumns="2,3"
android:stretchColumns="3" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/TextViewIdLabel"
style="#style/overlay_content"
android:text="#string/id_label"
android:textStyle="bold" />
<TextView
android:id="#+id/TextViewIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp" />
<TextView
android:id="#+id/TextViewPersonIdLabel"
style="#style/overlay_content"
android:layout_marginLeft="8dp"
android:text="#string/person_id_label"
android:textStyle="bold" />
<TextView
android:id="#+id/TextViewPersonIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp" />
</TableRow>
<!-- I skipped the other rows -->
</TableLayout>
This is the used style, if you wonder:
<style name="overlay_content">
<item name="android:textColor">#color/foreground_color_on_dark_background</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">20sp</item>
<item name="android:ellipsize">marquee</item>
<item name="android:singleLine">true</item>
</style>
Update:
As the answers came I found out more about my requirements which I summed up in this comment: How to shrink a TableLayout column to a minWidth?
Seems like this might be the practical workaround you need, so moving my comment to answer. Maybe this can be improved though, essentially be dilligent about setting these weights to suit your app
How about setting weight per column instead of android:shrinkColumns and android:stretchColumns . So for column 1 you could set 0.2 weight, 0.3 for column 2 and 0.5 for column 3 and so on
How to shrink a TableLayout column to a minWidth?
Actually it is simple, just TextView layout_width="wrap_content" can do
that, the reason not working in your style is that 'wrap_content' should
not work together with TextView 'ellipsize', they are conflict. So you need
one seperate syle 'overlay_slide' for the column that has long text.
So use 'overlay_content' for columns those have short text, use
'overlay_slide' for columns that have long text.
Besides I suppose the 'ellipsize' in your style is not working because
seems two items missing:
<item name="android:focusable">true</item>
<item name="android:focusableInTouchMode">true</item>
finally in the column that has long text, you also need:
android:layout_weight="1"
to use all rest of space for 'ellipsize'.
Remove android:shrinkColumns="2,3" android:stretchColumns="3" from TableLayout
Solution working styles and layout:
//remove 'ecllipze' related items from 'overlay_content'
<style name="overlay_content">
<item name="android:textColor">#color/foreground_color_on_dark_background</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">20sp</item>
</style>
//remove 'android:layout_width' from 'overlay_slide'
<style name="overlay_slide">
<item name="android:textColor">#color/foreground_color_on_dark_background</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">20sp</item>
<item name="android:ellipsize">marquee</item>
<item name="android:focusable">true</item>
<item name="android:focusableInTouchMode">true</item>
<item name="android:singleLine">true</item>
</style>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextViewIdLabel"
style="#style/overlay_content"
android:text="#string/id_label"
android:textStyle="bold" />
<TextView
android:id="#+id/TextViewIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp"/>
<TextView
android:id="#+id/TextViewPersonIdLabel"
style="#style/overlay_content"
android:layout_marginLeft="8dp"
android:text="#string/person_id_label"
android:textStyle="bold"/>
<TextView
android:id="#+id/TextViewPersonIdValue"
style="#style/overlay_slide"
android:layout_weight="1"
android:layout_marginLeft="4dp" />
</TableRow>
</TableLayout>
Screenshot from my testing: (Portrait and Landscape)
My test long text column is text 'Column 1 ... Column 8'
You cannot change the width of a column that way. The width is only defined by the widest row in that column. If you have no display there, there will be no width. You can adjust this by adjusting the textview for that row.
<TextView
android:id="#+id/TextViewIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp"
android:minEms="4" <!-- You can use either of these -->
android:minWidth="40dp" />
The trade-off here is that you might run out of room and your other columns will run off the end, but you can adjust your text size to correct that, even if you have to overwrite your style with android:textSize="10dp"
This code appears to be working for me, but I also changed your TableLayout width from "0dp" to "match_parent".
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:shrinkColumns="3"
android:stretchColumns="*" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/TextViewIdLabel"
style="#style/overlay_content"
android:text="id_label"
android:textStyle="bold" />
<TextView
android:id="#+id/TextViewIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp"
/>
<TextView
android:id="#+id/TextViewPersonIdLabel"
style="#style/overlay_content"
android:layout_marginLeft="8dp"
android:text="person_id_label"
android:textSize="10dp"
android:textStyle="bold"
android:minEms="4"
android:minWidth="40dp" />
<!-- You can use either of these -->
<TextView
android:id="#+id/TextViewPersonIdValue"
style="#style/overlay_content"
android:layout_marginLeft="4dp" />
</TableRow>
<!-- I skipped the other rows -->
I m not satisfied with the result of my layout whenever I test it in landscape mode on different screen size devices.
In portrait I like the margin of the textview. Since my current image size of the imageview will not fill the full width of some devices out there in landscape there is some whitespace left and right to it, which is fine.
however, the margin of the textview should also take this whitespace into account and add it somehow. I know i can create a different xml style for landscape modes, but any fixed margin wont help here... thanks for any help in advance
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/start1_8" />
<TextView
style="#style/DescriptionTitle"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:text="Test Titelzeile" />
<style name="DescriptionTitle" parent="#android:style/TextAppearance">
<item name="android:textColor">#0099cc</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:textSize">20sp</item>
<item name="android:layout_gravity">center_vertical|left</item>
<item name="android:gravity">top|left</item>
<item name="android:layout_marginLeft">15dp</item>
<item name="android:layout_marginRight">15dp</item>
<item name="android:layout_marginTop">5dp</item>
</style>
I would put it in a Relative Layout like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/Untitled-1" />
<TextView
style="#style/DescriptionTitle"
android:id="#+id/textView1"
android:layout_alignLeft="#id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:text="Test Titelzeile" />
</RelativeLayout>
Then it will be in the correct relative position regardless of view size or orientation.
resize the view in runtime and use(like screenwidth/4 ) a ratio hor image width and position.
use LayoutParams to do it.
I'm trying to organize two TextViews to behave like that:
So, if there is enough space for both TextViews in line, android should place them in line.
If there is not enough space, the second TextView must be placed on the next line with right alignment.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/takeoffCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/flightItem" />
<TextView
android:id="#+id/landingCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/flightItem" />
</LinearLayout>
<style name="flightItem" parent="#android:style/TextAppearance">
<item name="android:textSize">14dip</item>
<item name="android:textColor">#color/flightItemFont</item>
<item name="android:scrollHorizontally">true</item>
<item name="android:textStyle">bold</item>
</style>
To accomplish what you are looking for you could change you're layout to a RelativeLayout and add android:layout_alignParentLeft="true" to your TextViews, however, this doesn't set these TextViews to act dynamically. Meaning if they can fit side-by-side then they should be in-line but the bottom TextView will still align to the right.
I don't think what you are looking for is technically possible. However this may be a good alternative:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/takeoffCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
style="#style/flightItem" />
<TextView
android:id="#+id/landingCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
style="#style/flightItem" />
</RelativeLayout>