I have an floating button in my app. The xml layout of my floating button is the below
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/chrono_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"
android:src="#drawable/ic_add_black_48dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
What i want is to change the floating button image src programatically when somethings happens. What i tried so far is
chrono_button.setBackground(getDrawable(R.drawable.ic_done_black_48dp));
But i always get this error
I/FloatingActionButton: Setting a custom background is not supported.
What is wrong in my code or is there any ather approach to change the drawable image of a floating button programatically?
You don't need change the background, set the image.
floatingActionButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_full_sad));
One details that might be good clarifying is the setImageDrawable method is available for the FloatingActionButton class but not for View. So if you are having issues finding this method just cast the fab like:
((FloatingActionButton)mItemPlaying.getRootView().findViewById(R.id.fab)).setImageDrawable(ContextCompat.getDrawable(context, R.drawable.ic_play_arrow_white_24dp));
fab.setImageResource(R.drawable.yourimagename);
Related
Here is the code I am using at the layout file. I am using Material components as theme style. Here I used both material component button and button, but I think they are both converted to material button due to my theming style:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/createAccountBtn"
android:layout_width="238dp"
android:layout_height="wrap_content"
android:layout_marginStart="86dp"
android:layout_marginTop="35dp"
android:layout_marginEnd="87dp"
android:layout_marginBottom="318dp"
android:text="#string/create_account"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/signInBtn" />
<Button
android:id="#+id/signInBtn"
android:layout_width="237dp"
android:layout_height="wrap_content"
android:layout_marginStart="89dp"
android:layout_marginTop="282dp"
android:layout_marginEnd="85dp"
android:layout_marginBottom="14dp"
android:text="#string/common_signin_button_text"
app:layout_constraintBottom_toTopOf="#+id/createAccountBtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The emmulator model and the model for which you designed the app might be different !
Please check that and revert back .
Apparently I need to use match_parent and wrap_content properties for layout_width and layout_height. One can see this documentation for its use with ConstraintLayout here: https://developer.android.com/training/multiscreen/screensizes
But I would suggest using LinearLayout as ConstraintLayout in my case behaved still badly because I had to define margin properties in exact dps which may not align with a certain screen size. I am adding the LinearLayout solution below which worked as I expected in portrait and landscape mode as well:
<?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:gravity="center"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="#+id/createAccountBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/create_account" />
<Button
android:id="#+id/signInBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/common_signin_button_text"/>
</LinearLayout>
I am trying to achieve something like the image below. The goal is to have an overlay with an editText that that can scroll and hide the content under it. I'm not sure how to do this with Java or XML. The image on the left is the desired initial screen and the second screen is when the scrollView overlays the content, and a header appears.
You might achieve that with a Collapsing Toolbar
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="#drawable/appbar_image" />
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
I am sorry if this question is duplicated.
I am new to android programming, and I am building application for public transport, and i have done so far this: getting the directions form google, parsing json data, and display on the map.
Now I want to display routes in list view with icons bus and train.
A have seen that can be done via Collapsing toolbar and recycle view, but every tutorial that I have seen i am getting error is this because is Android studio 3.0.
This is picture i want to display
In this list view I want to add pictures like if is tram transport than tram icon of bus and if it is combination of multiple tram or bus lines to display that. Can anybody help me or give me advice?
Android provide CollapsingToolbarLayout while scrolling it will collapse toolbar in recycle view. Use this :
android.support.design.widget.CollapsingToolbarLayout
for more read CollapsingToolbarLayout
Happy coding!!
Try this code. It worked for me just simply put imageview in collpasing layout and change it with your options.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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"
android:background="#color/white"
android:orientation="vertical"
android:animateLayoutChanges="true"
tools:context="com.example.intel.magitor.My_Creation_Activity"
>
<android.support.design.widget.AppBarLayout
android:background="#fff"
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="400dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
<!--<android.support.v7.widget.Toolbar-->
<!--android:id="#+id/toolbar"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="?attr/actionBarSize"-->
<!--app:layout_collapseMode="pin"-->
<!--app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />-->
<!-- use this v7.wdiget.toolbar if you want to display title collpasing layout-->
<!-- put here your image you want to collpase while scrolling-->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/video_list"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
Very new so please excuse misuse of terms.
I'm following an Android development course to build a basic app. I created a text view and then a button. The button should sit below the text view after using android:layout_below="#id/rollResult" but instead the button overlaps the text.
Adding and removing that line from my code has no effect on the botton's layout position. Changing this line android:layout_centerHorizontal="true" from true to false and back also has no effect.
Code:
<?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:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.diceout.MainActivity"
tools:showIn="#layout/activity_main"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<TextView
android:id="#+id/rollResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The play App"
/>
<Button
android:id="#+id/rollButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rollResult"
android:layout_centerHorizontal="true"
android:onClick="rollDice"
android:text="Roll" />
Any help is much appreciated.
Change your ConstraintLayout to RelativeLayout
I have implemented persistent bottom sheet with FAB anchored to the top of it.
When I try to do the same with modal bottom sheet (extends BottomSheetDialogFragment) it says
java.lang.IllegalStateException: Could not find CoordinatorLayout descendant view to anchor view android.support.design.widget.FloatingActionButton
Is it possible to do the same layout with modal bottom sheet or maybe make a shadow and unclickable area above persistent one?
I was trying to do the same "FAB on top" thing in ModalBottomSheet, but there's no direct method/way to do that.
For such cases, we therefore use FrameLayout. Inside the definition, it says that -
Child views are drawn in a stack, with the most recently added child on top.
So we can create a layout for the ModalBottomSheet (extends BottomSheetDialogFragment), which would look something like this in your case -
<FrameLayout
android:id="#+id/parent_frame_layout"
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="wrap_content"
android:orientation="vertical"
tools:context=".ModalBottomSheetFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="25dp"
android:orientation="vertical">
<!-- Whatever layout you want to give here. This is going to be the body
of the ModalBottomSheet. Also you might not wanna use the current Linear
Layout too.-->
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/icon_sheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_gravity="center|top"
android:src="#drawable/ic_music"
android:elevation="20dp"/>
</FrameLayout>
Notice that -
FAB is made after LinearLayout (body for the BottomSheet), as it would be stacked over the LinearLayout.
We gave a marginTop=25dp for LinearLayout but we gave marginTop=0dp for the FAB. This is how you create the half-out, half-in effect. And also gave elevation on FAB for better float look.
Finally we can inflate it's view inside the onCreateDialog overridden method and perform all necessary actions thereafter.
Hope I was able to answer your question. Do comment for any further doubts/updates.
Adding to #Krishn Agarwal answer we need to make sure the bottom sheet dialog has a transparent theme then only the same look and feel will be achieved. We can even have a Constraint Layout instead of a Linear Layout. We can use BottomSheetDialog/BottomSheetDialogFragment
<?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:id="#+id/parent_frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_success_dialog"
style="#style/AppModalStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/margin_60"
android:paddingStart="#dimen/dimen_25"
android:paddingEnd="#dimen/dimen_25"
android:paddingBottom="#dimen/dimen_25">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_title_text"
style="#style/style_bottomsheet_header_22sp"
android:gravity="center"
android:layout_marginTop="80dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="#string/mf_mandate_creationsuccessful" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_description"
style="#style/open_sans_semi_bold_15sp_gray"
android:layout_marginTop="#dimen/dimen_7"
android:layout_marginBottom="#dimen/margin_25"
app:layout_constraintBottom_toTopOf="#+id/go_to_dashboard_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_title_text"
tools:text="Description" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/go_to_dashboard_btn"
style="#style/mf_style_blue_button"
android:layout_width="0dp"
android:elevation="#dimen/margin_5"
android:text="#string/mf_go_to_dashboard"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_description"
tools:targetApi="lollipop" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_tick_icon"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_gravity="center|top"
android:layout_marginTop="0dp"
android:importantForAccessibility="no"
android:visibility="visible"
app:backgroundTint="#color/very_light_green"
app:elevation="#dimen/margin_20"
app:fabCustomSize="128dp"
app:maxImageSize="128dp"
app:srcCompat="#drawable/ic_success_tick"
app:tint="#null" />
</FrameLayout>