Left margin between icons and NavigationView - java

I have to add a left margin between the icons and the NavigationView, in arrow in the image bellow:
I know that according to google specs, this margin must have 16dp but I need to change it. I have tried:
<dimen tools:override="true" name="design_navigation_icon_padding">64dp</dimen>
<dimen tools:override="true" name="design_navigation_separator_vertical_padding">20dp</dimen>
But still not working. Any ideas?

The xml layout of that item is design_navigation_item.xml
<android.support.design.internal.NavigationMenuItemView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/listPreferredItemHeightSmall"
android:paddingLeft="?attr/listPreferredItemPaddingLeft"
android:paddingRight="?attr/listPreferredItemPaddingRight"
android:foreground="?attr/selectableItemBackground"
android:focusable="true"/>
As you can see, paddings that are applied are taken from the activity's theme - listPreferredItemPaddingLeft and listPreferredItemPaddingRight. Thus, you have to apply your custom theme to NavigationView overriding those attributes with necessary values.
In styles.xml:
<style name="MyNavigationViewItemStyle" parent="AppTheme">
<item name="listPreferredItemPaddingLeft">0dp</item>
<item name="listPreferredItemPaddingRight">0dp</item>
</style>
We want to change only those two attributes from activity's theme, thus we are extending the theme, that is applied to the activity.
In layout xml:
<android.support.design.widget.NavigationView
...
app:theme="#style/MyNavigationViewItemStyle"/>
Result

For my case I added one line to xml: app:itemHorizontalPadding="#dimen/horizontal_padding_on_nav_drawer"
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
android:clipToPadding="false"
android:paddingBottom="#dimen/space48"
app:headerLayout="#layout/layout_nav_header"
app:insetForeground="#color/black"
app:itemBackground="#drawable/background_selected_menu"
**app:itemHorizontalPadding="#dimen/horizontal_padding_on_nav_drawer"**
app:menu="#menu/drawer">

Related

How to change iconTint of a specific item in BottomNavigationView

I am trying to change the iconTint of the favorites menuItem in the bottomNavigationView.
To achieve so, I've tried the following:
Creating a selector with colors
Creating a selector with drawables
Programatically setting icon drawable
programatically setting iconItemTint of bottomNavigationView to null
Using colored icon drawables, instead of iconItemTint
Setting the icon of favorites to the drawable selector
Setting the background of favorites to the desired color
Setting iconTint of favorites to desired color
None of the above solutions worked for me. Then I figured that it might be because I'm using com.google.android.material.bottomnavigation.BottomNavigationView instead of android.support.design.widget.BottomNavigationView
My bottomNavigationView
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
app:labelVisibilityMode="labeled"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:itemTextColor="#232323"
app:menu="#menu/bottom_nav_menu" />
My bottom_nav_menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
...
<item
android:title="Favorites"
android:id="#+id/btn_favorites"
android:enabled="true"
android:background="#color/red_heart"
android:icon="#drawable/ic_favorite_red"
app:showAsAction="ifRoom" />
...
Here is a screenshot of my app:
The selected color is blue for all menuItems. I want the favorites to have the color #ff4444 (pale red) when selected.
I wasted a lot of time searching the correct answer to "How to change color of one specific icon of Bottom Navigation View" and I resolved this by myself. Here is the example:
val view = viewBinding.bottomNavigationView.menuView as NavigationBarMenuView
val itemToChange = view.findViewById<NavigationBarItemView>(R.id."item_to_change_id")
itemToChange.setIconTintList(
ColorStateList.valueOf(
ContextCompat.getColor(requireContext,R.color."color you need")
)
)
I didn't try this with android.support.design.widget.BottomNavigationView, but with com.google.android.material.bottomnavigation.BottomNavigationView it works correctly :)
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
android:layout_marginBottom="0dp"
app:itemTextColor="#color/bootom_text_color"
app:itemIconTint="#color/bootom_text_color"
android:background="#color/bottom_color"
app:elevation="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/bottom_navigation" />
create colour.xml in values
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#FFFF00" />
<item android:color="#color/white" /> </selector>

How do I add a shadow beneath my action bar in Android?

I'm trying to get a shadow to appear beneath my action bar, but for some reason the shadow continually appears and begins at the very top of the screen, instead of beneath the action bar. I'm using a CustomView android.support.v7.widget.Toolbar action bar widget in each of my xml layout files. How can I get the shadow to properly appear beneath this action bar instead of at the top? Can I set some kind of divider equal to the height of this custom view before the shadow appears? Can we do something like set the height of the gradient to 50dp but only show the gradient in the last 5-10% of that height?
My theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/white</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#000</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#color/teal</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight & colorSwitchThumbNormal. -->
<item name="android:textColorSecondary">#d7d7d7</item>
<item name="android:windowContentOverlay">#drawable/actionbar_shadow</item>
</style>
Shadow drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="4dp" />
<gradient
android:angle="270"
android:endColor="#android:color/transparent"
android:startColor="#color/grey" />
</shape>
Toolbar:
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="50dp"
android:minHeight="30dp"
android:layout_width="match_parent"
android:paddingTop="10dp"
android:paddingBottom="10dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:background="#color/white">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/actionbar_title_r"
android:id="#+id/ActionBarTitle" />
</android.support.v7.widget.Toolbar>
Toolbar will have a shadow only in devices running on API 21 or higher. In order to achieve this effect you can add the property android:elevation="4dp" And it will work fine. Hope this helps
You can try several dp for elevation on the material appBar layout and see the degree of effect it gives. Then you decide how much do you give it.
in the appBar,
android:elevation = "1dp"
play with 2dp, 3dp,4dp and choose whats right for you.

Selected cardview no foreground

