I want to create a custom view which has a 9-patch bitmap as background and can display two rows of text in the center of the view.
I have read the official guide on creating custom views but still don't know how to start.
I was able to draw the background in the onDraw() method using canvas.drawBitmap(..)
This, works, but how can i draw a 9-patch bitmap and set the width and height? (the image size should be like match_parent.
To summarize i want to create a view like this:
+------------------+
| |
| first row text |
| second row text |
| |
+------------------+
The box should have a 9-patch bitmap background and should have a width that matches the parent layout.
how can I implement this?
kind regards
I think just regular TextView can cover your requirements. Try this,
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:drawable/btn_default"
android:gravity="center"
android:minLines="2"
android:maxLines="2"
android:text="This is the first row \n This is the second row"/>
If you have any special reason to use CustomView, then don't need to build it from scratch, try to extend it from a proper one. (In your case TextView looks proper)
Related
Is it possible to create a scaled TextView like this where the text itself is scaled in one direction? In the picture, the top half shows a basic TextView outlined in blue. The bottom half shows the same TextView after the scaling I'm trying to do. The height is the same but the width of the view has been cut in half.
I don't think that this is possible with a TextView using the default font. To accomplish the effect you are looking for you would probably have better luck creating and resizing an image or dynamically using a different font that has half the width per character.
I personally use the library autofittextview from grantland in my projects.
The usage is simple.
<me.grantland.widget.AutofitTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:maxLines="2"
android:textSize="40sp"
autofit:minTextSize="16sp"
/>
for example. The result is as follows.
I have a UI Design from my designer, and it exists of a background map with several buttons on it, positioned non-linear all over the map. Currently I position them in a RelativeLayout that is as large as the map, and use margin-left and margin-top etc in dip.
This works ok, but I also need to account for users with very small screens, that cause the map to scale down. My relative layout scales with it, but the margin values ofcourse not.
So I am wondering, how should I do this? I would prefer to layout these buttons using percentages like
left="30%"
top="50%"
Is there anything in Android that makes such a thing possible? Otherwise I have to come up with a custom layout class for that.
Visual Representation: (Ofcourse they don't actually are on 6 lines, and partially overlap in x or y position). It's actually a real (abstract) map of a building with location markers that you can press as buttons.
-------------------------
| x x |
| x |
| |
| x |
| x |
| x x|
-------------------------
Here is a complicated way that does not require a custom ViewGroup. Suppose you want a button at left 30%, top 40%
FrameLayout
View with background, match parent
LinearLayout orientation=horizontal, match parent
View layout_width=0dp, layout_weight=30, height=match_parent
LinearLayout orientation=vertical, width=0dp, weight=70, hieght=match
View layout_height=0dp, layout_weight=40, width=match_parent
FrameLayout layout_height=0dp, layout_weight=60
Button
I use Dimension resource files put in the relevant layout- buckets so I can change margins/paddings/sizes depending on device size.
(http://developer.android.com/guide/topics/resources/more-resources.html#Dimension)
(Storing dimensions in xml file in Android)
I am having two different circular images with different sizes.I have to place both in same place where the center point will be same.These two imageviews are in a relative layout.
please help..
When using a relative layout the only option to do that is to center both images in the layout, but if you start adding more elements, such as some text above/below any of the images, the result will not be as expected.
So my recommendation is to do it programatically. You can define a View and override the onDraw() method. Then you would load the bitmaps by means of two ImageView (or BitmapFactory). Then you paint it to the canvas at the desired location. To find out the center of each image you can use the Rect class that you obtain from the View method getDrawingRect after you apply the layout properties (so the size is calculated),, or by hand (create a Rect with de dimensions of the loaded Bitmap if you use BitmapFactory)
Other alterative is using LayerDrawable and define the image positions so they are centered (you need to know the image dimensions before hand).
Difficult to help without your layout XML code. Having said that, the moment you see "one on top of the other", you need to consider FrameLayout.
Use Framelayout, and set the background for the same with an image and then add images on top with setting layout gravity to left or right or middle.
In stead of creating a new sublayout, you can potentially have the ImageViews align on all sides and set the scaleType attribute to something like center:
<ImageView
android:id="#+id/circle_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:scaleType="center"/>
<ImageView
android:id="#+id/circle_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:layout_alignTop="#+id/circle_a"
android:layout_alignBottom="#+id/circle_a"
android:layout_alignLeft="#+id/circle_a"
android:layout_alignRight="#+id/circle_a"
android:scaleType="center" />
This will give the circle_b ImageView actually the same dimensions as circle_a, but setting the appropriate scaleType will prevent the image from being stretched or misaligned.
//Edit: ups, I meant to say center... corrected.
I've been trying to obtain a certain layout but all my attempts have failed short.
I have 2 textviews within a limited space. As long as there is space to show both, I want them to show one after the other:
| T1 T2222 |
| T111111 T2222 |
But when space runs short, I want only the first one to get ellipsized or otherwise cut, such as this:
| T1111111... T2222 |
It may help - or not - that both are only supposed to have 1 line.
It may help - or not - that the second's width can be fixed.
I've tried the ideas at Two TextViews side by side, only one to ellipsize? but that case is different from mine because their T2 is meant to anchor at the right, whereas I'd like to have T2 just follow T1.
I've tried specifying a minWidth for T2, but it doesn't seem to be honoured; plain width is, but I can't seem to control T1's behaviour.
I've dabbled with weights, but found nothing that would solve the problem. But that may be my inexperience.
I could specify a maxWidth for T1, and it it were honoured it might do what I wish, but the problem is that the whole width of the limited space is unspecified.
At this point I'm starting to think there is no way to do it - unless maybe programatically, which is a route I'd like to avoid.
Thank you for any suggestions.
Would concatenating the two Strings and putting the result into a single TextView with ellipsize="middle" set work?
Or a layout, where the second textview is aligned to the right?
| T1 T2222 |
| T111111 T2222 |
| T1111111... T2222 |
Update
Taking advantage of the ability that the second text view's width can be fixed, the RelativeLayout below serves with the desired layout (by explicitly setting the second view's width to 60dp):
<?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="fill_parent"
android:gravity="fill">
<TextView android:id="#+id/secondText"
android:layout_width="60dp" android:layout_height="wrap_content"
android:singleLine="true" android:layout_alignParentRight="true" />
<TextView android:id="#+id/dynamicText"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginRight="5dp" android:layout_toLeftOf="#id/secondText"
android:singleLine="true" android:ellipsize="end" />
</RelativeLayout>
The code above generates the following layout:
| T1 T2222 |
| T111111 T2222 |
| T1111111... T2222 |
width an 5dp gap between the two TextViews.
I have an image which is 450px square below some text in a linear layout and wanted it to fill the width of the device, which I done by using;
ImageView android:id="#+id/my_image_container"
android:src="#drawable/my_image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:scaleType="fitStart"
This has worked in a fashion, but the ImageView element fills the rest of the screen and any elements placed under do not show.
Does anyone know of a way to trim the bottom of the space that the ImageView uses.
Hopefully this image can explain it better - I want to crop the empty area under the image (orange background).
I recommend you to use a RelativeLayout instead of a LinearLayout. You can then use android:layout_above="" and android:layout_below="" to ensure that you get the layout you want.