I've migrated my project to AndroidX. My MainActivity extend FragmentActivity my first SwitchCompat looks all white, it doesn't have any color at all when I first time come to that screen. SwitchCompat is white. All other SwitchCompact under it are with correct color. If I press back and come again to that screen, my first SwitchCompact receive correct color and looks fine.
If I change that my MainActivty extend AppCompactActivity, then everything is ok when I first time reach that screen. Does anyone know where is problem here because before migration my MainActivity also extend FragmentActivity and everything was fine.
My xml code is the same in the both case:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".BlankFragment">
<androidx.appcompat.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<androidx.appcompat.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
I didn`t go deep why this problem occurs when you extend FragmentActivity. but to show appropriate colors on the action event of "SwitchCompat" can achievable by using custom track and thumb.
your switch button
<androidx.appcompat.widget.SwitchCompat
android:id="#+id/sw_autoplay"
android:layout_width="44dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:paddingStart="4dp"
android:paddingEnd="4dp"
android:textOff=""
android:textOn=""
android:theme="#style/SwitchButtonTheme"
android:thumb="#drawable/thumb"
app:track="#drawable/track" />
thumb
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="oval">
<solid android:color="#ffffff" />
<size android:width="20dp" android:height="20dp" />
<stroke android:width=".5dp" android:color="#A4A0A0" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="oval">
<solid android:color="#ffffff" />
<size android:width="20dp" android:height="20dp" />
<stroke android:width=".5dp" android:color="#57F47F" />
</shape>
</item>
track
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#ffffff" />
<stroke android:width=".3dp" android:color="#A4A0A0" />
<size android:height="20dp" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#57F47F" />
<stroke android:width=".3dp" android:color="#A4A0A0" />
<size android:height="20dp" />
</shape>
</item>
It`s just for when you want you to use "FragmentActivity".
Related
Why are there opaque areas?
I made a custom drawable,
but the same phenomenon as the image occurred.
i test phone Samsung A30, Pixel 4a
drawable/alarm_list_reward_start.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="2.0dp"
android:color="#000000" />
<solid android:color="#FFEB2A" />
<corners android:radius="10.0dp" />
</shape>
</item>
</layer-list>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginStart="12.0dp"
android:layout_marginEnd="12.0dp"
android:layout_marginBottom="50.0dp">
<TextView
android:id="#+id/rewardBtn"
android:layout_width="match_parent"
android:layout_height="44.0dp"
android:focusable="false"
android:background="#drawable/alarm_list_reward_start"
android:gravity="center"
android:textColor="#000000"
android:textSize="15.0dp"
android:textStyle="bold" />
</RelativeLayout>
This is happening, as you are using android:layout_width="match_parent". You can solve this issue by using wrap_content. Or you could set custom width and height of the layer list, such as,
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size android:width="152dp" android:height="152dp" />
<solid android:color="#00FFFFFF" />
<stroke android:width="2.0dp" android:color="#000000" />
<solid android:color="#FFEB2A" />
<corners android:radius="10.0dp" />
</shape>
</item>
</layer-list>
I have created a custom circular button using the following :
<Button
android:id ="#+id/StartButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:background="#drawable/button_bg_round"
android:padding="15dp"
android:textSize="30sp"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
Here button_bg_round is defined as below :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:color="#ffffff" android:width="5dp" />
<solid android:color="#3aeaee"/>
<size android:width="200dp" android:height="200dp"/>
</shape>
</item>
</selector>
Now, I want to add a circular ripple/pulse effect/animation when the button is clicked. I tried to look for a possible solution on google and SO but couldn't find any related to such a button. Any help would be much appreciated.
You can make you drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/colorAccent"
tools:targetApi="lollipop"> <!-- ripple effect color -->
<item android:id="#android:id/background">
<shape android:shape="oval">
<stroke android:color="#ffffff" android:width="5dp" />
<solid android:color="#3aeaee"/>
<size android:width="200dp" android:height="200dp"/>
</shape>
</item>
</ripple>
where android:color inside ripple is the color of the effect.
I have my ImageView defined in XML like this:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fragment_imageView"
android:src="#drawable/ic_photo"
android:background="#drawable/button_state_list_drawable" />
The button_state_list_drawable.xml is:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_pressed_state_drawable"
android:state_pressed="true" />
<item android:drawable="#drawable/button_enabled_state_drawable"
android:state_enabled="true" />
</selector>
The button_pressed_state_drawable.xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<size android:width="50dp"
android:height="50dp" />
<padding android:left="25dp"
android:right="25dp"
android:top="25dp"
android:bottom="25dp" />
<stroke android:color="#fff"
android:width="1dp" />
<solid android:color="#1aafd0" />
</shape>
The button_enabled_state_drawable.xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<size android:width="50dp"
android:height="50dp" />
<padding android:left="25dp"
android:right="25dp"
android:top="25dp"
android:bottom="25dp" />
<stroke android:color="#fff"
android:width="1dp" />
<solid android:color="#android:color/transparent" />
</shape>
The problem is that when I click/touch the ImageView, the button_pressed_state_drawable does not seem to be used, i.e. I can't see the <solid android:color="#1aafd0" /> in action (which is basically the only difference between the two drawables), i.e the background color is still transparent instead of changing to blue. Where am I messing up?
I think your ImageView is not clickable.
Try to make it clickable by using ImageView.setClicked(true).
or
android:clickable="true"
Also make sure that your image resource is not covered your background.
This is what i've done which works fine.
<ImageView
android:id="#+id/fragment_imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_state_list_drawable"
android:clickable="true"
android:padding="20dp"
android:src="#drawable/ic_launcher"/>
<item android:drawable="#drawable/button_pressed_state_drawable"
android:state_pressed="true" />
<item android:drawable="#drawable/button_enabled_state_drawable"
android:state_enabled="true" />
A button can be both "pressed" and "enabled." Try removing android:state_enabled="true" from the 2nd item.
I have two different set of buttons, one in the activity and one inside a listview. They have very similar code, but display two different styles.
The header set of buttons code :
<Button
android:id="#+id/invoices_1year"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="0.2"
android:onClick="refresh"
android:text="#string/Invoices_1_year" />
while the Listview's buttons code is :
<Button
android:id="#+id/invoiceButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="0.25"
android:text="View Pdf" />
The Xml for Listview for #ir2pid :
<ListView
android:id="#+id/InvoiceList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/searchArea" />
The output I get on my device :
My expected results is that both the button sets look the same.
In drawable folder create round.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="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#e4d46f" android:endColor="#e4d079" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#c7cf2d" />
<solid android:color="#e9da67"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#e7d851" />
<gradient android:angle="-90" android:startColor="#e4d079" android:endColor="#87cf8d" />
</shape>
</item>
</selector>
And in button add
android:background="#drawable/round"
Following Bala Raja answer , I found the generic material design button xml and modified it to only use my specified color.
This is my round.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_button_inset_horizontal_material"
android:insetTop="#dimen/abc_button_inset_vertical_material"
android:insetRight="#dimen/abc_button_inset_horizontal_material"
android:insetBottom="#dimen/abc_button_inset_vertical_material">
<shape android:shape="rectangle">
<corners android:radius="#dimen/abc_control_corner_material" />
<solid android:color="#color/ButtonGray" /> // My CUSTOM COLOR
<padding android:left="#dimen/abc_button_padding_horizontal_material"
android:top="#dimen/abc_button_padding_vertical_material"
android:right="#dimen/abc_button_padding_horizontal_material"
android:bottom="#dimen/abc_button_padding_vertical_material" />
</shape>
and in the buttom xml change the backgorund toandroid:background="#drawable/round"
I'm trying to make the edittext background just a straight line instead of usual. I used custom drawable shape for that. But the line is getting added in the middle of the edittext instead of bottom as the regular edittext line. Also when I press enter, it doesn't remain below the cursor as it should be. Is there any good way to do this?
Custom Drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:color="#FA58AC"
android:width="1dp"/>
</shape>
use this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/white" />
<stroke
android:width="1dp"
android:color="#android:color/holo_green_light" />
</shape>
</item>
</layer-list>
I think It will be helpful for you.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
// Your line color
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
// Your background color
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Name"
android:textSize="10sp"
android:textColor="#color/color_black_light"
android:paddingLeft="10dp"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:layout_marginTop="-10dp"
android:padding="10dp"
android:hint="Name"
android:inputType="text"
android:textColor="#color/black"
android:textColorHint="#color/color_black_light"
android:textCursorDrawable="#null" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/edittext_line_color" />