View with "press" effect - android

Android Studio 3.6
in my xml layout:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/feedbackContainer"
android:layout_width="0dp"
android:layout_height="174dp"
app:layout_constraintEnd_toEndOf="#+id/checkContainer"
app:layout_constraintStart_toStartOf="#+id/checkContainer"
app:layout_constraintTop_toBottomOf="#+id/checkContainer">
<ImageView
android:id="#+id/feedbackViewCircle"
android:layout_width="124dp"
android:layout_height="124dp"
android:background="#drawable/circle_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/heartOutlineNotMadeContainer"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="#drawable/feedback_outline_bg"
app:layout_constraintBottom_toBottomOf="#+id/feedbackViewCircle"
app:layout_constraintEnd_toEndOf="#+id/feedbackViewCircle"
app:layout_constraintStart_toStartOf="#+id/feedbackViewCircle"
app:layout_constraintTop_toTopOf="#+id/feedbackViewCircle" />
<TextView
android:id="#+id/feedbackTextView"
style="#style/defaultTextStyle2"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="#string/feedback"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/feedbackViewCircle" />
</androidx.constraintlayout.widget.ConstraintLayout>
/circle_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/circle_paint_dark" android:state_enabled="false" />
<item android:drawable="#drawable/circle_paint" />
</selector>
/feedback_outline_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_heartoutlinemade" android:state_enabled="false" />
<item android:drawable="#drawable/ic_heartoutlinenotmade" />
</selector>
here background/feedbackViewCircle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/circle_paint_dark" android:state_enabled="false" />
<item android:drawable="#drawable/circle_paint" />
</selector>
And here result:
OK. It's work.
But I need to have "press" effect. Smt like this:


Make the View clickable and add selector for normal and pressed state background, which work perfectly.
<View
android:id="#+id/feedbackViewCircle"
android:layout_width="124dp"
android:layout_height="124dp"
android:clickable="true"
android:background="#drawable/circle_bg"
...
/>
circle_bg.xml for background selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/circle_paint_dark" android:state_pressed="true" />
<item android:drawable="#drawable/circle_paint" />
</selector>


Assuming I understand the question, my advice is that you use a style that extends Widget.Design.FloatingActionButton and then apply it to your view like so
<style name="FeedbackAppearance" parent="Widget.Design.FloatingActionButton">
<item name="android:layout_width">#dimen/some_width</item>
<item name="android:layout_height">#dimen/some_height</item>
<item name="android:layout_margin">#dimen/std_gap</item>
<item name="layout_anchorGravity">end|bottom</item>
...
</style>
// inside layout file
<View
style="#style/FeedbackAppearance"
...
/>
You can modify any of the following style attributes or add different ones.
<style name="Widget.Design.FloatingActionButton" parent="android:Widget">
<item name="android:background">#drawable/design_fab_background</item>
<item name="android:clickable">true</item>
<item name="android:focusable">true</item>
<item name="backgroundTint">?attr/colorAccent</item>
<item name="fabSize">auto</item>
<item name="elevation">#dimen/design_fab_elevation</item>
<item name="hoveredFocusedTranslationZ">#dimen/design_fab_translation_z_hovered_focused</item>
<item name="pressedTranslationZ">#dimen/design_fab_translation_z_pressed</item>
<item name="rippleColor">?attr/colorControlHighlight</item>
<item name="borderWidth">#dimen/design_fab_border_width</item>
<item name="maxImageSize">#dimen/design_fab_image_size</item>
<item name="showMotionSpec">#animator/design_fab_show_motion_spec</item>
<item name="hideMotionSpec">#animator/design_fab_hide_motion_spec</item>
</style>

Related

How to set underline color of TextInputLayout [duplicate]

This question already has an answer here:
TextInputLayout styling
(1 answer)
Closed 2 years ago.
I'm using com.google.android.material:material:1.1.0 on Android 9.0.
I want to set the underline color of TextInputLayout when it's not focused but nothing works.
My style:
<style name="EditTextTheme" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="colorAccent">#00BFFF</item>
<item name="colorControlNormal">#FFFF00</item>
<item name="colorControlActivated">#FF00FF</item>
<item name="colorControlHighlight">#FFFF00</item>
<item name="boxStrokeColor">#color/text_input_box_stroke</item>
</style>
My selector(text_input_box_stroke):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#00BFFF" android:state_focused="true"/>
<item android:color="#FFFF00" android:state_hovered="true"/>
<item android:color="#00FF00" android:state_enabled="false"/>
</selector>
And my TextInputLayout:
<com.google.android.material.textfield.TextInputLayout
style="#style/EditTextTheme"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:hint="Email">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textWebEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>

