I've got problem with Android SeekBar.
When I use standard thumb (blue) it's OK, but when I use own theme like scrubber_control.xml there is problem - button is narrowed. I've tried setting minimal height, padding, adding height / width to scrubber_control item, but can't fix that strange issue.
layout
<SeekBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/question_seekbar"
android:thumb="#drawable/scrubber_control"
/>
scrubber_control.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/scrubber_control_disabled_holo" />
<item android:state_pressed="true" android:drawable="#drawable/scrubber_control_pressed_holo" />
<item android:state_selected="true" android:drawable="#drawable/scrubber_control_focused_holo" />
<item android:drawable="#drawable/scrubber_control_normal_holo" />
</selector>
Create custom shape xmls in drawables which define the height and width of thumb
that is used for all three shapes used in scrubber_control.xml
For Example :
In drawable folder add these xmls
custom_scrubber_control_pressed_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_pressed_holo"/>
</layer-list>
custom_scrubber_control_focused_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_focused_holo"/>
</layer-list>
custom_scrubber_control_disabled_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_disabled_holo"/>
</layer-list>
custom_scrubber_control_normal_holo.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/scrubber_control_normal_holo"/>
</layer-list>
After that you just need to change your selector like this.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/custom_scrubber_control_disabled_holo" />
<item android:state_pressed="true" android:drawable="#drawable/custom_scrubber_control_pressed_holo" />
<item android:state_selected="true" android:drawable="#drawable/custom_scrubber_control_focused_holo" />
<item android:drawable="#drawable/custom_scrubber_control_normal_holo" />
</selector>
Related
activity_main_tab_background
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item android:gravity="top">
<shape android:shape="rectangle">
<size android:height="#dimen/_5fdp"/>
<solid android:color="#color/red"/>
<corners android:bottomLeftRadius="#dimen/_3fdp"
android:bottomRightRadius="#dimen/_3fdp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
bottom navigation in main activity
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/main_bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#drawable/activity_main_tab_background"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/home_bottom_nav" />
My output
expected output
How can I change the indicator width?
<size android:height="#dimen/_5fdp" android:width="#dimen/_10fdp"/> // tried and not working
You can tackle this by designating the desired width in your drawable and use a center or center_horizontal gravity besides the top:
For API Level 23+:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item android:width="50dp" android:gravity="top|center_horizontal">
<shape android:shape="rectangle">
<size android:height="#dimen/_5fdp" />
<solid android:color="#color/red" />
<corners android:bottomLeftRadius="#dimen/_3fdp" android:bottomRightRadius="#dimen/_3fdp" />
</shape>
</item>
</layer-list>
</item>
</selector>
UPDATE:
The down side of the above is that the android:width is available at API level 23. But you can use it within the <size> tag to be available on any API level, and the result is the same:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item android:gravity="top|center_horizontal">
<shape android:shape="rectangle">
<size android:width="50dp" android:height="#dimen/_5fdp" />
<solid android:color="#color/red" />
<corners android:bottomLeftRadius="#dimen/_3fdp" android:bottomRightRadius="#dimen/_3fdp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Preview:
I tried this below code its showing normal effects.I want when i click on spinner the down should hide..
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90" android:endColor="#B3BBCC" android:startColor="#E8EBEF" android:type="linear" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:radius="4dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item>
<bitmap android:gravity="bottom|right" android:src="#drawable/spinner_arrow" />
</item>
</layer-list>
</item>
</selector>
Thank is Advance...
I have made my custom spinner like this follow these step:
Step 1: create one Drawable resource file inside your drawable folder say spinnerbg.xml and write below code in your xml file.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90"
android:endColor="#color/spinner"
android:startColor="#color/spinner"
android:type="linear" />
<corners android:radius="0dp" />
</shape>
</item>
<item>
<bitmap android:gravity="bottom|right"
android:src="#drawable/dropdown" />
</item>
</layer-list>
</item>
</selector>
Step:2 Inside your style.xml write below code
<style name="spinner_style" >
<item name="android:background">#drawable/spinnerbg</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
</style>
step:3 And finallay inside your spinner use style like this.
<Spinner
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</Spinner>
I have a custom SeekBar with a specific style:
<SeekBar
android:id="#+id/mediacontroller_progress"
style="#style/MediaSeekBar"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content" />
MediaSeekBar style:
<style name="MediaSeekBar" parent="android:Widget.SeekBar">
<item name="android:progressDrawable">#drawable/media_seek_bar</item>
<item name="android:minHeight">2dp</item>
<item name="android:maxHeight">2dp</item>
<item name="android:thumb">#drawable/media_seek_bar_thumb</item>
<item name="android:progress">0</item>
</style>
media_seek_bar drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="0dip" />
<solid android:color="#20ffffff" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="0dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="0dip" />
<solid android:color="#color/theme_accent_1" />
</shape>
</clip>
</item>
</layer-list>
media_seek_bar_thumb drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/control_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/control_pressed" />
<item android:state_selected="true"
android:drawable="#drawable/control_pressed" />
<item android:drawable="#drawable/control_normal" />
</selector>
And the result:
without press
when I press thumb
So the problem is the area arround the yellow circle: it's translucent in my png files but not in App.
Problem is in your images inside selector. Probably images have extra space. I have tried to run your code with custom drawable inside selector and it works fine. Here my circle drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ffe600"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
<SeekBar
android:splitTrack="false"
....
/>
Will be ok.
just set this code and work
android:thumbTint="#android:color/transparent" // this code for hide thumb
android:splitTrack="false" // this code for show correctly
hello all i need to remove the edittext default style i want to remove the selected portion from both the side on focus of edittext or on normal edittext i just want the simple black line on normal edittext and blue line on focus
I have created 1 xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape android:shape="line">
<!-- Draw a 2dp width border around shape -->
<stroke android:width="1dp" android:color="#color/blue" />
</shape>
<!-- Overlap the left, top and right border using background color -->
<item
android:bottom="1dp"
>
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
</shape>
</item> <!-- pressed -->
</item>
<item android:state_focused="true"><shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke android:width="1dp" android:color="#color/blue" />
</shape></item>
<!-- focused -->
<item><shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke android:width="1dp" android:color="#color/orange" />
</shape></item>
<!-- default -->
</selector>
but it giving me RECTANGLE i just want LINE #bottom
Create the new xml file inside drawable folder.
lets say
a.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" /> <!--background color of box-->
</shape>
</item>
<item
android:top="-2dp"
android:right="-2dp"
android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="<Focus color>" /> <!-- color of stroke -->
</shape>
</item>
</layer-list>
Create another new xml file in drawable, lets say
b.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" /> <!--background color of box-->
</shape>
</item>
<item
android:top="-2dp"
android:right="-2dp"
android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#8AC42F" /> <!-- color of stroke -->
</shape>
</item>
</layer-list>
Create another new xml file in drawable.
lets say
c.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true"
android:drawable="#drawable/a"></item>
<item android:drawable="#drawable/b">
</item>
</selector>
Try this code.
this is a selector file. it has to be made background to the edittext.
selector automatically switches between two drawable file acording to its (edittext's) state.
Using This EditText
<EditText
android:id="#+id/id_Login_emal_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/c"
android:ems="10"
android:padding="10dip"
android:hint="Email"
android:inputType="textEmailAddress"
>
Use properties that define color for edit text that is colorControlActivated, colorControlHighlight and colorControlNormal in your app theme for style.xml.
<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#color/blackColor</item>
<item name="colorControlActivated">#color/blueColor</item>
<item name="colorControlHighlight">#color/blueColor</item>
</style>
Use Selector for different edittext states:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_pressed="true" android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#drawable/twitter_im_edittext_focused" />
<item android:state_enabled="true" android:drawable="#drawable/twitter_im_edittext_normal" />
<item android:state_focused="true" android:drawable="#drawable/twitter_im_edittext_focused" />
<item android:drawable="#drawable/twitter_im_edittext_normal" />
</selector>
and your drawable would be as Jayanth sample:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" /> <!--background color of box-->
</shape>
</item>
<item
android:top="-2dp"
android:right="-2dp"
android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#8AC42F" /> <!-- color of stroke -->
</shape>
</item>
</layer-list>
Try this code:
edit_text.xml
<EditText
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/edit_text"
android:background="#drawable/custom_edit_text_black_line"
/>
Put the Xml file in Drawable Folder (custom_edit_text_black_line.xml)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
Put the Xml file in Drawable Folder (custom_edit_text_blue_line.xml)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
And in Activity write the below code :
edit_text.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if(hasFocus){
edit_text.setBackground(MainActivity.this.getResources().getDrawable(R.drawable.custom_edit_text_blue_line));
} else{
edit_text.setBackground(MainActivity.this.getResources().getDrawable(R.drawable.custom_edit_text_black_line));
}
}
});
Is it possible to use a XML-Background ressource with an drawable and a <shape> attribute?
So I have this button
<Button
android:layout_marginRight="5dp"
android:id="#+id/send_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/send_button" />
Which has a background send_button.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_send_white_48dp" android:state_focused="true"/>
<item android:drawable="#drawable/ic_send_white_48dp" android:state_pressed="true"/>
<item android:drawable="#drawable/ic_send_black_48dp"/>
</selector>
This works fine right now. But I also want to add a background-color behind the drawable and rounded corners like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="4dp" />
<gradient
android:angle="270"
android:endColor="#88b823"
android:startColor="#b0dc54" />
</shape>
So is it possible to combine these two XML ressources?
What I've tried so far, just displays the drawable and not the shape:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_send_white_48dp" android:state_focused="true"/>
<item android:drawable="#drawable/ic_send_white_48dp" android:state_pressed="true"/>
<item android:drawable="#drawable/ic_send_black_48dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="4dp" />
<gradient android:angle="270"
android:endColor="#88b823"
android:startColor="#b0dc54" />
</shape>
</item>
</selector>
Thanks to #CommonsWare for pointing me in the right direction. This is the working code (currently only for the default state):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_send_white_48dp" android:state_focused="true"/>
<item android:drawable="#drawable/ic_send_white_48dp" android:state_pressed="true"/>
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="#color/action_bar" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/ic_send_black_48dp" />
</item>
</layer-list>
</item>
</selector>