We Keep Coding

Set view to be at bottom of camera preview?

I'd like to set the position of the TextView to always be at the bottom of the camera preview.
This is not the case with my layout below. When the user changes the aspect the ratio of the camera preview (ex: from 16:9 to 4:3), the TextView remains in the same position and is no longer at the bottom of the preview.
How do I set the position of the TextView to always be at the bottom (left) of the camera preview?
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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=".ui.activities.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/root"
android:background="#color/black"
tools:context=".ui.activities.MainActivity">
<FrameLayout
android:id="#+id/main_frame"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:paddingTop="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/preview_container"
android:layout_height="match_parent"
android:layout_width="match_parent">
<androidx.camera.view.PreviewView
android:id="#+id/preview"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,9:16"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/preview"
android:textColor="#ffffffff"
android:text="Text Test" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Try this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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=".ui.activities.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/root"
android:background="#color/black"
android:orientation="vertical"
tools:context=".ui.activities.MainActivity">
<FrameLayout
android:id="#+id/main_frame"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:paddingTop="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/preview_container"
android:layout_height="match_parent"
android:layout_width="match_parent">
<androidx.camera.view.PreviewView
android:id="#+id/preview"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,9:16"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:textColor="#ffffffff"
android:text="Text Test" />
</FrameLayout>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Sorry i dont have enough reputation for comment so i will try answer directly
This problem occurs because you set your textview bottom to bottom with camera preview while use ConstraintLayout. I can give you two option for solve this,
first change textview from app:layout_constraintBottom_toBottomOf to app:layout_constraintTop_toBottomOf.
Second try for wrap it with linearlayout and set orientation to vertical.

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.

Unexpected results for android xml layout

I'm beginner in android development and often have received the strange results. Below is markup where I expect to see red and green sequential rectangles. But really I see only green area:
<?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"
android:layout_width="200dp"
android:layout_height="100dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/first_constrain"
android:layout_width="100dp"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#FF0000" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/second_constrain"
android:layout_width="100dp"
android:layout_height="match_parent"
app:layout_constraintStart_toEndOf="#+id/first_constrain"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#00FF00">
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
Please explain what is wrong in my code.

That is because of the parent FrameLayout - FrameLayout arranges elements (children) on top of each other.
You need to change the parent layout to other layouts e.g. Linear or ConstraintLayout Layouts - something like this.
<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="200dp"
android:layout_height="100dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/first_constrain"
android:layout_width="100dp"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#FF0000" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/second_constrain"
android:layout_width="100dp"
android:layout_height="match_parent"
app:layout_constraintStart_toEndOf="#+id/first_constrain"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#00FF00"/>
</androidx.constraintlayout.widget.ConstraintLayout>

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.