Develop Reference

Not able to set gradient background of floating action button

I am trying to set the background of the floating action button as a gradient. I have already seen many solutions but none of them are working out for me. whatever I try it is showing me a black action button. I have tried setting the background to colour but that also didn't work. I am trying to create the bottom navigationBar.
My code
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
app:titleTextColor="#000000"
app:title="𝕴𝖓𝖘𝖙𝖆𝖌𝖗𝖆𝖒"
app:elevation="8dp"
/>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:backgroundTint="#color/colorPrimary"
android:layout_gravity="bottom"
app:elevation="8dp"
app:fabAlignmentMode="center"
app:fabCradleRoundedCornerRadius="32dp"
app:fabCradleMargin="10dp"
app:fabCradleVerticalOffset="18dp"
app:buttonGravity="bottom">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
app:menu="#menu/bottom_menu"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
app:itemIconTint="#color/bottom_nav_selector"
/>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_button"
android:src="#drawable/fab_gradient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bottomAppBar"
android:contentDescription="TODO" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
gradient
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:angle="45"
android:endColor="#cd337b"
android:startColor="#f09448" />
</shape>
</item>
<item android:gravity="center">
<bitmap
android:gravity="fill_horizontal"
android:src="#drawable/ic_action_add" />
</item>
</layer-list>

In your theme.xml Create a style
<style name="Floating" parent="Widget.Design.FloatingActionButton">
<!---rest of your style-->
<item name="android:foreground">#drawable/gradient</item>
</style>
and in your FloatingActionButton apply this style :
<com.google.android.material.floatingactionbutton.FloatingActionButton
style="#style/Floating"
android:id="#+id/fab_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bottomAppBar"
android:contentDescription="TODO" />
UPDATE:
to center the icon: in API 23 and above:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:angle="45"
android:endColor="#cd337b"
android:startColor="#f09448" />
</shape>
</item>
<item
android:drawable="#drawable/common_full_open_on_phone"
android:gravity="center"
android:width="24dp"
android:height="24dp">
</item>
</layer-list>
and for API 23 and less :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:angle="45"
android:endColor="#cd337b"
android:startColor="#f09448" />
</shape>
</item>
<item
android:drawable="#drawable/common_full_open_on_phone"
android:top="15dp"
android:right="15dp"
android:left="15dp"
android:bottom="15dp" />
</layer-list>

Rounding top and bottom corners of a listview

