Resizing TextView to fit text (with a nine patch background image)? - android

I am using a TextView and a 9 patch image as its background for a messaging application in android.
Here's what it looks like:
See how for the blue, it is showing too much on the left? How can I reduce it when it decides that it has to wrap the text?
I tried to access the Width and Height fields on the view in public View getView(int position, View convertView, ViewGroup parent), however they are always zero (ps the TextView is located inside of a ListView and the getView method is inside the adapter for the ListView).
Thank you!
TextView XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:background="#drawable/bubble_b"
android:shadowColor="#color/textShadow"
android:shadowDx="1"
android:shadowDy="1"
android:text="Medium Text"
android:textColor="#000000"
android:textSize="16sp"
android:lineSpacingMultiplier="1.1" />
</LinearLayout>
Also, here's a screen of what the nine-patch does for it, so you can see how that works for it:

In the iPad picture you attached, iMessage is setting maxWidth to the half of the screen I guess.
So you can get Screen Width and set maxWidth to half of it for your TextView
This is how you can get screen width and pass it to your TextView,
Display display = ((WindowManager)mContext.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
yourTextView.setMaxWidth(display.getWidth()/2);
P.S. getWidth method for Display class says deprecated, you can find alternative solution to this. You can get width of your LinearLayout also.

Check the 9-patch image in draw9patch. Check how for to the left you draw the black lines in there. I think the bottom line defines what part to stretch, the top line defines the area for the content.

Related

TextView background is not filling whole View

I want to set TextView background color but I found out that if I'm using TextView inside RelativeLayout and I set center_in_parent or center_vertical to my TextView, background color is not stretched to full height of the View (its cut out on bottom). Then text inside looks off-centered. Any suggestion why it is happening? I'm seeing it for a first time.
Code:
<TextView
android:id="#+id/value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:gravity="center"
android:text="InfoText"
style="#style/info_text"/>
Preview:
You can check your parent view padding. If your parent view contains padding it may happen.
Set this code maybe fix it
android:includeFontPadding="false"

make text view touch the activity boundary

I want to fill entifre space around text view with color,,but due to less text it fill some and left some space around it.Link for image is below
problem
http://img651.imageshack.us/img651/817/capturetxnw.png
and i want this:
http://imageshack.us/photo/my-images/171/capture1xw.png/
In your layout.xml file, set the textview layout parameters like this:
<TextView
android:id="#+id/myTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
The key part is the : android:layout_width="fill_parent". This will basically fill up the entire screen and effectively solve your problem. If you need any further clarifications do ask!
make your scroll view width as fill_parent

Android horizontal LinearLayout with wrapped text in TextView

I've observed a behavior with layout_weight that I can't explain. The following is a trivial example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="This is a very very very very very very very very very very very very very very very long string."
android:layout_weight="1"
/>
<View
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center_vertical"
android:background="#ffffffff"
/>
</LinearLayout>
In a QVGA display, the TextView wraps the text. The white square is displayed to the right of the text.
However, if I remove android:layout_weight="1" from the TextView, the TextView now takes up the entire display width. The white square is no longer displayed.
Why would layout_weight in the TextView affect whether or not the white square is displayed? Shouldn't the View with the white background always be assigned 32dpx32dp first? (It makes no difference if the view were any other types - ImageView or TextView).
The problem I was working on is that I want the white square to always be displayed to the right of the TextView (whether or not the text is wrapped), but I don't want any empty space between the TextView and the white square. (If I add android:layout_weight="1" to the TextView, then there is a gap if the text is not wrapped.)
Any help would be appreciated!
To answer my question #1: One thing I learned by looking at the source for LinearLayout: Not only does layout_weight assign unused space to a child, it also shrinks a child with layout_weight if the child extends beyond the bounds of the LinearLayout. That explains why a TextView with wrapped text is shrunk in my layout.
As for the answer to my question #2, I think you meant android:toRigthOf instead of android:layout_alignRight. Using a RelativeLayout instead of a LinearLayout doesn't change the layout behavior. The tricky part is placing a view immediately to the right of a TextView, without gaps, whether or not the text is wrapped. Setting a maxWidth would limit the TextView's width, but that solution doesn't scale across portrait/landscape and different display dimensions.
Solution - Looks like Dyarish's solution is the best available. My layout problem exists regardless of the layout you use. The key is to set a maxWidth for the TextView so that it doesn't take up the all of the horizontal space in the layout. Because hardcoding a android:maxWidth value in the TextView doesn't scale across different displays, setting the maxWidth at runtime, as Dyarish suggested, is a good solution.
Hopefully this is what you are looking for.
First off, here is a great resource I found for Creating UI's.
layout_weight - Specifies how much of the extra space in the layout to be allocated to the View.
If you want to ensure that the white square is always to the right of the textview, you can use a Relative View, and add the parameter to the view. android:layout_alignRight="+id#yourTextViewID". This should always make the box appear right beside the textView area. You should probably also add something like android:maxWidth="250px" This will ensure that you don't push the white box completely out of the screen.
Here is a code sample:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:maxWidth="250px"
android:id="#+id/TextForWhiteBox"
android:layout_height="wrap_content"
android:layout_gravity="center|left"
android:text="This is a very very very very very very very very very very very very very very very long string."
/>
<View android:background="#ffffffff" android:layout_width="32dp" android:layout_height="32dp" android:id="#+id/view1" android:layout_toRightOf="#+id/TextForWhiteBox"></View>
</RelativeLayout>
You could also add to the View:
android:layout_alignTop="#+id/TextForWhiteBox" android:layout_alignBottom="#+id/TextForWhiteBox"
to make the white box the same size as the TextView.
Firstly I've tested the code from my other answer and it does exactly what you've described you've wanted. (unless I'm misunderstanding what you are asking for). You definitely do not want to use the android:layout_alignRight which is not what is in the code sample. That would simply keep the box on the right hand of the screen and not be affected by the textview at all. This sample uses android:layout_toRightOf="#+id/TextForWhiteBox" which is possible due to it being a relative layout. Since the Relative Layout allows you to place objects in relation to others. That line will always place the box just to the right of the textview with no gaps.
As for the screen orientation changes:
When the orientation changes it creates a new instance of the view.
Here is a simple solution.
//Add to oncreate in your Activity
private TextView textStatus;
textStatus = (TextView) findViewById(R.id.TextForWhiteBox);
// This get's the width of your display.
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int width = displaymetrics.widthPixels;
// Now you know the screen orientation, and it's width. So just set the maxwidth of the text view to match the display width - the pixels of your white box.
textStatus.setMaxWidth(width - 32); // 32 is here because you already know the size of the white box. More logic is needed to dynamically get this value, because you would need to wait for the activity to be fully created.
}
Here is the main.xml I used:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:id="#+id/TextForWhiteBox"
android:layout_height="wrap_content"
android:layout_gravity="center|left"
android:text="This is a very very very very very very very very very very very very very very very very very very very long string."
/>
<View android:background="#ffffffff" android:layout_width="32px" android:layout_height="32px" android:id="#+id/view1" android:layout_toRightOf="#+id/TextForWhiteBox"></View>
</RelativeLayout>
You might need some additional logic to keep screen values.
This code has been tested, you should be able to literally copy and paste this to work as you asked.
Also depending on your logic you could use something like this to return the screen orientation.
int orient = getResources().getConfiguration().orientation;
Hope this helps!
If this helped you, please click the accepted button. =) Cheers!