right-click res -> new -> Android Resource Directory -> Resource type -> color
name your file for example text_input_box_stroke.xml and put it in color folder
text_input_box_stroke.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:color="#00BFFF" />
<item
android:state_pressed="true"
android:color="#FFFF00" />
<item
android:state_focused="true"
android:color="#00C853" />
<item
android:color="#ff00ff" />
</selector>
to prevent TextInputLayout view from gaining focus when activity or fragment which contains it start put this attributes to the parent layout which contains TextInputLayout
android:fadeScrollbars="false"
android:fillViewport="true"
layout file
<?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:focusable="true"
android:focusableInTouchMode="true"
android:id="#+id/content">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/layout_data"
style="#style/TextInputLayoutStyleFilledBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Hint"
android:textColorHint="#color/black"
app:boxBackgroundColor="#android:color/transparent"
app:boxStrokeWidth="2dp"
app:hintTextColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/input_value"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="123456789" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
styles.xml
<style name="TextInputLayoutStyleFilledBox"
parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="colorAccent">#00BFFF</item>
<item name="colorControlNormal">#FFFF00</item>
<item name="colorControlActivated">#FF00FF</item>
<item name="colorControlHighlight">#FFFF00</item>
<item name="boxStrokeColor">#color/text_input_box_stroke</item>
</style>

How to change inactive color on bottom navigation?

I can't change inactive color on my bottom navigation
and this my xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/home_item"
android:icon="#drawable/ic_home"
android:color="#FFFFFF"
android:tint="#FFFFFF"
android:backgroundTint="#FFFFFF"
android:title="Home"
/>
<item
android:id="#+id/setting_item"
android:icon="#drawable/ic_setting"
android:color="#FFFFFF"
android:tint="#FFFFFF"
android:backgroundTint="#FFFFFF"
android:title="Setting"
/>
and this my java
bottomBar.getBar().setBackgroundColor(getResources().getColor(R.color.bottom_tabs));
bottomBar.setActiveTabColor("#FFFFFE");
anyone can help?

If you are using the BottomNavigationView, the solution could be easy.
You just need to create a selector as a ColorStateList, then assign the selector to the "itemIconTint" attribute of the BottomNavigationView.
For example:
Create file inside drawable
bottom_nav_icon_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#android:color/white" />
<item android:state_pressed="true" android:state_enabled="true" android:color="#android:color/white" />
<item android:color="#color/InactiveBottomNavIconColor" />
</selector>
BotttomNavigationview.xml
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavMainMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/BottomNavBarColor"
app:itemIconTint="#drawable/bottom_nav_icon_color_selector"
app:itemTextColor="#drawable/bottom_nav_icon_color_selector"
app:menu="#menu/bottom_navigation_menu" />

Chrislis answer is a good start. However I like to solve this problem via styling and theming. I also used the new material BottomNavigationView for this example.
Create a new file under the color folder, for example: bottom_nav_item_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/item_color_active" android:state_checked="true"/>
<item android:color="#color/item_color_inactive"/>
</selector>
Add this line to your base theme located in themes.xml
<item name="bottomNavigationStyle">#style/BottomNavigationViewStyle</item>
Add this code to styles.xml
<style name="BottomNavigationViewStyle" parent="Widget.MaterialComponents.BottomNavigationView.Colored">
<item name="android:background">#color/my_background_color</item>
<item name="itemTextColor">#color/bottom_nav_item_color</item>
<item name="itemIconTint">#color/bottom_nav_item_color</item>
</style>
Now the BottomNavigationView should be styled correctly
Example layout file
<com.google.android.material.bottomnavigation.BottomNavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schema.android.com/apk/res/res-auto"
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="start"
app:menu="#menu/my_navigation_items" />

I've sligthly edited #Wirling answer to match Android Studio 4.2 Canary 16.
You just have to define your active/inactive colors under the color folder, for example bottom_nav_item.color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/item_color_active" android:state_checked="true"/>
<item android:color="#color/item_color_inactive"/>
</selector>
Then, in your BottomNavigationView just use previous created selector like this
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_item_color"
app:itemTextColor="#color/bottom_nav_item_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu" />
So its super simple. You have to create your selector in new .xml file and then use it for your BottomNavigationView in
app:itemIconTint="#color/bottom_nav_item_color"
app:itemTextColor="#color/bottom_nav_item_color"

Bottom Navigation select text and icon Color
first bottom navigation home layout activity
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorAccent"
android:theme="#style/ThemeOverlay.BottomNavView"
app:itemIconTint="#drawable/icon_color_selector"
app:itemTextColor="#drawable/selector"
app:labelVisibilityMode="labeled"
app:menu="#menu/home_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
then selector file create in drawable
item_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/bottomBarItemColor" android:state_selected="true" />
<item android:color="#color/colorDivider" android:state_selected="false" />
then create text selected color xml file in drawable
text_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_selected="true" />
<item android:color="#color/colorDivider" android:state_selected="false" />
then add style on theme xml
<style name="ThemeOverlay.BottomNavView" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorWhite</item>
<item name="colorOnSurface">#color/colorDivider</item>
<item name="android:textColorSecondary">#color/colorDivider</item>
</style>
then create home menu xml file in res directory
home_menu.xml add in menu directory
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_live_date"
android:icon="#drawable/icon_selector"
android:title="Live Data"
android:enabled="true"/>
<item
android:id="#+id/nav_house_details"
android:icon="#drawable/icon_selector"
android:title="House Details"
android:enabled="true"/>
<item
android:id="#+id/nav_attendance"
android:icon="#drawable/icon_selector"
android:title="Attendance"
android:enabled="true"/>
<item
android:id="#+id/nav_emp_details"
android:icon="#drawable/icon_selector"
android:title="Emp Details"
android:enabled="true"/>
End Thank you so much

