Android SlidingPaneLayout Fade - android

I am trying a prototype app with SlidingPaneLayout. My SlidingPaneLayout is gray and body view is pure white.
but when i slide in, the small visible area of body page goes slightly dark or overlaying with dark screening. all i want is pure original white color of that body view.
I tried couple of Methods to switch off these but seems impossible. such as
SlidingPaneLayout sp = (SlidingPaneLayout) findViewById(R.id.mainSlider);
sp.setHorizontalFadingEdgeEnabled(false);
or following property in XML
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainSlider"
android:requiresFadingEdge="none" <!-- try one -->
android:fadingEdgeLength="0dp" <!-- try two -->
android:fadingEdge="none" <!-- try three -->
tools:context=".MainActivity">
Any one of you, have you ever done this successfully?

You can set the fade color to transparent:
SlidingPaneLayout sp = (SlidingPaneLayout) findViewById(R.id.mainSlider);
sp.setSliderFadeColor(getResources().getColor(android.R.color.transparent));

Related

How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar on KitKat?

I've problems with implementing this guidelines in Kitkat. On Lollipop everything looks ok:
But on Kitkat Toolbar does not have any top padding:
I can fix this with https://github.com/jgilfelt/SystemBarTint library using:
SystemBarTintManager.SystemBarConfig config = tintManager.getConfig();
mainView.setPadding(0, config.getPixelInsetTop(false), config.getPixelInsetRight(), config.getPixelInsetBottom());
But I feel that I'm doing something wrong. Do you have any good practices how to achieve this effect on KitKat?
Move current layout resource in layout-v21 folder to have it as it is on the first screenshot. Then try to create new layout resource that will have just a placeholder view of same height of the status bar
Hierarchy should be following:
--Top layout
--<view layout_height="25dip"...>
-- Toolbar
-- the rest of the views
Using view аbove your Toolbar, will not push it behind the status bar, as it is on second screenshot and will mimick the padding you are trying to achieve
Do you have fitsSystemWindow set to true? Setting it to false will bring the toolbar back under the status bar.
The effect you see for Kitkat is because you have translucent status bar set and fitting to System Window goes underneath it.
For example, in your layout XML file:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="false">
<android.support.v7.widget.Toolbar
android:background="#color/blue"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/action_bar"/>
<!-- YOUR CONTENT HERE -->
<!-- YOUR NAVIGATION VIEW HERE -->
</android.support.v4.widget.DrawerLayout>

Transparent panel with Umano SlidingUpPanel

I have created a sliding layout using the Umano code:
https://github.com/umano/AndroidSlidingUpPanel
It works perfectly, but I have one problem. My panel should be partly transparent, so the original view is still visible when it's up.
The view background is set properly to #64000000, but it is still completely opaque and nothing can be seen behind it.
Here's the code:
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="#+id/sliding_up_panel"
android:layout_height="match_parent"
android:layout_width="match_parent">
<ImageView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:scaleType="fitCenter"
android:id="#+id/images_gallery_image" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#64000000">
<!-- MY STUFF (transparent stuff) -->
</RelativeLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
I thought maybe the issue is caused by hiding of UI elements underneath the expanded panel, so I tried to play around in the library code, but it doesn't seem to be related.
While debugging, I have noticed that hasOpaqueBackground(View v) in line 355 of the library does return false, as expected - but the view still is opaque.
The support for this has been added in the library. Just set overlay attribute to true, and set the color of the panel to transparent.
I had the same problem, It seem's as if this feature was added before but it isnt in the code. I used the other version of SlidingUpPanelLayout.java (here) and changed mIsTransparent to true false

Android semi transparent sliding drawer

