Develop Reference

How to not have space at the right end when using using maxwidth in android?

I am trying to have a conversation message screen. The problem which I am facing is that if there is a word that does not fit one single line and text has to go to the next line there is a lot of space left at the right end. How to remove this redundant space at the right end?
<?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="#dimen/dimen_2dp"
android:layout_marginTop="#dimen/dimen_2dp"
android:layout_marginEnd="#dimen/dimen_16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:fontFamily="#font/roboto_regular"
android:id="#+id/rightText"
android:background="#drawable/rounded_rectangle_blue_80"
android:textColor="#color/white"
android:maxWidth="300dp"
android:padding="#dimen/dimen_8dp"
android:text="dhdjhdkjdk jdkdk nkdk dknnjfnjnfjnfmkdmmkdmk"
/>
<TextView
android:id="#+id/delivered"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dimen_8dp"
android:text="delivered"
android:layout_below="#+id/rightText"
android:textAlignment="viewEnd"
android:visibility="visible"
android:textColor="#color/grey_80"/>

Android Normal Layout is displayed differently on devices

I'm relatively new in the area of App Development and still cant get behind the proper way to set up an xml file (in this case for a normal layout) to fit every mobile device that uses this layout type.
For example: I have a Pixel 2 Emulator and a Nexus 5 Emulator (both use the normal layout). However the result on the screen looks different on the devices:
Pixel 2 (1080x1920 - 420dpi): https://i.stack.imgur.com/5zmZ3.png
Nexus 5 (1080x1920 - xxhdpi): https://i.stack.imgur.com/sSLtb.png
After some research in the Google developers section about Device compability I found out that it could be due to the different pixel densities, but I have no clue how to fix this.
The xml code of this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#drawable/mybackground"
tools:context=".Start">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#00FFFFFF"
android:padding="5dp"
android:scrollbars="none"
android:layout_below="#id/name_add"
android:layout_marginTop="15dp"
android:layout_marginBottom="160dp"
android:layout_marginStart="200dp"
/>
<EditText
android:id="#+id/name_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:layout_marginTop="200dp"
android:width="180dp"
android:ems="10"
android:hint="Name"
android:importantForAutofill="no"
android:inputType="text"
android:singleLine="true"
android:textColor="#424242"
android:textColorHint="#424242"
app:backgroundTint="#585858" />
<ImageButton
android:id="#+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/name_add"
android:layout_marginBottom="11dp"
android:layout_toEndOf="#id/name_add"
android:layout_marginStart="9dp"
android:src="#drawable/ic_plus"
android:background="#android:color/transparent"
android:contentDescription="add"/>
<Button
android:id="#+id/goToSelection"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="520dp"
android:background="#drawable/play_btn"
android:fontFamily="sans-serif"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:text="#string/btn_play"
android:textAllCaps="false"
android:textSize="20sp"
/>
<Button
android:id="#+id/languagegbr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="15dp"
android:background="#drawable/gbr"
/>
<Button
android:id="#+id/languagedr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="55dp"
android:background="#drawable/germanyr"
android:visibility="gone"/>
</RelativeLayout>
All of the images will later be replaced by vector graphics.
My question now is, how I can make my layout on the Nexus 5 (and on any other mobile device with a resolution of 1080x1920 or that uses the normal layout in general) look the same as it looks on the Pixel 2?

I've struggled with this kind of issues for a long time.
This stuff happens when you mess too much with dp's in margins and paddings usually. Given that dp's stay almost equal between different phone sizes, you will get variations of your display, such as the one you're showing us.
The way I solved it is by using Constraint Layout. It's very simple to use, and it has a lot of advantages. If there's no particular reason why you're not using Constraint Layout I highly suggest you to start now.
In a Constraint Layout all you need to do for your error to be solved is set the horizontal constraints to the parent and that's it.
<androidx.constraintlayout.widget.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"
tools:context=".login.YourActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Just by saying you'll be attached to your parent's left and right, sets the view right in the middle of your screen. Of any screen actually.

Android - center text in OpenSansBTextView

