We Keep Coding

How to make TextView appear when app is run?

My text views aren't appearing when running the app. I've tried adjusting the visibility and elevation. I've looked online and none of the answers worked.
How do I fix this? (Java)
This is the render in android studio
This is the emulator, my physical phone shows the same thing
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/cardview_light_background"
android:elevation="-1dp"
android:theme="#style/ThemeOverlay.GrubhubWheel.FullscreenContainer">
<!-- The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc. -->
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ImageButton
android:id="#+id/gear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#android:color/transparent"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_settings_5672"
tools:ignore="SpeakableTextPresentCheck" />
<TextView
android:id="#+id/Blind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/yaro_st"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Display3"
android:textColor="#010101"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Blind" />
<TextView
android:id="#+id/Ate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:fontFamily="#font/galano_grotesque_alt_semi_bold"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Display4"
android:textColor="#4ca66c"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/Blind"
tools:text="Ate" />
<ImageButton
android:id="#+id/wheel"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginVertical="10dp"
android:backgroundTint="#android:color/transparent"
android:elevation="-1dp"
android:forceHasOverlappingRendering="true"
android:rotation="15"
android:scaleType="fitCenter"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Ate"
app:layout_constraintVertical_bias="0.85"
app:srcCompat="#drawable/random_wheel"
tools:ignore="SpeakableTextPresentCheck,ImageContrastCheck" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

How to Show/Hide Action Bar on Swipe using Coordinator Layout?

I show/hide the bottom navigation bar on swiping with CoordinatorLayout but am unable to show/hide the action bar using CoordinatorLayout. What mistake I did in my layout?
On swiping, the bottom navigation bar in my layout is auto-hide and show but not on the top action bar?
This is My XML Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:orientation="vertical"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/noInternet_layout"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/no_wifi_image"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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"
app:srcCompat="#drawable/ic_wifi_off_24" />
<TextView
android:id="#+id/no_wifi_text"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/noWifi"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="#+id/no_wifi_image"
app:layout_constraintStart_toStartOf="#+id/no_wifi_image"
app:layout_constraintTop_toBottomOf="#+id/no_wifi_image" />
<Button
android:id="#+id/no_wifi_button"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="TRY AGAIN"
app:layout_constraintEnd_toEndOf="#+id/no_wifi_text"
app:layout_constraintStart_toStartOf="#+id/no_wifi_text"
app:layout_constraintTop_toBottomOf="#+id/no_wifi_text" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLyt"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/main_toolbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_scrollFlags="scroll|enterAlways" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/navHostFrag"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="#+id/constraintLyt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintVertical_bias="1.0"
app:navGraph="#navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:itemTextColor="#drawable/bottom_text_selector"
app:itemIconTint="#drawable/bottom_navigation_selector"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:itemTextAppearanceActive="#color/white"
app:labelVisibilityMode="labeled"
app:itemRippleColor="#color/menucolor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_gravity="bottom"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Please Help me to solve this issue?

