Develop Reference

Shadow in custom info window

I am working on dark mode for my app which contains a map with a lot of markers. Therefore, I have to darken the custom info windows of the google maps. Because these windows have a margin by default which is white, I had to create one from the ground up.
This is the custom window:
<?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:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#ffffff">
......
</LinearLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/custom_info_window_triangle"
android:rotation="180"/>
<View
android:layout_width="1dp"
android:layout_height="5dp"/>
</LinearLayout>
For the triangle I have found this approach to be the best: https://stackoverflow.com/a/31704460/6612631.
Until here, everything works as expected. The problem is with shadow. I tried to use a cardview, but setting cardElevation doesn't show any shadow.
Later Edit: this is the cardview in which I've tried to put the second linear layout:
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#ffffff"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="4dp">
</androidx.cardview.widget.CardView>

I had the same issue of showing shadow on custom info window on maps,
And I solved by using drawable as a background to the parent layout.
<?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:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/dialog_holo_light_frame"
android:orientation="vertical"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#ffffff">
......
</LinearLayout>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/custom_info_window_triangle"
android:rotation="180"/>
<View
android:layout_width="1dp"
android:layout_height="5dp"/>
</LinearLayout>
I have used the android default drawable, which is nine patch image:
android:background="#android:drawable/dialog_holo_light_frame"
You can use this according to your requirement or can create one such image
with shadow in it and add as your linear layout background instead of cardview.
Hope this helps!

Create semi transparent background image to layout

See the image for example
I want to implement a login screen where I want user to login through only Google plus sign in. I was looking for design to choose from but couldn't get the idea. But then I came across something like. I tried to implement it.
This is what I tried.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.bt4u.shopcite.login">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha=".5"
android:background="#drawable/ny"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="#dimen/_100sdp"
android:layout_height="#dimen/_100sdp"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/applogo" />
<com.google.android.gms.common.SignInButton
android:id="#+id/Sign_in_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:alpha="1" />
</RelativeLayout>
You can see I tried to use alpha but its not giving me same results. I want a clone type of what is shown in the image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.bt4u.shopcite.login">
<ImageView
android:id="#+id/yourbackgroundImageIDD"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/yourbackgroundImage" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66000000"">
</LinearLayout>
<ImageView
android:id="#+id/imageView3"
android:layout_centerHorizontal="true"
android:layout_width="#dimen/_100sdp"
android:layout_height="#dimen/_100sdp"
app:srcCompat="#drawable/applogo" />
<com.google.android.gms.common.SignInButton
android:id="#+id/Sign_in_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
You can try above layout. Set a background image then LinearLayout with background color and set alpha within hex code of color like "#66000000" where 66 is alpha for black color.
you can refer to this for other values of alpha : Hex transparency in colors

Elevation not working for BottomSheet inside Coordinator layout

I am trying to use a BottomSheet in my layout.
The root view is an CoordinatorLayout and I want to set Elevation on top for the Bottom Sheet so i am setting it with a high value (50dp), however it is not showing when the app runs but it appears on android studio design tool.
I have tried to set background for the sheet with a solid color instead of gradient but it still did work. I also tried to use Shadow shapes but it does not give the same elevation appearance.
here is my XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.atefhares.StartActivity"
android:clipToPadding="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/DetailsView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Details Should be shown here"
android:id="#+id/textView"
android:textSize="25sp"
android:padding="20dp" />
</LinearLayout>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.atefhares.Start_Activity" />
</LinearLayout>
<android.support.v4.widget.SlidingPaneLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_peekHeight="70dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:background="#drawable/gradiant"
android:fillViewport="true"
android:elevation="50dp">
<include layout="#layout/bottom_sheet_layout"/>
</android.support.v4.widget.SlidingPaneLayout>
</android.support.design.widget.CoordinatorLayout>
Edit:
bottom_sheet_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/colorPrimary"
android:padding="10dp"
android:id="#+id/inviteLL">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/imageView"
android:background="#drawable/invite_icon"
android:layout_margin="5dp"
android:layout_gravity="center_vertical" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Invite Friends"
android:textSize="22sp"
android:textColor="#ffffff"
android:padding="10dp"
android:fontFamily="sans-serif-condensed"
android:gravity="center_vertical"
android:id="#+id/inviteTV"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/arrowIV"
android:layout_gravity="center_vertical"
android:background="#drawable/arrow_up" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:id="#+id/usersLV"
android:dividerHeight="1dp"
android:divider="#ffffff"
android:background="#ffffff" />
</LinearLayout>
So how can I make the elevation shows on top of the Bottom Sheet
Any one can help, please ?

Try this,
<android.support.v4.widget.SlidingPaneLayout
android:id="#+id/bottom_sheet"
xmlns:slide_panel="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_peekHeight="70dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:background="#drawable/gradiant"
android:fillViewport="true"
slide_panel:elevation="50dp">

