add padding to textView with drawable background - android

Is it possible to add padding into TextView with drawable element on its backround? Or do I need to use Draw 9-patch ?
<TextView
android:layout_width="wrap_content"
android:layout_gravity="bottom|left"
android:layout_marginLeft="5dp"
android:layout_height="85dp"
android:background="#drawable/text_background"
android:id="#+id/counter"
android:textColor="#color/white"
android:textSize="12sp"
android:textStyle="bold"
android:gravity="center"
android:paddingLeft="2dp"
android:paddingRight="2dp"
/>
This padding settings does not work. For 3-4 digits the background is displayed correctly but when it should adjust (for 5/6 digits) it stays the same.
UPDATE - add image

If You are adding drawable as background then drawablePadding doesn't works.
You just have to give proper padding to you TextView, so that it can handle most of your usecases.
<TextView
android:id="#+id/txt_bankid_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/layout_user_detail"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/spacing_huge"
android:background="#drawable/textview_selector"
android:clickable="true"
android:textAllCaps="true"
android:padding="#dimen/spacing_small"
android:text="#string/login_bankid"
android:textColor="#color/app_background_color"
android:textSize="#dimen/font_normal" />
Never give static height or width to your layouts as you have used in height. It will create problem in different screens and you will face text cutoff.

Related

Drawable padding doesn't work

I've got the following xml:
<AutoCompleteTextView
android:id="#+id/searchQuery"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:drawablePadding="25dp"
android:drawableRight="#drawable/ic_search_black_18dp"
android:ems="8"
android:focusable="true"
android:focusableInTouchMode="true"
android:imeOptions="actionSearch"
android:inputType="text" />
I want to make icon move, but drawablePadding has no effect. What is wrong?
drawablePadding is padding between the drawable and rest of your widget.
use padding attribute to provide padding around your widget including drawable.
According to your code, you are giving static height to your AutoCompleteTextView i.e. 30dp. That's the reason the drawable padding is not visible.
Try using wrap content if you want drawable padding visible.
drawablePadding only take effect when the widget view size is small enough.
For drawableRight and drawableLeft, drawablePdding only works when the view's width is wrap_content.
If the view's width is match_parent or it has a specific big value for width or minWidth, the drawable will be sitting on the edge.
For the layout:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="4dp"
android:drawableRight="#drawable/red_dot_indicator"
android:gravity="center"
android:text="Hello World!" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="4dp"
android:drawableRight="#drawable/red_dot_indicator"
android:gravity="center"
android:text="Hello World! 2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="4dp"
android:drawableRight="#drawable/red_dot_indicator"
android:gravity="center"
android:minWidth="200dp"
android:text="Hello World! 3" />
The screenshot is like:

RelativeLayout background drawable overlap content

I have a 9-patch drawable(date_time). And i want to place this drawable behind Relative Layout content, so all child views should be drawn on top of this image.
Here is xml Layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="23dp"
android:layout_below="#id/tv_map_address"
android:layout_marginTop="11dp"
android:layout_marginBottom="12dp"
android:background="#drawable/date_time">
<ImageView
android:id="#+id/iv_map_distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_centerVertical="true"
android:src="#drawable/ic_map_distance"/>
<TextView
android:id="#+id/tv_map_distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/iv_map_distance"
android:layout_centerVertical="true"
android:textColor="#color/white"
android:textSize="11sp"
android:text="2,7 км"
fontPath="fonts/Roboto-Medium.ttf"/>
<ImageView
android:id="#+id/iv_map_path"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/tv_map_distance"
android:layout_centerVertical="true"
android:src="#drawable/ic_map_path"/>
<TextView
android:id="#+id/tv_map_path"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/iv_map_path"
android:layout_centerVertical="true"
android:textColor="#color/white"
android:textSize="11sp"
android:text="3,2 км"
fontPath="fonts/Roboto-Medium.ttf"/>
</RelativeLayout>
But somehow this background overlaps all child content.
Here is shown what is happening.
But if i replace
android:background="#drawable/date_time"
to
android:background="#0000FF"
Everything is fine and the output is next:
Can you explain me what i am doing wrong?
Update:
Here is my 9-patch drawable.
Exactly as I thought your content indicators are incorrect (unless you wanna introduce such a content padding with your 9-patch). Try this instead:
Right and bottom guides, determine which part (or how much) of your drawable should be occupied by your content. You've set this region to really small space, and set a fixed height of your Layout. In other words: 9-patch forced your Layout to let its children occupy only a small, region of your view (which was limited by you not letting your Layout stretch).

How to centre align the text in TextView and to avoid resizing when the content changes?

