I have a custom button button.xml. Its default (unpressed) drawable is button_unclicked.xml and the button_clicked.xml is called when the button is clicked. The problem is the button doesn't display its clicked and unclicked drawables, but only a text inside the button (there is no borders).
I'm setting my custom button as a background:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/apply"
android:id="#+id/button_apply"
android:onClick="Apply"
android:layout_marginBottom="10dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/button" />
button_clicked:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#FFE75C" />
</shape>
button_unclicked:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
</selector>
button.xml:
<item android:state_pressed="true"
android:drawable="#drawable/button_clicked">
</item>
<item android:state_pressed="false"
android:drawable="#drawable/button_unclicked">
</item>
output (there should be borders but there aren't):
// try this
drawable/selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="false" >
<shape
android:shape="rectangle" >
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
</item>
<item android:state_enabled="true" android:state_focused="false" android:state_pressed="false" >
<shape android:shape="rectangle" >
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#FFE75C" />
</shape>
</item>
<item android:state_pressed="true" >
<shape
android:shape="rectangle" >
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
</item>
<item android:state_focused="true" >
<shape
android:shape="rectangle" >
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
</item>
</selector>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button"
android:padding="5dp"
android:background="#drawable/selector"/>
Try following this template:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_default_normal_holo_light" android:state_enabled="true" android:state_window_focused="false"/>
<item android:drawable="#drawable/btn_default_disabled_holo_light" android:state_enabled="false" android:state_window_focused="false"/>
<item android:drawable="#drawable/btn_default_pressed_holo_light" android:state_pressed="true"/>
<item android:drawable="#drawable/btn_default_focused_holo_light" android:state_enabled="true" android:state_focused="true"/>
<item android:drawable="#drawable/btn_default_normal_holo_light" android:state_enabled="true"/>
<item android:drawable="#drawable/btn_default_disabled_focused_holo_light" android:state_focused="true"/>
<item android:drawable="#drawable/btn_default_disabled_holo_light"/>
</selector>
You don't have to put all of the <item> tags.
Related
I would like to have my switch to have both the state as shown below
<androidx.appcompat.widget.SwitchCompat
android:id="#+id/toggleNight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:textColor="#color/colorViews"
android:textOff="Day Mode"
android:textOn="Night Mode"
android:thumb="#drawable/custom_thumb"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:track="#drawable/custom_track">
</androidx.appcompat.widget.SwitchCompat>
custom_thumb.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_nights_stay"
android:state_checked="false">
</item>
<item android:drawable="#drawable/ic_wb_sunny"
android:state_checked="true">
</item>
</selector>
custom_track.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<solid android:color="#ffffff" />
<stroke android:width="1dp" android:color="#8c8c8c" />
<size android:width="40dp" android:height="40dp" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<solid android:color="#fff" />
<stroke android:width="1dp" android:color="#8c8c8c" />
<size android:height="40dp"
android:width="40dp"
/>
</shape>
</item>
</selector>
the above code hides one of the state which is not active. Any idea of how to have both the views in switch.
I am going to customize the Seekbar in Android and I am having one problem with it.
This is what I am going to do :
This is now I get :
And Here is my code:
<SeekBar
android:id="#+id/blueSlider"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="50dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="10dp"
android:splitTrack="false"
android:maxHeight="40dp"
android:shape="oval"
android:thumbOffset="-20dp"
android:secondaryProgress="0"
android:progressDrawable="#drawable/styled_progress"
android:max="#integer/slider_max_value"
android:thumb="#drawable/oval_seekbar_thumb"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/blueText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
styled_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<corners
android:radius="25dp"/>
<gradient
android:startColor="#color/gradient_start"
android:endColor="#color/gradient_end"
android:angle="0" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners
android:radius="90dp"/>
</shape>
</clip>
</item>
</layer-list>
oval_seekbar_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/white" />
<size android:height="25dp" android:width="25dp"/>
</shape>
</item>
</selector>
Please help me on this problem.(missing white line)
Thank you
you can try adding a margin around your secondary progress
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- BACKGROUND-->
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<corners
android:radius="25dp"/>
<size android:height="30dp"
android:width="200dp" />
<gradient
android:startColor="#color/primary"
android:endColor="#color/primary_light"
android:angle="0" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress"
android:left="10dp"
android:top="14dp"
android:right="10dp"
android:bottom="14dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
How can I create shape with state in Kotlin(or java)
for example I want create below shape with Kotlin(or java)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_pressed="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="999dp" />
<stroke android:width="6dp" android:color="#bfbfbf" />
<solid android:color="#f44336" />
</shape>
</item>
<item android:state_pressed="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="999dp" />
<stroke android:width="2dip" android:color="#E0E0E0" />
<solid android:color="#f44336" />
</shape>
</item>
<item android:state_checked="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="999dp" />
<stroke android:width="2dip" android:color="#E0E0E0" />
<solid android:color="#f44336" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="999dp" />
<stroke android:width="6dp" android:color="#bfbfbf" />
<solid android:color="#f44336" />
</shape>
</item>
I see this link1 and link2 but i wonder how to create state to drawable
I've got custom seekbar with custom thumb. I used selector for pressed state, the problem is that when I press thumb on slider it get flat and it not back to normal size after.
My code:
thumb.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/thumb2" android:state_pressed="true"/>
<item android:drawable="#drawable/thumb2" android:state_selected="true"/>
<item android:drawable="#drawable/thumb1" android:state_pressed="false"/>
<item android:drawable="#drawable/thumb1"/>
</selector>
thumb1.xml:
<size android:height="30dp" android:width="30dp"/>
<stroke android:width="18dp" android:color="#882EA5DE"/>
<solid android:color="#2EA5DE" />
<corners android:radius="1dp" />
</shape>
thumb2.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:height="40dp" android:width="40dp"/>
<stroke android:width="18dp" android:color="#882EA5DE"/>
<solid android:color="#2EA5DE" />
<corners android:radius="1dp" />
</shape>
tstyle.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#android:id/background"
android:drawable="#drawable/tbackground"/>
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/tprogress" />
</item>
tprogress.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="1dp" android:color="#2EA5DE"/>
<corners android:radius="1dp" />
</shape>
seekbar:
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-3dp"
android:padding="0dp"
android:progressDrawable="#drawable/tstyle"
android:thumb="#drawable/thumb"
android:thumbOffset="0dp" />
I need that the thumb is only bigger when I press on it. But result is that:
And this is normal state (not pressed):
I want a button to look activated (transparent) from the start.
My selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" >
<shape>
<solid
android:color="#android:color/transparent" />
</shape>
</item>
<item android:state_pressed="false" android:state_focused="false" android:state_activated="false">
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
</shape>
</item>
And the code of the button:
<Button
android:background="#drawable/my_bg"
android:state_activated="true"
/>
The default color of the button is red, so I guess the problem is in android:state_activated="true". How can I solve this?
please use this it will help you
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true"><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#2d7ebb" />
<corners android:radius="5dp">
<stroke android:width="2dip" android:color="#2d7ebb" />
</corners>
</shape></item>
<item android:state_pressed="true"><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#2d7ebb" />
<corners android:radius="5dp">
<stroke android:width="2dip" android:color="#2d7ebb" />
</corners>
</shape></item>
<item><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#55acee" />
<stroke android:width="2dip" android:color="#55acee" />
<corners android:radius="5dp" />
</shape></item>
</selector>