This is my issue I can't seem to round the edges on the bottom of my listview.
I've tried a couple of methods where you create a shape for the backgroup resource, tried it programmatic ally and in the layout xml's but it does not do anything at all.
Like I either did it wrong which I doubt since I am familiar with shapes, or something else interferes with my attempts.
Either way I need help is what I'm getting at.
Here's some of the xml's that make up what you're looking at.
This makes up the actual dialog. (settings_dialog.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:background="#BB000000"
android:gravity="center">
<ImageView
style="#style/CloseButtonStyle"
android:id="#+id/ivCancel_SD"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_above="#+id/rlContainer_SD"
android:layout_toRightOf="#+id/rlContainer_SD"
android:layout_toEndOf="#+id/rlContainer_SD"/>
<RelativeLayout
style="#style/SettingsDialogStyle"
android:id="#+id/rlContainer_SD"
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
style="#style/SettingsHeaderStyle"
android:id="#+id/tvSettingsLabel_SD"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/sd_header_label"/>
<ListView
style="#style/SettingsListStyle"
android:id="#+id/lvOptions_SD"
android:background="#drawable/bg_listview_corners"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tvSettingsLabel_SD"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
</RelativeLayout>
This is located in my styles.xml with a bunch of other stuff that has no relation to this.
<style name="SettingsListStyle">
<item name="android:divider">#color/table_divider_color</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">6dp</item>
<item name="android:paddingRight">6dp</item>
<item name="android:paddingBottom">2dp</item>
</style>
And this makes up a list_item. (settings_list_item.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="80dp"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
style="#style/SettingsOptionNameStyle"
android:id="#+id/tvOptionName_SLI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
style="#style/SettingsOptionDescStyle"
android:id="#+id/tvOptionDesc_SLI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
And here is the shape I used to try and round the edges.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bg_listview_corners" android:shape="rectangle">
<corners android:radius="30dp" />
</shape>
I've also tried this piece for the shape.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bg_listview_corners" android:shape="rectangle">
<corners
android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp" />
</shape>
This is all the information I think you'll need to help me on my way.
In case I missed some information or you just have questions don't hesitate to ask.
Update 1:
I figured out it somehow only shapes the container of the listview but not the listview itself.
Any ideas?

you can increase the padding (paddingRight, paddingLeft, and paddingBottom)
<style name="SettingsListStyle">
<item name="android:divider">#color/table_divider_color</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">7dp</item>
<item name="android:paddingRight">7dp</item>
<item name="android:paddingBottom">3dp</item>
or use mask background over the listview (like this Post which use 9-Patch as mask, or you can use your "bg_listview_corners.xml" background for the mask)

You can create a custom background drawable selector file called custom_list.xml in your drawable folder with this code in it
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/list_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/list_focused" android:state_focused="true"/>
<item android:drawable="#drawable/list_default"/>
</selector>
then create another file list_default.xml in your drawable folder with this code in it
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#1c95a0"
android:startColor="#1c95a0" />
<corners android:radius="5dip" />
</shape>
finally set the background property of the list view to
android:background="#drawable/custom_list"

Ended up using a mask as suggested by #Sally here is how I changed it.
<?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="#BB000000"
android:gravity="center">
<ImageView
style="#style/CloseButtonStyle"
android:id="#+id/ivCancel_SD"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_above="#+id/rlContainer_SD"
android:layout_toRightOf="#+id/rlContainer_SD"
android:layout_toEndOf="#+id/rlContainer_SD"/>
<RelativeLayout
style="#style/SettingsDialogStyle"
android:id="#+id/rlContainer_SD"
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
style="#style/SettingsHeaderStyle"
android:id="#+id/tvSettingsLabel_SD"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/sd_header_label"/>
<ListView
style="#style/SettingsListStyle"
android:id="#+id/lvOptions_SD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tvSettingsLabel_SD"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
<ImageView
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:background="#drawable/bg_listview_corners"/>
</RelativeLayout>
I added an ImageView on top of the relative layout matching the container.
This is the drawable I used for masking the layout.(bg_listview_corners.xml)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke
android:width="12dp"
android:color="#color/app_night_sky_color" />
<padding android:left="6px"
android:top="6px"
android:right="6px"
android:bottom="6px"/>
<corners android:radius="30dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="6dp"
android:color="#color/popup_bg_color" />
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>

How to configure a selector on a relativelayout in a listview

In an android listview each rowitem that has a relativelayout as its top level view. I want to have a selector on this relativelayout to indicate focused and pressed states. All answers that I have tried still do not work. Is this possible? Here is the code I am using:
##my_list_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/my_color_list_selected" />
<item android:state_activated="true" android:drawable="#drawable/my_color_list_selected" />
<item android:state_focused="true" android:drawable="#drawable/my_color_list_focused" />
<item android:state_selected="true" android:drawable="#drawable/my_color_list_focused" />
<item android:drawable="#drawable/my_color_list_default" />
</selector>
##my_color_list_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:endColor="#21d70076"
android:startColor="#21d70076"
android:angle="90"></gradient>
</shape>
##my_color_list_focused
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:endColor="#ffffff"
android:startColor="#ffffff"
android:angle="90"></gradient>
<stroke android:width="2dp" android:color="#21d70076"/>
</shape>
##my_color_list_default
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#ffffff"></solid>
</shape>
## List View
<LinearLayout 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"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="top">
<com.mydemo.app.util.ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="#android:color/transparent"
/>
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminateDrawable="#drawable/progress_rotate"
android:visibility="gone" />
<TextView
android:id="#android:id/empty"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="#string/no_content"
android:layout_gravity="center"
android:visibility="gone"/>
</LinearLayout>
##ROW VIEW
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:background="#drawable/my_list_selector">
<TextView
android:id="#+id/episode_number"
android:layout_toRightOf="#+id/image_frame"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/gridview_row_margins"
android:layout_marginRight="#dimen/gridview_row_margins"
android:layout_marginTop="#dimen/gridview_row_margins"
/>
<TextView
android:id="#+id/description"
android:layout_toRightOf="#+id/image_frame"
android:layout_below="#+id/episode_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/gridview_row_margins"
android:layout_marginRight="#dimen/gridview_row_margins"
android:lines="1"
android:ellipsize="end"/>
</RelativeLayout>
UPDATE:
* The issue was resolved unrelated to this code. There was a hard coded background inadvertently being set in the adapater. This code actually does work.

how to make card list in android

I was looking for some ListView, styling techniques and I found this one Post-How to make card List, I wanted the ListItems to be just like this :
list_item_background.xml is :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>
</item>
I have implemented that in my RowOfListView.xml like :
<?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="wrap_content"
android:layout_margin="#dimen/ten"
android:background="#drawable/list_item_background" >
<ImageView
android:id="#+id/imageView_in_row"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/row_member_name"
android:layout_marginBottom="#dimen/ten"
android:layout_marginLeft="#dimen/five"
android:background="#drawable/rectangle"
android:contentDescription="#string/image"
android:src="#drawable/member" />
<TextView
android:id="#+id/row_member_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/ten"
android:layout_marginRight="#dimen/ten"
android:layout_marginTop="#dimen/ten"
android:layout_toRightOf="#+id/imageView_in_row"
android:ellipsize="end"
android:text="Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
.
.
.
</RelativeLayout>
But I'm getting this one :
unable to get that margin between Items of ListView as in prior picture, where I should set that margin.

You can try like this for listview row xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/outer"
style="#style/CardOuterStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_white"
android:orientation="vertical" >
//your fields here
</LinearLayout>
</FrameLayout>
and CardOuterStyle
<style name="CardOuterStyle">
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
<item name="android:paddingTop">5dp</item>
</style>

You should set the dividerHeight of the ListView as :
<ListView android:id="#+id/MyListView"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:divider="#android:color/transparent"
android:dividerHeight="#dimen/ten"/>
Alternatively, you may also give padding in your relative layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten"
android:background="#drawable/list_item_background"
android:paddingTop="#dimen/five"
android:paddingBottom="#dimen/five" >

Tab Selection Indicator

In my app i am using Tabs, by default it looks like this:
and now, i want to show different color [like:dark blue] for selected tab in rounded corner shape
I am using below XMLs to create above Tabs
using this to create rounded shape tabs, with white corner, mytab_custom.xml:-
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#44b8ec"/>
<stroke android:width="1dp"
android:color="#ffffff" />
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp" />
</shape>
and using this, to show Image in Tabs, tab_contact.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/birthday_text"
android:state_selected="true" />
<item android:drawable="#drawable/birthday_text" />
</selector>
tab_indicator.xml:-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="40dip"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/icon"
/>
</RelativeLayout>
main.xml:-
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/btn_background"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/check"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>

The problem might lie here:-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/birthday_text"
android:state_selected="true" />
<item android:drawable="#drawable/birthday_text" />
</selector>
try using a different image here:-
<item android:drawable="#drawable/birthday_text"
android:state_selected="true" />