Develop Reference

Prevent double spacing between childs inside RecyclerView GridLayout

I have the following ImageView for single image in GridLayout with 2 columns. But it adds double margins at the middle (because both has marginLeft and marginRight). How can I prevent this?
This is the xml:
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:srcCompat="#drawable/default_image" />

You can simply split the left & right margin values between the childs and the RecyclerView itself.
Like, if you intend to have 8dp margin on left & right and 8dp in middle, set 4dp left & right margin into childs layout and 4dp to RecyclerView layout.
If you have multiple rows, similar technique can be applied for top & bottom margins too.
Your child ImageView layout:
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:srcCompat="#drawable/default_image" />
Your RecylerView gridlayout:
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp"
app:layoutManager="android.support.v7.widget.GridLayoutManager" />

it's convenient to use the RecyclerView‘s addItemDecoration(ItemDecoration decor).it would be better than in xml.

You can simply replace the code with below one:
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:srcCompat="#drawable/default_image" />

Placing button that overlaps two views in Android

I would like to place a button like so (overlapping two views, centered):
I tried to solve the issue with a RelativeLayout and a negative margin but somehow I can't overlap the two views. Instead the button always get's placed at the bottom of the image view. Any ideas?
Thanks in advance for the help!
Here my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/tour_image"
android:layout_width="match_parent"
android:layout_height="220dp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="-35dp"
android:layout_marginEnd="16dp">
<Button
android:id="#+id/go_to_map_button"
style="#style/FloatingActionButton.Light"
android:layout_width="70dp"
android:layout_height="70dp"
android:drawableTop="#drawable/ic_directions_walk_color_24dp"
android:paddingTop="12dp"
android:text="#string/tour_button_show_map"
android:textAllCaps="true"
android:textAppearance="#style/p.Small"
android:textColor="#color/primary_main" />
</RelativeLayout>
</RelativeLayout>
The code results in this layout:

In my opinion, the best way to handle this would be to convert your existing top-level RelativeLayout into a ConstraintLayout. Developer guide for ConstraintLayout is available here: https://developer.android.com/training/constraint-layout/index.html
Once you have a top-level ConstraintLayout, you can position a view on the edge of two views by constraining your button's top and bottom to the view edge:
<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">
<View
android:id="#+id/top"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#caf"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<View
android:id="#+id/bottom"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#fac"
app:layout_constraintTop_toBottomOf="#+id/top"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<View
android:id="#+id/overlap"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="24dp"
android:background="#fff"
app:layout_constraintTop_toBottomOf="#+id/top"
app:layout_constraintRight_toRightOf="#+id/top"
app:layout_constraintBottom_toBottomOf="#+id/top"/>
</android.support.constraint.ConstraintLayout>
The important part of this code is that the "overlap" view has these two constraints:
app:layout_constraintTop_toBottomOf="#+id/top"
app:layout_constraintBottom_toBottomOf="#+id/top"
These are saying "match my top edge to the other view's bottom edge" and "match my bottom edge to the other view's bottom edge". Obviously that's impossible, since the view has a non-zero height, and so ConstraintLayout will automatically position it so that it is centered on the other view's edge. Further details are available in the developer guide I linked above.

Positioning in ConstraintLayout causes HorizontalScrollView to cut off content

<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="14"
android:layout_gravity="bottom"
android:background="#drawable/object_detailed_information_bar"
android:padding="#dimen/object_detailed_information_bar_padding">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/object_type_icon_image_view"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/restaurant_marker_icon"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/object_name_text_view_margin_start_or_left"
android:layout_marginStart="#dimen/object_name_text_view_margin_start_or_left"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/object_type_icon_image_view">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/object_name_text_view"
android:scrollHorizontally="true"
android:lines="1" />
</HorizontalScrollView>
</android.support.constraint.ConstraintLayout>
I positioned the TextView wrapped by ScrollHorizontalView to be the right of the ImageView using app:layout_constraintLeft_toRightOf="#id/object_type_icon_image_view". But it caused also unexcepted behaviour. Text stored in TextView can be scrolled but it's cut off by few letters. When i delete this line app:layout_constraintLeft_toRightOf="#id/object_type_icon_image_view", text it's fully shown while scrolling. Is there any way to fix that issue?
Screens:
android:text="123456789123456789123456789123456789123456789123456789"
Before scroll when positioned to the right of ImageView
After scroll when positioned to the right of ImageView - it's cut off
Before scroll without positioning
After scroll without positioning - it's ok

Short answer:
Change the width of your HorizontalScrollView to 0dp and constrain its right-hand edge to the parent:
android:layout_width="0dp"
app:layout_constraintRight_toRightOf="parent"
Explanation:
Right now, your HorizontalScrollView is using wrap_content for its width. This makes it attempt to be as long as the text, but the parent (the ConstraintLayout) won't allow its children to have a width larger than itself. So your HorizontalScrollView winds up being the same width as the ConstraintLayout.
However, you've positioned the HorizontalScrollView such that it has been moved slightly to the right. This means that there's part of the view that is invisible; the ConstraintLayout is clipping the HorizontalScrollView.
To fix this, you need to make sure that the HorizontalScrollView is as wide as the space between the right edge of the image and the right edge of the parent. You already have a left constraint on the HorizontalScrollView, so you need to add a right constraint. Once both sides are constrained, you can use a width of 0dp to mean "match constraints"; now the HorizontalScrollView will size itself to the available space.

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/object_type_icon_image_view"
android:layout_width="200dp"
android:layout_height="0dp"
android:src="#color/link_blue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/red"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/object_type_icon_image_view"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/object_name_text_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Horizontal Scroll View"
android:textSize="25sp"
android:gravity="center"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="16dp" />
</HorizontalScrollView>
</android.support.constraint.ConstraintLayout>
Do you need this?

Top elements are hidden in ScrollView with white space at bottom. How to fix the issue

I am adding text views to a linearLayout which is in a scrollView.
in 80 tags around 30 are lost on top. And there is some white space at the bottom of the scrollView. As you can see in the picture, top tag is cut(top of scrollView).
ScrollView Xml:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/backLayout"
android:layout_above="#+id/buttonSeparator"
android:background="#color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/tagsLayout"></LinearLayout>
</ScrollView>
text item xml:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="38dp"
android:layout_marginLeft="10dp"
android:background="#drawable/tag_background"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textColor="#color/text_color"
android:textSize="14sp"
android:alpha="0.70"
android:paddingLeft="15dp"
android:paddingRight="15dp" />
</RelativeLayout>
Adding text views to linear layout:
for(String tag: tagList){
View tagHeader = LayoutInflater.from(mcontext).inflate(R.layout.tag_item, null);
TextView tagText = (TextView) tagHeader.findViewById(R.id.tag);
tagText.setText(tag);
tagsLayout.addView(tagHeader);
}
I found few solutions that said to remove gravity from the layout. still same after removed the gravity parameter. fillViewport set to true did not work either

Reason behind extra 8dp margin in a view ? not ways to solve

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.