I want to make an iOS 7 like drawer that I can slide from the bottom that doesn't cover the full screen and is semi transparent/blurred on Android.
I had a look at SlidingDrawer on android to try and get a start but it looks like its being depreciated. How can I create a similar future proof effect on android?
Just change the background color of the List view that gets populated in navigation drawer fragment.
use of background color "#22FFFFFF" makes navigation drawer semitransparent
Use an hexadecimal color code, which consists of two digits for alpha and six for the color itself, like this:
use android:background ="#88676767" change the first 88 to your selection of opacity
android:background="#c0000000" -for more darkness
Please rate it if it turns helpful.
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#22FFFFFF"
tools:context="com.Navigation Drawer Fragment" />

Android App Background: using multiple images

I have a background image that's split into three separate images:
backgroundTop.png
backgroundMiddle.png
backgroundBottom.png
How would I go about implementing a background in an Android app in which the top image is displayed at the top of the application, and the bottom image at the bottom, and the middle image is tiled in between? This would of course depend on how much content is loaded on the screen - much like in web pages.
In other words, the total number of times the middle image is tiled will depend on what is on the screen.
I've seen a solution to implement a tiling background out of a single image here: How to make android app's background image repeat
This works fine if you are using a single picture, but not with multiple images.
Links to examples below so you know what I mean:
http://rockfreaks.net/images/reviewPageTop.png
http://rockfreaks.net/images/reviewPageMiddle.png
http://rockfreaks.net/images/reviewPageBottom.png
Think you can try combining layer list drawable (it's possible to set insets for layers) with a tiled bitmap drawable that is placed as a middle layer and positioned with appropriate insets.
Something like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/page_top" />
<item
android:insetTop="#dimen/page_top_height"
android:insetBottom="#dimen/page_bottom_height"
>
<bitmap
android:src="#drawable/page_middle_tile"
android:tileMode="repeat"
/>
</item>
<item android:drawable="#drawable/page_bottom" />
</layer-list>
But it all depends on your layout indeed.
Set the background as the middle image and tile it. (like in the example you show)
Create a header view that you insert at the top of each page.
Create a footer view that you insert at the bottom of each page.
And have your content in the middle.
I've made it a flat file here, but you can easily imagine refactoring it into includes, or whatever your application needs.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FF00" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dip"
android:layout_alignParentTop="true"
android:background="#FF0000" />
<!-- Your content -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dip"
android:layout_alignParentBottom="true"
android:background="#0000FF" />
</RelativeLayout>
Red = Header
Green = Tiles (which would be inherited from your Theme)
Blue = Footer
Try something like this :
Top and bottom in two layouts with android:gravity="TOP" and "BOTTOM". These two layouts are set up with android:background="#drawable/xxx.png"
For the center, either use your solution or maybe use a ScrollView.

Psuedo-Tabs in android

I want to let the user know what page of the app he is on using tabs. So if he is on page one the page one tab will be lit and if he is on page two the page two tab will be lit etc. But i want it so that the tabs don't have any function. They are stay the same across all the pages (execpt what is lit) and do not have touch/click events. Should I use tabs for this or is there a better option? How exactly do I accomplish this with tabs for the better option? Thanks in advance
Probably the best way to do this is to avoid using the tab widgets altogether, and simply roll your own with TextViews arranged in a container like LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<!-- Top-level layout for page -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Tab Bar -->
<LinearLayout
android:id="#+id/tab_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- Tab 1 -->
<TextView
android:id="#+id/tab_bar_file"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/file_label"/>
<!-- Tab 2 -->
<TextView
android:id="#+id/tab_bar_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/edit_label"/>
<!-- More tabs go here -->
</LinearLayout>
<!-- Page content goes here -->
</LinearLayout>
Some notes about this:
You can set padding on the TextView
to expand the tab size. You can set a
background drawable (including a
color or an image resource) to
change the 'look' of the tab, as
well as style the text.
You can extract the enclosing LinearLayout for the tab bar into a
separate XML file, and then use the
<include> directive to incorporate
it into whatever layouts need to
display the tab.
In your Java code, you simply change
the style/color of whatever tab is
current, to highlight it for the user.

Categories

Resources