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.)

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~

Selecting best Android layout

I am new to Android, and wish to do a layout as below:
A Logo on top.
Following with a Rectangle with Rounded corners
Within that Rectangle, I will have two EditText box for User ID and Password, plus one Login button
Below the Rectangle with Rounded corners (outside) I have a Html Link to Terms & Conditions
I have tried various ways of layout out
Using only layout. Different kinds of layouts. All seems to be very difficult to achieve what I need
Using Layout + Background. The background is not really a background, but is more like a template, it will affect your layout, and is very difficult to control where you wants your control located.
Using onDraw. Flexible but worried that it might have problem with different screen sizes.
So, someone please enlight which is the best way to achieve what I need?

No one can really tell you what is best, it depends on exactly what you want but I would suggest using a RelatvieLayout as they are typically the easiest and most efficient to use once you work with them a little, in my opinion. You can read Here to see how to do the rectangle. You basically will use shape drawable and adjust the radius of the corners.
As far as the logo on top, if it will be reused in other Activitys then you can put it in its own layout and use the include tag in your layouts to reuse the logo layout
If you are worried about different screen sizes then read the Docs and find what works for you.
Just start on it and adjust as you go. Don't be afraid to screw up and redo some of it. Hopefully this is enough information to get you started
Using a RelativeLayout will give you more flexibility and allow you to use less Layouts such as nested LinearLayouts and Layouts with only one child which can improve performance

this is how it should be done:
start with linear layout with vertical orientation :
<linearLayourt xmlns=............
android:orientation="vertical"
.....other stuffs goes here
......
.....
<LinearLayout ......this is the child linearlayout
.....other stuffs goes here like width and height
<ImageView ...this is where you are gonna put your logo in
/>
</LinearLayout> ....close your child linear layout
<RelativeLayout ...
.........other stuffs here
<EditText ....1st edit text
...you position your boxes here
/>
<EditText ....2nd edit text
...you position your boxes here
/>
</RelativeLayout>
<TextView
....
...
...put yout hyperlink for this text
/>
</LinearLayout> ...this is the parent linear layout

For your case of creating a Log in screen it's not really matter as it is a relatively easy screen to design. I personally like to use XML to design my layouts and never seen it done using the onDraw method.
My suggestion to you as #codeMagic said is to learn how to use and manipulated RelativeLayouts,as those will prevent you from creating cascaded layouts that are really not recommended and take long time to load.
When I started to program for Android I found LinearLayout to be the easiest to understand and use but using it would bring me to many LinearLayouts inside of a LinearLayouts on complex screen designz, later with the use of RelativeLayout I realized that in most cases one RelativeLayout can replace many cascaded Linear ones.
in your case you could do some thing like that:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/drop_down_icon" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/imageView1" >
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/editText1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText2"
android:layout_centerHorizontal="true"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_centerHorizontal="true"
android:text="TextView" />
</RelativeLayout>
All what left is to add the desired padings and margins.

how to get ellipsize working with three textviews side by side

I've been spending some hours trying to figure this problem out, and maybe I'm missing something obvious...
I'm trying to get three TextViews placed side by side working. I want all of them to be equally large, no matter what text they contain, and if the text won't fit in one of them, the text should be replaced by "..." at the end in that particular textview (with help of ellipsize).
| <>TextView>> <>TextView>> <>TextView> |
As I said, I need them to be equally large at all times. This can "easily" be done by a LinearLayout using weights, however then ellipsize won't work (or at least I won't get it working), since it seems you need an absolute width size to get it to work.
I've been trying with LinearLayouts, RelativeLayouts, TableLayouts, and finally I went with a combination of an xml layout and a programatically approach (this seems far more advanced than it needs to be, but that was the only way I was able to become close). However, now I use an absolute width (setting it programatically), but although I'm multiplying it with a proper densitymultiplier, it will look different on different screens. On a 4.3" screen there will be some space over which I could have used, on the other hand on a 2.7" screen it looks pretty good.
So any ideas how I can achieve this with a layout? I've been looking around a bit on forums as well, the problem is that most people only want one textview to have the ellipsize function, and not all of them...
Below you'll find my first attempt to get it working, but since I think an absolute width is needed in order for ellipsize to work, it won't work. Setting the width to "1dp" for example won't really do the trick either.
Any suggestions would be highly appreciated!
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="10dip"
>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:editable="true"
android:ellipsize="end"
android:singleLine="true"
>
</TextView>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:editable="true"
android:singleLine="true"
android:ellipsize="end"
>
</TextView>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:editable="true"
android:ellipsize="end"
android:singleLine="true"
>
</TextView>
</LinearLayout>

It worked for me when I removed the android:editable="true" part.
If you want that to be a user-editable field use EditText instead. That one (afaik) does not support ellipsize though.

Android Layout Elements

I'm trying to make an Android layout like the one below. I have a couple of questions:
1 - what is the element called that FB uses for posts? Ie, it doesn't look like a text view, but the element looks like it separates each post with a divider line. Also, the text style is different for a person's name and how long ago they posted. I'm looking to duplicate this (minus pictures) but I can't find the right UI elements.
What is the element called at the bottom? It's like a static menu. IE, it's the same as a menu but instead of pressing "menu" to access it, it's on the page at all times.
Finally, are there good tutorials/examples on how to make nice looking, professional layouts like the apps on the market? The tutorials that I've found on layouts are really basic. I'd like to understand what elements exist, what all of the attributes mean and see examples, etc. So far I'm only able to see the capabilities from other applications. I'd like to have a handbook or some type of some type of reference manual to go to.

For the "fancy" text views you can make a linear layout that hosts a <RelativeLayout>:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0">
<ImageView
android:id="#+id/userPhoto"
android:layout_height="64dip"
android:layout_width="64dip"
/>
<TextView
android:id="#+id/userFullName"
android:layout_height="25dp"
android:layout_width="fill_parent"
android:layout_marginLeft="70dp"
/>
</RelativeLayout>
Once you have a relative layout you can add different views inside of that to create a sort of customeized view.
As far as good examples I would look at this book. It's easy to understand and very helpful on such things.

I found a really helpful tutorial to solve a problem in ListView Row design a bit like yours. It goes a bit further explaining how to do Async Image loading but the first part should help you.
Also, I might be wrong (I am still a bit new to this) but I think the answer above lacks a TextView for the actual message besides the userName and the relative positions of the elements since it is a relative layout. Something like:
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
android:textSize="17dp"
android:textStyle="bold" />
<!-- actual message -->
<TextView
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/userName"
android:layout_marginTop="1dip"
android:layout_toRightOf="#id/userPhoto"
android:textSize="15dp" />
The key in organizing a relative layout is:
android:layout_alignTop="#id/userPhoto"
android:layout_toRightOf="#id/userPhoto"
and
android:layout_below="#id/userName"
android:layout_toRightOf="#id/userPhoto"
I might be wrong but if it helps, great! Just adding my bit to the other answer.
Cheers