Finally I found.
This is very simple to get swipeable (Show-Hide) both side of bottom Navigation and Top ActionBar without any backend code.
Follow Below code
<!--This is your parent layout-->
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
app:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:layout_height="?attr/actionBarSize">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<!--Move your main layout of the screen to a different layout and call it with include. Without including that, you cannot hide one of them Top or Bottom. So move that layout and include it here. (example- #layout/content_main)-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_main"/>
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_view"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_bottomBar_size"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
style="#style/Widget.Custom.BottomNavigationView"
app:itemRippleColor="?android:attr/windowBackground"
app:itemTextAppearanceActive="#color/white"
app:labelVisibilityMode="labeled"
app:menu="#menu/bottom_navigation" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
By using ablow proper method, you'll easily swipe up-down both BottomNavigation and Top ActionBar
Output is like below
Hope It'll help someone.

Having issues with trying to display items on my toolbar

I've been working on a weather app for a while now and I happened to have worked on other sections of the app before realizing I needed to use a left navigation drawer bar. On trying to create the new nav bar following samples from tutorials, I realized it needed to be displayed on a toolbar to function well and I earlier didn't use a toolbar(i initially placed all my items directly on the activity's layout). Now
that I have created a new toolbar, it displays on my items and obstructs them from displaying on the app.
i.e. I want it to be displayed like this https://i.stack.imgur.com/NTKaY.png only that the toolbar
should be displayed behind, not on them.
But here's how it displays currently https://i.stack.imgur.com/rBkf1.png obstructing the items from displaying.
The items it obstructs are my edittexts, textview, and imageview(as shown on the first image).
I've tried to correct it by placing the item views directly below the toolbar's code in the layout, but it still displays the same way. Please can anyone help/suggestions on how I can correct this issue?
Here's my activity's layout code:
<androidx.drawerlayout.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
tools:context=".Activity.HomeActivity"
tools:openDrawer="start">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout"
android:background="#drawable/dubai">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:popuptheme="#style/ThemeOverlay.AppCompat.Light" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_menu" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="409dp"
android:layout_height="599dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:navGraph="#navigation/my_nav" />
<EditText
android:id="#+id/textfield"
android:layout_width="250dp"
android:layout_height="35dp"
android:autofillHints="#string/change_city"
android:background="#color/colorPrimary"
android:hint="#string/search_city"
android:inputType="text"
android:labelFor="#id/imageView4"
android:padding="8dp"
android:textColor="#color/colorAccent"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="50dp"
android:layout_height="35dp"
android:layout_marginEnd="1dp"
android:contentDescription="#string/searchbtn"
android:src="#drawable/look"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/time_field"
android:visibility="gone"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textfield" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/nav_view"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>

So, there are a couple of things that need to be adjusted:
In your desired layout the ToolBar looks transparent
The Toolbar obstructs the EditText & ImageView.
For the first point, I'd suggest to change the background of the ToolBar to transparent color. And to remove the the elevation that could block out those items; so the toolBar would be:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:popuptheme="#style/ThemeOverlay.AppCompat.Light" />

How to expand the ScrollView vertically if the height is smaller than the screen in Android? (xml / programmatically)

I'm new to Android and I need to use a ScrollView to wrap my whole content, since in some cases it needs to take up more height than is available on the screen. Most of the cases though, the height of the content is smaller than the screen. The ScrollView will almost always have a background color (not white), which needs to fill the whole screen available, not just wrap the content. I've checked a few other topics related to this, but the answers were outdated and none of them seems to solve the issue or even focuses on the question asked.
Extra details: Inside the ScrollView there is a RelativeLayout which encapsulates the content, as there can be only one element inside a ScrollView.
Please limit the answers to Java for Android Studio or XML configuration, if they don't use a programmatic approach, neither Kotlin, nor any other language used for Android programming. Thank you in advance!
<?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"
android:id="#+id/detailed_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<RelativeLayout
android:id="#+id/detailed_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/product_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/product_image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/details_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/details_container_background"
android:clipChildren="false"
android:clipToPadding="false"
android:elevation="10dp"
android:translationY="-50dp"
android:visibility="invisible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/product_image">
<TextView
android:id="#+id/product_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/product_name" />
</androidx.constraintlayout.widget.ConstraintLayout>
<GridLayout
android:id="#+id/params_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/details_container"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<View
android:id="#+id/param_calories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/param_with_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:indeterminate="true"
app:indicatorColor="#android:color/background_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>
</ScrollView>

Your problem is really about how you set the widths and heights.
MATCH_PARENT - As big as parent's container.
WRAP_CONTENT - As big as child's container or default width/height.
<!-- As big as specified container or device screen if it has no container -->
<ScrollView
...
android:layout_width="match_parent"
android:layout_height="match_parent"
...
>
<!-- As big as the ScrollView -->
<RelativeLayout
android:id="#+id/detailed_view_container"
android:layout_width="match_parent"
android:layout_height="match_parent">

Simply put your ScrollView inside a ConstraintLayout, and set ScrollView's android:layout_height="0dp" like following:
<?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">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/detailed_scroll_view"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:fillViewport="true">
...
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Empty UI when using ConstraintLayout in Fragments Android

I am using ConstraintLayout in a Fragment, but when I run the app the UI is empty, below are the Fragment and an Activity where the fragments are shown.
Fragment 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/firstFragButton"
tools:text="Go"
android:layout_marginBottom="384dp"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/first_fragment"
android:id="#+id/textView" android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent" android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/firstFragButton" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main
Contains NavHostFragment
<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"
android:background="#null"
tools:context=".MainActivity">
<fragment
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="395dp"
android:layout_height="340dp" app:navGraph="#navigation/nav_graph" app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/fragment"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Different phones got different screen size, in your layout, you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
You may want o do something like 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=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<Button
android:id="#+id/firstFragButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
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"
tools:text="Go" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first_fragment"
app:layout_constraintBottom_toTopOf="#+id/firstFragButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
To achieve a responsive look on all devices:
Same goes for your NavHostFragment, either use:
android:layout_width="0dp" and
android:layout_height="0dp" to make your view spread all over your screen or use something like to make your view to be responsive:
app:layout_constraintWidth_percent="0.8"
app:layout_constraintHeight_percent="0.5"
This will tell your view to be 80% of the screen size in width and 50% in height:
You can check my examples because with the white background on the images it may not be so very clear.
Generally, If you are using ConstraintLayout I recommend do use it with guidelines and Chains to support different screen sizes.