Not able to set gradient background of floating action button - android

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>

Related

How can i add custom background in BottomNavigationView

This is my xml code for bottommnavigationview
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:elevation="15dp"
android:fitsSystemWindows="true"
android:foreground="?attr/selectableItemBackground"
android:visibility="visible"
app:elevation="#dimen/margin_10dp"
app:itemBackground="?attr/backgroundColor"
app:itemIconSize="22dp"
app:itemIconTint="#color/bottom_navigation_text_selector"
app:itemTextAppearanceInactive="#style/BottomNavigation.InActiveItemTextAppearance"
app:itemTextAppearanceActive="#style/BottomNavigation.ActiveItemTextAppearance"
app:itemTextColor="#color/bottom_navigation_text_selector"
app:labelVisibilityMode="labeled"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/home_bottom_menu" />
See the red arrow i want to develop this background below my each selected item
Firstly you need to create a background drawable in drawable folder:
selected_item_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="12dp"
android:insetTop="12dp"
android:insetRight="12dp"
android:insetBottom="12dp"
android:visible="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listview_background_shape">
<corners android:radius="8dp" />
<solid android:color="#eeeeee" />
</shape>
</inset>
then you should create a selector in the drawable folder based on this background:
bottom_item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/selected_item_background" android:state_checked="true" />
<item android:drawable="#android:color/white" android:state_checked="false" />
</selector>
And then you just to need to add the attribute to your navigation view:
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:itemBackground="#drawable/bottom_item_selector"
...
app:menu="#menu/home_bottom_menu" />

customize and android seekbar

I am trying to customize and android seekbar use images for background and progress.
but result is wrong,
multiple background
resource image width=351px,height=110px,
background,
progress
android:progressDrawable="#drawable/drawable_clip_seek_bar" content
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background"
android:width="351dp"
android:height="110dp">
<bitmap android:src="#mipmap/seek_bar_background" />
</item>
<item
android:id="#android:id/progress"
android:width="351dp"
android:height="110dp">
<clip>
<bitmap android:src="#mipmap/seek_bar_progress" />
</clip>
</item>
</layer-list>
activity contentView
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
android:background="#color/cardview_dark_background">
<SeekBar
android:layout_width="351dp"
android:layout_height="110dp"
android:background="#null"
android:progressDrawable="#drawable/drawable_clip_seek_bar"
android:thumb="#null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Cursor and Underline missing in EditText

I am using an EditText inside a Toolbar, no matter what I do, cursor and underline doesn't appear
xml code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
app:collapseIcon="#drawable/ic_arrow_up_24dp"
app:titleTextColor="#color/white"
android:layout_alignParentTop="true"
android:animateLayoutChanges="true"
android:visibility="gone"
android:alpha="0.0"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<EditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:cursorVisible="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_height="wrap_content"
android:hint="Search..."
android:textCursorDrawable="#color/white"
android:textColor="#color/md_white_1000"
android:layout_marginRight="120dp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
kotlin code
editText?.visibility = View.VISIBLE
editText?.requestFocus()
editText?.isCursorVisible = true
editText.setRawInputType(InputType.TYPE_CLASS_TEXT);
editText.setTextIsSelectable(true);
Where am I going wrong, can anyone help?
This is because by default the underline and cursor of EditText is of colorAccent. So, if you want to change their color to suppose white, then you should define a style in styles.xml like this:
<style name="editText" parent="AppTheme">
<item name="colorAccent">#color/white</item>
</style>
And then apply this style as theme to edittext like this:
<EditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:cursorVisible="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_height="wrap_content"
android:hint="Search..."
android:textCursorDrawable="#color/white"
android:textColor="#color/md_white_1000"
android:theme="#style/editText"
android:layout_marginRight="120dp"
/>
define 4 XML files:
edit_text_cursor.xml a customized rectangle shape drawable, which changes the EditText's cursor.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white"/>
<size android:width="2dp"/>
</shape>
edit_text_underline.xml underline shape when EditText state not focused
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="0dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#android:color/darker_gray" />
<padding android:bottom="4dp" />
</shape>
</item>
</layer-list>
edit_text_underline_focused.xml underline shape when EditText state focused
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="0dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#android:color/white" />
<padding android:bottom="4dp" />
</shape>
</item>
</layer-list>
edit_text_underline_selector.xml display different shape drawable according to the EditText state(focused or not).
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/edit_text_underline_focused" android:state_focused="true"/>
<item android:drawable="#drawable/edit_text_underline" android:state_focused="false"/>
</selector>
change the EditText setting as blew:
xml code
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
app:collapseIcon="#drawable/ic_arrow_up_24dp"
app:titleTextColor="#color/white"
android:layout_alignParentTop="true"
android:animateLayoutChanges="true"
android:visibility="gone"
android:alpha="0.0"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical">
<EditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cursorVisible="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:hint="Search..."
android:textColor="#color/white"
android:background="#drawable/edit_text_underline_selector"
android:textCursorDrawable="#drawable/edit_text_cursor"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>

Perfect rounded corner using Shape

How can I make a perfect rounded corner? I have tried everything, but it is not coming out as I expected. Please help me out. Below is my code. By using that code, I am getting the image below.
XML
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/first_ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/tab_background_five">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:src="#drawable/settingshover" />
</FrameLayout>
</FrameLayout>
tab_background_five.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_bg_five" android:state_selected="true" />
<item android:drawable="#drawable/tab_bg_five_white" android:state_selected="false" />
tab_bg_five.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#CF5548" />
<corners
android:radius="3dp"
android:bottomRightRadius="30dp"
android:topRightRadius="30dp" />

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" >

Categories

Resources