I'm designing my constraint layout using XML.
I have an OpenSansBTextView and I need my text to be centered in it. It's centered horizontally, and not centered vertically. I don't know why. Here is my xml file. Can you see my mistake?
<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"
android:background="#color/colorAccent"
android:id="#+id/dashboard">
<com.doyousonder.android.utils.RochesterTextView
android:id="#+id/YourActivity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="25dp"
app:layout_constraintVertical_bias="0.34"
android:text="#string/YourActivity"
android:textColor="#color/colorPrimaryMoreDark"
android:textSize="23sp" />
<com.doyousonder.android.utils.OpenSansRTextView
android:id="#+id/YouVoted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/YourActivity"
android:layout_marginTop="15dp"
android:layout_marginStart="20dp"
android:text="#string/YouVoted"
android:textColor="#color/colorPrimaryMoreDark"
android:textSize="15sp" />
<com.doyousonder.android.utils.OpenSansSBTextView
android:id="#+id/VoteCount"
android:layout_width="29dp"
android:layout_height="35dp"
app:layout_constraintStart_toEndOf="#+id/YouVoted"
app:layout_constraintTop_toTopOf="#+id/YouVoted"
app:layout_constraintBottom_toBottomOf="#+id/YouVoted"
android:layout_marginStart="5dp"
android:background="#drawable/more_curved_edge_button_button_primarycolor_background"
android:gravity="center"
android:text="1"
android:textAlignment="center"
android:textSize="25sp" />

You haven't provided much code to work with, i.e what is the youVoted variable. I'm assuming youvoted is your parent layout
I think you're issue comes with how you set up your constraints. Try these instead
...other layout info
app:layout_constraintBottom_toBottomOf="#+id/YouVoted"
app:layout_constraintStart_toStartOf="#+id/YouVoted"
app:layout_constraintTop_toTopOf="#+id/YouVoted"
app:layout_constraintEnd_toEndOf="#+id/YouVoted"/>
Explanation
I believe the mistake is you made is stating your textview should start at the end of your youvoted layout instead of saying it should start at the start of the youvoted layout.
change app:layout_constraintStart_toEndOf="#+id/YouVoted" to app:layout_constraintStart_toStartOf="#+id/YouVoted"
also add an end constraint.
app:layout_constraintEnd_toEndOf="#+id/YouVoted"

Layout on phone & emulator quite different from designer

I am trying out a simple layout exercise but am struggling to get even a simple layout to work.
In the designer it is as follows:
But when run, the output on an emulator or real phone is:
The Xml markup is as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.hceng.myapplication.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E-mail:"
tools:layout_editor_absoluteY="52dp"
tools:layout_editor_absoluteX="18dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me!"
tools:layout_editor_absoluteX="148dp"
tools:layout_editor_absoluteY="96dp" />
<EditText
android:id="#+id/editText"
android:layout_width="266dp"
android:layout_height="36dp"
android:ems="10"
android:inputType="textEmailAddress"
tools:layout_editor_absoluteX="66dp"
tools:layout_editor_absoluteY="41dp" />
</android.support.constraint.ConstraintLayout>
I am new to this markup language, but I thought it seems simple enough with absolute positioning throughout. In any case, the layout seen in the designer is what I want. Why is the above not working?

According to the documentation
When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).
This is the reason why you see layout correctly in editor but not on the emulator.

You can try this, if not bound to ConstraintLayout
<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"
android:orientation="vertical"
tools:context="com.example.hceng.myapplication.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/email_tv"
android:text="E-mail:" />
<EditText
android:id="#+id/editText"
android:layout_width="266dp"
android:layout_height="36dp"
android:ems="10"
android:layout_toRightOf="#+id/email_tv"
android:inputType="textEmailAddress" />
</RelativeLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me!"
android:gravity="center" />
</LinearLayout>

Constraint layout has some limitations but I am not sure if colour is one of them.
First
You could try changing the constraint layout to maybe coordinator layout or relative layout.
If that fails
Maybe, the target SDK version in your Android Manifest is too high, if the target version is higher than phone version, it reverts to defaults. So you could try doing placing a lower target version.

Android Virtual Device does not display correctly

enter image description here
please see the pic. How can I fix this error? I tried installing a couple other devices, checked some function for hardware vs software graphics. TIA
<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"
tools:context="haroonahmad.berkeleysucksapp.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Berkeley Admisions"
android:textSize="24sp"
tools:layout_editor_absoluteY="88dp"
tools:layout_editor_absoluteX="88dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="335dp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="268dp"
tools:layout_editor_absoluteY="335dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Points: 0"
tools:layout_editor_absoluteX="163dp"
tools:layout_editor_absoluteY="415dp" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="495dp"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
</RelativeLayout>
edit: sorry i'm a completely new to adding code, didn't realize I could only add to the first post.
I tried changing the ConstraintLayout in both places to RelativeLayout, didn't work. then tried right clicking on the resource file and changed the layout and layoutvertical to RelativeLayout, and still didn't work. thanks for any further suggestions

You're probably using a root layout that does not match the alignments you're setting in other views. Try using RelativeLayout as root layout.
Maybe if you post your XML layout, it is easier for us to identify the problem.

OK I fixed it by changing the whole text before xmlns to RelativeLayout. thanks for the tip!