<!-- Base application theme. -->
<style name="Theme.RunnerApp"
parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/white</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?
attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
In most of the case...developer change there theme to NoActionBar
But instead of
Theme.MaterialComponents.DayNight.NoActionBar
They change it into
Theme.AppCompat.DayNight.NoActionBar
That causes all these colour issues
Navigation component use material design so keep this point in mind

Try below code. Hope its helpful!!!
mBottomBar = BottomBar.attach(this, savedInstanceState);
mBottomBar.setItems(R.menu.bottombar_menu);
mBottomBar.getBar().setBackgroundResource(R.color.navigationColor);
mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener() {

Create custom flat switch android

I want to make one custom switch as shown below.
I have created two drawable resource for that one is switch_bg and another is tracker_bg.
switch_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/thumb_on" android:state_pressed="true" />
<item android:drawable="#drawable/thumb_off" android:state_enabled="false" />
<item android:drawable="#drawable/thumb_on" android:state_checked="true" />
<item android:drawable="#drawable/thumb_off" />
</selector>
tracker_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_tracker" android:state_enabled="false" />
<item android:drawable="#drawable/ic_tracker" android:state_pressed="true" />
<item android:drawable="#drawable/ic_tracker" android:state_checked="true" />
<item android:drawable="#drawable/ic_tracker" />
</selector>
and in main xml I put following code.
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:layout_marginRight="20dp"
android:thumb="#drawable/switch_bg"
android:track="#drawable/track_bg"/>
Please guide me What I am doing wrong or What things are missing from my side.

Try this sample it may help you.Click here

How can I change the Text color of the thumb(ON/OFF) for Android Switch widget?

I tried setting the textAppearanceAttribute. But it doesn't work.
There is another attribute textColor but that is for the label of the switch.
<Switch
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/double_margin"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:textAppearance="#style/SwitchTextAppearance"
android:track="#drawable/transit_switch_track"
android:thumb="#drawable/transit_switch_thumb" />
<style name="SwitchTextAppearance">
<item name="android:textColor">#android:color/red</item>
</style>

I solved this problem by using a drawable instead of trying to fiddle around with colors.
So here is the code:
<Switch
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/double_margin"
android:switchMinWidth="50dp"
android:textOff=""
android:textOn=""
android:thumb="#drawable/switch_thumb"
android:track="#drawable/switch_track"
android:checked="false" />
switch_track.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/switch_off" android:state_checked="false"/>
<item android:drawable="#drawable/switch_on" android:state_checked="true"/>
</selector>
switch_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/toggle" android:state_enabled="false"/>
<item android:drawable="#drawable/toggle" android:state_pressed="true"/>
<item android:drawable="#drawable/toggle" android:state_checked="true"/>
<item android:drawable="#drawable/toggle"/>
</selector>
This is how my Switch looks now:
Switch_off image
Switch_on image
toggle is just a white image for thumb.

cannot update custom ratingbar android

I am trying to write code based on which I should update the rating in steps of 1 as I am getting integer values for Rating. Here is the code for the same
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginRight="3dp" >
<RatingBar
android:id="#+id/PriceRating"
style="#style/foodRatingBarSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:isIndicator="true"
android:numStars="1"
android:stepSize="0.25"
android:max="5" />
</LinearLayout>
Here is the code in the style file:
<style name="foodRatingBarSmall" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/foodratingbar_full</item>
<item name="android:minHeight">20dip</item>
<item name="android:maxHeight">20dip</item>
</style>
Here are the foodratingbar file
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+id/background" android:drawable="#drawable/foodratingbar_fill"
/>
<item android:id="#+id/secondaryProgress"
android:drawable="#drawable/foodratingbar_fill" />
<item android:id="#+id/progress" android:drawable="#drawable/foodratingbar_empty" />
</layer-list>
And here is the code for foodratingbar_fill:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/dollar" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/dollar" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/dollar" />
<item android:drawable="#drawable/dollar" />
</selector>
where dollar is a png image
The problem with my code is that I cannot get it to update to the required number of stars and I see vague values of the number of stars being displayed on android. I would like to know how I can display one dollar image for 1 rating with a maximum of 5

Categories

Resources