I have created a custom gradient drawable file that i want to use as my Toolbar's background but i can't seem to apply it. It just shows up as plain gray (see the image). Am i doing something wrong? I looked at multiple posts but nothing has worked for me so far.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<Toolbar
android:id="#+id/home_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/home_toolbar_gradient"
android:elevation="4dp"
android:minHeight="70dp"
android:theme="#style/customToolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/title_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/Montserrat-Bold"
android:gravity="center"
android:text="#string/home"
android:textAlignment="center"
android:textColor="#android:color/white" />
</Toolbar>
<!-- Using a view with a gradient to create a drop navbar_shadow effect for the navbar -->
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_above="#id/bottom_nav_bar"
android:background="#drawable/navbar_shadow" />
<com.google.android.material.bottomnavigation.BottomNavigationView
app:labelVisibilityMode="labeled"
android:id="#+id/bottom_nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#android:color/white"
app:itemIconTint="#drawable/nav_selected_item_color"
app:itemTextColor="#drawable/nav_selected_item_color"
app:menu="#menu/bottom_nav_bar">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>
home_toolbar_gradient.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#color/toolbar_starting_color"
android:endColor="#color/toolbar_ending_color"
android:angle="75" />
</shape>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:fontFamily">#font/montserrat_medium</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<!-- Custom Rounded Dialog style -->
<style name="RoundedDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowBackground">#drawable/rounded_corners</item>
</style>
<style name="customToolbar" parent="Theme.AppCompat.Light.NoActionBar" />
</resources>
in MainActivity.java:
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar homeToolbar = findViewById(R.id.home_toolbar);
setSupportActionBar(homeToolbar);
and in the manifest:
android:theme="#style/Theme.AppCompat.Light.DarkActionBar"
Try doing it dynamically:
setSupportActionBar(homeToolbar);
ActionBar actionbar = getSupportActionBar();
actionbar.setBackgroundDrawable(getResources().getDrawable(R.drawable.home_toolbar_gradient));
Read this. It says- Angle of the gradient, used only with linear gradient. Must be a multiple of 45 in the range [0, 315].
So, Change home_toolbar_gradient.xml drawable to
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#FF33"
android:endColor="#AFF"
android:angle="45" />
</shape>
Try this:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#555994"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
For anyone interested, i actually found the issue. The angle attribute in a gradient drawable needs to be a multiple of 45 otherwise you'll get a subtle rendering error in the layout preview. Just change it to a multiple of it that suits your needs and the gradient will take effect.
Related
I have this main layout. It should display 3 buttons, but I am showing you only 1 button definition in order not to put mostly code in the question.The other buttons have the same definition.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="70dp"
android:paddingBottom="70dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="center"
android:orientation="horizontal"
android:padding="50dp">
<Button
android:id="#+id/btnRfid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/main_button_background"
android:padding="20dp"
android:text="#string/button_rfid"
android:textSize="36sp"
android:drawableLeft="#drawable/button_rfid"/>
</LinearLayout>
</LinearLayout>
This is the main_button_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#949597"
android:angle="270" />
<corners android:radius="20dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
This is how I see it in design editor of Android Studio:
However, this is how it is viewed in the emulator:
Why are text rendered that way? Is something missing?
By reading tutorials, I don't see anything special in the button definition.
Regards
Jaime
1) Migrate your project to androidx.
2) Include dependency in your build.gradle:
implementation 'com.google.android.material:material:1.0.0'
3) Use in your layout:
<com.google.android.material.button.MaterialButton
android:id="#+id/material_icon_button"
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/icon_button_label_enabled"
app:icon="#drawable/icon_24px"/>
4) Don't forget to change your applevel theme to Material Component theme.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
This seems like it should be trivial with the itemBackground attribute, but for some reason, it isn't working.
As shown below, I can successfully add my own background (in blue), but the original ripple (grey rectangle) is still visible.
Setting itemBackground to null doesn't seem to do the trick either.
My navigation view:
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
style="#style/Widget.MaterialComponents.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:itemBackground="#drawable/nav_item_background"
app:menu="#menu/main_drawer" />
(Basically untouched style wise from the generated view)
My ripple:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/accent_ripple">
<item
android:id="#android:id/mask"
android:right="8dp">
<shape android:shape="rectangle">
<corners
android:bottomRightRadius="50dp"
android:topRightRadius="50dp" />
<solid android:color="#fff" />
</shape>
</item>
</ripple>
My app theme also extends Theme.MaterialComponents, so I'm out of ideas.
If you want a custom shape in your Item Background don't use the app:itemBackground attribute.
Use the app:itemShapeAppearanceOverlay and the app:itemShapeFillColor attributes:
<com.google.android.material.navigation.NavigationView
app:itemShapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Item"
app:itemShapeFillColor="#color/nav_item_shape_fill"
android:theme="#style/ThemeOverlay.NavigationView"
../>
where:
<style name="ShapeAppearanceOverlay.Item" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeBottomRight">16dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerSizeTopLeft">0dp</item>
</style>
and the color selector is something like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_activated="true"/>
<item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_checked="true"/>
<item android:color="#android:color/transparent"/>
</selector>
Currently there isn't a method to remove the ripple outside the shape in the item.
However you can use the android:theme to override the color used by the ripple.
<style name="ThemeOverlay.NavItem.Ripple" parent="">
<item name="android:colorControlHighlight">#android:color/transparent</item>
</style>
Check this issue for updates.
just you can do like this :
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigationView"
android:layout_width="230dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimaryDark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/layout_navigation_header" />
<include layout="#layout/layout_navigation" />
</LinearLayout>
</com.google.android.material.navigation.NavigationView>
Why don't you override it with your own drawable? You can use your own color and effect or even make the ripple effect transparent with hex
#ffffffff
or
#android:color/transparent
is there a way to add a background to the toolbar icons,
I want to achieve this design
or there is another way to do it. since it has the overflow icon
complete reference code
this is the result
add the following in your app theme or activity style to make it NoActionBar activity
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
add the toolbar in your activity.xml and customize the view as you like
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/AppTheme"
app:layout_collapseMode="parallax"
app:popupTheme="#style/AppTheme">
<RelativeLayout
android:layout_width ="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/back_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/cir_shape"
android:onClick="clickBack"
android:padding="6dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_arrow_back_black_24dp"
tools:ignore="VectorDrawableCompat" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/rect_shape"
android:gravity="center"
android:orientation="horizontal"
android:padding="3dp">
<ImageView
android:id="#+id/app_bar_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:visibility="visible"
android:layout_marginRight="3dp"
app:srcCompat="#drawable/ic_visibility_black_24dp"
android:layout_marginEnd="3dp" />
<TextView
android:id="#+id/app_bar_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="1.3K"
android:textAllCaps="false"
android:textColor="#color/whiteColor"
android:textSize="18sp"
android:textStyle="bold"
android:visibility="visible" />
</LinearLayout>
</RelativeLayout>
3.add the support action bar as the toolbar in the MainActivity.java in OnCreate()
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
4.the circle_shape.xml in the drawable for arrow_back drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#95686566" />
</shape>
5.the rectangle_shape.xml in the drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#95686566" />
</shape>
6.for customizing the 3 dots(overflow icon) add
<item name="actionOverflowButtonStyle">#style/ThreeDotsStyle</item>
the in your style.xml main theme
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="actionOverflowButtonStyle">#style/ThreeDotsStyle</item>
</style>
and create it's theme
<style name="ThreeDotsStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/my_threedots_menu</item>
</style>
7.the my_threedots_menu.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#95686566" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
<item
android:drawable="#drawable/ic_menu_dots"
android:gravity="center" />
</layer-list>
8.inflate your menu
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
return true;
}
Create a custom toolbar and put your custom icons inside of it.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/myCustomAppBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- your custom icons goes here -->
</RelativeLayout>
</android.support.v7.widget.Toolbar>
1) btn_ripple_background
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/ripple_circular_shape"/>
</selector>
2) ripple_circuler_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/btn_state_pressed_text_color"
android:shape="oval">
<solid android:color="#color/btn_state_pressed_text_color" />
</shape>
Finally android:foreground="#drawable/ripple_btn_background"
You could create container with custom background inside Toolbar, put ImageView inside and add some padding to it for example:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/middle_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="#drawable/baseline_arrow_forward_white_24" />
</LinearLayout>
Background middle_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/resandroid"
android:shape="oval">
<solid android:color="#android:color/holo_orange_dark" />
</shape>
Adjust padding, ImageView to get desired look but basically you will have something like this:
I got a custom spinner, and I'm trying to replace the 9-patch background / the triangle in the DropDownSelector.
I just can't get it to work right though. I end up with (the white box is a test asset):
the new 9 patch gets shown, but it messes up the padding, and it looks like a Spinner inside a Spinner.
Here's what it looks like without the 9 patch added:
This is what I want it to look like, but then with the new 9patch instead of the old one, not the Spinner in Spinner effect.
Here's my code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Spinner xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"/>
</RelativeLayout>
I add this RelativeLayout to the Actionbar, and set a custom spinner adapter:
SpinnerAdapter mSpinnerAdapter = (new SpinnerCustomAdapterDark(this, R.layout.customSpinnerTitleLayout, categoryNames ));
spinner = findViewById(R.id.spinner2);
categorySpinnerMenuitem = (Spinner) spinner;
categorySpinnerMenuitem.setAdapter(mSpinnerAdapter);
This is the CustomSpinnerTitleLayout set to the adapter:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
style="?android:attr/spinnerDropDownItemStyle"
android:paddingRight="0dp" >
<ImageView
android:id="#+id/spinner_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:layout_gravity="center"
android:paddingRight="0dp"
/>
</LinearLayout>
This is the Theme where I add the 9 patch
<resources>
<style name="CustomTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:spinnerDropDownItemStyle">#style/customActionBarDropDownStyle</item>
</style>
<style name="customActionBarDropDownStyle" parent="#android:style/Widget.Holo.Light.ListView" >
<item name="android:background">#drawable/spinner9patch</item>
</style>
</resources>
I'm obviously doing something wrong, but what? I've tried to set the spinnerDropDownItemStyle and the spinnerStyle at the Spinner in the first layout file, what didn't do anything. What am I doing wrong here?
Thanks in advance!!
Create an XML in drawable folder with any name for example spinner_bg.xml and add the following lines
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#504a4b" />
<corners android:radius="5dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/spinner_ab_default_holo_dark_am" /> // you can use any other image here, instead of default_holo_dark_am
</item>
</layer-list></item>
</selector>
Add the following lines to your styles.xml which is inside values folder
<style name="spinner_style" >
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
Now add this style to your spinner as
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/spinner_style"
android:popupBackground="#cccccc" />
I really recommended you check this out online Generator just make your custom spinner then download file http://jgilfelt.github.io/android-actionbarstylegenerator/
I have an image button and I want to change the color of a button when pressed. First I show it with a transparent as a default state color as below. But it doesn't show highlighted when pressed. So I decided to use other color to highlight when pressed using state drawable. But how to keep background color through styles wise. Means by default it should be transparent and when pressed it has to show other color.
present code:
<ImageButton
android:id="#+id/imgbutton"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"
android:background="#android:color/transparent"
/>
Need to be coded:
<ImageButton
android:id="#+id/imgbutton"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"
android:background="#drawable/btnselector"
/>
So what should be the btnselector.xml here?
put it inside res/color
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/green_text_color"/> <!-- pressed -->
<item android:state_focused="true" android:color="#color/green_text_color"/> <!-- focused -->
<item android:color="#android:color/white"/> <!-- default -->
</selector>
create a new shape, inside res/drawable
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/yourxmlfile" />
</shape>
and put it as background
or a res/drawable selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/green_botton_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/green_botton_highlited"
android:state_focused="true" />
<item android:drawable="#drawable/green_botton" />
</selector>