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 -->
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>
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);
I have a scroll view Table Layout. It has 2 columns. One of them (first) is a description and the second is an amount. I have made it such that the First column can WRAP text if necessary.
My problem now is to restrict the WIDTH of both the columns, so that they are 50-50% in the screen. and the first column should wrap. I did try to use android:minWidth="215dp" , but i dont want to hard code my values in the xml.
Here is the xml. Any help is appreciated.
<ScrollView
android:id="#+id/scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/footer"
android:layout_below="#+id/tableheader"
android:fillViewport="true"
android:scrollbars="none" >
<TableLayout
android:id="#+id/dataTable"
style="#style/SummaryTableLayout" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:gravity="left"
android:minWidth="215dp"
/>
<TextView
android:gravity="left"
android:minWidth="215dp"
/>
</TableRow>
</TableLayout>
</ScrollView>
The SummaryTableLayout Style part is
<style name="SummaryTableLayout" >
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:stretchColumns">0</item>
<item name="android:shrinkColumns">0</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_marginBottom">25dp</item>
<item name="android:scrollbars">vertical</item>
<item name="android:isScrollContainer">true</item>
<item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
</style>
EDIT ::: this is one of my xmls. I have a second xml, where the table layout has 4 columns, i would like those to be evenly spaced as well with the first column having WRAPPING.
Use the layout_weigth attribute. This should work for you:
<TableLayout
android:id="#+id/dataTable"
style="#style/SummaryTableLayout" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:gravity="left"
android:width="0px"
android:layout_weight="0.5"/>
<TextView
android:gravity="left"
android:width="0px"
android:layout_weight="0.5"/>
</TableRow>
</TableLayout>
As per this answer here . layout_weight is used to define the percantages of the columns.
EDIT Please note I substituted layout_width with width for the columns as it seems this is the correct attribute to use in this case.
I have a LinearLayout which contains an ImageButton, and underneath that, a TextView as a label. I would like to have the TextView to be centered, and to have it wrapped to the width of the ImageButton it is underneath.
EDIT: I should probably put the code I'm currently using. Here's the LinearLayout with Button and TextView
<LinearLayout
android:id="#+id/contestLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/contestButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/contestsbtnimg"
android:layout_weight="1">
</ImageButton>
<TextView
android:id="#+id/contestLabel"
style="#style/MainMenuStyle"
android:text="#string/contests">
</TextView>
</LinearLayout>
And here's the relevant style declaration for the TextView:
<style name="MainMenuStyle" parent="android:style/TextAppearance">
<item name="android:textColor">#000000</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:textSize">12sp</item>
<item name="android:singleLine">false</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
What I want is for the ImageButton to be on top of the LinearLayout, with the TextView acting as a label underneath, and wrapping its text to a second line if it would be wider than the button.
You should at least try to find a solution yourself.
Or give some explanation why (and what) your own findings were.
Something like this should do the trick:
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="..."/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="...."/>
</LinearLayout>