Develop Reference

Android Custom Circular ProgressBar drawable gets cut

I'm trying to make a Circular Timer by using a ProgressBar with a TextView in the middle of it. Everything looks good on phones with bigger screens, but on smaller screens the circle in the ProgressBar gets cut like this:
Image: [1]: https://i.stack.imgur.com/dteS6.png
I feel like I've tried everything but can't seem to get it to work.
So I would really appreciate if someone got a fix for this.
drawable/timer_circle_green:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="15dp"
android:useLevel="true">
<solid android:color="#53C085" />
</shape>
drawable/timer_circle_gray:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="15dp"
android:useLevel="false">
<solid android:color="#eff0f6" />
</shape>
main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintVertical_weight="1"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.2"
android:text="Timer"
android:textSize="45dp"
android:gravity="center"
android:textColor="#color/black"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/progressBarContainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="10dp"
/>
<RelativeLayout
android:id="#+id/progressBarContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.4"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/plusminuscontainer">
<ProgressBar
android:id="#+id/progressBarCircle"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/timer_circle_gray"
android:indeterminate="false"
android:max="360"
android:progress="360"
android:progressDrawable="#drawable/timer_circle_green"
android:rotation="-90"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"/>
<TextView
android:id="#+id/timertext"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignStart="#id/progressBarCircle"
android:layout_alignTop="#id/progressBarCircle"
android:layout_alignEnd="#id/progressBarCircle"
android:layout_alignBottom="#id/progressBarCircle"
android:layout_centerInParent="true"
android:alpha="0.8"
android:fontFamily="sans-serif-thin"
android:gravity="center"
android:text="15:00"
android:textColor="#color/black"
android:textSize="60sp"
android:textStyle="bold" />
</RelativeLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/plusminuscontainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.4"
android:orientation="horizontal"
android:minHeight="90dp"
android:maxHeight="150dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:foregroundGravity="center"
app:layout_constraintTop_toBottomOf="#id/progressBarContainer"
app:layout_constraintBottom_toTopOf="#id/starttimerbutton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<Button
android:id="#+id/decreasebtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="–"
android:textSize="60sp"
android:background="#drawable/grey_round_plus_minus_button"
android:textColor="#color/white"
android:fontFamily="sans-serif"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#id/increasebtn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="?android:attr/borderlessButtonStyle" />
<Button
android:id="#+id/increasebtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="+"
android:textSize="60sp"
android:background="#drawable/red_round_plus_minus_button"
android:textColor="#color/white"
android:fontFamily="sans-serif"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toEndOf="#id/decreasebtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="?android:attr/borderlessButtonStyle"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/starttimerbutton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="25dp"
android:layout_marginEnd="25dp"
android:layout_marginBottom="25dp"
app:layout_constraintVertical_weight="0.4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/plusminuscontainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:textSize="18sp"
android:text="Start Timer"
android:textColor="#color/white"
android:background="#drawable/start_timer_button"
android:fontFamily="sans-serif"
android:layout_gravity="bottom"
android:textAllCaps="false" />
</androidx.constraintlayout.widget.ConstraintLayout>

StylePlayerView controller xml overriding play and pause button not working

I updated my project exoplayer dependency, and i was updating my code with StylePlayerView (customized layout from exoplayer) reference, but when i executed my code the overrating about this 2 buttons PLAY and PAUSE, are not working, y use PLAY_PAUSE and works, but i want to customize this icons.. so if someone can help me, i really apreace it.
psdt.- And sorry about mi english because i speak spanish.
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.exoplayer2.ui.AspectRatioFrameLayout 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/customized_controller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#color/transparentBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="#+id/exo_rew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/replay"
android:layout_gravity="center"
style="#style/ExoMediaButton.Rewind"
android:src="#drawable/ic_replay_10" />
<ImageButton
android:id="#+id/exo_play_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:visibility="gone"
android:layout_gravity="center"
style="#style/ExoMediaButton.Play"
android:src="#drawable/ic_play"/>
<ImageButton
android:id="#+id/exo_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:layout_gravity="center"
android:visibility="visible"
style="#style/ExoMediaButton.Play"
android:src="#drawable/ic_play"/>
<ImageButton
android:id="#+id/exo_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/pause"
android:layout_gravity="center"
android:visibility="visible"
style="#style/ExoMediaButton.Pause"
android:src="#drawable/ic_pause" />
<ImageButton
android:id="#+id/exo_ffwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/fast_forward"
android:layout_gravity="center"
style="#style/ExoMediaButton.FastForward"
android:src="#drawable/ic_forward_30" />
</LinearLayout>
<TextView
android:id="#+id/exo_duration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
android:textColor="#color/whitePrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<com.google.android.exoplayer2.ui.DefaultTimeBar
android:id="#+id/exo_progress"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:buffered_color="#color/grey_accent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/exo_duration"
app:layout_constraintStart_toEndOf="#+id/exo_position"
app:played_color="#color/blueLight"
app:unplayed_color="#color/whiteSecondary"
tools:ignore="SpeakableTextPresentCheck" />
<ImageView
android:id="#+id/bt_fullscreen"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:contentDescription="#string/full_screen"
android:src="#drawable/ic_fullscreen_24"
app:layout_constraintBottom_toTopOf="#+id/exo_progress"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/exo_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:textColor="#color/whitePrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/bt_close_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:contentDescription="#string/close"
android:paddingHorizontal="8dp"
android:src="#drawable/ic_chevron_left"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txvChapterTitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingHorizontal="8dp"
android:text="#string/title"
android:textColor="#color/whitePrimary"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/bt_close_player"
app:layout_constraintEnd_toStartOf="#+id/lnSettings"
app:layout_constraintStart_toEndOf="#+id/bt_close_player"
app:layout_constraintTop_toTopOf="#+id/bt_close_player" />
<LinearLayout
android:id="#+id/lnSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="#+id/bt_close_player"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/bt_close_player">
<ImageView
android:id="#+id/bt_settings"
android:layout_width="18dp"
android:layout_height="18dp"
android:contentDescription="#string/title_settings"
app:srcCompat="#drawable/ic_settings_24" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