I'm developing a timer application for Android and I'm having a problem with TextView element which displays the minutes, seconds and milliseconds. I want to centre my text and at the same time to avoid the resizing of the view. The resizing happening each second so you can barely see the numbers because of the fast resizing of the field. That's happening because the char "1" doesn't have same with as "0" for example. I read about android:gravity="center", but when I have android:layout_width="260dp" (fixed size), the string is still resizing. If I don't have android:gravity="center" and have fixed size, the content is aligned to left. In other words:
<TextView
android:layout_width="260dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:background="#drawable/border"
android:id="#+id/textView"
android:textSize="70dp"
android:textIsSelectable="true"
android:layout_marginTop="54dp"
android:text="00:00:00"
android:gravity="center"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
*Fixed width with gravity - align at center but moving text
<TextView
android:layout_width="260dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:background="#drawable/border"
android:id="#+id/textView"
android:textSize="70dp"
android:textIsSelectable="true"
android:layout_marginTop="54dp"
android:text="00:00:00"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
*Fixed size without gravity - fixed text but left aligned.
Thanks again.
Try programmatically setting a monospace font to make sure the width of the characters doesn't change:
textView.setTypeface(Typeface.MONOSPACE);
use any monospaced external font. they have constant width for each character, so the string will not be resized.
Split in 3 TextView(fixed width) and put in Linear/Relative Layout.
Try This Code:-
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="00:00:00"
android:textAppearance="?android:attr/textAppearanceMedium" />

Double center text issue in TextView and RelativeLayout

I've a problem centering a text in an already centered TextView:
That's the layout:
<RelativeLayout>...
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/w0"
android:layout_margin="10dip"
android:background="#color/green1"
/>
<TextView
android:id="#+id/temperature"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignBottom="#id/image"
android:layout_alignTop="#id/image"
android:layout_toRightOf="#id/image"
android:text="15º"
android:textSize="60dip"
style="bold"
android:textColor="#color/blue"
android:gravity="center"
android:layout_marginLeft="7dip"
android:background="#color/green1"
/>
<TextView
android:id="#+id/min_temperature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/temperature"
android:layout_toRightOf="#id/temperature"
android:text="M 21º"
android:textSize="20dip"
style="bold"
android:textColor="#color/blue"
android:layout_marginLeft="5dip"
android:background="#color/orange1"
/>
<TextView
android:id="#+id/max_temperature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/temperature"
android:layout_toRightOf="#id/temperature"
android:text="m 10º"
android:textSize="20dip"
style="bold"
android:textColor="#color/blue"
android:layout_marginLeft="5dip"
android:background="#color/orange2"
/>
And that's the displayed layout image:
What I don't understand is why the 15º isn't centered in the TextView.
The problem is due the TextView's forced center using alignTop and alignBottom but I can't see why it doesn't works.
I know I can solve this using some nesting layouts but I prefer to get a solution using only the RelativeLayout or if it isn't possible understand the reason.
Also is there a solution to align the maximum and minimum TextViews with the top and bottom of the 15º text (not the TextView) as there is now.
Also is there a solution to align the maximum and minimum TextViews with the top and bottom of the 15º text (not the TextView) as there is now.
I don't think so. You can only make things relative to the actual box that the View represents. And in the case of TextView the box is larger than the Text. Any relations that you do make are going to use the position of the Box no matter where the text is at or what it looks like.
Try using
android:layout_centerVertical="true"
on your temperature TextView in addition to the gravity you have now.

TextView text aligment is horrible! How to work around it?

I always seem to have the biggest issues with aligning a text on a layout. Seems like the TextView doesn't measure its text properly. The reported TextView width and height are a lot bigger than the actual text. One would expect the TextView width and height to be tightly wrapped around the text.
The image below shows how the number 18 and the text "SEC" are not aligning on the same bottom baseline. This is due to the larger text height being a lot bigger than the text is. My xml layout can be seen below.
How to achieve better text alignment accuracy?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/scan_block_1_bg" >
<LinearLayout
android:id="#+id/staticCountDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/tvStaticScanning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#ffffff"
android:shadowDy="1.0"
android:shadowRadius="0.01"
android:text="SCANNING"
android:textColor="#878787"
android:textSize="20sp" />
<TextView
android:id="#+id/tvCountDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#66000000"
android:shadowDy="-1.0"
android:shadowRadius="0.01"
android:text="03"
android:textColor="#b6b6b6"
android:textSize="81sp" />
</LinearLayout>
<TextView
android:id="#+id/tvStaticSeconds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/staticCountDown"
android:layout_toRightOf="#id/staticCountDown"
android:gravity="left"
android:shadowColor="#ffffff"
android:shadowDy="1.0"
android:shadowRadius="0.01"
android:text="SEC"
android:textColor="#878787"
android:textSize="12sp" />
</RelativeLayout>
//use this attribute in your TextView
android:layout_alignBaseline="#id/staticCountDown"
and android:layout_marginBottom="-10dp"
As strange as it may sound if you look at the screen shot provided Both the textviews have the same bottom base alignment. Try putting letters "gj" in tv countdown. You can actually see both will come to have same bottom base alignment. Its better go with padma Kumar's answer.

Categories

Resources