Styling on android


#1

Hey people,

The app i’m working has a style that needs to look the same on Ios as android.
So I styled the tabs on my browser and it looks great!

But when I deployed it to my actual device al the styles where gone and were resetted to the default colors/borders/background-colors.The styled header bar remained intact but my tabs don’t look that great anymore :frowning:

is there a way to get the same styles on browser/ios/android?
and if there isn’t how can i style the android tabs?


#2

Hey there! So there are some things you can do to get a consistent look.

This gist is if you want to create a custom theme, in addition to the included colors (positive, calm, darl, etc)

Take a look at it give it a try :smile:


#3

Hey again, like you said i created a custom theme and switched from css to sass,
it now looks great on browsers, and Ios :smile:

but it the android tabs are still being overwritten by some css somewhere and can’t find the cause of the problem,
do you by any chance know where i should look for the problem?
i tried _variables.scss and changed them but it had no effect, i also tried it at _tabs.scss and the changes still won’t effect the tabs on my android device,

the rest of the style works fine on android and ios so that’s solved

Hope you can help me with the tabs styling issue :smile:


#4

You can debug Layout of your Android App with Chrome remote debugging https://developer.chrome.com/devtools/docs/remote-debugging


#5

Well now I feel like a dumby, never post the like to the gist.

@sjerd, the part you want to look at is line 62, which sets up the stripped style for android. Make the changes there and all will be well


#6

Oh so a custome stripped style was set up, makes sense it didn’t work.
Works fine now thanks for helping :smile:


#7

hi … the solution is very simple … if you want your styles are not changed with the styles by default, do this
angular.module (‘yourapp’, [‘ionic’])
. run (function ($ ionicTabsConfig) {
   / / Default to ios tab-style bar on android too
   $ ionicTabsConfig.type =’’;
});