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>
Related
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.
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.
I have a textview and the text is loaded dynamically.
<TextView
android:id="#+id/txt_song_title"
style="?attr/txtcolorHightlight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignTop="#id/frlyt_img_cover"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_toLeftOf="#id/img_audio_source_icon"
android:ellipsize="end"
android:fontFamily="#string/roboto_light"
android:maxLines="3"
android:text=""
android:textSize="#dimen/font_36" />
The textview has to show the entire text which is set (10 to 100+)characters. Based on text length, the font size should be changed inorder to fit the entire text. How to calculate num of words in the textview to change font size and display entire text without clipping dynamically?
I think you can do it from java code level. TextView class provides methods to implement this.
Following link may be useful.
Auto Scale TextView Text to Fit within Bounds
Try using a library, for example a simple google search gave me this:
https://github.com/grantland/android-autofittextview
I have not tried it but it seems ok :)
I'm having a changeable text like in the screenshot, where the quantity changes according to plus and minus buttons.
What is the best to implement that on Android ?
Could I make use of Spannable text in this case ? Or do I implement that with
a vertical LinearLayout with a TextView then a separator view then another TextView that changes ?
If you want to make it your own way, look for click events on the plus and minus buttons, change an integer variable (say mQuantity) according to these click event (mQuantity++ or mQuantity-- respectively), and change the TextView content with mQuantityLabel.setText(mQuantity+"");. That extra +"" is to avoid setText looking for a probably non existing id inside strings.xml. You could just need to convert the int to String, but this suffices for this case.
However, and it may be more sensible to go for already established solutions for number increase/decrease such as NumberPicker (after API 11) or SimonVT's NumberPicker (backport of NumberPicker, if the minSdkVersion is prior to API 11).
Managed to achieve this layout, using LinearLayout.
It was straightforward I thought that it might need tricky layout technique, but turned out to be easy.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/quantity"
android:textAppearance="#android:style/TextAppearance.Medium" />
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="#color/black" />
<TextView
android:id="#+id/quantity_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="01"
android:textAppearance="#android:style/TextAppearance.Medium" />
</LinearLayout>
I have a listview where each item has 2 images, one on the right and the other on the left. Between them there is a textview that is filled from data. If text is long then it can continue down but there is a lot of free space just as you can see in the image. I want to use this space also to display text. I have been looking around the web and I have seen things like this http://code.google.com/p/android-flowtextview/downloads/detail?name=FlowTextDemo.zip&can=2&q= but this is useless. I don't want to lose the control of the images because I need their click method. What is the best way to do it? I have thought that maybe I can put a textview between images and an other down and when the first is filled continue in the second one but how can I know how many letters can keep the first textview?
I don't understand why FlowTextView (that you linked to) won't work for you. It's derived from RelativeLayout and flows text around any child views. The child views can be your images, positioned as you normally would in a RelativeLayout. Their onClick methods should work just fine.
<com.pagesuite.flowtext.FlowTextView
android:id="#+id/tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/the_text >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="onTopLeftClick"
android:src="#drawable/top_left_image" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="onTopRightClick"
android:src="#drawable/top_right_image" />
</com.pagesuite.flowtext.FlowTextView>
You will need to set the text in code, or else extend FlowTextView and define your own custom attribute(s) to do it from xml.