How to make title background transparent on android app - java

There is an issue in the follow Android App where guidance is greatly appreciated. This application is to support a Renesas RX130 microcontroller and Texas Instrument CC2650 Bluetooth Low Energy hardware demonstration design. In the initial device scanning page the tile has a bright red background as shown below.
The tool bar has a Purple to Red gradient background.
Question: How can the Red Tile background be made transparent?
The application has two activities. Below are excepts from the AndroidManifest.xml file
<activity android:name="capsense.application.rx130_cc2650.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="capsense.application.rx130_cc2650.DeviceControlActivity"/>
<service android:name="capsense.application.rx130_cc2650.BLE_Service" android:enabled="true" />
Code from activity_main.xml, listitem.xml, toolbar.xml and MainActivity.java generated the first activity. Relevant sections of code is from the files are below.
Excepts from activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Excepts from toolbar.xml
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher_background_rx130_cc2650"
app:popupTheme="#style/CustomerPopUpMenuStyle"
app:theme="#style/CustomerToolbarStyle"
app:titleTextColor="#android:color/white">
</android.support.v7.widget.Toolbar>
Excepts from MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(capsense.application.rx130_cc2650.R.layout.activity_main);
mScanning = false;
//Get User Interface Elements
Toolbar toolbar = findViewById(capsense.application.rx130_cc2650.R.id.toolbar);
toolbar.setTitle(R.string.app_label);
setSupportActionBar(toolbar);
The complete project is available on github Android_Mobile_App_RX130_CC2650
References:
Set transparent background of an imageview on Android
Toolbar with Gradient Background set title background transparent

There is a conflict in color from multiple source to background.
Don't use theme unless if needed, as
theme influence all the views and layouts inside the toolbar
style influence only the toolbar and does not interfere with views and layouts inside toolbar
Please try below options, one of which might work for you,
Option 1 (preferred): update CustomerToolbarStyle code as below
<style name="CustomerToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:background">#drawable/ic_launcher_background_rx130_cc2650</item>
<item name="android:title">#color/colorforeground</item>
</style>
update toolbar.xml code as below
<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:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/CustomerPopUpMenuStyle"
style= "#style/CustomerToolbarStyle"
app:titleTextColor="#android:color/white"/>
Option 2: set transparent background in CustomerToolbarStyle
<style name="CustomerToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
<!-- set background color to transperant -->
<item name="android:background">#00000000</item>
<item name="android:title">#color/colorforeground</item>
</style>
Option 3: remove android:background from the CustomerToolbarStyle
<style name="CustomerToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:title">#color/colorforeground</item>
</style>
Option 4: remove app:theme="#style/CustomerToolbarStyle" from toolbar.xml
If above options not working, please check below links
Change Toolbar background color programmatically does not change Toolbar Title Background color
Text background issue on Toolbar

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 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);
?

FloatingActionButton black box

I'm using this https://github.com/makovkastar/FloatingActionButton library for FloatingActionButtons in my project.
On some smaller devices, for example the Acer Liquid Z4 (Android version 4.2.2, screen 480x800) or the Genymotion Galaxy S2 image (Android version 4.1.1, screen 480x800) the FABs have a black box around them:
I tried to narrow this down, removed any special stuff from my theme making it look like this:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
and also put the buttons in the most simple layout:
<RelativeLayout 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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="de.immowelt.android.immobiliensuche.ui.FabTestActivity">
<com.melnykov.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
but the box remains. On the other hand I tried to recreate the effect with a new project but couldn't do it.
The box disappears when using the mini size version or disabling the shadow.
Any ideas on what my problem is?
PS: I tried cleaning the project ;)
I was using that library but then decided to make my own, set this as the background to an imageButton or something. I used a textview because all I needed was a +. It looks pretty good in my app.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
            <padding android:right="1dp" android:bottom="1dp" />
            <solid android:color="#00262626" />
        </shape>
    </item>
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
            <padding android:right="1dp" android:bottom="1dp" />
            <solid android:color="#0D262626" />
        </shape>
    </item>
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
            <padding android:right="1dp" android:bottom="1dp" />
            <solid android:color="#26262626" />
        </shape>
    </item>
    <!-- Background -->
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
            <solid android:color="#448AFF"/>
        </shape>
    </item>
</layer-list>
The problem was that the FloatingActionButton class makes use of a drawable called shadow.9.png for the shadow. I also had a shadow.9.png in my drawables and the library class obviously picked up the wrong one (mine).
Renaming my drawable solved the problem.

ActionBar with icon and text in portrait mode

I can't seem to get an image and text to work in portrait mode on menu items in the action bar no matter what I try. I even tried to force android portrait orientation
My XML:
<item android:id="#+id/menu_save"
android:icon="#drawable/content"
android:orderInCategory="100"
android:title="New Group"
android:showAsAction="withText|always" />
Has anyone figured this out?
From the config.xml file of the native ActionBar:
values:
<bool name="config_allowActionMenuItemTextWithIcon">false</bool>
values-480dp:
<bool name="config_allowActionMenuItemTextWithIcon">true</bool>
To answer your question:
No you can't do that, if the devices width is smaller than 480dp. (Unless you want to create a custom rom with a modded framework)
Ahmad's answer makes clear why this is not possible. It is annoying that the action bar is not easier to customise.
One quick and dirty solution is to put two buttons in the menu, remove the icon from one and give the second a different name. Then in the corresponding java file, replicate the functionality for the extra button in onOptionsItemSelected. This gets over having to create a custom view for the action bar.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
<item android:id="#+id/action_done"
android:icon="#drawable/ic_done"
android:title="#string/done"
yourapp:showAsAction="always" />
<item android:id="#+id/action_done2"
android:title="#string/done"
yourapp:showAsAction="always" />
<item android:id="#+id/action_cancel"
android:icon="#drawable/ic_cancel"
android:title="#string/cancel"
yourapp:showAsAction="always" />
<item android:id="#+id/action_cancel2"
android:title="#string/cancel"
yourapp:showAsAction="always" />
</menu>
I also saw this answer but didn't try it: withText in split ActionBar #Google Calendar Method. This is how it is done in Google Calendar but also relies on a custom view replacing the action bar.
The easiest way to do it is:
<menu 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"
tools:ignore="AppCompatResource">
<item
android:id="#+id/action_nexo"
android:title="title"
app:actionLayout="#layout/custom_menu_item"
app:showAsAction="always"/>
</menu>
custom_menu_item.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/nexo_tile_short"
android:clickable="true"
android:focusable="true"
android:textSize="#dimen/text_size_small"
android:textStyle="bold"
android:textColor="?attr/actionMenuTextColor"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="#dimen/padding_small"
android:paddingBottom="#dimen/padding_small"
android:src="#drawable/nexo"/>
</LinearLayout>

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