How to change checkbox like this? - java

I need to change checkbox from
to

I found that to change color of tick mark you have to put selectors:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/checked" />
<item android:state_checked="false" android:drawable="#drawable/unchecked" />
</selector>
In xml:
<CheckBox
android:id="#+id/cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/your_selector"/>

create xml file
coustom_check_box.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/checked" />
<item android:state_checked="false" android:drawable="#drawable/unchecked" />
</selector>
In checkbox set android:button property to the custom_checkbox_design.xml drawable like
android:button="#drawable/coustom_check_box"
<CheckBox
android:id="#+id/checkBoxCustomized1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Coustom Checkbox"
android:checked="true"
android:button="#drawable/coustom_check_box"
android:textSize="20dp" />
icons

Create a drawable custom_cheackbox:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/checkbox_not_selected"android:state_checked="false"/>
<item android:drawable="#drawable/checkbox_selected" android:state_checked="true"/>
<item android:drawable="#drawable/checkbox_not_selected"/>
</selector>
add your custom background inside custom_checkbox android:button="#drawable/custom_cheackbox"
<CheckBox
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="#drawable/checkbox_selector"
android:text="CheckBox"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/Black" />

Related

Android studio custom icon state_focused not working

custom_email_icon.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/ic_email_focused"/>
<item android:state_focused="false"
android:drawable="#drawable/ic_email"/>
</selector>
activity_main.xml
<EditText
android:id="#+id/emailText"
android:layout_width="301dp"
android:layout_height="48dp"
android:layout_marginTop="100dp"
android:ems="10"
android:background="#drawable/custom_input"
android:drawableStart="#drawable/custom_email_icon"
android:drawablePadding="12dp"
android:paddingStart="12dp"
android:paddingEnd="12dp"
android:hint="Email Address"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Icon color change not working when I clicked to text. Same problem with the password line.
Instead of a focused state, you can add a selector for a pressed and selected state like following
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false"
android:state_enabled="true"
android:drawable="#drawable/ic_email" />
<item android:state_window_focused="false"
android:state_enabled="false"
android:drawable="#drawable/ic_email" />
<item android:state_pressed="true"
android:drawable="#drawable/ic_email_focused" />
<item android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/ic_email_focused" />
<item android:state_enabled="true"
android:drawable="#drawable/ic_email" />
<item android:state_focused="true"
android:drawable="#drawable/ic_email_focused" />
<item android:drawable="#drawable/ic_email" />
</selector>
All problem is this code line, I just removed it and fixed; idk why automatically its cames when I add vector.
android:tint="?attr/colorControlNormal"

Strange layout rendering created with xml in andoid

I want to arrange buttons evenly on the layout using styles to make my code simple. So why buttons have different distance between each other and ViewGroup? Am I right that attributes defined in the xml file overrides style's attributes?
// xml code for the activity
<?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">
<Button
style="#style/style1"
android:id="#+id/b1"
android:text="button1"
app:layout_constraintBottom_toTopOf="#+id/b2" />
<Button
style="#style/style1"
android:id="#+id/b2"
android:text="button2"
app:layout_constraintTop_toBottomOf="#+id/b1"
app:layout_constraintBottom_toTopOf="#+id/b3" />
<Button
style="#style/style1"
android:id="#+id/b3"
android:text="button3"
app:layout_constraintTop_toBottomOf="#+id/b2"/>
</androidx.constraintlayout.widget.ConstraintLayout>
// used style
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="style1">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">10dp</item>
<item name="android:textColor">#color/teal_200</item>
<item name="layout_constraintTop_toTopOf">parent</item>
<item name="layout_constraintLeft_toLeftOf">parent</item>
<item name="layout_constraintRight_toRightOf">parent</item>
<item name="layout_constraintBottom_toBottomOf">parent</item>
</style>
</resources>
What the three buttons have in common is layout_constraintEnd_toEndOf and layout_constraintStart_toStartOf.
So in style you will only define these two attributes of layout_constraint.
STYLE
<style name="style1" parent="Widget.AppCompat.Button.Colored">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">10sp</item>
<item name="android:textColor">#color/teal_200</item>
<!-- layout_constraint attributes -->
<item name="layout_constraintEnd_toEndOf">parent</item>
<item name="layout_constraintStart_toStartOf">parent</item>
</style>
your_activity.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=".YourActivity">
<Button
android:id="#+id/b1"
style="#style/style1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/b2"
/>
<Button
android:id="#+id/b2"
style="#style/style1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"
app:layout_constraintTop_toBottomOf="#+id/b1"
app:layout_constraintBottom_toTopOf="#+id/b3"
/>
<Button
android:id="#+id/b3"
style="#style/style1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button3"
app:layout_constraintTop_toBottomOf="#+id/b2"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
With this code, AndroidStudio will point out an error in the xml file, after all the ConstraintLayout was not made to define its attributes from style. But your app will run normally.
Don't forget to put your your ActivityClass in tools:context=".ActivityClass".
Tip: when you want to set a text size in any android xml, you should use "sp" instead of "dp".
Example
Incorrect:
<item name="android:textSize">10dp</item>
Correct
<item name="android:textSize">10sp</item>

