I have a layout that looks as follows:
|User Name | |
|email#mail.com | info |
And I need to set user's first name and second name if it fits into TextView and only first name if first name and second name is too long for current screen.
For example for "Tom Smith":
|Tom Smith | |
|email#mail.com | info |
and for "Tom VeryVeryVeryLongSurname":
|Tom | |
|email#mail.com | info |
How can I get a name size with specified text size and compare it with TextView width?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="bottom"/>
</LinearLayout>
See TextPaint#getTextBounds method http://developer.android.com/reference/android/graphics/Paint.html#getTextBounds%28char[],%20int,%20int,%20android.graphics.Rect%29
And other from the TextPaint and Paint classes
Paint.html#measureText seems to be even more matching what you are looking for.
http://developer.android.com/reference/android/graphics/Paint.html#measureText%28java.lang.CharSequence,%20int,%20int%29
Anyway look at the android.graphics.Paint class.
Related
Here i want to create a layout that contains following by using fragment how can i do this?
Should i use for top portion or can i use fragment? which one is the best approach. And instead of swipe tab i want to display .(dot) in the bottom. e.g. Android home screen bottom 3-5 dots.
+-----------------------------------------------+
| +------------+ |
| | | Line 1 |
| | Image | Line 2 |
| | | Line 3 |
| | | (Static) |
| +------------+ |
|-----------------------------------------------|
| |
| |
| |
| |
| Some Content goes here |
| (Swipe tab) |
| Swipe to next -->>> |
| Here dot(.) represent the pages |
| |
| |
| |
|____________________._._.______________________|
| |
| 3 images goes here |
| (Static Horizontal scroll able) |
+-----------------------------------------------+
Hmmm...i tried it...and here is the out put...
And here is the source...
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/news_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="Test image"
android:padding="20dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your headline..."
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFCCCCCC" >
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Inner contents..."
android:textAppearance="?android:attr/textAppearanceLarge" />
</FrameLayout>
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scrollable contents here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</HorizontalScrollView>
NOTE: You need to put your tabs or any thing else in Inner contents section. And whatever contents in lower scrollable panel by you self. I just tried to make a structure for you...
Hope this helps...
You must put three layouts . In first linear horizontal layout place imageview and text views.
In the second one place a horizontal scrollable view with buttons or something suits to you contents with match parent widht to each . place page indicator tyo each button.
Third one is normal scrollable view or use gallery view to place you content.
I'm trying to make layout like this:
|---------------------------| |---------------------------|
| Title of text goes there | | Title of text goes there |
|---------------------------| |---------------------------|
| Image goes there, height | | Image goes there, height |
| can be different | | can be different, very |
|---------------------------| | very, very different |
| Long, very long text goes | |---------------------------|
| here, and here, and here | | Long, very long text goes |
| that should fill space | | here, and here, and here |
| lef after title and ima.. | | that should fill space ...|
|---------------------------| |---------------------------|
Imagine now that I have 5 LinearLayout like this situated on the screen, 2 upper and 3 lower, all uniformly. The problem is that my #Long, very long text doesn't ellipsize and fill the space available at the same time. When I set android:maxLines, it works, but I don't have the constant maxLines, because image and title height changes.
<!-- item -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip"
android:layout_weight=".3">
<!-- item title -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:id="#+id/item_3_title"
android:textSize="22sp"
android:textStyle="bold"/>
<!-- item image -->
<RelativeLayout
android:id="#+id/item_3_image_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/item_3_image"
android:layout_width="wrap_content"
android:layout_height="120dip"
android:scaleType="centerCrop"
android:padding="2dip" >
</ImageView>
<ProgressBar
android:id="#+id/item_3_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
</ProgressBar>
</RelativeLayout>
<!-- item text -->
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:id="#+id/item_3_text"
android:ellipsize="end"
android:textSize="18sp"/>
</LinearLayout>
Ok, finally found the answer here
ViewTreeObserver observer = textView.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int maxLines = (int) textView.getHeight()
/ textView.getLineHeight();
textView.setMaxLines(maxLines);
textView.getViewTreeObserver().removeGlobalOnLayoutListener(
this);
}
});
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dip"
>
<!-- item title -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:id="#+id/item_3_title"
android:textSize="22sp"
android:textStyle="bold"/>
<!-- item image -->
<RelativeLayout
android:id="#+id/item_3_image_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/item_3_title"
>
<ImageView
android:id="#+id/item_3_image"
android:layout_width="wrap_content"
android:layout_height="120dip"
android:scaleType="centerCrop"
android:padding="2dip" >
</ImageView>
<ProgressBar
android:id="#+id/item_3_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
</ProgressBar>
</RelativeLayout>
<!-- item text -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/item_3_text"
android:layout_below="#+id/item_3_image_holder"
android:ellipsize="end"
android:textSize="18sp"/>
</RelativeLayout>
you need such kind of structure I hope you are able to interpret it.
I want to make a part of a bitmap clickable and my layout looks like this:
________________________________
| ##### |
| ##### |
| ___________________ |
| | | |
| | | |
| | image | |
| | | |
| | | |
| ___________________ |
________________________________
I thought the easiest way to this would be to place a button over the image with a relative layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
But I haven't figured out how to get the button to align with the upper left corner of the image (instead of the upper left corner of the relative layout, as it does now). Is this possible with a relative layout?
Suggestions for other approaches are also welcome, I considered this:
http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
But it seems a bit of an overkill for my simple rectangle area.
Try this:
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
You can also use
<Button
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/image1"
android:drawableLeft="#drawable/image2t"
android:drawableRight="#drawable/image3"
android:drawableTop="#drawable/image4"
android:drawableTop="#drawable/image4"
android:textColor="#ffffff"
/>
Okay, my google-fu improved and thanks to asenovm I figured it out! The imageview has a android:adjustViewBounds property, which is by default set to false. Setting it to true adjusts the imageviews bounds to the image, so that alignLeft and alignTop work correctly for the button.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/ImageView"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
Is there a way to position a textview to be slightly above a centerd android button? I don't want to hardcode values for a particular screen obviously, but something that will dynamically scale. The button will always be centered, however...
Thanks in advance!
Yes if your parent layout is a RelativeLayout you can position Views in relation to each other or to the parent here is a simple example (Warning didn't type this into IDE, may contain typo):
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/mBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a Button!"
android:layout_centerInParent="true" />
<TextView
android:id="#+id/mTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text"Some Text"
android:layout_above="#+id/mBtn" />
</RelativeLayout>
That will make your layout look roughly like this:
________________________
| |
| |
| Some Text |
| [I am a Button!] |
| |
| |
|______________________|
I'm writing an app-widget that displays some numbers, each with label in front of it.
The layout looks like this:
.-----------------------------.
| Label1 | AAAAAAAAAAA |
| LongerLabelLabel2 | BBBBBBB |
| LongLabel3 | CCCCCCCCCC |
'-----------------------------'
There is one outer (vertical) LinearLayout, and each row is a horizontal LinearLayout with two TextViews.
The problem is that the numbers get ellipsized if the width of the label and the number is too wide for the widget. I want the labels to get ellipsized.
The above situation for instance, would end up like this:
.-----------------------------.
| Label1 | AAAAAAAAAAA |
| LongerLabelLabel2 | BBBB... |
| LongLabel3 | CCCCCCCCCC |
'-----------------------------'
instead of the desired
.---------------------------.
| Label1 | AAAAAAAAAAA |
| LongerLabelL... | BBBBBBB |
| LongLabel3 | CCCCCCCCCC |
'---------------------------'
I can't for my life figure out how to solve this. Any help is appreciated.
My current layout is the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dip"
android:orientation="vertical"
style="#style/WidgetBackground">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ROW1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="7dip"
android:paddingBottom="0dip"
android:paddingRight="10dip"
android:paddingLeft="10dip"
android:orientation="horizontal">
<TextView android:id="#+id/NAME1" android:singleLine="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" style="#style/Text.account" />
<TextView android:id="#+id/BAL1" android:singleLine="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="right" style="#style/Text.balance" />
</LinearLayout>
... (more similar rows in the outer layout)
</LinearLayout>
I suspect your problem, in part, is that you have android:layout_width="wrap_content" for your label. I would not expect it to ellipsize at all, since there is enough room to show it.
I would switch away from LinearLayout to RelativeLayout. Define your number "column" as android:layout_alignParentRight="true" and android:layout_width="wrap_content". Define your label "column" as android:layout_alignParentLeft="true", android:layout_toLeftOf="..." (where ... is your number column), and android:ellpsize="end". That should give the number all the space it needs and constrain the label, forcing it to ellipsize.