In my activity xml file i am get an extra 8dp margin in Left side in view(Represented as Underline).
Reason for getting 8dp margin extra in "view"? (underline under TextView.)
i have given 48dp left margin in that view.
above that view i have
<TextView> which has a drawable icon in left.
with left margin 24dp and drawable padding 24dp.
Reason for doing.
I am try to create an underline under my words using a view with black background.
i have given 48dp as left margin in xml.but as shown in photo i am getting 56dp.
difference between lines is 8dp.
<LinearLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#FAFAFA"
android:orientation="vertical"
tools:context="com.hysterics.delhishop.AccountSetting">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_marginTop="16dp"
android:gravity="center|left"
android:paddingLeft="16dp"
android:textAllCaps="true"
android:textStyle="bold"
android:text="#string/hello_user"
android:textColor="#color/primary_text"
android:textSize="15sp"/>
<TextView
android:id="#+id/user_account_information"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_marginLeft="24dp"
android:drawableLeft="#drawable/ic_account_box_black_18dp"
android:drawablePadding="24dp"
android:gravity="center|left"
android:textAllCaps="true"
android:textStyle="bold"
android:text="#string/account_information"
android:textColor="#color/primary_text"
android:textSize="15sp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="center"
android:layout_marginLeft="48dp"
android:background="#android:color/darker_gray"/>
<TextView
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_marginLeft="24dp"
android:drawableLeft="#drawable/ic_home_black_18dp"
android:drawablePadding="24dp"
android:gravity="center|left"
android:textAllCaps="true"
android:textStyle="bold"
android:text="#string/account_address"
android:textColor="#color/primary_text"
android:textSize="15sp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="center"
android:layout_marginLeft="48dp"
android:background="#android:color/darker_gray"/>
................
................
</LinearLayout>
</ScrollView>
here is my activity file.
public class AccountSetting extends AppCompatActivity {
public static final String TAG_USER_NAME_DIALOG = "edit_text_dialog";
#InjectView(R.id.account_setting_toolbar) Toolbar accountSettingToolbar;
#InjectView(R.id.user_account_information) TextView userAccountInformation;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_account_setting);
ButterKnife.inject(this);
setToolbar();
}
thank you in adavnce :-)
Because you set the underline view's layout_width="match_parent" and layout_gravity="center".
After views measure:
- the linear parent view's width is 1080px;
- the underline view's width is 936px ( because of layout_marginLeft="48dp"(144px))
When views layout:
- Because the linear parent's orientation is "vertical", so when set layout_gravity="center" equal with layout_gravity="center_horizontal".
- For a "center_horizontal" child, the linear parent will margin the child view's X-center with it's X-center
So the X-axis of underline view will be (in px):
540 (X-center of parent) + 144 (48dp margin left) - 468 (half of child's width) = 216px (72dp)
That why with layout_gravity="center", you will see the underline view will get 24dp extra margin.
You are adding drawable padding to the icon and the marginLeft is completely different between the underline and the icon. And also you have to take into account the size of the icon itself. I would be surprised that it would have the exact same align.
Instead of this, why don't you use an horizontal LinearLayout with weight between two linear layouts, one with the icon and another transparent view with the same height as the underline, and the other linear layout that contains text and underline perfectly aligned. No margins no nothing, just distribution of weight. Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal"
android:weightSum="10">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Account Information"
android:textSize="20sp" />
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
This is just one possible solution that can guarantee you exact alignments.
It because your views width is match_parent & android:layout_marginLeft & android:layout_gravity="center"
is causing view to shift outside of screen bound.
See this for more information..
Try with removing center layout_gravity from your Views(which draws line)
android:layout_gravity="center"
and use
android:layout_marginLeft="#dimen/space_large"
instead of
android:layout_marginLeft="#dimen/space_xxlarge"
According these two lines:
android:drawableLeft="#drawable/ic_account_box_black_18dp"
android:drawablePadding="#dimen/space_large"
You'll have a drawable of width 18dp, then a padding of #dimen/space_large, which looks to be 24dp for a total of 42dp of padding between the left edge of the TextView and the start of the text itself.
However, the layout_marginLeft on your lines is #dimen/space_xxlarge or 48dp. As one is 42dp and the other is 48dp, they won't align. You'll need to change one or the other if you want the elements to appear visually in line.
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="center"
android:layout_marginLeft="48dp"
android:background="#android:color/darker_gray"/>
There are multiple view in your layout and you are using layout_gravity="center". So View is trying to adjust itself to center inside LinearLayout. Just try removing layout_gravity or use layout_gravity="left".
You have added marginLeft of 24dp also drawablePadding of 24dp and you say a total of 48dp But you forget the width of drawable icon. So, the first latter of ACCOUNT "A" is not at 48dp margin.
You are using LinearLayout and everyting is at the left side so there is no need of any gravity.
Also you say removing gravity from View makes it 36dp from left. YES, thats correct. You missed Drawable Icon width from your calculation.
Set layout_margin of View equals 48dp + width of icon. Thats the reason you got I think.
Just remove
android:layout_gravity="center"
from your view it will fix your problem.
Related
I want to create a user name centered TextView with an edit button to the right of the screen. If I specify the TextView to match the start/end of the parent, it will center. However, the text will overflow and paint over the button. I can chain one side of the text to the button, but then the text will not be centered. Here is the example code I have where tvName is not centered due to the button in the horizontal chain:
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/pt_name_font_size"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tvUserMsisdn"
app:layout_constraintEnd_toStartOf="#id/ibChangeName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/aivProfile"
tools:text="B"/>
<TextView
android:id="#+id/tvName2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/pt_name_font_size"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tvUserMsisdn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvName"
tools:text="A"/>
<ImageButton
android:id="#+id/ibChangeName"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_marginEnd="#dimen/default_margin"
app:layout_constraintBottom_toBottomOf="#id/tvName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/tvName"
android:background="#android:color/black"/>
This is what it looks like:
I can't use a horizontal bias, since the button has to remain with a static size, and the width of the screen may vary, as well as the size of the font. Ideally, I would be able to specify two app:layout_constraintEnd_toStartOf attributes, one for the whole width of the screen, so the text remains centered, and another one for the button, so it won't overflow.
Ideally, I would be able to specify two app:layout_constraintEnd_toStartOf attributes
I'm sure you already know this, but that is impossible.
The only thing you can do that is like that is to use a Barrier, but that's not helpful here because (in this case) that would be functionally identical to simply constraining the end to the start of the ImageButton.
The best thing you can do here, in my opinion, is to constrain the TextView's start and end to the parent, and then use padding to make sure that long text doesn't overlap the ImageButton. The button has a fixed width (28dp), and a fixed margin (#dimen/default_margin), so you can give the TextView left/right padding equal to 28dp + 2x default_margin. This will make sure that text wraps at least default_margin away from the left edge of the ImageButton.
Put both the TextView and the ImageButton inside a RelativeLayout:
<RelativeLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvName2"
android:layout_alignParentStart="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/ibChangeName"
android:textSize="#dimen/pt_name_font_size"
android:textStyle="bold"
tools:text="A"/>
<ImageButton
android:id="#+id/ibChangeName"
android:layout_alignParentEnd="true"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_marginEnd="#dimen/default_margin"
android:background="#android:color/black"/>
</RelativeLayout>
This attribute for the TextView
android:layout_toStartOf="#+id/ibChangeName"
ensures that the TextView won't overlap with the ImageButton
Now you have to center the relative layout
If the ImageButton always has a fixed size (28dp in this case) you can use a Space widget with the same dimensions as the button and place it on the left edge of the parent. You can then chain the three Views together and set the chain's style to spread_inside. The TextView's width can be set to match_constraint and its gravity to center or use wrap_content and app:layout_constrainedWidth="true" so it doesn't overlap the other Views if it gets too big.
Example XML to get the general idea:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Space
android:id="#+id/space"
android:layout_width="28dp"
android:layout_height="28dp"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintEnd_toStartOf="#id/textview"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Textview"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/button"
app:layout_constraintStart_toEndOf="#id/space" />
<ImageButton
android:id="#+id/button"
android:layout_width="28dp"
android:layout_height="28dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textview" />
</android.support.constraint.ConstraintLayout>
I have a TextView and ImageView in a ListView row, positioned next to each other. However, the ImageView doesn't show up at all, and doesn't register clicks either. This is the XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:text="text"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerVertical="true"
android:padding="10dp" />
<ImageView
android:id="#+id/imageView"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView"
android:src="#drawable/ic_action"/>
</RelativeLayout>
The problem seems to lie in the layout_toRightOf line, if I remove it, the ImageView is shown, but in the wrong place. But I don't understand why it's causing a problem. What am I missing?
The issue is that the TextView is pushing the ImageView off the screen.
You can fix this using a LinearLayout and android:layout_weight
eg:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:text="text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:layout_centerVertical="true"
android:padding="10dp" />
<ImageView
android:id="#+id/imageView"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView"
android:src="#drawable/ic_action"/>
</LinearLayout>
More info on the layout_weight attribute:
This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.
For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.
You need to use LinearLayout with weight.. if you set fixed width and the size of the phone is small, it will either stretch out of the screen.
//do linearlayout with orientation horizontal
<LinearLayout
...
orientation = "horizontal"
...
>
<TextView
....
android:layout_width="0dp"
android:layout_weight="1"
...
/>
<Button
....
android:layout_width="wrap_content"
...
/>
</LinearLayout>
Play with android:layout_weight, you will understand
I'm trying to create a custom list item layout but I encountered an issue. See the example below :
Effective functioning
The Issue
The problem is when the green rectangle fills all the blue box (width set as wrap_content) because the green square disappeared. The square has to be right of the green rectangle but the size of this rectangle can change and I can't fix the green square to the right of the blue box.
The red rectangles are fixed and they aren't a problem.
I use some LinearLayout and RelativeLayout to do this but it's not working as I wish.
I also can't use the drawableRight attribute because in the near future, there will be two icons (green square) instead of one.
If someone has already encountered this problem or has a way to solve this.
The wanted result is:
[[ListIconView] [[Some text here] [Icon]]< ..... blank space .....>[x] [y] [z]]
[[ListIconView] [[Long text from....... ] [Icon]]< . blank space ..>[x] [y] [z]]
[[ListIconView] [[A very long text from an older book....] [Icon]] [x] [y] [z]]
x, y and z are icons.
Assuming that red square and rectangle are not the problem (probably parent layout is RelativeLayout), and you have TextView and ImageView as green rectangle and green square, use
android:layout_weight="1"
for your TextView (green rectangle)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Some very looooooooooooooooooooooooooooooooooooooooooooooooong text here" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_image" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:text="blablah"/>
<LinearLayout
android:layout_weight="60"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:text="test string string string"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"
android:text="String test"/>
</LinearLayout>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20"/>
</LinearLayout>
What I do above is that I assign space based on percentages for each of the item I want to fit in the root layout which is the LinearLayout, out of the total weightSum 100%. The ImageView will take 20% space, followed by another LinearLayout which will occupy 60%, and lastly the ImageButton which takes 20%, too
I have this XML layout in my App (example of one button):
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollViewMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff0e8" >
///some views
<Button
android:id="#+id/btnVysledkySportka"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118"
android:gravity="center"
android:onClick="vysledkySportka"
android:text="Archiv výsledků"
android:textStyle="bold" />
///some views
</RelativeLayout>
</ScrollView>
But when I start my app at Android 4.3, the text of buttons isn´t in center of button. Look at the screenshot (in red rectangle):
Where can be problem?
EDIT:
Whole layout
When you specify:
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
It does make the bottom/right/top edge of your button match the bottom edge of the given anchor view ID & accommodates bottom/right/top margin, but while doing that, the android_gravity does not take the resultant height/width into consideration.
So the gravity of the text is center according to wrap_content for layout_height and layout_width.
You can verify that by setting values for layout_height and layout_width (Eg. 200dp and 100dp to try with) and you will get the text with gravity center but for that height and width.
To confirm the same, what you can do is use a container LinearLayout for your Button like:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckStastnych"
android:layout_alignRight="#+id/chckStastnych"
android:layout_alignTop="#+id/chckStastnych"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118" >
<Button
android:id="#+id/btnVysledkyStastnych"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffe118"
android:gravity="center"
android:onClick="vysledkyStastnych"
android:text="Archiv výsledků"
android:textStyle="bold" />
</LinearLayout>
Set the gravity of LinearLayout as center and then center the Button within or as shown above, use layout_gravity for the button to center it in parent LinearLayout.
This will work as a solution when you do that for all 4 buttons, however there might be better options if you restructure your xml and avoid this kind of nesting.
Try This:
<Button
android:id="#+id/btnVysledkySportka"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118"
android:gravity="center_vertical"
android:onClick="vysledkySportka"
android:text="Archiv výsledků"
android:textStyle="bold" />
I am trying to layout 1 textview (upText) left aligned and 1 textview (downText) and an image view (image) both on the same line and right aligned.
how can I do that? I tried that, but both 'textview' and image view at left aligned.
<TextView
android:id="#+id/uptext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left"/>
<TextView
android:id="#+id/downtext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:gravity="right|bottom"/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|bottom"/>
</LinearLayout>
Don't use a LinearLayout. Use a RelativeLayout, with
your first TextView set with android:layout_alignParentLeft="true"
your second TextView set with android:layout_alignParentBottom="true" and android:layout_alignParentRight="true"
something similar for your ImageView, which presently looks like it is going to overlap the second TextView
I realize this post is a bit old but just in case someone comes across this in their search for clarity;
The parent linear layout is where gravity needs to be specified for the child to align with the desired behavior which is why the above posts are explaining that linear layout is not possible for two separate behaviors to occur since a child cannot decide where to align itself within a linear layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="200dp"
android:layout_height="50dp"
android:gravity="bottom|right">
<TextView
android:layout_width="40dp"
android:layout_height="20dp"
android:text="test"/></LinearLayout>
It should also be said that the parent linear layout must have a defined size and not be wrap-content or this will not work since wrap content implies that there will be no extra space in the layout for positioning, so at least 'match-parent' for width and height is necessary as well as having a parent with a greater size than wrap-content for the child linear layout itself.
Hope this helps.
Using RelativeLayout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="hi"
android:textStyle="bold|italic"
android:gravity="right"/>
<TextView
android:id="#+id/text2"
android:layout_below="#id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="All"
android:gravity="right"/>
</RelativeLayout>