Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
jeneser committed Jun 26, 2017
1 parent 6b6477d commit 3f70879
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 30 deletions.
82 changes: 52 additions & 30 deletions README.md
@@ -1,42 +1,53 @@
# ionic-super-bar

A transparent statusBar and toolBar DEMO in ionic.

|Android 4.x|Android 5.0+|iOS|
|:-:|:-:|:-:|
|![build faill](https://img.shields.io/badge/build-failing-red.svg)|![build passing](https://img.shields.io/badge/build-passing-brightgreen.svg)|![build passing](https://img.shields.io/badge/build-passing-brightgreen.svg)|
|![build faill](https://img.shields.io/badge/support-failing-orange.svg)|![build passing](https://img.shields.io/badge/support-passing-brightgreen.svg)|![build passing](https://img.shields.io/badge/support-passing-brightgreen.svg)|

## Preview
<img src="https://github.com/jeneser/jeneser.github.io/blob/master/assets/images/ionic2-super-bar-demo.gif?raw=true" alt="Preview">
<br>
<p align="center">
<img src="screenshot.gif" />
</p>
<br>

## Get started
* Clone this repository: `git@github.com:jeneser/ionic2-super-bar.git`

* Clone this repository: `git@github.com:jeneser/ionic-super-bar.git`
* Run `npm install` from the project root.
* Run `ionic serve` in a terminal from the project root.

## Transparent statusBar for android

* Run `ionic platform add android` in a terminal
* On `MainActivity.java` file on Android platform folder`platforms/android/src/../../MainActivity.java`, paste the following code after super.onCreate()

```java
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}
```

* Remember to add these packages in MainActivity.java

```java
import android.os.Build;
import android.view.View;
```

* Last set `StatusBarBackgroundColor` in `config.xml`from the project root.
`<preference name="StatusBarBackgroundColor" value="#33000000"/>`
```
<preference name="StatusBarBackgroundColor" value="#33000000"/>
```

## File Structure

```
.
├── config.xml
├── ionic.config.json
├── LICENSE
├── package.json
├── README.md
├── resources
Expand All @@ -45,28 +56,26 @@ import android.view.View;
│ │ ├── app.component.ts
│ │ ├── app.html
│ │ ├── app.module.ts
│ │ ├── app.scss * transparent statusBar and SuperBar
│ │ ├── app.scss * transparent statusBar and SuperBar
│ │ └── main.ts
│ ├── assets
│ │ ├── icon
│ │ │ └── favicon.ico
│ │ └── imgs
│ │ ├── avatar.png
│ │ ├── detail-bg.png
│ │ ├── home-bg.png
│ │ └── menu-header.jpg
│ ├── declarations.d.ts
│ │ └── img
│ ├── index.html
│ ├── manifest.json
│ ├── pages
│ │ ├── home * transparent statusBar and SuperBar page
│ │ ├── home * transparent statusBar and SuperBar page
│ │ │ ├── home.html
│ │ │ ├── home.scss
│ │ │ └── home.ts
│ │ └── page1 * transparent statusBar and SuperBar page
│ │ ├── page1.html
│ │ ├── page1.scss
│ │ └── page1.ts
│ │ ├── language-details * transparent statusBar and SuperBar page
│ │ │ ├── language-details.html
│ │ │ ├── language-details.scss
│ │ │ └── language-details.ts
│ │ └── list
│ │ ├── list.html
│ │ ├── list.scss
│ │ └── list.ts
│ ├── service-worker.js
│ └── theme
│ └── variables.scss
Expand All @@ -75,15 +84,28 @@ import android.view.View;
```

## Environment

```
Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.8
Node Version: v6.9.2
Xcode version: Not installed
global packages:
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.4.2
System:
Node : v6.10.3
OS : Linux 4.8
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 3.10.10
```
Binary file added screenshot.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3f70879

Please sign in to comment.