I need to do what google does with notes like this.
This happens when I select a note and not just when I press one, even if my finger isn't on the note, the card view is selected and grey.
I tried with a custom foreground but without results.
I am not sure it can be done with foreground.
If I understand you correctly, you want to implement color change and add stroke on long click?
Than you can use one trick:
set your card layout like so:
<android.support.v7.widget.CardView
android:id="#+id/card"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
...>
<LinearLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
...>
...
</LinearLayout>
</android.support.v7.widget.CardView>
Set LinearLayout background color
<android.support.v7.widget.CardView
android:id="#+id/card"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/your_color"
...>
...
</LinearLayout>
</android.support.v7.widget.CardView>
Than change card and layout background color at runtime, layout margins to reveal card beneath
layout.setOnLongClickListener(new View.OnLongClickListener() {
public boolean onLongClick(View l) {
card.setCardBackgroundColor(Color.parseColor("#939393")); //darker gray
layout.setBackgroundColor(Color.parseColor("#d4d4d4")) //gray
// use this to define margins in dp, not px
int dp8 = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics());
// get layout's parent (card is parent of layout)
CardView.LayoutParams params = (CardView.LayoutParams) card.getLayoutParams();
// set margins in dp
params.setMargins(dp8, dp8, dp8, dp8);
// apply them to your layout
layout.setLayoutParams(params);
}
});
I haven't tested this code yet, but I think it should do the trick.
Tried toggling the background of the cardview via code with a white gray color depending on the state that you would prefer. Ie if it's selected etc?
Use duplicateParentState on note.
The childView will get parentView's state.
When you press parentView,the childView will get the pressed state.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:background="#drawable/bg_txt"
android:duplicateParentState="true"
android:textSize="15sp" />
</FrameLayout >
Add
<color name="color_1">#4b14b1</color>
<color name="color_0">#ffffff</color>
in colors.xml.
Add bg_txt.xml in drawable folder.
bg_txt.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#color/color_1"></item>
<item android:state_pressed="true" android:drawable="#color/color_1"></item>
<item android:drawable="#color/color_0"></item>
</selector>

How do I mimick the Lollipop (Material Design) button animation?

There's a style called Widget.Material.Button that has an animation effect that I really like (it makes a "splash" around your click), and I want to be able to reuse it in my code.
I'm trying to make it have a transparent background color, since it is gray by default which does not look good when applied to my ViewGroup objects.
Is there an easy way to keep the animation, but get rid of the background color?
I already tried setting the property android:background="#android:color/transparent", but that causes the animation to completely stop working.
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#android:style/Widget.Material.Button"
tools:targetApi="lollipop">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, world!"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is just another line of text."/>
</LinearLayout>
As mentioned in this blog under 'Clickable Views', you can use android:background="?attr/selectableItemBackground:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="?attr/selectableItemBackground">
...
</LinearLayout>
Sorry for giving the wrong bit initially. The problem as looking a bit deeper is the background color is defined already as part of whatever you are using for your MaterialTheme extension for color highlights. Ironically, they have sources from transparent elsewhere but not here ?
What you want to so is make TWO new xml files to define your properties
In vales-v21/styles.xml you can redefine these any way you like or eliminate values you don't want to override
IF YOU JUST WANT THE RIPPLE, USE THE DRAWABLE CODE DEFINED AT THE BOTTOM
<style name="MyMaterialButton" parent=android:Widget.Material.Button>
<item name="background">#drawable/material_background_ripple</item>
<item name="textAppearance">?attr/textAppearanceButton</item>
<item name="minHeight">48dip</item>
<item name="minWidth">88dip</item>
<item name="stateListAnimator">#anim/button_state_list_anim_material</item>
<item name="focusable">true</item>
<item name="clickable">true</item>
<item name="gravity">center_vertical|center_horizontal</item>
</style>
Then your button background style
/drawable-v21/material_background_ripple.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/PICK_RIPPLE_COLOR_HERE">
<item android:drawable="#drawable/btn_default_mtrl_shape" />
</ripple>
Redacted:
Have you tried
customView.getWindow().setBackgroundDrawableResource(R.color.transparent);
?

issue in custom title bar (android)

when i customize title bar in view by adding a image, i face an issue as the images is not fixed to the edges accurately. I have attached the image where you can see space between the window margin and image added. How to overcome this problem. Below are the code that i have used to customize the title bar. Can anyone help me to fix this issue.
java code :
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.home_view);
this.getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE,
R.layout.upwindow);
layout code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="32dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/up_bar"
android:src="#drawable/up_bar" />
<TextView
android:id="#+id/pagename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Sify MyStorage"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
create style xml in values folder :
<resources>
<style name="CustomWindowTitleBackground" />
<style name="CustomTheme" parent="android:Theme">
<item name="android:windowTitleSize">32dp</item>
<item name="android:windowTitleBackgroundStyle">#style/CustomWindowTitleBackground
</item>
</style>
</resources>
then refer it in manifest as :
android:theme="#style/CustomTheme">
this will solve it .
hope this help .
Do you have different images for different resolutions? It might be that your image simply does not fit that space, and that you need a larger one. Be careful though, you might run into issues with your app working across different platforms with scaling.
You need to play a little with styling in order to override this behavior. Define a custom theme (style) as below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="customTitle">
<item name="android:background">#drawable/up_bar</item>
</style>
<style name="myTheme" parent="android:Theme">
<item name="android:windowTitleBackgroundStyle">#style/customTitle</item>
</style>
</resources>
and then use this theme in your activity by applying android:theme="#style/myTheme" to your desired activity tag in AndroidManifest.xml
requestWindowFeature(Window.FEATURE_NO_TITLE);
and setBackground to your layout in layout file...
Like,,,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent" android:background="#drawable/up_bar" <---Add this
android:layout_height="32dp">
and Remove imageview from xml

Categories