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>

Elevation above 2dp causes buttons to disappear

In my code below, I have a white view with an elevation of 8dp. The blue button has an elevation of 10dp so in theory it should show. However, it doesn't. It only shows the part in which it is not directly over the white view. I know it's something to with the elevation however I do not know exactly what. I have sussed out that it's fine when the white view is =<2, but as soon as I set it higher, the problem occurs.
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/login_background"
android:background="#color/colorPrimary" />
<View
android:id="#+id/view"
android:layout_width="#dimen/login_container_width"
android:layout_height="#dimen/login_container_height"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/login_container_margin_top"
android:background="#drawable/login_container"
android:elevation="8dp">
</View>
<Button
android:id="#+id/button"
android:layout_width="190dp"
android:layout_height="50dp"
android:layout_marginBottom="52dp"
android:background="#drawable/login_button"
android:elevation="10dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>

The following reflects this Stack Overflow question and the accepted answer.
Let's consider what you start off with. I don't have access to all your dimensions, etc. to make the following look exactly like your example but the basis is there. Below is the base layout. You can see that the button lies beneath the view even though the view has an elevation of 8dp and the button has an elevation of 10dp.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="175dp"
android:layout_alignBottom="#+id/button"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_margin="30dp"
android:background="#android:color/white"
android:elevation="8dp">
</View>
<Button
android:id="#+id/button"
android:layout_width="190dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="52dp"
android:background="#mipmap/ic_launcher"
android:elevation="10dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
So, why is this? It is because android:elevation="10dp" in the XML for the button isn't really defining the elevation. Instead, the button's elevation is controlled by a "StateListAnimator" that controls the android:elevation and android:translationZ properties." (See accepted answer to above-referenced question.)
If you don't really care for what the StateListAnimator is doing for your layout, you can simply eliminate it by adding android:stateListAnimator="#null" to the XML for the button. Here is what the layout looks like after adding this code. (Please note that the designer may not show the changes immediately; Android Studio 3.0 Beta 6 didn't). So, you may need to refresh the layout to see the changes.
As you can see, the button is now above the view as we expect.
If you do care what StateListAnimator does for you, you will need to define your own and enter its name instead of #null in the XML statement changed above. The answer I reference above has the StateListAnimator that Android presumably uses, so you can take that as a basis and change the elevation to what you prefer. I haven't tried this, but it should work.

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

Android searchView with voice icon

In an android app, I want to implement a searchView like this
There are some requirements:
the SearchIcon and the text("搜索")are in the middle of the searchView
a voiceIcon is inside the right side of the searchview.
3.the searchView is expanded by default.
I try to use the android searchView component, but i can't move the searchIcon to the middle of the searchView and I dont konw how to add an voiceIcon.
How can I do this,Thanks.

If you chose to follow the use of a SearchView, you will come accross the creation of a searchable item in XML.
To get the microphone logo, you can add this line to your searchable
android:voiceSearchMode="showVoiceSearchButton|launchRecognizer"
This will enable the voice module, and also add the microphone icon to your searchView if you follow the Android tutorial you can find here
http://developer.android.com/guide/topics/search/search-dialog.html

I know that I shuold use custom layout to do this, so I write like this:
<LinearLayout
android:orientation="horizontal"
android:background="#color/orange_yellow"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="50dp">
<RelativeLayout
android:id="#+id/homeSearchView"
android:background="#color/white"
android:layout_marginLeft="10dp"
android:layout_width="match_parent"
android:layout_weight="5"
android:gravity="center_horizontal"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/voiceSearchIconImageView"
android:layout_toStartOf="#+id/voiceSearchIconImageView">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_action_search"
android:id="#+id/searchIconImageView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/search"
android:id="#+id/textView" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_action_voice"
android:id="#+id/voiceSearchIconImageView"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:background="#drawable/ic_action_scan"
android:id="#+id/scanImageButton" />
</LinearLayout>
and it seems work
the next step is to implement the search logic like SearchView component.

you can also replace the mic icon with your custom icon
by adding this to ur search_view in xml
app:voiceIcon="#drawable/ic_mic

Android add background behind imagebutton, edittext, imagebutton

I'm trying to add a footer containing an imagebutton, an textview and another imagebutton to my activity (I want to make an app like whatsapp and it should nearly look the same). I have tried many ways, but all didnt work.
I tried to make a footer like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/chatBottom"
android:layout_width="wrap_content"
android:layout_height="55dp"
android:background="#D8D8D8"
android:layout_alignParentBottom="true" >
<ImageButton
android:id="#+id/emojiButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:src="#drawable/emoji_button"
android:background="#D8D8D8"
android:padding="10dp"
android:contentDescription="#string/empty"/>
<EditText
android:id="#+id/enterMessage"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dp"
android:padding="5dp"
android:layout_toLeftOf="#+id/sendMessage"
android:layout_toRightOf="#id/emojiButton"
android:background="#drawable/textfield_multiline_activated_holo_dark"
android:hint="" />
<ImageButton
android:id="#+id/sendMessage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#D8D8D8"
android:contentDescription="#string/empty"
android:padding="10dp"
android:src="#drawable/action_send_message" />
and add it using include in xml or via addView() in java, but nothing worked properly. Most important is that the footer has its on background colour (always when I tried to set a colour to the layout where the footer is in, the whole activity got this colour) and that the textview resizes automatically.
Best regards, Oliver