How to make title background transparent on android app

Question

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:

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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

Thank you for the response. I used option 2. BTW `android:background` needs an extra `0`. Thank you for checking out the github post develop a response. — Mahendra Gunawardena, May 28 '20 at 17:21

How to make title background transparent on android app

1 Answers1

Linked