Develop Reference

In Android how do you create a button with a progress bar going around it as per Material IO Guidance

I want to make a button which has an indeterminate progress bar around it's outside, as we can see here.
Based upon the available widgets, I cannot see how to make a circular button with this progress bar on it's outside.
At this point, I have my floating action button:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="?android:attr/actionModeWebSearchDrawable" />
With no progress bar!
I found this example - but cannot get it to load correctly into my project.
Is there a 'native' simple way to achieve this design?
Update
Following help, now I have something like this:
Note the right hand is the suggested answer. Left hand is the style of button I am aiming for.
My code is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progress="50"
app:indicatorColor="#color/colorAccent"
app:trackColor="#color/colorPrimary"
app:trackThickness="2dp"
/>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="?attr/colorSecondary"
app:cardCornerRadius="24dp"
android:layout_gravity="center"
app:cardPreventCornerOverlap="true">
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:src="?android:attr/actionModeWebSearchDrawable"/>
</androidx.cardview.widget.CardView>
</FrameLayout>
</LinearLayout>
Basically the left hand button is slightly larger with slightly smaller search image -- how can I edge closer to this? I have tried playing but can't quite get the sizing right. I thought adding padding would help but doesn't seem to make a difference. I wonder if there is a way to combine your solution with my floating action button - to perhaps get the best of both worlds more easily?

Instead of Floating button maybe you can try it this way with Frame Layout and CardView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progress="50"
app:indicatorColor="#color/colorAccent"
app:trackColor="#color/colorPrimary"
app:trackThickness="2dp"
/>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="25dp"
android:layout_gravity="center"
app:cardPreventCornerOverlap="true">
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:src="#drawable/app_top_logo"/>
</androidx.cardview.widget.CardView>
</FrameLayout>
</LinearLayout>

Android - Display file path in Toolbar

I am searching for a way to display a file path in the toolbar like this:
It needs to be clickable and should be swipeable if it's a long path. (Or small device).
I thought about using a HorizontalScrollView with a TextView and ImageView, but don't know if that is the best way to accomplish this. Is there a better (simpler) way to do this? Thanks!
Edit:
With thanks to #aelimill I found out that a RecyclerView can go horizontally, but I'm still having some issues. If you click on the text in the previous screenshot it shows this:
But for me (after I set the custom list item to clickable) it is like this:
(Look at the click animation)
How can I display the circle animation just like other ActionBar items?

I solved this by using a RecyclerView as #aelimill suggested. This is the custom list item I used:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:id="#+id/relativeLayout">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton"
android:src="#drawable/ic_keyboard_arrow_right_white_24dp"
android:background="#null"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/textView"
android:layout_alignBottom="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/textView"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/imageButton"
android:layout_toEndOf="#+id/imageButton"
android:gravity="center"
android:textSize="16sp"
android:minWidth="20dp"
android:textColor="#ffffff"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Use selectableItemBackground instead of selectableItemBackgroundBorderless to support pre lollipop devices. (It wont be a circle animation, but a rectangle animation).

Avoid background widgets events with overlay view

Have a look on following screenshot.
In this layout, I'm displaying overlay view (the one with pink color) to disable the log in button click until loading is complete. But the problem is that, though overlay view is appearing above login button but still login button click is called. Any idea whats happening here?
Following is my overlay view xml.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#88ff0000">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/loader_bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Just a moment..."
android:textSize="12dp"
android:textColor="#000000"
android:layout_margin="10dp"
android:layout_gravity="center_horizontal"/>
<ProgressBar android:id="#android:id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:progressBarStyleSmall"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_gravity="center_horizontal"
android:indeterminateDrawable="#drawable/loading_wheel"/>
</LinearLayout>
</RelativeLayout>

Solved it my self.
Android dispatches events to background widgets if there are not implemented for the overlay events. So simply add on click listener on the overlay view to avoid click on Login button.

Image + Text to be centre alligned in button

I have a Button with its width as match_parent. And I want a image/icon with a text in its center. I have triedandroid:drawableStart attribute but its of no help. I don't know what I am missing. Is there any one who is also facing the same problem.
Note:This link is not solving my problem. I am attaching my button portion of xml
<Button
android:background="#drawable/blue_button"
android:id="#+id/btn_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:drawableStart="#drawable/ic_list"
android:text="#string/btn_schedule"
android:textColor="#android:color/white" />
After adding these attribute my text is coming on center but image/icon is still on left side of button. Can any body help!!!

You might want to check my answer to this question:
Android Button with text and image
Its an ugly solution but it you want the image and text to be centered as a group in the button rather than text center and drawable padded from the side then its the only way I have found.

100% working
<FrameLayout
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#null"
android:clickable="false"
android:drawableLeft="#android:drawable/ic_delete"
android:focusable="false"
android:gravity="center"
android:minHeight="0dp"
android:minWidth="0dp"
android:text="Button Challenge" />
from here

This works for me. Basically play with the paddingLeft and PaddingRight of the button to get the text and image close together to the center.
Note: Might be an issue with rather long texts.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="search button"
android:drawableStart="#drawable/ic_action_search"
android:paddingLeft="60dp"
android:paddingRight="60dp"/>
</LinearLayout>

I had the same problem and I hadn't found anywhere clear solution. BUT I got some information which also help me to provide following solutions (I have chosen the second one):
Create image which will contain your image and text
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableTop="#drawable/YOUR_IMAGE"
android:gravity="center_horizontal|center_vertical" />
It is not so clear and you have to add more complicated changes to your layout but it is easier to modify the text later
<FrameLayout
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_height="50dp"
android:layout_width="match_parent" />
<TextView
android:text="sample"
android:layout_height="50dp"
android:layout_width="wrap_content"
android:drawableLeft="#drawable/YOUR_IMAGE"
android:gravity="center_horizontal|center_vertical" />
</FrameLayout>

I tried android:drawableTop
The image shown in the center of the button

EditText goes out of the screen sometimes when virtual keyboard shows up

I am developing an application for Android.
I have a simple layout. A CheckBox, a Spinner and a Button at the top, a two line EditText at the Bottom which is displayed when the CheckBox is checked and another EditText which covers the rest of the space in the middle.
The problem is that when I am writing on the big EditText, sometimes the layout goes out of the screen on top and as a result I can't see what I am writing.
As a solution, I can set my layout to resize when the keyboard shows (using android:windowSoftInputMode="adjustResize" on the manifest.xml) but that won't be good since I do not want the 2 EditTexts to share the space left on the screen.
My layout code follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/button"
android:text="Push"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"/>
<CheckBox android:id="#+id/check_box"
android:text="Check"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<Spinner android:id="#+id/spinner"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<EditText android:id="#+id/text_2"
android:hint="#string/hint_2"
android:inputType="textMultiLine"
android:maxLines="2"
android:gravity="top"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:visibility="gone" />
<EditText android:id="#+id/text_1"
android:hint="#string/hint_1"
android:inputType="textMultiLine"
android:gravity="top"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#id/spinner"
android:layout_above="#id/text_2"
android:layout_alignWithParentIfMissing="true" />
</RelativeLayout>
P.S. This thing happens only on my Wildfire and very rare on the Emulator. A friend's Desire HD didn't have any problem at all. I don;t know if this makes any difference...
Thanks in advance for your help.
Antonis

I have the exact same problem. I've tested and this only happens with EditText in multiline mode and when SoftInputMode is set to adjustPan. This is most probably an Android bug.
The only solution I've found is to remove adjustPan.