What is the difference between a View's Margin and Padding?
To help me remember the meaning of padding, I think of a big coat with lots of thick cotton padding. I'm inside my coat, but me and my padded coat are together. We're a unit.
But to remember margin, I think of, "Hey, give me some margin!" It's the empty space between me and you. Don't come inside my comfort zone -- my margin.
To make it more clear, here is a picture of padding and margin in a TextView:
xml layout for the image above
<?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="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#c5e1b0"
android:textColor="#000000"
android:text="TextView margin only"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#f6c0c0"
android:textColor="#000000"
android:text="TextView margin only"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#c5e1b0"
android:padding="10dp"
android:textColor="#000000"
android:text="TextView padding only"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f6c0c0"
android:padding="10dp"
android:textColor="#000000"
android:text="TextView padding only"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#c5e1b0"
android:textColor="#000000"
android:padding="10dp"
android:text="TextView padding and margin"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#f6c0c0"
android:textColor="#000000"
android:padding="10dp"
android:text="TextView padding and margin"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#c5e1b0"
android:textColor="#000000"
android:text="TextView no padding no margin"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f6c0c0"
android:textColor="#000000"
android:text="TextView no padding no margin"
android:textSize="20sp" />
</LinearLayout>
Related
Gravity vs layout_gravity
Match_parent vs wrap_content
Padding is the space inside the border, between the border and the actual view's content. Note that padding goes completely around the content: there is padding on the top, bottom, right and left sides (which can be independent).
Margins are the spaces outside the border, between the border and the other elements next to this view. In the image, the margin is the grey area outside the entire object. Note that, like the padding, the margin goes completely around the content: there are margins on the top, bottom, right, and left sides.
An image says more than 1000 words (extracted from Margin Vs Padding - CSS Properties):
Padding is inside of a View.
Margin is outside of a View.
This difference may be relevant to background or size properties.
Padding is within the view, margin is outside. Padding is available for all views. Depending on the view, there may or may not be a visual difference between padding and margin.
For buttons, for example, the characteristic button background image includes the padding, but not the margin. In other words, adding more padding makes the button look visually bigger, while adding more margin just makes the gap between the button and the next control wider.
For TextViews, on the other hand, the visual effect of padding and margin is identical.
Whether or not margin is available is determined by the container of the view, not by the view itself. In LinearLayout margin is supported, in AbsoluteLayout (considered obsolete now) - no.
Below image will let you understand the padding and margin-
Padding means space between widget and widget original frame. But the margin is space between widget's original frame to boundaries other widget's frame..
Padding
Padding is inside of a View.For example if you give android:paddingLeft=20dp, then the items inside the view will arrange with 20dp width from left.You can also use paddingRight, paddingBottom, paddingTop which are to give padding from right, bottom and top respectively.
Margin
Margin is outside of a View. For example if you give android:marginLeft=20dp , then the view will be arranged after 20dp from left.
Padding is the space inside the border between the border and the actual image or cell contents.
Margins are the spaces outside the border, between the border and the other elements next to this object.
Sometimes you can achieve the same result by playing only with padding OR margin. Example :
Say View X contains view Y (aka : View Y is inside View X).
-View Y with Margin=30 OR View X with Padding=30 will achieve the same result: View Y will have an offset of 30.
In addition to all the correct answers above, one other difference is that padding increases the clickable area of a view, whereas margins do not. This is useful if you have a smallish clickable image but want to make the click handler forgiving.
For eg, see this image of my layout with an ImageView (the Android icon) where I set the paddingBotton to be 100dp (the image is the stock launcher mipmap ic_launcher). With the attached click handler I was able to click way outside and below the image and still register a click.
In simple words:
Padding - creates space inside the view's border.
Margin - creates space outside the view's border.
Let's just suppose you have a button in a view and the size of the view is 200 by 200, and the size of the button is 50 by 50, and the button title is HT. Now the difference between margin and padding is, you can set the margin of the button in the view, for example 20 from the left, 20 from the top, and padding will adjust the text position in the button or text view etc. for example, padding value is 20 from the left, so it will adjust the position of the text.
Margin refers to the extra space outside of an element. Padding refers to the extra space within an element. The margin is the extra space around the control. The padding is extra space inside the control.
It's hard to see the difference with margin and padding with a white fill, but with a colored fill you can see it fine.
In simple words:
padding changes the size of the box (with something).
margin changes the space between different boxes
Padding is used to add a blank space between a view and its contents.
Margin is used to add a space between different views.
For both padding and margin, we have two way to set those,
setting all sides with equal value
setting side specific values as per requirement
All sides with equal values:
You can use android:padding="15dp" for setting padding of 15dp all the sides
and android:layout_margin="15dp" for setting margin of 15dp all the sides
Sides with specific values:
Padding
android:paddingBottom Sets the padding at the bottom edge
android:paddingStart Sets the padding at the start edge means at the left side of view
android:paddingEnd Sets the padding at the end edge means at the right side of view
android:paddingTop Sets the padding at the top edge
Margin
android:layout_marginBottom Specifies extra space on the bottom side of this view.
android:layout_marginEnd Specifies extra space on the end side, means at the right side of this view.
android:layout_marginStart Specifies extra space on the start side, means at the left of this view.
android:layout_marginTop Specifies extra space on the top side of this view.
Related
I have a layout (can be relative, linear or constraint)
with TextView aligned to parent left and then ImageView (fix width) aligned that start right to the textView.
I want the image to be rendered first and only then to render the text view.
Meaning I want the text view to be truncated according to the left space after the image was rendered.
<RelativeLayout
android:id="#+id/account_name_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginBottom="#dimen/account_menu_account_name_layout_bottom_margin">
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:lines="1"
android:ellipsize="end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
<ImageView
android:id="#+id/account_name_chevron"
android:layout_width="#dimen/account_menu_chevron_size"
android:minWidth="#dimen/account_menu_chevron_size"
android:layout_height="#dimen/account_menu_chevron_size"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/account_name"
android:layout_marginTop="#dimen/account_menu_chevron_top_margin"
android:layout_marginLeft="#dimen/account_menu_chevron_left_margin"/>
</RelativeLayout>
I have tried few options:
1) telling the text to be left to the image view
2) putting weight on the text view - made gap between the two elements.
3) setting minWidth to the image view - didn't help just made the imageView scale smaller.
Any idea how to render the image first and how to limit textView's width according to left width?
You can force the width on the imageView. That will prevent the textview from pushing it off the space. If you are saying you did this, please post the resulting image as that wouldn't make any sense.
Your above example has no constraints to each other, no enforcement to not overlay or push off. You need some constraints, such as "toTheLeftOf" or "Weight" or LinearLayout to enforce it as Weight only works in LinearLayout.
The easiest way is to just give the imageView a hard coded DP width and height, then set the text to 0 width with a weight of 1 inside a Linear Layout.
You can also use percentages if you want, use a LinearLayout then put a weight sum of like 100 for example (representing 100%). Then assign your image whatever percentage it needs like layout_weight=30 and give the textview 70.
Any of these options will work fine for you. If you try it, and it does not, then post your tried code as it will work unless you are doing something goofy that is not visible in your current example. As I do this all the time, every time you make a row, you typically have an image on the left fixed and text on the right to grow.
In RelativeLayout if layout_centerVertical or layout_centerInParent are true vertical margin (margin top ,margin bottom) does not work for me why?
<RelativeLayout>`
`
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginTop="900dp"
android:background="#36648b"
android:src="#drawable/ic_star_black_24dp"
/>
</RelativeLayout>`
When you layout_centerInParent="true" your ImageView, it's being put exactly in center of parent view.
layout_marginTop="[##]dp" will affect your layout if an object is within 90px of the top of your view. Thus pushing the centered view down to keep at least 90px of space on top of it. So it isn't being ignored but it is not having the effect that you think it should have.
source: https://stackoverflow.com/a/7895380/5244435
So I'm trying to put a textview to the left side of an image that fills the parent. Any ideas how to do it in XML? are there any ways to put the textview with witdh 200dp and height 300dp but in the right corner of the parent?
TY
Here's my code for the imageview to the left:
<TextView
android:id="#+id/display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="200dp"
android:height="300dp"
android:gravity="left"
android:background="#00ffffff"
/>
Note that I am new with this
Use the following attribute in your text view:
android:layout_toLeftOf="#id/your_image_view_id"
Just make sure your ImageView is declared in your xml before the TextView and you give it an id (as an example, android:id="#+id/your_image_view_id").
If I understand this correctly, you are wanting to "Overlay" the text views on top of the Image?
I.E. The image occupies the entire parent view and the text views align with the top and left edges of the image..
If that is the case you probably want something like:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/superawesomeimage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/photoofmyholiday" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/superawesomeimage"
android:layout_alignRight="#id/superawesomeimage"/>
</RelativeLayout>
This should produce a textView along (the top by default) of the image, matching the image width of the image container (to make the image fully occupy the imageview you will need to specify a scale I think (fitXY probably).
I might be a bit off with the keywords/syntax here.. I was just typing it off the top of my head, but you get the general idea.
The important things to note are the order of the TextView/ImageView (it determines who is on top of whom) and the TextView layout alignment. With relative layouts you can position relative to other views.. so setting align left and align right to the image will make the left and right edges of the text view line up with the left and right edges of the image view. Hope that helps. Have fun!
I am not sure what you want to align where but if you want something aligned on the right you can use this in a RelativeLayout:
android:layout_alignParentRight="true"
I'm trying to have some margins inside a button between the text and the borders but I don't know how to specify them.
The only way I know is using android:layout_width="...", but this is not relative to the text size.
Thanks!
If you're looking for this kind of padding on the left and right of this cheeky text :
Here is what you do. :
<Button
android:id="#+id/she_was_good"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:soundEffectsEnabled="false"
android:layout_alignParentBottom="true"
android:paddingRight="25dp"
android:paddingLeft="25dp"
android:text="#string/im_sorry_lol_str" />
The part you are looking for is paddingRight and paddingLeft
Use padding to add margin between border and text in button.
To measure its dimensions, a view takes into account its padding. The
padding is expressed in pixels for the left, top, right and bottom
parts of the view. Padding can be used to offset the content of the
view by a specific amount of pixels. For instance, a left padding of 2
will push the view's content by 2 pixels to the right of the left
edge.
Read more at the official doc.
I am trying to design a screen and unable to appreciate the difference between android:layout_gravity and android:padding, if both align the view based on parent layout, then how different are they from each other. Please advise. Thanks.
Padding (see the "Size, Padding and Margins" heading in that link) creates an absolute distance (usually in pixels) between the edge of a view and it's content.
Gravity positions an item relative to it's parent: in the center, to the left, to the right, top, bottom, etc. but you cannot supply an absolute distance from an edge, e.g. 10 pixels, without using margin (or padding; read the Android docs for information on the difference between those two).
I like to think of padding as a box inside the layout where your contents will be placed (alignment baed on the gravity). Where as, without any padding, gravity will change the alignment of the contents with respect to the layout border.
android:padding is setting the absolute padding values within the current layout. android:layout_gravity set the gravity of the current layout with respect to the parent.
<Linearlayout android:id="#+id/L1">
<Linearlayout android:id="#+id/L2"
...
android:layout_gravity="bottom|left"
android:padding="5px">
<TextView android:id="#+id/T1"
.../>
</Linearlayout>
Hence L2 is aligned to the left bottom corner of L1 and android:padding sets a padding of 5px on each of the four sides for the layout L2 (which affects the childlayouts of L2 = T1).