According to the google guidelines with the android:elevation is not possible (Also you can read more about the keyligth).
Anyway on the most common cases when you scroll up the "BottomSheet" a semitransparent layer appears behind the "BottomSheet", this helps to keep the user focus on the "BottomSheet" actions, like these examples.
If anyway you want a top shadow you can set a drawable background with gradient like this (shadow_top.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:centerColor="#000000"
android:endColor="#android:color/transparent"
android:startColor="#000000"
android:type="linear" />
And your SlidingPanelLayout will be:
<android.support.v4.widget.SlidingPaneLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_peekHeight="95dp"
android:paddingTop="25dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:background="#drawable/shadow_top"
android:fillViewport="true"
>
Best regards.

Do not forget that to draw shadow you must use hardwareAccelerated drawing
hardwareAccelerated = true
hardwareAccelerated = false
See Android Hardware Acceleration for details

The answer is: no, it is not possible (unless you create your own view custom with an elevation feature on top).
Elevetion is not meant to be visible in the top of a view, but in the bottom, on the right and on the left.
If you see closely on the official Material Design guidelines, you can see that the bottom bar simply don't have it (do not confuse with the gray space between the card and the bottom bar).
For example: import Card View sample from Android Studio and play with it with emulator or your device. You will see that if you increment the elevation value, the view will have his shadow everywhere except on top (see second image below).
Another example is given by importing Elevation Basic.
EDIT
Following code is taken from Card View sample. There is a layout containing a CardView with elevation. Whenever you change the elevation, you will always see shadow everywhere, but not on top (the code was tested with Lollipop and Marshmallow).
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
>
<android.support.v7.widget.CardView
android:id="#+id/cardview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:elevation="100dp"
card_view:cardBackgroundColor="#color/cardview_initial_background"
card_view:cardCornerRadius="8dp"
android:layout_marginLeft="#dimen/margin_large"
android:layout_marginRight="#dimen/margin_large"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_medium"
android:text="#string/cardview_contents"
/>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_large"
android:orientation="horizontal"
>
<TextView
android:layout_width="#dimen/seekbar_label_length"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="#string/cardview_radius_seekbar_text"
/>
<SeekBar
android:id="#+id/cardview_radius_seekbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_medium"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="#dimen/seekbar_label_length"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="#string/cardview_elevation_seekbar_text"
/>
<SeekBar
android:id="#+id/cardview_elevation_seekbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_medium"
/>
</LinearLayout>
</LinearLayout>

Relative layout background color occasionally changes automatically on Android pre v21

I have some issues with somehow occasionally changed background color of views. That could be any kind of view. The only solution I found is to change background color programmatically.
This is my fragment layout. Here default_theme_color is dark blue:
<?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:background="#color/default_theme_color">
<include
android:id="#+id/bill_layout"
layout="#layout/estimated_bill"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
<ImageButton
android:id="#+id/shareButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/bill_layout"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:background="#drawable/white_circle"
android:padding="10dp"
android:src="#drawable/ic_share"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/shareButton"
android:background="#color/default_theme_color"
>
<ImageView
android:id="#+id/circular_ticker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/circular_ticker"
/>
<RelativeLayout
android:id="#+id/clock_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#color/default_theme_color">
...
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
This is what I get. The background color beside share button must be the same as clock bg color

Create a new values directory under resource directory and specify the required styles and colors.
It loads up styles based on the version running on the device
here

Android: how to create a button with a centre line in it?

i want to create a button with green color background and a white line in center, like in the image.

If you want to use a 9 patch (name it btn_green.9.png - mind the extension!), put it in your /res/drawable-mdpi folder.
You can use this one:
This is how it is shown in the draw9patch tool:
This is how to add it:
<RelativeLayout
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"
>
<ImageButton
android:layout_width="match_parent"
android:layout_height="96dp"
android:background="#drawable/btn_green"
/>
</RelativeLayout>
It only uses 1 View, so it's a superfast (the less Views, the better performances)!!

You can create an ImageButton with Background attribute, and then create a View for the line setting the margin attribute to move it the position you want.
This is a very fast xml, but you can start playing with it
<RelativeLayout 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">
<ImageButton
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#009900" />
<View
android:layout_width="fill_parent"
android:layout_height="5dp"
android:layout_marginTop="50dp"
android:background="#FFFFFF" /> </RelativeLayout>

If you want to make the button like that, you can use FrameLayout.
<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="wrap_content">
<ImageButton
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#009900" />
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_gravity="center_vertical"
android:background="#FFFFFF" />
</FrameLayout>
The reason why i'm using FrameLayout is to overlap Views. so try this code, i hope it works.