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

CircleIndicator does not fit the screen

I am using this library https://github.com/ongakuer/CircleIndicator, in some cases too much data is coming. The indicator goes out of the screen, can I add animation to it, there is an animation that exists as default in ios.
Ios Example: https://streamable.com/6nu6j3
Android Problem:
I found this as a problem like this before, i was wondering if there could be a nicer solution like in ios
How to set a limit of items on CirclePageIndicator?
Layout
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<me.relex.circleindicator.CircleIndicator3
android:id="#+id/circleIndicator"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_below="#id/viewPager2"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="25dp"
android:layout_marginTop="20dp"
android:layout_marginRight="25dp"
android:gravity="center"
app:ci_drawable="#drawable/circle"
app:ci_height="5dp"
app:ci_width="5dp" />
Edit:
This library my work has been read -> https://github.com/wching/Android-Indefinite-Pager-Indicator

you have to set margin into your root level layout according to that they set margin .....
and don't check into the emulator some time emulator may be goes wrong so check it into real device only

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 RelativeLayout: layout_above appears to behave incorrectly with layout_alignBaseline

In Android I am trying to do a RelativeLayout in which I want to use layout_above on something that is aligned with layout_alignBaseline, but find that this is not working correctly.
Note: I tested with API levels 14, 15, and am going to check in 19 (latest) as soon as I get that installed, with the same result. By the way, I'm referring to appearance in Eclipse layout editing GUI - I haven't tested on a real device, but I assume it's supposed to be consistent...
My real layout is complicated but I have reduced it to this simple example:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="A"/>
<TextView
android:id="#+id/b"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/a"
android:text="B"/>
<TextView
android:id="#+id/c"
android:layout_alignParentLeft="true"
android:layout_above="#id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"/>
</RelativeLayout>
With this layout, I would expect to see the letter A at bottom right (yes), the letter B at bottom left (yes), and the letter C immediately above the letter B. In fact, the letter C does not appear - it seems to have been positioned off the top of the view.
If you replace the layout_alignBaseline on B with layout_alignTop or alignBottom, because in this example A has the same font size, this does not change the appearance of A and B at all - but now C appears in the correct place.
My basic question is, why does this not work when using the baseline alignment? Is this a bug or am I doing something wrong?
Notes:
Obviously in this simplified example there is no reason to use layout_alignBaseline, but it is necessary in cases where the font sizes are not the same.
This is not an urgent problem because I have come up with a less neat way to achieve a similar layout. But I'd like to know for future reference why it doesn't work.
I did look at the related questions but didn't spot the answer.

Android text gets clipped on some devices

I am facing an issue in one phone (till yet). My app uses Hindi fonts. It shows well on emulator, tab, many other phones too. But one of the phone which I am using for testing purpose is showing the text going cut from sides.
I tried almost everything for putting it in the right order but none worked. Here posting the screenshots of two of my test phones and the text.
The screenshot with error:
The screenshot of other phones: and the expected one too:
What could be the reason and how can I solve it? Please let me know!!
TextView configs I am using:
<TextView
android:id="#+id/A_lbl_mandir"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/Abt_mandir"
android:textAlignment="center"
android:textColor="#80000A"
android:textSize="35sp" />
EDIT: My complete activity xml:
<RelativeLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:id="#+id/text"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="#string/hello_world" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/text" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:padding="5sp"
android:text="#string/test"/>
</ScrollView>
</RelativeLayout>
I have tried and deleted many other things especially for this phone. But unable to solve the issue!

this occurs in 4.1.2 and its documented as a bug in Google which they have fixed in 4.2.
https://code.google.com/p/android/issues/detail?id=34432
This happens with unicode fonts where the Android OS is not able to calculate the length of the text.

try this.
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_below="#id/text"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:gravity="left"
android:padding="5sp"
android:text="#string/test"/>
</ScrollView>

All right! Found another phone with same issue. In that phone too, the text was clipped. I guess there is some problem with the phone. Because even popular apps like Whatsapp has got the same problem on that device. The Hindi text was cut same as shown in the images above.
Possible fix for that issue: (if someone gets that n what I am doing now.) I realised that browser shows the hindi fonts well on that. So better make a native app on html, javascript especially for such devices and view the HTML using WebView.The application will get a little slow but we have to do it Until we get the actual problem creating it.
Please note: this is not a solution, but a fix to make that work. Better known as "JUGAAD" in hindi.

On some phones (specially on Samsung ones) some custom fonts are cuted off (or clipped). I had this with custom italic font. Some say that you can edit font to add some kind of padding (i can't confirm that because my lack of knowledge of editing fonts) but:
- EditText/TextView add some padding from xml
- Ellipsize (on some devices messing with this helps displaying text correctly)
Also could you post screenshot with enabled developer options to draw layout bounds, this could help to resolve your problem if above solutions won't help