Overlap views in android?

I have a linearlayout which have a textbox(multiline, nearly 5 lines) and image view. Is it possible to draw a image on textview(overlapping)?
Note: I have to specify the coordinates of the image, which are not static, and may be anywhere above text.
Something like this mockup:
I think it can be achieved using RelativeLayout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/Textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="#string/Text2display"
android:textColor="#EEDCAA" />
<ImageView
android:id="#+id/choose_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="-46dp"
android:adjustViewBounds="true"
android:contentDescription="#string/description_logo"
android:src="#drawable/user2" />
</RelativeLayout>
By placing the TextView block above the ImageView, it ensures that the image view overlaps the TextView. Now, based on your requirements and position, use the following commands from the link :-
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
You can align left right, top and bottom. Use negative values to navigate the ImageView, if ur using align bottom and stuff.. This will make it to overlap. Please let me know if this was helpful
Is there any specific reason for Linear Layout?
You can do this easily using RelativeLayout . You can have an ImageView overlapping TextView Unless there is a specific reason for using LinearLayout .
If you really (really) need to use LinearLayout, you can subclass TextView and override onDraw to draw your image.
In all your xml files, should define the background color for it, it will solve the problem :
Add this android:background="#android:color/black" in to the View tag you defined.

How to wrap content views rather than background drawable?

How can I get a LinearLayout (or any other ViewGroup) to assume the size of it's child views rather than assuming the size of the background image?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/large_image300x300pix">
<TextView android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!"/>
</LinearLayout>
The linear layout becomes the same size as the background image.
How can I get my linear layout to assume the same size as the textview?
OK, so this thread is a little old, but I have a solution that someone might someday find useful. I think Android has problems scaling large images down, so the LinearLayout size ends up getting bumped by the background drawable bitmap, and the ImageView ends up forcing up the size of the parent container.
Unless you use a relative layout. You can make the ImageView relative to the position of the LinearLayout, even when the ImageView is behind the layout in the parent. My solution looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/activation_popup"
android:scaleType="fitXY"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignTop="#+id/activation_layout"
android:layout_alignBottom="#id/activation_layout"
android:layout_alignLeft="#id/activation_layout"
android:layout_alignRight="#id/activation_layout"
android:contentDescription="#string/act_code_label" />
<LinearLayout
android:id="#id/activation_layout"
android:clipToPadding="true"
android:padding="25dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- LinearLayout wraps a bunch of smallish views here -->
</LinearLayout>
</RelativeLayout>
I tried this on a top of display sizes and OS versions, seems to work great. Note that the padding in the LinearLayout is a trick to make space for a shadow border in the background image graphic. The LinearLayout doesn't need any relative positioning because top left is assumed.
You can create a FrameLayout and put an ImageView and your LinearLayout there. So you'll be able to configure the layout of your background image.
This happens because the Android view calculates its minimum size based on its background drawable size.
Check my answer here in this another post which covers the same problem which will help you to achieve your layout configuration.
If your image lends itself to being converted to a scalable 9-patch image, then doing that would cause the background to scale around the TextView.
I believe the best solution here is to set android:clipToPadding="true". What this does is excludes the padding for the main layout and wraps your layout to its children.

Categories

Resources