I solved this issue for me by overriding the style and drawables. I created a new style on my values file like below:
<style name="ExoStyledControls.Button.Center.PlayPause">
<item name="android:src">#drawable/exo_styled_controls_pause</item>
<item name="android:contentDescription">#string/exo_controls_play_description</item>
<item name="android:padding">#dimen/exo_icon_padding</item>
</style>
<drawable name="exo_styled_controls_pause">#drawable/exo_styled_control_pause</drawable>
<drawable name="exo_styled_controls_play">#drawable/exo_styled_control_play</drawable>
The drawables exo_styled_control_play and exo_styled_control_pause should contain your own drawable code.
Do not forget to invalidate cache and restart if it doesn't work right away.

You can modify the values.xml file in the library.
Go to Project -> Gradle: com.~~.Exoplayer-ui:2.18.0#aar -> res -> values.xml
See values.xml in project view
Search for exo_styled_controls_play or exo_styled_controls_pause
and edit here ----> #drawable/"your image"
This is where you can find the line of code

How to put circle above rectangle in XML

I want to make this layout (circle above rectangle)
this is where i stuck

I solved this
<?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"
android:background="#color/white"
tools:context=".activity.fragments.profile_page">
<View
android:id="#+id/view_header"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/purple_500"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:letterSpacing="1"
android:paddingVertical="10dp"
android:text="#string/app_name"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/profile_circular_image_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/purple_200"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

I used constraint Layout for making this layout.
see this layout image
First, create a drawable resource file into your drawable.
go to, Drawable -> Right Click -> New -> Drawble Resource File -> Give Any name
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:color="#color/white" android:width="2dp"/>
<solid android:color="#color/black" />
</shape>
Second, Create your Layout in your Activity/Fragment
<?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"
android:background="#color/black"
tools:context=".FragmentA">making
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/teal_200"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jonathan Wick"
android:textColor="#color/white"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintEnd_toEndOf="#id/imageView"
app:layout_constraintStart_toStartOf="#id/imageView"
app:layout_constraintTop_toTopOf="#id/imageView" />
<ImageView
android:id="#+id/circle"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_marginTop="10dp"
android:background="#drawable/circle"
app:layout_constraintBottom_toTopOf="#id/tvDashBoard"
app:layout_constraintEnd_toEndOf="#id/imageView"
app:layout_constraintStart_toStartOf="#id/imageView"
app:layout_constraintTop_toBottomOf="#id/tvName" />
<TextView
android:id="#+id/tvDashBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="30dp"
android:drawableStart="#drawable/ic_dashboard"
android:drawablePadding="10dp"
android:text="Dashboard"
android:textColor="#color/white"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/circle" />
</androidx.constraintlayout.widget.ConstraintLayout>

Why do the buttons goes up?

So I programmed a simple app with android studio and the layout that is shown in the app when I run it is different than the xml file I designed.
Here is a link of an image of the problem.
https://imgur.com/6JIHSQ7
<?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/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/subBtn"
android:textSize="30sp"
app:layout_constraintBaseline_toBaselineOf="#+id/addBtn"
app:layout_constraintStart_toStartOf="#+id/divBtn" />
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="36dp"
android:layout_marginLeft="36dp"
android:layout_marginBottom="42dp"
android:text="#string/addBtn"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#+id/multBtn"
app:layout_constraintStart_toEndOf="#+id/subBtn" />
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:ems="10"
android:hint="#string/number1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.444"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="39dp"
android:ems="10"
android:hint="#string/number2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText" />
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="108dp"
android:layout_marginRight="108dp"
android:layout_marginBottom="336dp"
android:text="#string/multBtn"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="88dp"
android:layout_marginLeft="88dp"
android:layout_marginBottom="336dp"
android:text="#string/divBtn"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimaryDark"
android:text="#string/resultView"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.455"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/n2EditText"
app:layout_constraintVertical_bias="0.637" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think it might be related to the virtual device i'm using but I don't know if that's the problem.

