Develop Reference

how to make a view inside fragment extend above tool bar and bottom navigation view action bar?

I have created a music player inside fragment. The music player is its own view and it lies inside the fragment which displays all the songs. It expands to the height of the fragment when I click a miniplayer in the same fragment. I want to be able to have it expand to the whole screen. How do i do this ??
music player view :
<?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:id="#+id/music_player_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/brand_primary"
android:elevation="100dp"
android:focusable="true"
android:clickable="true"
android:visibility="gone" >
<com.jgabrielfreitas.core.BlurImageView
android:id="#+id/music_player_blur_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/music_player_head_wrapper"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintVertical_bias="0"
android:layout_marginEnd="4dp" >
<TextView
android:id="#+id/music_player_close_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:drawableStartCompat="#drawable/ic_back"
android:paddingHorizontal="8dp" />
<TextView
android:id="#+id/music_player_audio_name"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintStart_toEndOf="#+id/music_player_close_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
android:text="This is the best song in the world"
android:gravity="center_vertical"
android:ellipsize="marquee"
android:singleLine="true"
android:marqueeRepeatLimit="marquee_forever"
android:textAppearance="#style/TextAppearance.MaterialComponents.Headline6" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/music_player_artwork_wrapper"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/music_player_head_wrapper"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintVertical_bias="0" >
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/music_player_artwork"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_baseline_music_note_24"
app:civ_border_overlay="true"
app:civ_border_color="?attr/colorPrimary"
app:civ_border_width="2dp"
android:padding="4sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/music_player_seek_bar_wrapper"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/music_player_artwork_wrapper"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="0.08"
app:layout_constraintVertical_bias="0"
android:paddingHorizontal="8dp" >
<SeekBar
android:id="#+id/music_player_seek_bar"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:progressTint="#color/white"
android:thumb="#drawable/seek_thumb"
style="#style/customSeekBar" />
<TextView
android:id="#+id/music_player_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/music_player_seek_bar"
android:textColor="#color/white"
android:text="0:0"
android:layout_marginStart="4dp" />
<TextView
android:id="#+id/music_player_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/music_player_seek_bar"
android:textColor="#color/white"
android:text="0:0"
android:layout_marginStart="4dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/music_player_control_wrapper"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/music_player_seek_bar_wrapper"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintVertical_bias="0"
android:layout_marginHorizontal="8dp" >
<TextView
android:id="#+id/music_player_repeat_btn"
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="8dp"
android:padding="4dp"
app:drawableStartCompat="#drawable/ic_repeat" />
<TextView
android:id="#+id/music_player_prev_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:drawableStartCompat="#drawable/ic_previous"
app:layout_constraintEnd_toStartOf="#+id/music_player_play_pause_btn"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="8dp"
android:padding="8dp" />
<TextView
android:id="#+id/music_player_play_pause_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:padding="8dp"
app:drawableStartCompat="#drawable/ic_play_circle" />
<TextView
android:id="#+id/music_player_next_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:drawableStartCompat="#drawable/ic_next"
app:layout_constraintStart_toEndOf="#+id/music_player_play_pause_btn"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="8dp"
android:padding="8dp" />
<TextView
android:id="#+id/music_player_playlist_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:drawableStartCompat="#drawable/ic_playlist"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="8dp"
android:padding="4dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/music_player_visualizer_wrapper"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="0.3"
app:layout_constraintVertical_bias="0" >
<com.chibde.visualizer.BarVisualizer
android:id="#+id/music_player_visualizer"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Fragment view:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingBottom="?attr/actionBarSize"
android:layout_above="#+id/nav_view"
tools:context=".ui.music.MusicFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/music_list_wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/swipe_refresh_music">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/music_rv"
/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mini_player_wrapper"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/black"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/mini_player_audio_art"
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:paddingStart="4dp"
android:paddingEnd="4dp"
tools:ignore="RtlSymmetry"
app:drawableStartCompat="#drawable/ic_baseline_music_note_24" />
<TextView
android:id="#+id/mini_player_audio_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/mini_player_audio_art"
android:text="Currently playing song"
android:textColor="#color/white"
app:layout_constraintWidth_percent="0.6"
android:ellipsize="marquee"
android:singleLine="true"
android:marqueeRepeatLimit="marquee_forever"
app:layout_constraintHorizontal_bias="0"
android:textStyle="bold" />
<TextView
android:id="#+id/mini_player_skip_prev_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/mini_player_play_pause_btn"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintWidth_percent="0.1"
app:drawableStartCompat="#drawable/ic_previous" />
<TextView
android:id="#+id/mini_player_play_pause_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/mini_player_audio_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintWidth_percent="0.1"
app:drawableStartCompat="#drawable/ic_play" />
<TextView
android:id="#+id/mini_player_skip_next_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/mini_player_play_pause_btn"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintWidth_percent="0.1"
app:drawableStartCompat="#drawable/ic_next" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- include player view layout -->
<include layout="#layout/music_player_view" />
</FrameLayout>
similar to the youtube app...

Elevation no showing properly on cardview

I have the below xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data></data>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mainHolder_CL"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/preview_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
app:srcCompat="#color/mcorner_page_background" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
style="#style/HomeScreenTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="#string/screen_title_corners"
app:addWindowInsetMarginTop="#{true}"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cornerPeace"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="30dp"
android:layout_marginTop="35dp"
android:layout_marginEnd="30dp"
android:layout_marginBottom="30dp"
android:background="#android:color/white"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:layout_constraintBottom_toTopOf="#+id/otherCorners"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/peaceImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_bottom_nav_home_new" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="header"
android:textColor="#android:color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/peaceImg" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/desc"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:text="description"
app:layout_constraintBottom_toTopOf="#+id/separator"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header" />
<View
android:id="#+id/separator"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginBottom="5dp"
android:alpha="0.1"
android:background="#android:color/black"
app:layout_constraintBottom_toTopOf="#+id/mins"
app:layout_constraintEnd_toEndOf="#+id/desc"
app:layout_constraintStart_toStartOf="#+id/desc" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/mins"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="minutes"
android:textColor="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/otherCorners"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:layout_marginBottom="20dp"
app:addBottomNavigationHeightMarginBottom="#{true}"
app:addWindowInsetMarginBottom="#{true}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.cardview.widget.CardView
android:id="#+id/corner1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:cardElevation="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintEnd_toStartOf="#+id/corner2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/challengeImg"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_bottom_nav_home_new" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/challengesTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="corner 1"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/challengeImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/corner2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:background="#android:color/white"
android:clipToPadding="false"
app:cardElevation="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintEnd_toStartOf="#+id/corner3"
app:layout_constraintStart_toEndOf="#+id/corner1"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/humourImg"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_bottom_nav_home_new" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="corner 2"
android:textSize="13sp"
app:fontFamily="#font/font_regular"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/humourImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/corner3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:clipToPadding="false"
app:cardElevation="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/corner2"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/thoughtImg"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_bottom_nav_home_new" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="corner 3"
android:textSize="13sp"
app:fontFamily="#font/font_regular"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/thoughtImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
This is the output I get
As you see I applied the elevation to corner 1,2 and 3 but it isn't showing properly.
It seems to be getting cut-off. What am I missing here?

I'd debug the "otherCorners" ConstraintLayout.
You seem to have set the margins of that layout in a way to make it equal to the big CardView above it. And since the first and last CardView inside the otherCorners Layout are placed directly against the borders of the parent it prob just cuts off the shadow of the elevation on the sides. Same story, different values, for the bottom.

tab item title become invisible after changing design of the page

