Develop Reference

How come my widgets aren't positioned properly when I run my app?

I'm really new to Android Studio, so apologies in advance if this is a silly question. I'm trying to make a simple app that the text changes when you press the button, but whenever I run the app in the emulator the positions are different than the ones that are shown in android's widget design.
xml file:
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change Text"
android:textSize="20sp"
tools:layout_editor_absoluteX="112dp"
tools:layout_editor_absoluteY="399dp" />
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:textColor="#000000"
android:textSize="50sp"
tools:layout_editor_absoluteX="158dp"
tools:layout_editor_absoluteY="320dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
If somebody could help, that would be greatly appreciated, thanks in advance!

You should not use tool property in your widgets instead you should use constraints
Replace your code with this code:
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change Text"
android:textSize="20sp"
android:layout_marginTop="22dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txt" />
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:textColor="#000000"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Android - Scale Image to status bar of the phone

Simply, I have a linear layout that separates the screen to 2 pieces from middle and in the first piece I have a constraint layout that contains mountain.png .Because of i set NoActionBar and white for statusBarColor in Themes.xml, as a result above the image there is area that seems white.So I want to remove the white area and scale the image through status bar of the phone.
I tried to remove status bar, it didn't work.
I tried to add android:fitsSystemWindows="true" attribute to .XML file and it didn't work too.
My .xml file
<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=".ui.sign_in.telephone.PhoneNumberFragment"
>
<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"
android:weightSum="5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#drawable/mountain">
<TextView
android:id="#+id/baslaText"
android:layout_width="match_parent"
android:gravity="center"
android:layout_marginTop="100dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_height="wrap_content"
android:textSize="38sp"
android:textColor="#color/white"
android:text="Başlayın" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginRight="50dp"
android:layout_marginLeft="50dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/baslaText"
android:layout_marginTop="20dp"
android:textColor="#color/white"
android:textSize="16sp"
android:text="Taşımaya başlamak için kaydolun, ilk \n olarak telefon numaranızı girin"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.cardview.widget.CardView
android:elevation="4dp"
app:cardCornerRadius="14dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/telephoneNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:text="Telefon numaranızı giriniz"
android:textColor="#color/black"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="match_parent"
android:gravity="center"
android:id="#+id/telephoneText"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:textSize="18sp"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/telephoneNumber"
android:text="Taşımaya başlamak için kaydolun, ilk \n olarak telefon numaranızı girin"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/telephoneTag"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="40dp"
android:text="Telefon Numarası"
android:textColor="#color/black"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/telephoneText" />
<com.google.android.material.textfield.TextInputLayout
android:elevation="2dp"
app:cardCornerRadius="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/telephoneNumberInput"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/telephoneTag"
android:layout_marginTop="20dp"
app:errorEnabled="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/telephoneNumberEditText"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:inputType="number"
android:hint="+.. ... ... .. .."
android:maxLength="12"
android:textColor="#color/black"
android:textSize="14sp"
/>
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="60dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginLeft="30dp"
android:layout_marginBottom="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="10dp"
android:background="#color/purple_500"
android:backgroundTint="#color/purple_500"
android:text="Başlayın"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/telephoneNumberInput" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
My themes.xml file.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.UI" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/teal_200</item>
<item name="colorPrimaryVariant">#color/white</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>

write this on your activity onCreate:
requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
getWindow().setStatusBarColor(Color.TRANSPARENT);
This code piece did the job I desired.

CardView is cut at the sides

I'm trying to make a circle for the profile image by using CardView and for some reason, the left and right sides seem to be cut.
My xml is:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:paddingStart="8dp"
android:layout_gravity="center"
android:layoutDirection="ltr">
<androidx.cardview.widget.CardView
android:id="#+id/cardview"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="center"
android:layout_marginTop="24dp"
app:cardCornerRadius="65dp">
<ImageView
android:id="#+id/iv_ProfilePic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
</androidx.cardview.widget.CardView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fib_Camera"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/tv_Username"
android:layout_alignEnd="#+id/cardview"
android:backgroundTint="#color/colorLightPurple"
android:src="#drawable/ic_camera"
app:borderWidth="0dp"
app:fabCustomSize="44dp"
app:maxImageSize="30dp" />
<TextView
android:id="#+id/tv_Username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/cardview"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:fontFamily="#font/assistant_semibold"
android:textColor="#color/colorGrayText"
android:textSize="18sp" />
<RelativeLayout
android:id="#+id/rl_previewRank"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_Username"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/iv_previewStar"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_centerVertical="true"
android:layout_marginTop="8dp"
android:src="#drawable/ic_preview_star" />
<TextView
android:id="#+id/tv_myRank"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_toEndOf="#+id/iv_previewStar"
android:fontFamily="#font/assistant"
android:text="0"
android:textColor="#color/colorEmptyStar"
android:textSize="12sp" />
</RelativeLayout>
</RelativeLayout>
I tried to play with margin/padding but nothing did the job.
Thank you

