How to make ToolBar and StatusBar Gradient - gradient

how can I make ToolBar and StatusBar Gradient as shown image1 This one I want but I'm getting StatusBar and ToolBar as image2 like this. If you observed in 1st image the ToolBar is full gradient at endColor position(bottom of the ToolBar) but 2nd image of the ToolBar is not full Gradient as 1st image at bottom of the ToolBar and showing as a straight line. My code is as given below:
#drawable:
toolbar_product_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:angle="270"
android:startColor="#44000000"
android:centerColor="#22000000"
android:endColor="#00000000"/>
</shape>
AppBarLayout with ToolBar
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="#null"
android:theme="#style/AppTheme.Transparent"
android:background="#drawable/toolbar_product_gradient" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarProduct"
android:layout_width="match_parent"
android:layout_height="56dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:contentScrim="#android:color/transparent"
app:expandedTitleTextAppearance="#android:color/transparent"
app:titleEnabled="true"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
Please help me how to get it and thanks in advance.

Related

BottomAppBar height gets bigger when using window.setDecorFitsSystemWindows(false)

I am trying to achieve transparent status bar by using window.setDecorFitsSystemWindows(false) and statusBarColor = Color.TRANSPARENT. I achieved my goal, but when I introduced BottomAppBar, its size (padding to be exact) is doubled. What might be the issue?
With window.setDecorFitsSystemWindows(false):
Without window.setDecorFitsSystemWindows(false):
Main Activity Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".ActivityMain">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainer"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:defaultNavHost="true"
app:navGraph="#navigation/main" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:elevation="1dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemHorizontalTranslationEnabled="false"
android:background="#android:color/transparent"
app:elevation="0dp"
app:labelVisibilityMode="auto"
app:menu="#menu/nav_bar_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Got to the answer quickly than I thought I would. I forgot to calculate the insets, so adding this piece of code made everything working again:
ViewCompat.setOnApplyWindowInsetsListener(window.decorView) { view, windowInsets ->
val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
view.updatePadding(bottom = insets.bottom)
WindowInsetsCompat.CONSUMED
}

Intellij/Android Studio Find/Replace a multiline view in xml layout (Android)

I have to replace this
<fr.castorflex.android.smoothprogressbar.SmoothProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="gone"
app:spb_color="#FF0000"
app:spb_mirror_mode="false"
app:spb_progressiveStart_activated="true"
app:spb_progressiveStart_speed="1.5"
app:spb_progressiveStop_speed="3.4"
app:spb_reversed="false"
app:spb_sections_count="4"
app:spb_speed="2.0"
app:spb_stroke_separator_length="4dp"
app:spb_stroke_width="4dp" />
by this
<fr.castorflex.android.smoothprogressbar.SmoothProgressBar
android:id="#+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="4dp"
android:visibility="invisible"
style="#style/GNowProgressBar"
android:indeterminate="true"/>
thoroughout my entire project using Intellij/Android Studio's Find/Replace.
Is it possible?
(For MAC and similarly for Windows)
Click on Edit (Top Left of your Intellij/Android Studio window)
Hover your cursor to "Find"
Then select "Replace Structurally"
Now the find/replace structurally window will open. Towards the bottom side of the window, uncheck all the boxes(Otherwise it might not identify the snippet through out the project).

selector for actionBarItemBackground not working

I have to following problem, I want to change the selector from the actionbar item (just the normal actionbar, neither support actionbar nor actionbarsherlock). The backgroud color should be grey instead of default blue if the item icon is pressed. I have searched a lot and know that I need to override the attribute android:actionBarItemBackground in styles, but still my selector doesnt work, the background color is transparent, but the color in on pressed state is not grey, it stays transparent. :/
here is my code:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarItemBackground">#drawable/action_bar_item_drawable</item>
</style>
and here the drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#android:color/transparent"/>
<item android:drawable="#color/grey" android:state_pressed="true"/>
</selector>
anyone an idea?
When you supply a selector as a drawable, the first matching item that satisfies all conditions will be displayed.
In your drawable, the transparent color gets chosen every time because it doesn't have any condition such as state_pressed="true".
You should put items with more restricting conditions first and item without any condition as the last one.
Your drawable should instead look like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#color/grey" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>

