How to make title background transparent on android app

Tags: ,



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.

enter image description here

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:

Answer

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



Source: stackoverflow