How to add a spacing between text and underline in android? - android

I have defined text of a textview as -
<string name="text"><u>this is my text</u></string>
I needed some space between the text and the underline, so I added lineSpacingExtra="2dp" to the textview, but it is not working.
Can anyone tell how to achieve this?
I need to support API 14 till 21. The above test was done on API 21.

I spent a great deal of my time on this question and here are my findings!
Firstly, To increase the spacing between the text and underline in css you need to use styles and unfortunately Android TextView does not support style tag when using Html.fromHtml(). Unfortunately even span tag is not supported (otherwise that could have been used). To see the entire list of tags supported check the HTML Tags Supported By TextView blog.
Now since we know the basic simple implementation wouldn't work, the only other way remaining is to fake it (fool the user!). In your xml layout where you have the TextView add a View below it with the following properties.
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textSize="20sp"/>
<View
android:id="#+id/underlineView"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignEnd="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignRight="#+id/textView"
android:layout_alignStart="#+id/textView"
android:layout_below="#+id/textView"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"/>
As you can see the underlineView is emulating the underline. It has its width fixed to the textview above it. You can set its color to whatever you need and importantly you can adjust the spacing using the android:layout_marginTop property. Hope this helps!

My suggestion is to remove the underline from the text string entirely because you can't customize the spacing from there. After that, you have a few options. One option is to use the #drawable feature as discussed in the following link: http://www.quora.com/How-do-I-design-edit-text-view-with-bottom-border-alone-in-Android-and-edit-text-view-with-some-special-symbol-like-below-image
If you want a quick and easy "hack" then go to the layout XML for your activity where your TextView is created. Wrap your TextView in a LinearLayout as follows:
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:layout_marginBottom="2dp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/underline" />
</LinearLayout>
The first TextView is where your text ("this is my text") is displayed so you can adjust the "layout_marginBottom" to whatever spacing you need between your text and the underline. The second TextView acts as your underline so to adjust its thickness you can change the "layout_height" value.
The final step to making this work is to go into your "values" folder in your project and create a new XML file named "colors.xml". The entire contents for this example are below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="underline">#333333</color>
</resources>
Simply change the hex color value in this XML file to customize the underline color to your choice.

Related

Changing a TextView's style and text dynamically

I'm trying to make an app like the one in this mockup:
Supermarket
It's a very simple supermarket app. As you can see, there's a TextView at the bottom of the screen that tells me whether my Cart is empty, or has items in it. If the cart is not empty, the user is shown the total price he/she must pay. You can also notice that said TextView's style and text change according to a variable (in this case, "totalPrice").
How can I do this in Android? I know I can use simple if statements (if totalPrice == 0, then backgroundColor = grey and text = "EmptyCart", for example), but this seems somewhat... hardcoded. Is there a better way to do it? As you can see, the TextView's style and values also change when on the "Subproducts" activity (some Products have Subproducts, which you can see after clicking on them).
Thanks in advance!
I think Databinding is the best way rather than boilerplate code.
create a model class and change background of the view using ternary operation in databinding also manage visibility of price text using this.
To set a textview's text, you use textView.setText("new text"); To set its background, its textView.setBackgroundColor(color) where the color is the hexcode you want as an integer- for example 0xFFFF0000 for reg. Obviously these can be variables as well as hard coded.
It can simply be achieved with two TextViews in a RelativeLayout, and of course, by using basic TextView's methods. As an example layout:
<RelativeLayout
android:layout_height="75dp"
android:layout_width="match_parent"
android:background="#1EC4F3">
<TextView
android:text="PAY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:typeface="sans"
android:textColor="#FFFFFF"
android:textSize="18sp"/>
<TextView
android:layout_height="wrap_content"
android:text="$25.79"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="8dp"
android:typeface="monospace"
android:textSize="14sp"
android:textColor="#FFFFFF"/>
</RelativeLayout>

Different text style while using listSeparatorTextStyleView

I want to use a list separator in my .xml file, but everytime i do that, the text style changes, it becomes bigger and bolder.
Below are links of the screenshots. The picture on the left is what shows up from my code, and on the right is what i really want.
Picture for output
I only want to know how to stop the text from getting bigger and bolder, and at the same time how to put a horizontal line below the <TextView>.
Below is the link for the code
Code
Building from #John Kalimeris' answer, i have a better way, in which no foriegn resource will be needed. This should work for you.
<TextView
android:layout_width="match_parent"
android:layout_height="5dp"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_marginBottom="3dp"/>
for the horizontal line you can use this code:
<TextView
android:id="#+id/tevi_divide"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_margin="3dp"
android:background="#color/detail_line_divider"
android:text="#string/str_empty" />
you put this below your textview. You change the values of height and margin according to your needs.

