Develop Reference

How do I make a certain component have a relative layout with another component outside of its linear layout

So, the title may be confusing, but to put it in context:
I have an ImageButton component in my app display that should be on the opposite side of my ImageView, lined up perfectly, and to repeat this for any other item on the same list.
My question and doubt itself is how to do this when the ImageButton in this case is inside a LinearLayout while the ImageView is outside of it. Is there like a code line that can connect an outside element to a LinearLayout inside element.
Here's how my display looks:
item_contact.xml
The blue rectangle, being the LinearLayout, means everything inside belongs to it, but the call button looks to be the on the other side of the user pic, which is not inside the LinearLayout, which is what I wanted, the problem is this:
activity_main.xml
Each of the TextViews are above and below both the user picture and the call button, but because they both also belong to the LinearLayout, it's obvious it's because of the latter.
Now I tried fixing the problem by simply adding the user picture to the LinearLayout, which seems like the obvious answer, but I needed to be sure, because my call button isn't correctly aligned to the right:
<ImageView
android:id="#+id/iv_image"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="16dp"
android:contentDescription="#string/todo"
android:src="#drawable/ic_baseline_person_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="ImageContrastCheck" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#id/iv_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<TextView
android:id="#+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textColor="#color/purple_700"
android:textSize="18sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/call_button"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginStart="248dp"
android:background="#1072E1"
android:contentDescription="#string/call"
android:minWidth="48dp"
android:src="#android:drawable/stat_sys_phone_call" />
<TextView
android:id="#+id/tv_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
My ImageButton's "right alignment" was only done with the manual positioning of the android:layout_marginStart which I set to 248dp by attempts. Surely there's a better way to do this, but I've yet to find a solution that works.
Lastly, there's also the aforementioned problem: I can't seem to fix the LinearLayout issue without having to backtrack the progress I've done and use new code lines or already existing ones to resolve the issue.
So:
How can I "connect" two components, one inside a LinearLayout and another not, with or without the use of constraints and/or RelativeLayouts, and do I really have to insert the outside component to the LinearLayout;
How can I forcefully align a component to the right without having to manually push it with margin inputs (attempts);
Is there a way to know exactly how to connect a component to another by using constraints accurately, so it repeats that process through the entire contact list?.
I would really like if someone could answer at least one of the listed questions or, even better, resolve one of the most developed questions, where I show some images of reference.
Maybe even a suited tutorial for my case in specific that explains the ways of designing the layout of an app.
If more information is needed, I will gladly help, and I'll also try to answer to every response I can get.
Also, in case you're curious, here's my last question about the same app (already resolved):
"[AppName] stopped working" when I try to run my app on an AVD emulator
(Keep in mind that the problem at hand in this question has barely anything to do with this one.)

How to make RecyclerView behave like Paragraph?

I want to make view, where some lines are shown as a paragraph(i.e. not as a vertical list but as a paragraph). But I also want each of the line to be clickable, so that I can prompt the user to share that specific line (to highlight or copy etc).
I am actually building an app with translation. I want user to read the paragraph both standalone(1st image) and with translation. But I want the standalone version like the 1st image below, in a paragraph format. How to achieve that using RecyclerView (as I have already achieved translation version with RecyclerView)?
On other words, I know how to use two views in a single RecyclerView, but (see the 3-5 lines of first image) how to warp one layout into other using RecyclerView
Edit: I've tried flexbox layout, it doesn't satisfy my requirement.

The answer is FlexBoxLayoutManager you can use it with RecyclerView put
implementation 'com.google.android:flexbox:1.0.0'
in your gradle file. Now setting up RecyclerView layout,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
xmlns:toools="http://schemas.android.com/tools">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/end_indicator"
android:textSize="20sp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:textDirection="anyRtl"
android:id="#+id/line_holder"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:layout_marginStart="5dp"
android:layout_alignBaseline="#id/line_holder"
android:gravity="center_vertical|center_horizontal"
android:textAlignment="gravity"
android:layout_marginEnd="5dp"
android:background="#drawable/stackoverflow_bg"
android:id="#+id/end_indicator"/>
</RelativeLayout>
here stackoverflow_bg.xml is an oval shape drawable.
Now setting up RecyclerView,
FlexboxLayoutManager manager = new FlexboxLayoutManager(this);
manager.setJustifyContent(JustifyContent.CENTER);
manager.setFlexWrap(FlexWrap.WRAP);
manager.setFlexDirection(FlexDirection.ROW_REVERSE);
rv.setLayoutManager(manager);
rv.setAdapter(rvAdapter);
The layout I made:
As you can see this layout needs some working. The end indicator must be aligned to the last line of the TextView then it will fix the problem. Now you can even handle line click events as it is all done inside a Recyclerview.

UI of my app gets broken when testing on a phone [Android]

I am trying to do some simple app to practice, and the user interface gets broken for some reason I don't know why when I run test on my phone. I did an app on android only once before and I didn't have this problem, I was using a different phone though. I'm testing this on Samsung Galaxy A5.
That's how it looks in project: http://imgur.com/Pnbg5ns
And that's how it looks on my phone: http://imgur.com/a/uki84
Anyone knows how to resolve this?

