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>
Related
<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"
/>
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 have a simple layout:
and I want to make the EditTexts(the Views below) the same height as TextViews above. I want to avoid hardcoding height. For the TextViews I did android:minLines = 2. Unfortunately, this does not work for EditTexts. Is there a way to do this without hardcoding the height?
I am aware that this can be easily done if the EditText is to the side of the TextView in a wrap_content LinearLayout and then setting the layout_height of EditText to match_parent but, my views are in a vertical layout.
EDIT: Here is the layout of one of those columns
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginRight="#dimen/item_spacing"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
style="#style/TextView"
android:layout_width="match_parent"
android:layout_marginBottom="#dimen/item_spacing"
android:text="#string/xdim" />
<EditText
android:id="#+id/xdim"
style="#style/EditText"
android:layout_width="match_parent"
android:inputType="number" />
</LinearLayout>
And the styles:
<style name="TextView">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:minLines">2</item>
<item name="android:gravity">center</item>
<item name="android:background">#drawable/back</item>
<item name="android:layout_gravity">center_vertical</item>
</style>
<style name="EditText" parent="#style/TextView">
<item name="android:layout_height">match_parent</item>
<item name="android:background">#drawable/item_border</item>
</style>
edit:
for anyone coming across this, the way I got it to work is to either:
Set the layout directly for each preference item, as in:
<CheckboxPreference
android:layout="#layout/checkbox_preference_item"/>
OR set the style via a theme as I was doing before, but define a widgetlayout and set it instead of an actual layout, like so, where preferenceStyle is set to #style/Preference and checkBoxPreferenceStyle is set to #style/Preference.Checkbox:
<Style name="Preference">
<item name="android:layout">#layout/checkbox_preference_item</item>
</Style>
<Style name="Preference.Checkbox">
<item name="android:widgetLayout">#layout/your_custom_widget</item>
</Style>
I'm trying to customize the layout of a Checkbox Preference item and the checkbox itself is not showing up. I'm modeling after android code and not sure where I'm going wrong. The text views are working fine as well as the rest of the layout but the checkbox is not showing up. Would appreciate any help with this.
Relevant code:
theme.xml:
<style name="Theme.Settings" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/SettingsActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:preferenceCategoryStyle">#style/PreferenceCategory</item>
<item name="android:preferenceStyle">#style/Preference</item>
<item name="android:checkBoxPreferenceStyle">#style/Checkbox</item>
</style>
style.xml
<style name="Checkbox">
<item name="android:layout">#layout/checkbox_preference_item</item>
</style>
<style name="Preference.Text">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textSize">#dimen/preferences_item_font</item>
<item name="android:textColor">#color/preference_text</item>
</style>
<style name="Preference.Text.Extra" parent="Preference.Text">
<item name="android:textSize">#dimen/preferences_header_font</item>
</style>
checkbox_preference_item.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/preferences_item_height"
android:background="#color/white"
android:paddingLeft="#dimen/preferences_item_left">
<LinearLayout android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:gravity="center_vertical">
<TextView android:id="#android:id/title"
style="#style/Preference.Text"/>
<TextView android:id="#android:id/summary"
style="#style/Preference.Text.Extra"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible"
android:id="#android:id/widget_frame"
android:layout_alignParentRight="true"/>
</RelativeLayout>
I am not seeing a CheckBox in the layout xml. Am I missing something? You need to specify something like:
<CheckBox android:id="..." ... />
Then you may need to specify something like
<CheckBoxPreference android:key="..." ... />
in the preference xml file. Setting should be android:widgetLayout to the custom CheckBox.
See this post may help you more customizing checkbox preference
I want to center a RelativeLayout which contains TextViews in a ScrollView but when I change to Landscape mode or even in portrait mode with a small screen, the button of the RelativeLayout is cutted... Have you any idea to center it without be cutted please??
Here my code:
<ScrollView
style="#style/scroll"
android:background="#drawable/first_body_shape" >
<RelativeLayout style="#style/relativeLay"
android:layout_gravity="center_vertical" >
<TextView
android:id="#+id/rg2"
style="#style/verset"
android:layout_below="#+id/rg1"
android:text="#string/rg_2" />
<TextView
android:id="#+id/rg3"
style="#style/textView_intro"
android:layout_below="#+id/rg2"
android:text="#string/rg_2_1" />
<TextView
android:id="#+id/rg4"
style="#style/verset"
android:layout_below="#+id/rg3"
android:text="#string/rg_3" />
<TextView
android:id="#+id/rg5"
style="#style/textView_intro"
android:layout_below="#+id/rg4"
android:text="#string/rg_3_1" />
<TextView
android:id="#+id/rg6"
style="#style/verset"
android:layout_below="#+id/rg5"
android:text="#string/rg_4" />
<TextView
android:id="#+id/rg7"
style="#style/textView_intro"
android:layout_below="#+id/rg6"
android:text="#string/rg_4_1" />
<TextView
android:id="#+id/rg8"
style="#style/textView_intro"
android:layout_below="#+id/rg7"
android:text="#string/rg_5" />
<TextView
android:id="#+id/rg1"
style="#style/textView_intro"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/rg_1" />
</RelativeLayout>
</ScrollView>
styles.xml
<style name="scroll">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_marginBottom">10sp</item>
<item name="android:layout_marginLeft">10sp</item>
<item name="android:layout_marginRight">10sp</item>
<item name="android:layout_marginTop">50sp</item>
</style>
<style name="relativeLay">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="verset">
<item name="android:layout_width">370sp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:paddingTop">10sp</item>
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
</style>
I'm not sure to understand your problem (i don't see any button in your code :o).
But have a look on this tutorial :
http://www.curious-creature.org/2010/08/15/scrollviews-handy-trick/