How to use Floating Button Over Vertical Scroll View? - java

The Gmail Android App Floating Button
I want to add a floating button over a scroll view in Android. Such that, even if I scroll the layout, the button should remain constant at the given position (bottom-right) in this case. Just like the Gmail android mobile app, they have a send mail button intact at the bottom-right and the background is scrollable.

If you place the button on top of the layout instead of in the recyclerview it wont move when you scroll.
<?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:orientation="vertical"
android:layout_width="match_parent" android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#android:drawable/ic_input_add" />
</androidx.constraintlayout.widget.ConstraintLayout>

It's not a ScrollView, it's a RecyclerView. You can use CoordinatorLayout for this purpose
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</com.google.android.material.appbar.AppBarLayout>
<Your layout with Recycler View/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#android:drawable/ic_menu_edit" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
If you still want to use a ScrollView, just put it as a sibling of your RecyclerView with gravity bottom.

make the Scroll View inside constraint layout don't make the main parent layout the scroll view.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:srcCompat="#tools:sample/avatars[0]" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
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="wrap_content"
android:orientation="vertical" />
</ScrollView>
</android.support.constraint.ConstraintLayout>

Related

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 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>

How to Overlay text over image at left top corner

I want to have textview over image at top left corner of the Imageview similar to this. how can I do this.
I have this code but It doesn't do what i want.
<?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">
<ImageView
android:id="#+id/myImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/myImageSouce"
android:scaleType="centerCrop"/>
<TextView
android:id="#+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/spacing_medium"
android:layout_gravity="center"
tools:text="Test"/>
</FrameLayout>
Thanks for help in advance.
Try using a ConstraintLayout. Here's a simple example. For layering, views are layered in the order listed in the xml so if you want the TextView in front put it last in the xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:srcCompat="#drawable/ic_home_black_24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Words"
android:padding="20dp"
android:background="#00ff00"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Responsive View in Android Studio

friends i am working on Android Studio to develop an app, the app will be used on Tablets and also other android phones. But i am getting some problems while designing the View (Template). Please help me to sort out this problem.
I am using ConstraintLayout as the mainLayout, and inside it i am using linearlayout with vertical orientation. You can check the code and output
If i use the listView highet as 0dp then it will show nothing
<?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:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/my_images_gallary"
android:textSize="36sp"
android:textStyle="bold" />
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0dp">
</ListView>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:text="Button" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
[Output for the height is 0dp][1]
and if i use the ListView Height as match_parent so the bottom button will not appear.
<?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:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/my_images_gallary"
android:textSize="36sp"
android:textStyle="bold" />
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:text="Button" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Output for the height is match_parent
Actually i want the listView should show all with scrolling and and the button should be seen all time while the listview is being scroll or not.
Expected Output which i am failed to get
Idea 1:
give fixed height to button and textview. Then use 0dp height to listview
Idea 2:
Use weight_sum to linear layout and give layout_weight to button,textview and listview as you expect.

Bottom Navigation Bar not shown in activity

I have an activity with a title, a fragment with a recyclerview full of cards and a bottom navigaton bar.
I cannot manage to show all 3 together without problems, the closest I have been is showing all 3, but with the bar taking space from the cards space.
Right now this is the XML which I thought should be working:
<LinearLayout 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:orientation="vertical"
tools:context=".habits.HabitsActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="313dp"
android:layout_height="166dp"
android:layout_gravity="center_horizontal"
app:srcCompat="#drawable/goodreasons" />
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom">
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</FrameLayout>
</LinearLayout>
But this gives this output:
This is the xml of the fragment, in case you think it is relevant too.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_gravity="center"
android:orientation="vertical"
android:padding="5dp"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_list"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
android:layout_gravity="center"
/>
</LinearLayout>
Here's your layout, stripped down:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="313dp"
android:layout_height="166dp"/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Your problem is that the CoordinatorLayout has a match_parent height, so it will take up all of the space that the ImageView doesn't. That leaves no space at all for the FrameLayout, so you won't be able to see anything inside of it.
Probably the best thing to do would be to use layout_weight on the CoordinatorLayout to make it take up as much space as it can while still leaving room for other views. That would look something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="313dp"
android:layout_height="166dp"/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
The only changes I made were to set the CoordinatorLayout's height to 0dp and the FrameLayout's height to wrap_content, and to add the weight attribute to the CoordinatorLayout.

Categories