All your views have locations set with the tools:... attribute. The locations set this way (using tools:) position the views within the Android Studio editor, and Android Studio editor only. It doesn't do anything at all to position the views for when the app is actually run, that's why all your views are on top of each other, they simply don't have any attributes to indicate their positioning on the screen when the app is run.
You should check tutorials for how to use ConstraintLayout (if you want to use that layout) which is a recent (2016) addition to Android and position your views with the constraints you need. Or you could use some of the older layouts like LinearLayout which should be perfectly fine for your layout needs.
And absolute positioning of the views like you have with the use of the tools:... attribute is also a big no most of the time. Views need to be positioned in some relative way within a layout, which doesn't mean it has to be within a RelativeLayout :), just saying that the views should be positioned in reference to the layout containing them, not just at some absolute point f.e. (150, 110).

This is a very simple layout. You can use LinearLayout instead of ConstraintLayout.
Here is an example using LinearLayout:
<?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"
android:layout_margin="16dp">
<EditText
android:id="#+id/etLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Login"
android:inputType="textPersonName" />
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Hasło"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Loguj"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/tvRegister"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Nie masz jeszcze konta? Kliknij tutaj."
android:layout_gravity="center_horizontal"/>
</LinearLayout>
OUTPUT:
Hope this will help~

Android ConstraintLayout #dimens replaced with hardcoded values

Heyho mates,
currently I am learning the new layout editor of Android Studio with the new ConstraintLayout.
By the way, I hate it.
But I got the issue, that if I want to specify a layout_height with #dimen, it gets replaced with a dp value instead.
Someone else got this issue?
Android Studio version 2.2.2 & 2.2.3 same issue.
Newest gradle version.
Thanks in advance guys!
Edit :
Code example :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="#dimen/imageViewHeight"
app:srcCompat="#drawable/accept"
android:id="#+id/imageView"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Also happens outside scrollview.

Turns out this is a bug and will be fixed in Android Studio 2.3.
I think the reason behind this is, that ConstraintLayout as a WYSIWYG layout is inevitably meant to be edited/manipulated in the visual editor only.
Therefore keeping references to dimens in your dimens.xml would mean that as soon as you change something, move some elements around, these would not be relevant anymore and are hence replaced with "actual current values".
Also as mentioned in the docs:
All margins offered by the tool are factors of 8dp to help your views align to Material Design's 8dp square grid recommendations.

Android ConstraintLayout generates absolute values

I have recently started learning the new ConstraintLayout in Android Studio 2.2 and noticed that when I add simplest of the views, the layout editor automatically generates some absolute coordinates. Here is a sample XML:
<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:id="#+id/activity_portfolio"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abc.Activity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<TextView
android:text="#string/creator_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="246dp"
tools:layout_editor_absoluteY="479dp"
android:id="#+id/first_textview"
app:layout_constraintRight_toRightOf="#+id/activity"
android:layout_marginEnd="16dp"
tools:layout_constraintRight_creator="0"
app:layout_constraintBottom_toBottomOf="#+id/activity"
android:layout_marginBottom="16dp"
tools:layout_constraintBottom_creator="0" />
</android.support.constraint.ConstraintLayout>
Notice the absolutes like 81dp, 246dp, 479dp... I tried to manually delete these, but when I go back to the "Design" tab and come back to the "Text" tab, these regenerate. Now, I have three questions:
Is there a way to tell Android Studio to not generate these?
Should I manually place them in dimens.xml?
Would these absolutes cause some layout problems in other devices?

You'll note that all of the absolute values are in the tools namespace - this means they are not compiled into your app, nor used in anything but in the tools (and in this case, the visual editor). They are simply to ensure that switching from the Design to Text tab is always consistent, with the underlying files remaining stable.
Is there a way to tell Android Studio to not generate these?
No.
Should I manually place them in dimens.xml?
These are only useful for the tools and therefore should not be added to a separate dimens.xml file that would be included in your final APK.
Would these absolutes cause some layout problems in other devices?
No, they are only used by the tools.

I'm not sure your original question contains your entire layout, as it references a widget with an id of #+id/activity, so the issue might lie elsewhere in your layout.
Ensure that no widget that exists within a ConstraintLayout has a layout_width or layout_height of match_parent.
MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".
Source
If you use match_parent, Android Studio will generate these absolute values, as well as replacing match_parent with an absolute dimension.
Based on the layout you posted, your TextView probably had a layout_width or layout_height of match_parent before Android Studio replaced it.
You should replace android:layout_width="match_parent" with
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndtOf="parent"
And android:layout_height="match_parent" with
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomtOf="parent"
In your specific layout, you probably want something like this:
<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:id="#+id/activity_portfolio"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abc.Activity">
<TextView
android:text="#string/creator_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/first_textview"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/activity"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp" />
</android.support.constraint.ConstraintLayout>

As a side notes to given answers, you can use the Magic Wand Icon in the toolbar menu above the design preview. Click on Infer Constraints button, this will automatically add some lines in the text field and the tools one will be converted to constrained.
Please see below picture :