Sometimes the page title in TabPageIndicator is split into 2 lines, sometimes as whole words and sometimes as broken words. Here are some screen shots
1) Split into 2 lines - broken words
2) Split into 2 lines - whole words
3) Not split into 2 lines
Here is my layout code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.viewpagerindicator.TabPageIndicator
android:layout_width="fill_parent"
android:layout_height="45dp"
android:layout_gravity="top"
android:paddingTop="2dp"
android:layout_marginBottom="2dp" />
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="fill_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
Here is my style code:
<style name="CustomTabPageIndicator">
<item name="footerColor">#color/brand</item>
<item name="android:colorBackground">#color/white</item>
<item name="footerLineHeight">1dp</item>
<item name="footerIndicatorHeight">3dp</item>
<item name="android:textColor">#FF555555</item>
<item name="android:textSize">13sp</item>
<item name="android:dividerPadding">5dp</item>
<item name="android:layerType">software</item>
<item name="android:showDividers">none</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
<item name="selectedColor">#FF000000</item>
<item name="selectedBold">true</item>
<item name="android:gravity">center</item>
<item name="android:typeface">normal</item>
<item name="android:background">#drawable/custom_tab_indicator</item>
<item name="android:paddingLeft">10dip</item>
<item name="android:paddingRight">10dip</item>
<item name="android:paddingTop">4dp</item>
<item name="android:paddingBottom">4dp</item>
</style>
Can anyone tell me whats wrong here which causes the page titles to randomly split into 2 lines and sometimes not?
In TabPageIndicator.java file
mTabLayout.addView(tabView, new LinearLayout.LayoutParams(0, MATCH_PARENT, 1));
Instead of above add this line of code and it will make text wrap
mTabLayout.addView(tabView, new LinearLayout.LayoutParams(WRAP_CONTENT, MATCH_PARENT, 1));
Try adding this line in your style code...
<item name="android:maxLines">1</item>
Or
UPDATE
have you tried addingsingleLine=true" in styles ?
Related
I have a view which is populated by a ListView and HeaderView , my problem is a left margin is applied to the HeaderView from unknown source because I have not applied any layout margin or padding to the layout, neither via xml nor programmatically.
so is this a normal ListView behavior ?
Listview layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/archos_list_view"
style="#style/ArchosGridView"
android:layout_alignWithParentIfMissing="true"
android:divider="#null"
android:dividerHeight="#dimen/content_list_vertical_spacing_between_items" />
</RelativeLayout>
I found the issue by doing breakpoint to find the parent of the headerview and found the ListView which was the source of the issue, it was the style="#style/ArchosGridView" that was applied to the ListView , so here is the source of the issue
ArchosGridView
<style name="ArchosGridView">
<item name="android:id">#id/browser_items</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:paddingTop">10dip</item>
<item name="android:paddingLeft">#dimen/content_list_left_margin</item>
<item name="android:paddingRight">#dimen/content_list_right_margin</item>
<item name="android:clipToPadding">false</item>
<item name="android:textSize">18sp</item>
<item name="android:drawSelectorOnTop">false</item>
<item name="android:fastScrollEnabled">false</item><!-- true lead to errors on 4.0 -->
<item name="android:choiceMode">singleChoice</item>
<item name="android:cacheColorHint">#00000000</item>
<item name="android:textFilterEnabled">true</item>
<item name="android:scrollbarStyle">outsideOverlay</item>
</style>
the issue was the #dimen/content_list_left_margin of 4 dip was applied (exactly the amount that I expected) but the right one was 0,
<dimen name="content_list_left_margin">4dip</dimen>
<dimen name="content_list_right_margin">0dip</dimen>
so I changed the 4dip to 0dip and problem solved
<item name="android:ellipsize">middle</item>
<item name="android:maxLines">2</item>
I've tried removing attrs. one at a time, but ellipSize seem to not work under any circumstance.
This is how it looks.
Where the complete word is: "Element # 1 ASDASDASDASDASDASDASDASD"
android:text='#{element.element_title + " ASDASDASDASDASDASDASDASD"}'
It seems to me that one of the main issues is that too many dimensions are calculated dynamically and it is choosing to perform actions/ execute attributes in the wrong order.
These are the main and relevant attrs that are working properly:
<item name="android:maxLines">2</item>
<item name="autoSizeTextType">uniform</item>
<item name="autoSizeMaxTextSize">#dimen/text_small</item>
<item name="autoSizeMinTextSize">#dimen/text_small_small</item>
To my surprise the combo of "maxLines" with "autoSizeTextType" works pretty fine...
Now, IF... I remove these 3 lines:
<item name="autoSizeTextType">uniform</item>
<item name="autoSizeMaxTextSize">#dimen/text_small</item>
<item name="autoSizeMinTextSize">#dimen/text_small_small</item>
... there is a change, but not for the better:
These are my most direct attributes:
In styles.xml:
<style name="small_frame_text_small_bold_autoSize" parent="small_frame_padding" >
<item name="android:fontFamily">#font/lekton_code_italic</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/text_small</item>
<item name="android:textColor">#color/material_on_background_emphasis_high_type</item>
<item name="android:ellipsize">middle</item>
<item name="android:maxLines">2</item>
<item name="autoSizeTextType">uniform</item>
<item name="autoSizeMaxTextSize">#dimen/text_small</item>
<item name="autoSizeMinTextSize">#dimen/text_small_small</item>
</style>
Now the implementation of the style inside the itemBinding xml:
list_item.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:divider="?attr/dividerVertical"
android:showDividers="middle"
android:gravity="center_horizontal|bottom"
>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/element_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text='#{element.element_title + " ASDASDASDASDASDASDASDASD"}'
style="#style/small_frame_text_small_bold_autoSize"
android:layout_weight="1.2"
tools:text="Title"
android:letterSpacing="0.06"
android:gravity="center_horizontal|bottom"
/>
<style name="MessageInput">
<item name="android:gravity">top</item>
<item name="android:singleLine">false</item>
<item name="android:lines">4</item>
<item name="android:minLines">4</item>
<item name="android:minHeight">10dp</item>
<item name="android:maxLines">4</item>
<item name="android:inputType">textMultiLine</item>
<item name="android:scrollHorizontally">false</item>
<item name="android:background">?android:attr/colorBackground</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">18sp</item>
<item name="android:focusable">true</item>
<item name="android:isScrollContainer">true</item>
<item name="android:padding">10dp</item>
<item name="android:textColor">?android:attr/textColor</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:lineSpacingExtra">18dp</item>
<item name="android:lineSpacingMultiplier">1</item>
</style>
This is the style I am using in the EDITTEXT but my result shows the initial display as multiple line edittext with text shown in multiple lines spaced correctly.
But the problem is, once I start adding texts and lines, the space ot the line height is not as previously shown. I need an edittext with constant LINE HEIGHT of max 4 lines, or any number of lines.
enter image description here
enter image description here
This is a sample edittext...with 1st 3 lines being initially shown by default, and its shown nicely. But if i press enter key, the line spacing is gone and it displays texts in the above way.
I am actually using a custom edittext to display under-lines. Like below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<jp.softbank.wallet.view.LinedEditText
android:id="#+id/edittext_message"
style="#style/MessageInput"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Try this:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:lines="4"
android:minLines="4"
android:maxLines="4"
android:gravity="top" />
OUTPUT
I am trying to put two text view within the circular progress bar as shown in the picture below. These two text should be aligned with center of the circular progress bar.
But the unwanted padding in text view which prevents me to align the text into the center of the circular progress bar. This is what i get.
here is my layout file:
<FrameLayout
android:id="#+id/onboarding_activity_progress_layout"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp">
<com.locationlabs.finder.android.core.ui.CircularProgressBar
android:id="#+id/onboarding_activity_progress_bar"
android:layout_gravity="center"
android:padding="10dp"
android:layout_width="120dp"
android:layout_height="120dp"
app:progressColor="#color/progress_bar_color"
app:backgroundColor="#color/progress_bar_background_color"
app:progressBarWidth="10dp"
tools:progress="60"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:includeFontPadding="false"
android:layout_gravity="center">
<TextView
android:id="#+id/number_of_remaining_steps"
style="#style/OnboardingNumberOfRemainingStepText"
tools:text="2"/>
<TextView
android:id="#+id/remaining_number_of_steps"
style="#style/OnboardingRemainingStepText"
tools:text="steps left"/>
</LinearLayout>
</FrameLayout>
Here is the styling:
<style name="OnboardingNumberOfRemainingStepText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:fontFamily">sans-serif</item>
<item name="android:textSize">40sp</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:includeFontPadding">false</item>
</style>
<style name="OnboardingRemainingStepText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:textStyle">normal</item>
</style>
I was told android:includeFontPadding can help reduce the padding but it doesn't help that much. I also tried with the single textView with Spannable but I get almost the similar result. I tried with negative margin but that didn't work and it is also not reliable.
When you transfer styling attributes of a TextView to XML, TextView might render in an unexpected way. This is because the default styling for TextView is applied in a layout file which is overridden when you use style attribute in it.
You can try using parent="android:TextAppearance" in the style defined for a TextView to ensure you inherit the pre-defined styles for the TextView.
Example:
Let me know if it worked for you!
I'm trying to replicate this:
in my android app. I would like the three textviews to have a percentage based width (33%) across the screen. The triangle is a separate drawable I've created.
The issue is, I can create the percentage width in a LinearLayout, but I can't have nicely overlapping view in a LinearLayout- the Basic Info textview should be behind the triangle.
Below is the code I've got working without the triangle:
Styles:
<style name="status_selected_textview">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">#dimen/standard_line_height</item>
<item name="android:layout_weight">0.33</item>
<item name="android:gravity">center</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/font_size_medium</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:padding">5dp</item>
<item name="android:background">#color/green</item>
</style>
<style name="status_unselected_textview">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">#dimen/standard_line_height</item>
<item name="android:layout_weight">0.33</item>
<item name="android:gravity">center</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/font_size_medium</item>
<item name="android:textColor">#color/gray</item>
<item name="android:padding">5dp</item>
<item name="android:background">#color/light_header</item>
</style>
Layout:
<LinearLayout
android:id="#+id/activate_key_status_header"
android:layout_below="#+id/activate_key_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backround="#color/light_header">
<TextView
android:id="#+id/activate_key_textview"
android:text="Activate Key"
style="#style/status_selected_textview"/>
<TextView
style="#style/status_unselected_textview"
android:text="Basic Info" />
<TextView
android:text="Edit Profile"
style="#style/status_unselected_textview"/>
</LinearLayout>
Here is the code for my triangle that I'm trying to add somehow:
<View
android:layout_toRightOf="#+id/activate_key_textview"
android:layout_width="#dimen/standard_line_height"
android:layout_height="#dimen/standard_line_height"
android:background="#drawable/arrow_right" />
It seems like the solution is somehow a combo of a RelativeLayout and LinearLayout, but I can't seem to find the right way.
Any thoughts?
Can you wrap the 2nd TextView in a FrameLayout, and add the triangle view to it 2nd? That plus an android:gravity left would do it, I would think.
Something like this:
<FrameLayout
<!-- Whatever styles you need to make it fit 33%-->
>
<TextView
style="#style/status_unselected_textview"
android:text="Basic Info" />
<View
android:gravity="left"
android:layout_width="#dimen/standard_line_height"
android:layout_height="#dimen/standard_line_height"
android:background="#drawable/arrow_right" />
</FrameLayout>