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>
Related
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" />
I have 3 ToggleButtons in a row as you can see in the screenshot:
I would like to have the following layout modifications:
There should be rims separating the Toggle Buttons
The fill in color of the unchecked Toggle Buttons should be white while the fill in color of the checked Toggle Button should be green sucht that you can see which of those is checked (I will make sure programatically that only one of those can be checked)
Here is my XML layout for the Toggle Buttons inside a Liner Layout:
<LinearLayout
android:id ="#+id/linearLayoutForButtons"
android:layout_width="0dp"
android:layout_height="#dimen/_25sdp"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<ToggleButton
android:id="#+id/button_1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAllCaps="false"
android:background="#95f9ad"
android:layout_weight="1"
android:checked="true"
android:textOn="Button 1"
android:textOff="Button 1"
android:textSize="#dimen/_8ssp"
app:layout_constraintTop_toTopOf="parent" />
<ToggleButton
android:id="#+id/button_2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#95f9ad"
android:layout_weight="1"
android:textAllCaps="false"
android:checked="false"
android:textSize="#dimen/_8ssp"
android:textOn="Button 2"
android:textOff="Button 2" />
<ToggleButton
android:id="#+id/button_3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#95f9ad"
android:textAllCaps="false"
android:layout_weight="1"
android:checked="false"
android:textSize="#dimen/_8ssp"
android:textOn="Button 3"
android:textOff="Button 3"/>
</LinearLayout>
Any idea how I can do that? It should actually look similar to the ToggleButtons used hereenter link description here
Reminder: Does anyone have an idea how to do that? I'll appreciate every comment.
We can also create it like this
Perhaps this is more of what you are looking for. This does require some changes.
activity_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/root_view_background"
android:padding="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ToggleButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_1_selector"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ToggleButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_2_selector"
app:layout_constraintStart_toEndOf="#id/button1"
app:layout_constraintTop_toTopOf="#id/button1" />
<ToggleButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_3_selector"
app:layout_constraintStart_toEndOf="#id/button2"
app:layout_constraintTop_toTopOf="#id/button1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Drawable root_view_background.xml (This is the black outlining)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#color/black" android:width="1dp" />
<corners android:radius="3dp" />
</shape>
Drawable button_1_background_checked (This is the green background for the left button)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_green_light" />
<corners android:topLeftRadius="3dp" android:bottomLeftRadius="3dp" />
</shape>
Drawable button_2_background_checked (This is the green background for the middle button)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_green_light" />
</shape>
Drawable button_3_background checked (This is the green background for the right button)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_green_light" />
<corners android:topRightRadius="3dp" android:bottomRightRadius="3dp" />
</shape>
Drawable button_1_selector (This changes the background of the first button when it's checked or not)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_1_background_checked" android:state_checked="true" />
<item android:drawable="#color/white" android:state_checked="false" />
</selector>
Drawable button_2_selector (This changes the background of the second button when it's checked or not)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_2_background_checked" android:state_checked="true" />
<item android:drawable="#color/white" android:state_checked="false" />
</selector>
Drawable button_3_selector (This changes the background of the last button when it's checked or not)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_3_background_checked" android:state_checked="true" />
<item android:drawable="#color/white" android:state_checked="false" />
</selector>
I have a shape drawable resource file.
it's the drawable.xml code below.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-2dp"
android:bottom="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke android:width="#dimen/px02"
android:color="#color/white" />
</shape>
</item>
</layer-list>
and this is layout xml code.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray333"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!!!"
android:textColor="#color/black"
android:background="#drawable/bg_category_border"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
and the result is this.
you can see the white bar on the left side.
and i want to make the bar size shorter top and bottom as high as the TextView's text.(the red line)
i tried to give a padding and size in the drawable.xml.
and i set android:includeFontPadding on the TextView.
but it didn't work.
how can i make it??
i was able to do it like this
It was little bit tricky to remove padding from bottom and top, but you can try the following xml and do some adjustments as u like.
bg_category_border.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="1dp"
android:color="#color/white" />
</shape>
</item>
</layer-list>
layout xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3C3C3C"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/bg_category_border"
>
<TextView
android:textSize="50sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!!!"
android:includeFontPadding="false"
android:layout_marginBottom="-8dp"
android:layout_marginTop="-10dp"
android:textColor="#color/black"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
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>
I am trying to make the seekbar below
appear like this
i use the following xml attribute with minheight and maxheight but the thumb is not moving to bottom.
The minHeight and maxHeight only affect the seekbar. How can i achieved desired result i.e. thumb at seekbar bottom.
<SeekBar
android:id="#+id/seekbar_duree"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/eight_dp"
android:layout_marginRight="#dimen/eight_dp"
android:background="#color/fulll_transparent"
android:indeterminate="false"
android:max="48500"
android:maxHeight="60dip"
android:minHeight="60dip"
android:indeterminateDrawable="#android:drawable/progress_indeterminate_horizontal"
android:paddingLeft="#dimen/twenty_sp"
android:thumb="#drawable/nine_patch"
android:progressDrawable="#drawable/progress_bar"
/>
:UPDATE: THIS IS MY THUMB. HOW CAN I PUT IT BELOW THE PROGRESS
I use xml-thumb like this with seek_thumb.9.png wich has the same physical size like min/maxHeight value defined on seekbarlayout
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="false">
<item android:state_pressed="true"
android:drawable="#drawable/seek_thumb_pressed_60" />
<item android:state_focused="true"
android:drawable="#drawable/seek_thumb_pressed_60" />
<item android:drawable="#drawable/seek_thumb_60" />
<item >
<shape android:shape="rectangle" />
</item>
</selector>
seekbar-layout also referencing xml-seekbar
<SeekBar
android:id="#+id/seekbar"
android:layout_width="320dp"
android:layout_height="60dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="10dp"
android:max="30"
android:maxHeight="60dp"
android:minHeight="60dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:progress="15"
android:progressDrawable="#drawable/seekbar"
android:secondaryProgress="0"
android:thumb="#drawable/seek_thumb"
android:thumbOffset="0dp" />
seekbar.xml using *.9.png
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+android:id/background">
<nine-patch
android:dither="true"
android:src="#drawable/seekbar_back_60" />
</item>
<item android:id="#+android:id/progress">
<clip
android:clipOrientation="horizontal"
android:gravity="left">
<shape android:shape="rectangle" />
<nine-patch
android:dither="true"
android:src="#drawable/seekbar_front_60" />
</clip>
</item>
</layer-list>