Styling an Android edit text so as to look like a drop down / spinner picker

I have two EditText views on a layout containing a date and a time. On being clicked these open up my custom DatePickerFragment and a TimePickerFragments. I would like to style the EditTexts with a picker drop corner as the following image shows.
however I have not been able to do this, my text fields look like this:
The pickers all work and are hooked up and return values to the EditTexts, I just want to do the styling correctly. I am happy to change the class of the containers from EditText if they should be something else to get the desired behaviour. I think this should be possible as the first image comes from Google's own design documentation. Looking through the EditText and TextView class documentation and xml attibute documentation. Is there a way to do this?
I am using Xamarin to compile this down but that should make no difference to the answer.
set the Style attribute to the following:
<EditText
style="?android:attr/spinnerStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
use following image as background of your edittext
make it 9 patch with whatever colour you want.
find an original image and Create a nine patch image like below..
Note : Black Lines are patches
And then add image to background of EditText like below..
<EditText
android:id="#+id/edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/box_edittext"
android:padding="10dp" />
OR
You can use this simple way...
Define style="?android:attr/spinnerStyle" to EditText..
<EditText
style="?android:attr/spinnerStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>

Android TextView doesn't do linebreak in ListView (multiline text)

I have created a 3-level ExpandableListView and have the problem that the TextViews which are used for the 2nd and 3rd level do not support line-breaks if the content is too long. It should be dynamically over more than one line, if needed. The 1st level TextView does it well (automatically) and I actually had the same settings in the xml for all three TextViews. Followed are the layout xmls, the one TextView with the id groupname is for the 2nd level (e.g. the first red X in the picture below) and the one with id childname is for the 3rd level (e.g. the second and third red X in the picture below). It should all be like at the green hook in the picture.
"singleLine=false" seems not to work. Also tried some different options found in other SO posts, but what I've testet haven't worked for me. Like ellipsize, scroll horizontale, different layout_width and so on. The only thing worked is to set a fixed layout_width on x hundred dp, but this is not dynamically, I'm right?
Would be great if anybody could help me with this. Lot of thanks!
Here's a screenshot:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/childname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
android:layout_marginLeft="60dp"
android:textColor="#AAAAAA"
android:singleLine="false"
android:text=""
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/groupname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="45dp"
android:layout_marginRight="60dp"
android:textColor="#555555"
android:singleLine="false"
android:gravity="center_vertical"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium" />
Add this line in your xml
android:inputType="textMultiLine"
or
Add text using coding like this, where you can add line break using '\n'(But here you have to manually add breaks where you want them)
TextView txt1 = (TextView) findViewById(R.id.childname);
txt1.setText("Hi \nHello \nHow are You");
Results will be
Hi
Hello
How are You
Edit
Accepted Answer - removing the line 'android:layout_alignParentLeft="true"
try using LinearLayout instead of RelativeLayout as parent for the TextView
I had add this attribute to my TextView inside ListView, and makes it do line break correct.
android:maxWidth="xxxdp"
F.Y.R.

Adding "section dividers" to my layout?

The Android Design - Lists page describes "section dividers". I'm aware you can use addHeaderView() a ListView for a similar effect. I would like to use a "section divider" without a ListView, but rather a LinearLayout.
In the screenshot below, I'm referring to the blue text "Phone" and "Email" which also has an line below it. The screenshot is from Android Design - Text Fields
How do I go about adding it to my layout? It it simply a TextView plus a horizontal line?
I was looking for the same issue.
I found an easy way to tell the app that a texview is a section separator:
<TextView
android:id="#+id/address_label"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Address"/>
The line:
style="?android:attr/listSeparatorTextViewStyle"
add the underline to the text and style it accordingli to the defaulf "Separator" theme.
The solution ended up having an includable layout called util_horizontal_line_section.xml:
<?xml version="1.0" encoding="utf-8"?>
<View
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#color/sectionSeparatorColour"/>
With the sectionSeparatorColour entry in values/colors.xml:
<color name="sectionSeparatorColour">#a0a0a0</color>
Includable via:
<include layout="#layout/util_horizontal_line_section"/>
Try to put this View after the TextView of "phone". In this view I have put in a background color that you can change to your desire. Best of luck.
<View
android:layout_width="match_parent"
android:layout_height="2dip"
android:background="#FF909090" />
On request of the asker of this question, I am writing my comment as an answer
Create a background image with a line at the bottom, and set it as
background to your TextView.
TextView 2dp in height and width = match parent and set the background color as the color you want the line to be.
You can do vertical as well by reversing the two settings.

Categories

Resources