How can i put an ImageView underneath a transparent toolbar?

Question

I'm trying to achieve something like this . I want a transparent toolbar/statusbar with an ImageView underneath them.

I wasn't able to make the toolbar transparent so I tried using CollapsingToolbarLayout and removing the scroll behaviour. It worked but I wasn't able to make the status bar transparent.

Is there a way to make the toolbar transparent and put an ImageView beneath it or is there a better way to implement it?

Edit:

Standard xml-layout. I didn't change anyhting so far.

<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" /> </android.support.design.widget.CoordinatorLayout>

just wondering. instead of using colorPrimary, would changing android:background="@android:color/transparent" help? — Angel Koh, May 05 '16 at 17:17
I can change the color of the toolbar to whatever color I want but I can't make it transparent. If I do it is still colorPrimary (blue). If I put a gradient as background it appears but there is still blue in the background. — firefly1337, May 05 '16 at 17:21

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

Try this.

toolbar.getBackground().setAlpha(0);

Or better -

transparent Actionbar with AppCompat-v7 21

edited May 23 '17 at 12:16

Community

1
1

answered May 05 '16 at 16:50

user1930106

779
1
6
19

Thanks for your answers. Unfortunately I wasn't able to fix my problem. The first solution resulted in a white bar instead of the toolbar. The second one didn't work at all. Where exactly do I have to put the RelativeLayout? within the AppBarLayout? – firefly1337 May 05 '16 at 17:03
paste your xml so that people can take a look – user1930106 May 05 '16 at 17:05
Try using android:background="#10000000" in toolbar instead of colorprimary – user1930106 May 05 '16 at 17:12
hmm...not sure then, have to test it myself...till then maybe wrap everything in relativelayout and check – user1930106 May 05 '16 at 17:17
Nope. Stil the same. – firefly1337 May 05 '16 at 17:23

Angel Koh · Answer 2 · 2016-05-06T08:38:23.000

0

I created a project to try the transparent status bar.

you need add the following to the styles (for v19 and v21)

<!-- Make the status bar traslucent -->
<style name="AppTheme" parent="AppTheme.Base">
    <item name="android:windowTranslucentStatus">true</item>
</style>

This is the layout xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    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"
    android:orientation="vertical">


<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:theme="@style/AppTheme.AppBarOverlay">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/sun"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/transparent"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

... the rest of my xml

this is the output from the layout of a v19 device.

edited May 06 '16 at 08:38

answered May 05 '16 at 17:25

Angel Koh

12,479
7
64
91

It didn't work but it somehow changed the color of the status bar to a darker blue. – firefly1337 May 05 '16 at 17:30
try removing "fitSystemWindows=true" from your xml. – Angel Koh May 05 '16 at 17:34
It's white now and I don't see any icons. Even if i set the activity background to red. – firefly1337 May 05 '16 at 17:40
try http://saulmm.github.io/mastering-coordinator it seems to have what you are looking out for. an example of his image behind the toolbar is here http://androcode.es/wp-content/uploads/2015/10/simple_coordinator.gif - the translucentStatus part in the answer still applies though. – Angel Koh May 05 '16 at 17:44
Good read but I already achieved it this way. I'm looking for a way to make the toolbar completely transparent. Something similar to the image I posted in my question. – firefly1337 May 05 '16 at 17:50
strange. i'd think that removing the collapsingToolbarLayout should do the trick. (have an imageView and Toolbar inside coordinator layout), then set the windowTranslucentStatus to true should do the job. (also verify that you are testing on API v19 and above devices). – Angel Koh May 05 '16 at 17:56
Did it work for you like that? Because it didn't work for me. This results in the status bar overlapping the toolbar and the ImageView being below them like regular content. – firefly1337 May 05 '16 at 18:12
yes, it was working for me. i need the image in the background to make the translucency more obvious though. also i didn't need to define the background color for toolbar. – Angel Koh May 06 '16 at 01:25
This is already pretty close to what I want but the image is above the toolbar. Do you know how to put it behind the toolbar? So that the toolbar is below the status bar with no image in between. – firefly1337 May 06 '16 at 11:57
just wrap the imageView and the toolbar in a vertical linearLayout. then the image will be on top, and the toolbar will be at the bottom. – Angel Koh May 06 '16 at 12:51
1

I finally got it to work reading this answer: http://stackoverflow.com/a/33669264 It was probably because I misunderstood the effect of fitsSystemWindow. Thanks for your help! – firefly1337 May 06 '16 at 13:23

How can i put an ImageView underneath a transparent toolbar?

2 Answers2