Add android:clipToPadding in the parent layout:
<RelativeLayout
android:clipToPadding="false"
Also consider to use ShapeableImageView instead of CardView + ImageView
<com.google.android.material.imageview.ShapeableImageView
...
android:scaleType="xxx"
app:shapeAppearanceOverlay="#style/circleImageView"
app:srcCompat="#drawable/ic_profile" />
with:
<style name="circleImageView" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>

Make a similar layout like the one below

I'm working on a layout and I want to make the similar layout like the one in the picture below. I don't know what should I use to make this layout ? I've worked with Listview and Recycler View but I don't know if I can use them to make a layout like this?
Does anyone have a tutorial on how can I make a similar layout?

Use below layout as item of your RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="15dp"
app:cardMaxElevation="3dp"
android:elevation="3dp"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_weight=".95"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp">
<TextView
android:id="#+id/tv_received_message_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Received Message:"/>
<TextView
android:id="#+id/tv_received_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Received Message"
android:layout_marginStart="5dp"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorPrimary"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp">
<TextView
android:id="#+id/tv_reply_message_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reply Message:"/>
<TextView
android:id="#+id/tv_reply_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Reply Message"
android:layout_marginStart="5dp"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_weight=".05"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#color/colorPrimary"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
Add your color in background attribute of View
The Output of above code is:
I hope it works for you.

The best way is to use Recycler View and add divider between all items: look at this How to add dividers and spaces between items in RecyclerView?
And use this item layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:orientation="vertical"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="8dp"
app:cardElevation="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/message_content_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/message_end_green_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:padding="8dp">
<TextView
android:id="#+id/tv_received_message_key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Received message:"
android:textColor="#color/green"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="4dp"/>
<TextView
android:id="#+id/tv_received_message_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tv_received_message_key"
app:layout_constraintTop_toTopOf="parent"
tools:text="Message" />
<View
android:id="#+id/tv_message_divider"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/grey_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_received_message_key"
android:layout_marginTop="8dp"/>
<TextView
android:id="#+id/tv_reply_message_key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Repley message:"
android:layout_marginTop="8dp"
android:textColor="#4caf50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_message_divider"
android:layout_marginStart="4dp"/>
<TextView
android:id="#+id/tv_reply_message_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tv_reply_message_key"
app:layout_constraintTop_toTopOf="#id/tv_reply_message_key"
app:layout_constraintBottom_toBottomOf="#id/tv_reply_message_key"
tools:text="Message" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/message_end_green_view"
android:layout_width="8dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/shape_rectangle_green"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
in which shape_rectangle_green is this drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#4caf50" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="0dp"
android:topRightRadius="8dp" />
</shape>
I let you change the margins, padding and colors.

Constraint Layout TextView Overlap

I'm having some issues inside a constraint layout where i have a TextView which supports multiple lines. When the TextView is expanded it overlaps with other components inside the constraint layout. Below is the XML layout that i'm using and a GIF to demonstrate.
Any help would be much appreciated.
Demonstration -> https://puu.sh/xPFSF/3f6711a68f.gif
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="#color/activity_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<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:focusableInTouchMode="true"
android:layout_height="0dp">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/leftGuideline"
app:layout_constraintGuide_begin="20dp"
android:orientation="vertical"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rightGuideline"
app:layout_constraintGuide_end="20dp"
android:orientation="vertical"/>
<TextView
android:id="#+id/subject"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/subject"
android:layout_marginTop="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintEnd_toEndOf="#id/rightGuideline" />
<EditText
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/your_message"
android:layout_marginTop="20dp"
android:minLines="2"
app:layout_constraintTop_toBottomOf="#id/subject"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintEnd_toEndOf="#id/rightGuideline" />
<Button
android:id="#+id/sendMessageButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/send_message"
style="#style/button_main"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#id/message"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintBottom_toTopOf="#+id/saveDraftButton"
app:layout_constraintEnd_toEndOf="#id/rightGuideline" />
<TextView
android:id="#+id/saveDraftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/save_draft"
android:layout_marginBottom="10dp"
android:drawableStart="#drawable/icon_arrow"
android:gravity="center_vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintEnd_toEndOf="#id/rightGuideline" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Edit: Removed RecyclerView as it wasn't necessary.
As requested, button_main style:
<style name="button_main" parent="#style/button">
<item name="android:textColor">#color/button_main_stateful_text</item>
<item name="android:background">#drawable/primary_action_button</item>
<item name="android:textSize">#dimen/h5_size</item>
<item name="android:textAllCaps">false</item>
</style>
button_main_stateful_text & primary_action_button are just two selectors that switch between colours.

scottazord adding
app:layout_constraintBottom_toTopOf="#+id/sendMessageButton"
to EditText should solve your problem.
the EditText full code is
<EditText
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="your message"
android:layout_marginTop="20dp"
android:minLines="2"
app:layout_constraintTop_toBottomOf="#id/subject"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintEnd_toEndOf="#id/rightGuideline"
app:layout_constraintBottom_toTopOf="#+id/sendMessageButton"/>
now this should solve your issue