After changing my design (changing relative layouts to constraint layout and fixing constraints) my tablayout is still visible but tab items which I added them in the java became invisible (they still visible but title became invisible)
How can I solve this problem?
here is my xml file (I think the problem is here because I didn't change the java code):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".Fragments.GroupeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#95210851"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:orientation="horizontal"
android:weightSum="20"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_weight="4"
android:src="#drawable/notification_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.8" />
<TextView
android:id="#+id/groupename"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="68dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:layout_weight="10"
android:fontFamily="#font/renner_500_medium"
android:text="Telnet groupe"
android:textAlignment="center"
android:textColor="#ffff"
android:textFontWeight="8"
android:textSize="23sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/getallmembres"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="40dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="2dp"
android:layout_weight="4"
android:elevation="3dp"
android:src="#drawable/login_username_icon"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/groupename"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/addtachebyresp"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginTop="8dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="8dp"
android:layout_weight="4"
android:background="#drawable/add_icon"
android:elevation="3dp"
android:textColor="#FFFF"
android:textSize="45sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.258"
app:layout_constraintStart_toEndOf="#+id/getallmembres"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/pager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#95210851"
android:elevation="6dp"
app:tabTextColor="#fff"
app:tabGravity="fill"
android:theme="#style/Theme.AppCompat.DayNight.DarkActionBar"
app:tabIndicatorColor="#D9C8F8" ></com.google.android.material.tabs.TabLayout>
</androidx.viewpager.widget.ViewPager>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/membreRelativel"
android:layout_width="353dp"
android:layout_height="445dp"
android:layout_marginHorizontal="20dp"
android:layout_marginVertical="60dp"
android:background="#drawable/rounded_corner_shape_gris"
android:elevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="25dp"
android:background="#ffff"
android:orientation="vertical"
android:weightSum="10">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/membresrecycler"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"></androidx.recyclerview.widget.RecyclerView>
<Button
android:id="#+id/goto_add_membres"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textColor="#fff"
android:background="#drawable/profile_first_layout"
android:text="Ajouter des membres" />
</LinearLayout>
<TextView
android:id="#+id/hideparticipants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="X"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.952"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/addmembreLayout"
android:layout_width="307dp"
android:layout_height="226dp"
android:layout_marginHorizontal="50dp"
android:layout_marginVertical="180dp"
android:layout_marginBottom="386dp"
android:background="#drawable/rounded_corner_shape_gris"
android:elevation="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.24000001">
<TextView
android:layout_width="308dp"
android:layout_height="26dp"
android:background="#B6B5B5"
android:fontFamily="#font/mermaid"
android:text="Ajout d'un membre"
android:textAlignment="center"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/linearLayout4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/titleaddmemebre"
/>
<TextView
android:layout_marginTop="2dp"
android:textAlignment="center"
android:id="#+id/hideaddmembre"
android:layout_width="20dp"
android:layout_height="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:elevation="2dp"
android:text="X"
android:textSize="20sp"
android:layout_marginRight="7dp"
/>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#fff"
android:weightSum="10"
android:orientation="vertical"
android:gravity="bottom"
app:layout_constraintTop_toBottomOf="#+id/titleaddmemebre"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<EditText
android:id="#+id/addmembreemail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:layout_marginTop="20dp"
android:hint="Email" />
<Button
android:layout_marginTop="50dp"
android:id="#+id/saveaddmembre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/profile_first_layout"
android:text="Ajouter"
android:layout_marginBottom="0dp"
android:textColor="#ffff" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

I would like to know if my approach of creating this UI is improper

I would like to create the UI as seen in this picture. My approach involves using multiple card views. I am uncertain as to if this is the right way to go about doing this. This method seems a bit laborious, and repetitive, secondly I am not sure if this will cause any problems in the future such as memory problem etc. For the experienced developers please enlighten me.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="fill_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Controller.RegisterActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/messageToolBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/backArrow"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="left"
android:background="#drawable/ic_arrow_back_black_24dp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:textSize="16sp"
android:text="Profile"
android:textColor="#424242" />
</androidx.appcompat.widget.Toolbar>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/userInfoConstraint"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintDimensionRatio="6:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/messageToolBar">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
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="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profileImageView"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginTop="36dp"
app:civ_border_color="#FFFFFF"
app:civ_border_width="2dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Name"
android:textColor="#424242"
android:textSize="#dimen/album_title"
app:layout_constraintEnd_toEndOf="#+id/profileImageView"
app:layout_constraintStart_toStartOf="#+id/profileImageView"
app:layout_constraintTop_toBottomOf="#+id/profileImageView" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Yale"
android:textSize="#dimen/songs_count"
app:layout_constraintEnd_toEndOf="#+id/nameTv"
app:layout_constraintStart_toStartOf="#+id/nameTv"
app:layout_constraintTop_toBottomOf="#+id/nameTv" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
app:layout_constraintDimensionRatio="4:1"
app:layout_constraintEnd_toEndOf="#+id/userInfoConstraint"
app:layout_constraintStart_toStartOf="#+id/userInfoConstraint"
app:layout_constraintTop_toBottomOf="#+id/userInfoConstraint">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
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="match_parent">
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Empl ID"
android:textColor="#424242"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.051"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView7"
android:layout_width="64dp"
android:layout_height="16dp"
android:layout_marginTop="10dp"
android:text="2335795"
app:layout_constraintEnd_toEndOf="#+id/textView6"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
app:layout_constraintDimensionRatio="6:4"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
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="match_parent">
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Contact"
android:textColor="#424242"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/emailTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="#+id/emailTv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/emailTv"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/pencil" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="333-333-1121"
app:layout_constraintEnd_toStartOf="#+id/imageView3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/emailTv"
app:layout_constraintTop_toBottomOf="#+id/emailTv" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView3"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/pencil" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

You can simple set background for your ConstraintLayout so you don't need to create CardView within ConstraintLayout
If you want shadow in you ConstraintLayout use, To show shadow in ConstraintLayout you must add background to it, simply set #FFFFFF and use this
android:elevation="4dp"
Or you can create a custom background to have round corners and custom background colors
Hope this will help

Android studio doesn't draw button correctly

In my Android studio project I have a fragment with constraint layout inside. Here is XML.
<android.support.constraint.ConstraintLayout
android:id="#+id/pinLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topLayout">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/appTintColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
As you can see the confirm button is centered with constraints in his parent.
But when I am running application in my Xperia z5 compact, a layout inspector shows that button is not centered.
Why does it happen and how to fix that?
Note if I am removing numberTextView with it's parent constarintLayout, the problem disappears.
Note In my code I am programmatically setting a text to numberTextView. In case when I am commenting that code i.e not setting text programmatically, button draws correctly.

app:layout_constraintHorizontal_bias="0.5"
layout_constraintHorizontal_bias this will make a small variation from center. try code given below,
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Remove the below line from your button layout in xml.
app:layout_constraintHorizontal_bias="0.5"
Horizontal Bias:
This allows us to position a view along the horizontal axis using a bias value, this will be relative to it’s constrained position.
For more information about Constraint Layout refer
this article

android:id="#+id/pinLayout" has hight of 250dp that's why button doesn't position at vertically center. try the code given below.
<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">
<android.support.constraint.ConstraintLayout
android:id="#+id/pinLayout"
android:layout_width="match_parent"
android:layout_height="250dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/appTintColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/cl_root"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

try to use RelativeLayout instead of ConstraintLayout by changing all ConstraintLayout to RelativeLayout in your xml
<android.support.constraint.ConstraintLayout >
...
Your content
...
</android.support.constraint.ConstraintLayout>
to
<RelativeLayout >
...
Your content
...
</RelativeLayout>
then you might give set your button to be center in parent
android:layout_centerInParent="true"
for your TextView pinView1, pinView2, pinView3 and pinView4 you have simply put it inside a LinearLayout.