The problem is, your addBtn and subBtn are not aware of the n2EditText. The addBtn depends on the divBtn and the divBtn is placed 336dp above the bottom edge of the screen.
If you need the addBtn to appear below the n2EditText then you need to add a vertical constraint connecting to the n2EditText. Once your buttons are connected to their immediate top elements, you don't need to add the bottom constraint to the bottom edge of the screen.
Imagine a ConstraintLayout as a collection of widgets hanging down from the top of the screen, each tied to the immediately top elements with the chains called "constraints". You don't need to tie the bottom widget to the ground unless it is required by design.
Here is the modified layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:textSize="30sp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/n2EditText"
app:layout_constraintStart_toStartOf="#+id/n2EditText"/>
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toTopOf="#+id/subBtn"
android:layout_marginStart="16dp"/>
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:ems="10"
android:hint="n1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="n2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText"/>
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/divBtn"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/divBtn"/>
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="#+id/subBtn"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/subBtn"/>
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimaryDark"
android:text="res"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="#+id/divBtn"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Anyway, when you have a lot of widgets, you may have to use a ScrollView to accommodate them all.

Try this
<?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/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="25dp"
android:layout_marginRight="25dp"
android:text="submit"
android:textSize="30sp"
app:layout_constraintEnd_toStartOf="#+id/addBtn"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/n2EditText" />
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="52dp"
android:text="add"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/n2EditText" />
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:ems="10"
android:hint="1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.439"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="36dp"
android:ems="10"
android:hint="2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText" />
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:text="mult"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/addBtn" />
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:layout_marginEnd="48dp"
android:layout_marginRight="48dp"
android:text="div"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/subBtn" />
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorPrimaryDark"
android:text="resultView"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.547"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divBtn" />
</androidx.constraintlayout.widget.ConstraintLayout>

Probably on your layout editor and phone screen sizes are different. Use ConstraintLayout or some other add constraints to views

I cannot say definitly just looking at image but i think you are using facing problem because of your layout. Use LinearLayout to fix it.
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" />
<!-- EditText: number1 -->
<!-- EditText Number2 -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- 2 Buttons here -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- 2 Buttons here -->
</LinearLayout>
</LinearLayout>

Some general tips that can help:
Check the constraints if you're using ConstraintLayout or relatives between view if you're using RelativeLayout;
Check the values and the units of views;
Check the screen resolution of your "Preview" pane and Emulator.
If it's possible to provide some additional information about the layout that is used, if these tips didn't help.
In preview pane you can find info about resolutions here:
In the emulator pane you can simple see the sizes in the column:

how do i adjust the spaces and the overall look of the file so it looks more like the picture?

i am trying to make my login page more like the picture : https://ibb.co/DKmTnHH it currently looks like this : https://ibb.co/0MV0rgj
i can't seem to figure out how much margin do i put between the views just from the picture ? how do you figure it out , how do i make my edittext rounded from the side and all the small details ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/logo"
android:scaleType="fitXY"/><!--set scale type fit xy-->
<EditText
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_above="#id/password"
android:hint="اسم المستخدم" />
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_above="#id/signin"
android:ems="10"
android:hint="كلمة السر" />
<ImageButton
android:id="#+id/signin"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:layout_above="#id/forgetpassword"
android:src="#drawable/Login-button" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/forgetpassword"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_above="#id/noaccount"
android:src="#drawable/Forget-pass"/>
<ImageButton
android:id="#+id/noaccount"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_above="#id/footer"
android:layout_centerInParent="true"
android:src="#drawable/Dont-have-acc" />
<ImageView
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="60dp"
android:src="#drawable/footer-image"
android:layout_alignParentBottom="true"
android:scaleType="fitXY"/><!--set scale type fit xy-->
</RelativeLayout>

You can use ConstraintLayout with Chains and Guidelines to get a responsive screen without the having to use fixed size margins (makes your screen to a non-responsive one).
Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<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">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/guideline32"
app:layout_constraintStart_toStartOf="#+id/guideline33"
app:layout_constraintTop_toTopOf="#+id/guideline31" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView11"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<TextView
android:id="#+id/textView11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView12"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/textView11" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline31"
app:layout_constraintEnd_toStartOf="#+id/guideline32"
app:layout_constraintStart_toStartOf="#+id/guideline33"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars[10]" />
<android.support.constraint.Guideline
android:id="#+id/guideline31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="200dp"
app:layout_constraintGuide_percent="0.3" />
<android.support.constraint.Guideline
android:id="#+id/guideline32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="352dp"
app:layout_constraintGuide_percent="0.9" />
<android.support.constraint.Guideline
android:id="#+id/guideline33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent="0.1" />
</android.support.constraint.ConstraintLayout>
It will look like this:
For your round button look, you can use custom shape, create a new drawable file:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="-90"
android:centerColor="#F2F2F2"
android:endColor="#ADA996"
android:startColor="#DBDBDB" />
<stroke
android:width="2dp"
android:color="#000000" />
<corners android:radius="8dp" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
And now just apply this to your view:
android:background="#drawable/frame"
And there you have it, custom looking View: