Develop Reference

What is this UI control and how can I make one in my app?

Background
In the following screenshot from Gmail, there is some sort of error bar shown just underneath the action bar / app bar. This bar shows permanently, and it pushes the remaining content down rather than overlaying it.
Questions
Is there a name for this type of UI component/control?
Is there something built-in or in the support libraries that I can use to add one of these to an activity of my own?

Material design has an example of this under the App Errors section. It refers to the control as:
Container/component specific error with action
However, I also found an example in the Android Unified Email app, which refers to the control as Tip View:
ConversationTipView.java
conversation_tip_view.xml
I adapted the source code from the above to make my own:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tip_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e5e5e5"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
>
<TextView
android:id="#+id/tip_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="#android:color/primary_text_light"
android:textSize="16sp"
/>
<Button
android:id="#+id/tip_view_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right|end"
android:text="#string/preference_accessibility_service_enable"
style="#style/Widget.AppCompat.Button.Borderless.Colored"/>
/>
</LinearLayout>

If it is a Snackbar like #Karan says you can make it appear on the top like this:
Snackbar snack = Snackbar.make(parentLayout, str, Snackbar.LENGTH_LONG);
View view = snack.getView();
FrameLayout.LayoutParams params =(FrameLayout.LayoutParams)view.getLayoutParams();
params.gravity = Gravity.TOP;
view.setLayoutParams(params);
snack.show();
This shows an animation of Snackbar sliding from bottom, then switching to top. If you want to avoid this try this library(I haven't tried this myself): https://github.com/AndreiD/TSnackBar

Add a view inside of your current layout as per your design and make visibility gone, and make it visible when required from your activity/fragment.
when this will appear in the screen it pushes the remain content down from the current position.
For elevation you can use CARDVIEW.
hopefully it will help you;

Material Design Progress Dialog with transparent background

I'd like to put an indeterminate Progress Dialog material-compliant in my app. I found two ways to achieve it:
1- Using material-dialogs: https://github.com/afollestad/material-dialogs
2- Using the build-in dialogs of material-design-library: https://github.com/navasmdc/MaterialDesignLibrary#dialog
Using any of these solutions I get something pretty much like this: a dialog with a progressbar in it.
What I'd like to get is just the circular progress bar, without the surrounding light-grey view and without any text. A lot of apps proved us that the user knows that when something's spinning around he just needs to wait: there's no need to write it in letters. What I mean is pretty much something like this, but material.
I don't think this is such a strange question (or is it?) but I wasn't able to find any good answer online. Does anyone of you know how to achieve this?
Thank you
[Edit] I must say that in the gitHub issues of the material-dialogs library this seems to be discussed but the developer closes it fast by saying that it would mean not to follow the guidelines: https://github.com/afollestad/material-dialogs/issues/277

You can use this code,work fine in devices >= 19 (Kitkat)
progress = ProgressDialog.show(Splash.this, null, null, true);
progress.setContentView(R.layout.elemento_progress_splash);
progress.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
progress.show();
element progress splash.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#null"
>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/ColorTipografiaAdeudos"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Comprobando sus datos"
android:layout_below="#+id/progressBar1"
android:layout_centerHorizontal="true"
android:id="#+id/textView6"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#color/ColorFuente"
android:layout_gravity="center_horizontal" />
</RelativeLayout>

To sum up our combined with the author efforts:
The main objective was to get a dialog appearance effect (specifically background dimming) for the progress indicator of a type "material progress wheel" with the transparent background of the dialog itself.
How we've gone about it (one of the possible ways):
This library is used as the material progress wheel.
A separate layout file is created (e.g., progress_wheel.xml) containing the progress wheel layout <com.pnikosis.materialishprogress.ProgressWheel>.... If you find yourself in a situation when the wheel's dimensions do not change as per your layout settings, wrap it with a FrameLayout with wrap_content dimensions.
Inflate this layout with a layout inflater to get a view, e.g. dialogView.
Create the dialog:
Dialog progressDialog = new Dialog(context);
progressDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
progressDialog.setContentView(dialogView);
progressDialog.show();
Call this function on dialogView to make the dialog background transparent:
public static void clearParentsBackgrounds(View view) {
while (view != null) {
final ViewParent parent = view.getParent();
if (parent instanceof View) {
view = (View) parent;
view.setBackgroundResource(android.graphics.Color.TRANSPARENT);
} else {
view = null;
}
}
}

Android - Pop up a View on top of another View

Suppose I have a Button like what is in the following:
I want once this button is clicked a ImageView(popup message) appears in the top of this button, something like this:
But I do not know how put a View as an overlay on top of another View, Just I know this can be achieved by FrameLayout . Please suppose I want to embed this capability into the Button (in the other phrases I want to create a custom button with a method called showPopup(...) like Textview's setError(...))
Can any one please help me? Thanks

How about taking a look at the Quick Action Dialog?
It is an old article (We're talking Android 2.2 territory), but should still work for the latest devices and OS.
The example uses a contextual popup with buttons, but should be easily modifiable to just show text or whatever you want. There is an example further in that shows use alongside a button.

You can also use RelativeLayout. you can define as on top of other views that way.
Notice that if you define two views, the last one is stacked on the first
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

You can use a popupWindow
PopupWindow popupWindow = new PopupWindow(context);
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View popupView = layoutInflater.inflate(R.layout.popup_view_layout, null);
Imageview popupImage = popupView.findViewById(R.id.imageView);
popupWindow.setContentView(popupView);
popupWindow.setBackgroundDrawable(null);
int popupY = button.getTop() - button.getHeight();
int popupX = button.getLeft();
popupWindow.showAtLocation(keyView, Gravity.NO_GRAVITY, popupX, popupY);
The popup_view_layout can look like this
<?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="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:minWidth="20dp"
android:visibility="gone"
app:srcCompat="#drawable/yourImage" />
</FrameLayout>
For more information click here or check this question's answers.

Text over button on Android like in the Apollo Music Player

I'm a novice on the Android platform when it cames to development. However I'm going further from basic Views and I'd like to create something like the following buttons:
This is what I want to achieve. I first tought that a Button with a custom background would have sufficed. However I don't know any way to make that small darker line with the text inside. All of the image reacts like a button and gets highlighted when you touch it.
Can you help me?

If you look at the source code for Apollo you can see ArtistsFragment is not made up of Buttons but rather an inflated RelativeLayout created by a subclass of the SimpleCursorAdapter class.
Since any view can have an OnClickListener you can make any create a layout to look however you want and still have it act like a button:
// Or load it as an item from an existing layout.
View myView = this.getLayoutInflater().inflate(R.layout.anything);
myView.setOnClickListener(new OnClickListener(){
public void onClick(View arg0) {
// Do stuff.
}
});

Every segment with an image could be a Layout with the background set to the appropriate image. Then, you just put the button inside of the layout.

You have to use Framelayout or RelativeLayout. For example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/your_drawabele" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="your_text" />
</FrameLayout>

How does overlaying views work in Android?

In Android, i noticed that you can have a fixed view on top of another. For example, when you open your browser, and tap the search box, a keyboard prompt pops up (on top of a listview). However, notice that you can still scroll up and down on the listview without the keyboard going away. Like:
would someone please explain (preferrably some sample code in addition) how this works?
What i'm trying to do is just have a custom listview that always has a floating navigation bar on top of the listview and also on the bottom of the list view (it's not actually a header/footer of the listview, it's more like a header/footer of the screen). It would be similar to the example i just described, where the user can interact with both the navigation bar as well as the listview "underneath" the nav bar.
I am somewhat new to Android development, so please be nice and provide a little bit of details if you would :) much thanks in advance!!

whoops. looks like someone had a similar issue:
Layout Layers? Z-Axis?
and this post http://android-developers.blogspot.com/2009/03/android-layout-tricks-3-optimize-by.html explains how FrameLayout works and also how works, which is an even better alternative.
FrameLayout lays object in a different Z-axis, so this is the solution i was looking for.

There are many ways to achieve that, the simpler i can think of is using linear layout :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/header">
//Here you add whatever you want in your "header"
</LinearLayout>
//create your listview
<ListView
android:id="#+id/content_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#00000000"
android:layout_marginRight="10dip"
android:layout_marginLeft="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:scrollbars="none"
android:paddingBottom="5dp"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/footer">
//Here you add whatever you want in your "footer"
</LinearLayout>