How to make a listview transparent? - list

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>

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
}

How to make ToolBar and StatusBar 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.

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>

Change ActionBar Tabs background color

Is there a way to change the background color of the tab bar in the ActionBar without changing it in the one line version?
To clarify what I want: In portrait mode the ActionBar is split in two lines, the ActionBar itself and the tabs below. In landscape mode the tabs are in the actual ActionBar.
I want to change the background color of the portrait mode. If I change the background in the TabView it'll be changed for both modes. Do I have to create separate styles for those? Which brings up a second question: is there a way to know when it'll be two lines and when not?
Or am I just missing something?
I'm using ActionBarSherlock btw
I think you are looking for the android:backgroundStacked attribute of the ActionBar style:
<style name="MyTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:backgroundStacked">#drawable/my_stacked_background</item>
</style>
or (If using ActionBarSherlock):
<style name="MyTheme" parent="#style/Theme.Sherlock.Light">
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
<item name="actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="android:backgroundStacked">#drawable/my_stacked_background</item>
<item name="backgroundStacked">#drawable/my_stacked_background</item>
</style>
To Change Actionbar Tab's color, Pls use this code:
//For Example if you want White color as Tabs background, then
getActionBar().setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#FFFFFF")));
In ActionBarSherlock's values/abs__themes.xml there is
<item name="actionModeSplitBackground">#drawable/abs__cab_background_bottom_holo_dark</item>
You have to create your own theme derived from ABS
<style name="AppTheme" parent="Theme.Sherlock">
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="Widget.Sherlock.ActionBar">
<item name="actionModeSplitBackground">#drawable/my_split_background</item>
</style>
Hope this helps you.
ColorDrawable colorDrawable = new ColorDrawable(Color.White);
actionBar.SetStackedBackgroundDrawable(colorDrawable);
for xamarin folks.
To seperate styles depending on orientation you have to create in your /res folder a new folder called layout-land (for landscape mode) and layout-port (in portrait mode) and put your xml files for action bar and set it's specific style (with the color you want) on each folder.

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