How to make a listview transparent?

I have a listview activity with a bunch of single textview items. Here's my item:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/label"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFFFFF"
android:background="#00000000"
android:padding="10dip"
android:textSize="16dip"
android:textStyle="bold" >
</TextView>
As you can see, the text color is white, and the background is transparent. (I tried putting alpha from 0 to 100, it either shows white background or black)
Now in the listview, I have put in an image in the background called "s4":
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/s4">
</ListView>
I want to make the listview items sort of translucent such that the background image can be viewed.
Each item should be translucent, the text should be white and visible, and the listview's background should be visible.
I can't seem to get it right, I can put in a solid color, but I want the items to scroll over a fixed background image.
What am I doing wrong?
Try like this.......... Put your text view with linear layout and set background color for your layout.......
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="280dp"
android:layout_height="30dp"
android:background="#F1F1F1"
android:orientation="horizontal" >
<TextView
android:id="#+id/label"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFFFFF"
android:background="#00000000"
android:padding="10dip"
android:textSize="16dip"
android:textStyle="bold" >
</TextView>
</LinearLayout>

scrolling interval in a Spark List with Tilelayout oversized while using mouse wheel after scrolling with mouseclick

I have a spark List with an item renderer and a tile layout.
If I scroll by clicking with the mouse on the scroll bar and trying to scroll with the mouse wheel after that, there is a problem:
The interval of the scrolling is oversized, instead of scrolling one item down (or up) the List scrolls 4 items down (or up).
<s:List
dataProvider="{myDataProvider}"
itemRenderer="MyRenderer"
left="11" right="11"
bottom="3" top="10"
useVirtualLayout="false"
>
<s:layout>
<s:TileLayout
columnAlign="justifyUsingWidth"
rowAlign="justifyUsingGap"
orientation="rows"
rowHeight="180"
columnWidth="220"
clipAndEnableScrolling="true"
/>
</s:layout>
</s:List>
rowHeight = 180 and columnWidth = 220 are the dimension of my renderer.
Any hints what's wrong or how I could solve this problem?
Update:
This is a small example:
The main application:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable] public var items:ArrayCollection;
protected function init(event:FlexEvent):void{
items = new ArrayCollection();
for(var i:int = 0; i<200; i++){
var obj:Object = new Object();
obj.name = "Item "+i;
items.addItem(obj);
}
}
protected function list1_mouseWheelHandler(event:MouseEvent):void{
trace("delta ="+event.delta);
}
]]>
</fx:Script>
<s:Group width="50%"
height="50%">
<s:List
dataProvider="{items}"
left="5" right="5"
top="5" bottom="5"
itemRenderer="MyRenderer"
allowMultipleSelection="false"
useVirtualLayout="false"
mouseWheel="list1_mouseWheelHandler(event)"
>
<s:layout>
<s:TileLayout
columnAlign="justifyUsingWidth"
rowAlign="justifyUsingGap"
orientation="rows"
rowHeight="180"
columnWidth="220"
clipAndEnableScrolling="true"
/>
</s:layout>
</s:List>
</s:Group>
And the renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:spareparts="de.rotex.spareparts.*"
width="220" height="180">
<s:BorderContainer borderColor="#FFF9DE" >
<s:Label horizontalCenter="0" verticalCenter="0"
text="{data.name}" />
</s:BorderContainer>
</s:ItemRenderer>
If you now try to scroll you will notice that (with one scroll) you would see Item 6 and 7 at the top (setting the line-scroll property in windows to 3, which is alright then).
But If you now click on the scroll bar and scroll again (from the top) you will see that Item 12 and 13 are at the top. Not Item 6 and 7 as before...
You can control the amount scrolled by the mousewheel by subclassing VScrollBar and overriding the mouseWheelHandler method. A post in this forum thread has example code attached: http://forums.adobe.com/message/2783736