Android: FragmentTabHost Widget not displaying Title

Im trying to design a custom TabWidget with FragentTabHost following these two guides for the tab layout:
https://maxalley.wordpress.com/2014/09/08/android-styling-a-tab-layout-with-fragmenttabhost-and-fragments/
http://joshclemm.com/blog/custom-android-tabs/
Im building FragmentTabHost with three fragments, the first fragment have a expandable list view.
Everything works fine, i can set backgroundcolor, the icon (if i want to) and the indicator works as well, as the divider does(if i want to) but the tabtitle does not appear for some reason and i cant find the reason why it dont show up.
If i remove tab_indicator.xml from android:background="#drawable/tab_indicator" in tab_layout.xml and set the backgroundcolor to whatever color the tab title shows up, but then i obviuosly dont get the indicators.
Do anyone have a clue whats wrong and what im missing. I have tried to solve this problem and searching för some days now and it starts to get very frustrating because its seems like something simple.
tab_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/tab_indicator">
<TextView
android:id="#+id/tabText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical|center_horizontal"
android:textColor="#drawable/tab_text"
android:textSize="15dp"
/>
</LinearLayout>
tab_indicator.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states-->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected" />
<!-- Focused states-->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected" />
<!-- Pressed-->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_pressed" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_pressed" />
</selector>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.app.FragmentTabHost
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/tabHost"
android:layout_gravity="center_horizontal"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="35dp"
android:showDividers="middle"
android:layout_weight="0"
android:orientation="horizontal"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</FrameLayout>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
tab_selected.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="-7dp" android:bottom="0dp" android:left="-7dp" android:right="-7dp">
<shape
android:shape="rectangle">
<padding android:left="10dp"
android:top="15dp"
android:right="10dp"
android:bottom="15dp" />
<stroke android:width="4dp" android:color="#FF00ccff" />
<solid android:color="#2fff00"
/>
</shape>
</item>
</layer-list>
Solved it, if i change android:layout_height in FragmentTabHost and TabWidget it displays the text, simple as that. But in my tast the height is to big ^^ I want it to be smaller like 35dp and it can be done if i change the padding in tab_selected.xml, _unselected and _pressed, and then i can change the height in TabWidget activity_main.xml else the text wont fit the tab.

change Image Button System Resource when clicked

I want to change e.g. the btn_star_big_off to btn_star_big_on
Everytime someone clicks on the button the state of that should change. Toogle would be perfect, but I don't know how to combine that. And I don't know how to change state of the button. I found out that I could do that with the drawable XML File but there I only have access to the images I imported, but not the the system resource ones?
The Button:
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#android:drawable/btn_star_big_off" />
And here is the trial from my drawable XML:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="#drawable/button"/>
<!-- default -->
</selector>
You need to use ToggleButton
1) In your layout, implement ToggleButton
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1">
<ToggleButton
android:layout_width=0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:background="#drawable/my_button"
android:text=""
android:textOff=""
android:textOn=""/>
</TableRow>
2) Creation xml layout in drawable directory ( here my_button.xml )
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:drawable/btn_star_big_on" android:state_pressed="true"/><!-- pressed -->
<item android:drawable="#android:drawable/btn_star_big_on" android:state_focused="true"/><!-- focused -->
<item android:drawable="#android:drawable/btn_star_big_on" android:state_checked="true"/>
<item android:drawable="#android:drawable/btn_star_big_off" android:state_checked="false"/>
<item android:drawable="#android:drawable/btn_star_big_off"/> <!-- default -->
</selector>
here i add an another state, if you want to have an focused img

Problem creating a custom ListView selector

When I try clicking on a a listview item no selector is shown. Here is my ListView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/streamRelativeLayout">
<ListView android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="#+id/streamListView" android:cacheColorHint="#00000000" android:fadingEdge="none" android:listSelector="#drawable/swipeview_list_selector"> </ListView>
<TextView android:layout_centerInParent="true" android:layout_height="wrap_content" android:id="#+id/noStreamTextView" android:layout_width="wrap_content" android:text="No Stream Available" android:visibility="invisible"></TextView>
<ProgressBar android:layout_centerInParent="true" android:layout_height="wrap_content" android:id="#+id/streamProgressBar" android:layout_width="wrap_content"></ProgressBar>
</RelativeLayout>
Here is my selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_focused="true"
android:drawable="#drawable/stocks_gradient" />
<item android:state_pressed="true"
android:drawable="#drawable/stocks_gradient" />
<item android:state_focused="true"
android:drawable="#drawable/stocks_gradient" />
</selector>
Here is the gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ECECEC"
android:centerColor="#F6F6F4"
android:endColor="#F8F8F6"
android:angle="90"
android:dither="true"
/>
</shape>
I am also setting the background color to alternate in getView()
int colorPos = position % colors.length;
v.setBackgroundColor(colors[colorPos]);
If you mean that selected item is not displayed the way you want, then that's because you missed the state_selected case:
<item android:state_selected="true" android:drawable="..."/>
The first issue I see is that all of your states use the same drawable, so you wouldn't see a change when you click on it. And you haven't accounted for all of the cases, for example you have no default state.
i need to set the selectorontop property to true.

Categories

Resources