No style ViewPagerIndicator in combination with SherlockActionBar - android

I'm trying to implement the ViewPagerIndicator with SherlockActionBar. It works: I can slide the fragments, but the style doesn't work!
It looks like this:
related topic: https://github.com/JakeWharton/Android-ViewPagerIndicator/issues/66
I know what's going wrong:
In the sample of VPI, the style of a page is set in AndroidManifest.xml by (for example)
<activity
android:name=".SampleTabsDefault"
android:theme="#style/Theme.PageIndicatorDefaults">
</activity>
But when I add that android:theme element to my own Manifest.xml I get the following exception:
03-16 11:06:24.400: E/AndroidRuntime(483): Caused by: java.lang.IllegalStateException: You must use Theme.Sherlock, Theme.Sherlock.Light, Theme.Sherlock.Light.DarkActionBar, or a derivative.
I've also tried to copy all the style-information to styles.xml, but that also doesn't work.
Can you tell me how to set a style to the VPI?
Thank you!
EDIT:
Now I've added
<activity
android:name=".SampleTabsDefault"
android:theme="#style/StyledIndicators">
</activity>
to my Manifest.xml
and the following style in styles.xml
<style name="Theme.BataApp" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.Styled.ActionBar</item>
</style>
<style name="StyledIndicators" parent="Theme.BataApp">
<item name="vpiTitlePageIndicatorStyle">#style/Widget.TitlePageIndicator</item>
<item name="vpiTabPageIndicatorStyle">#style/Widget.TabPageIndicator</item>
<item name="vpiTabTextStyle">#style/Widget.TabPageIndicator.Text</item>
</style>
Result: I don't get any Exception, see the style, but I now I can't see any fragments :(
The code of the activity can be found here: http://pastebin.com/hsNgxFDZ
Screenshot of current page with style:

In order to see the Fragments, you'll have to somehow extend an Android base-theme. In order to see the ViewPagerIndicator, you'll have to somehow include those style-definitions. The answer is to create your own theme that extends the ActionBarSherlock-theme (which extends the Android base-themes), and implements the ViewPagerIndicator-styles.
Example:
<style name="myTheme" parent="#style/Theme.Sherlock">
<!-- If you want to use the default ViewPagerIndicator-styles, use the following: -->
<item name="vpiTitlePageIndicatorStyle">#style/Widget.TitlePageIndicator</item>
<item name="vpiTabPageIndicatorStyle">#style/Widget.TabPageIndicator</item>
<item name="vpiTabTextStyle">#style/Widget.TabPageIndicator.Text</item>
<!-- If you want to implement your custom style of CirclePageIndicator, do it like so: -->
<item name="vpiCirclePageIndicatorStyle">#style/myCirclePageIndicator</item>
<!-- Put whatever other styles you want to define in your custom theme -->
</style>
<style name="myCirclePageIndicator" parent="Widget.CirclePageIndicator">
<item name="fillColor">#color/my_custom_circle_indicator_fill_color</item>
</style>
Then in your Manifest, set android:theme="#style/myTheme" to the <application> or to your <activity>s.
Note that you don't have to include all 4 "vpi..."-styles; you only have to include those that you use. E.g. if you're only using the CirclePageIndicator, you only have to include <item name="vpiCirclePageIndicatorStyle">...</item> and can leave out the other 3 item declarations.

I accidentally removed android:layout_weight="1" when adding styles.
So for other who want to implement VPI with ABS:
layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.viewpagerindicator.TabPageIndicator
android:id="#+id/indicator"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
style="#style/StyledIndicators" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>
styles.xml:
<style name="Theme.BataApp" parent="Theme.Sherlock.Light.DarkActionBar">
etc.
</style>
<style name="StyledIndicators" parent="Theme.BataApp">
<item name="vpiTitlePageIndicatorStyle">#style/Widget.TitlePageIndicator</item>
<item name="vpiTabPageIndicatorStyle">#style/Widget.TabPageIndicator</item>
<item name="vpiTabTextStyle">#style/Widget.TabPageIndicator.Text</item>
</style>
Thank you #Reinier! :D

Related

Centered image on windowBackground is different than on an inflated layout

I tried to implement a "slash screen" and I faced an issue where the image on splashscreen is not really centered, some times it jumps up and sometimes down and sometimes it's well placed.
First of all, the issue:
So here you can see my logo, the first one to show up is the one that is in Red, it's declared like this :
background_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background color -->
<item android:drawable="#color/colorPrimaryDark" />
<!-- Logo at the center of the screen -->
<item
android:width="300dp"
android:height="300dp"
android:gravity="center">
<bitmap android:src="#drawable/ic_launcher_sablier" />
</item>
</layer-list>
And added like this:
styles.xml
<style name="SplashTheme" parent="AppTheme">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
Then the view with the Blue one is shown, it's declared like this :
activity_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayoutSplash"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/colorPrimaryDark"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imageViewSplash"
android:layout_width="300dp"
android:layout_height="300dp"
app:srcCompat="#drawable/ic_launcher_sablier" />
<ProgressBar
android:id="#+id/progressSplash"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="12dp"
android:indeterminateTint="#color/grey_light"
android:visibility="gone" />
</LinearLayout>
It's just like the windowBackground is taking into consideration something else (StatusBar height, etc.) and it's not really centered on the screen.
I've tried this:
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
and/or
<item name="android:windowNoTitle">true</item>
and/or
<item name="android:windowContentOverlay">#drawable/background_splash</item>
And nothing is working.
At a moment I said to myself it's ok if it's not working under api 26 so I used that :
v26/style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="SplashTheme" parent="AppTheme">
<item name="android:windowSplashscreenContent">#drawable/background_splash</item>
</style>
</resources>
And same issue.
So finally I was thinking to move the inflated view up/or down instead of trying to place correctly the window background, it's not a big problem if it's not exactly centered in the screen so I tried to remove Status bar height, and it was working on some devices but not on others, and etc...
It's working on Nexus 5 with the specific v26/style.xml I shared before, so that is exactly what I want :
And what happen on my Xiaomi MI 8 for example (it also happen on a Pixel 2XL, on some Huawei,...):
So if someone have a solution to center correctly the windowBackground OR to move the inflated view accordingly, I will be happy with both !
Thx to you to help me !
EDIT 13/08:
Here the AppTheme you asked for :
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
So, after doing a lot of research, I managed to make it work for API 26 and above.
Let's recap, if you just want to make sure to display an image when launching the application to avoid "the white screen loading", just use:
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="SplashTheme" parent="AppTheme">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
</resources>
And set it like this:
AndroidManifest.xml
<activity
android:name=".ui.splash.ActivitySplash"
android:theme="#style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Now if you want to have a flow of flowing screens by displaying an animated progressbar for example, you can do it but only for API 26 and above like this:
v26/style.xml
<resources>
<style name="SplashTheme" parent="AppTheme">
<item name="android:windowSplashscreenContent">#drawable/background_splash</item>
<item name="android:windowOverscan">true</item>
</style>
</resources>
The solution is to use android:windowOverscan, I don't really know why, I tried to search for answers in doc, but only thing I found was :
windowOverscan
Flag indicating whether this window should extend into overscan region.
Corresponds to WindowManager.LayoutParams.FLAG_LAYOUT_IN_OVERSCAN.
May be a boolean value, such as "true" or "false".
To make it work in-out of API 26, maybe there are some calculations to be done with the help of this (I admit I have not had the time or the patience to spend more time in solve this problem):
https://developer.android.com/reference/androidx/core/view/WindowInsetsCompat
Enjoy.
(If someone have a better answer to this question, I can check his answer instead of mine ;) )

Custom style attributes for SwitchPreferenceCompat (support v7)

I am trying to add some space to the the top of my SwitchPreferenceCompat which is inside of a PreferenceFragmentCompat. Basically I just need some room between it and the top Toolbar, either by expanding its height or with a padding gap without adding a white space that will interfere with the elevation shadow of the Toolbar. I believe I can achieve this by adding a custom style to the SwitchPreferenceCompat, but I am having trouble getting that to work.
Here is what I have tried:
In my styles.xml-
<style name="SwitchPreferenceNew" parent="Preference.SwitchPreferenceCompat.Material">
<item name="android:paddingTop">20dp</item>
</style>
In my app_preferences.xml-
<android.support.v7.preference.SwitchPreferenceCompat
style="#style/SwitchPreferenceNew"
android:defaultValue="false"
android:icon="#drawable/ic_power_settings_new_black_48dp"
android:key="prefsActivate"
android:summary=""
android:title="Activate reminders" />
I think I am just not overriding the style correctly, but I am having trouble finding out how to do it with the SwitchPreferenceCompat. Thank you in advance!
I know this is late but i get result from following code:
my app theme:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="preferenceTheme">#style/my_preference_theme</item>
</style>
my preference theme:
<style name="my_preference_theme" parent="#style/PreferenceThemeOverlay">
<item name="switchPreferenceCompatStyle">#style/preference_switch_compat</item>
</style>
in my PreferenceSwitchCompat i used layout property and you should create new layout for your view
<style name="preference_switch_compat">
<item name="android:layout">#layout/switch_layout</item>
</style>
this is here you must customize your view:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.SwitchCompat
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/switchWidget"
android:background="#f00"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
hope to help to someone.

How do I find all possibillities for Androids "Theme XML Style"?

The following file defines the base style used by my application:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Snapchat" parent="????" >
<item name="android:colorPrimaryDark">#color/Snapchat_violet</item>
<item name="android:colorPrimary">#color/Snapchat_blue</item>
<item name="android:colorAccent">#color/Snapchat_blue</item>
<item name="android:colorBackground">#color/Snapchat_white</item>
<item name="android:colorForeground">#color/Snapchat_yellow</item>
<item name="android:navigationBarColor">#color/Snapchat_grey</item>
</style>
</resources>
I want to use a standard theme as the parent to inherit from, but I can't find a listing of all standard themes and their corresponding xml names/paths.
I'm sorry if this is a newbish question, but I just can't find it in the android documentation.
check out following links it will help you
Theme.xml
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml
Style.xml
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml
You can define multiple styles per file using tag but each style will have its name that uniquely identifies the style. Android style attributes are set using tag as shown below −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomFontStyle">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:capitalize">characters</item>
<item name="android:typeface">monospace</item>
<item name="android:textSize">12pt</item>
<item name="android:textColor">#00FF00</item>/>
The value for the can be a keyword string, a hex color, a reference to another resource type, or other value depending on the style property.
Using Styles
Once your style is defined, you can use it in your XML Layout file using style attribute as follows −
<TextView
android:id="#+id/text_id"
style="#style/CustomFontStyle"
android:text="#string/hello_world" />
</LinearLayout>
To implement a custom theme create or edit MyAndroidApp/res/values/themes.xml and add the following −
<resources>
...
<style name="MyCustomTheme" parent="android:style/Theme">
<item name="android:textColorPrimary">#ffff0000. </item>
</style>
...
</resources>
In your AndroidManifest.xml apply the theme to the activities you want to style −
<activity
android:name="com.myapp.MyActivity"
....
android:theme="#style/MyCustomTheme"
/>
Your new theme will be applied to your activity.
You can also have a look at http://www.tutorialspoint.com/android/android_styles_and_themes.htm
See style, stylable and attr.

Support Action Bar not applying my style?

I've been spending hours trying to fix the changing action bar title size according to this stack overflow post:
Android Toolbar: small title text in landscape mode
Unfortunately, it seems that no matter what I do, anything regarding the actionbar style won't actually apply.
My styles v14 file:
<!-- Main theme -->
<style name="MyTheme" parent="Theme.AppCompat">
<item name="android:actionBarItemBackground">#drawable/selectable_background</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.MyTheme</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.MyTheme</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.MyTheme</item>
<item name="android:spinnerItemStyle">#style/Widget.MyTheme.TextView.SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/Widget.MyTheme.DropDownItem</item>
</style>
My ActionBar styles:
<style name="Widget.MyTheme.ActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="android:background">#drawable/ab_solid</item>
<item name="android:titleTextStyle">#style/my_title_style</item>
</style>
<style name="my_title_style" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="textSize">20sp</item>
</style>
And, of course, "MyTheme" is applied in the manifest as well - I've even tried adding it to all the individual activities as well, to no avail.
It seems that no matter what I do, stuff just won't apply. I've tried removing the android: namespace, I've tried using titleTextAppearance instead of titleTextStyle, I've basically emulated exactly how the parent themes do it, but it won't change anything. Anybody have a clue as to what's going on? I just recently updated to AppCompat so I'm not totally familiar with how everything works.
You need to use
<item name="background">#drawable/ab_solid</item>
<item name="titleTextStyle">#style/my_title_style</item>
for support library compatibility into your style.
Read Styling the Action Bar, section "For Android 2.1 and higher". Where it is given that you need to use two entries like
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
So your complete style would be
<style name="Widget.MyTheme.ActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="android:background">#drawable/ab_solid</item>
<item name="android:titleTextStyle">#style/my_title_style</item>
<item name="background">#drawable/ab_solid</item>
<item name="titleTextStyle">#style/my_title_style</item>
</style>
I don´t know if it's all that ou have made, but you have to add this code in the manifest(in the activity you want to apply this style):
<activity
android:name=".MyActivity"
android:label="#string/appName"
android:theme="#style/my_little_style" >
</activity>
Try in this way:
Create a layout for your Toolbar and put a TextView:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:background="#b2b2b2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/toolbar_title"
android:textSize="20sp"
android:textColor="#ff282828"/>
</android.support.v7.widget.Toolbar>
Include the layout in your .xml:
<include layout="#layout/toolbar_activities"
android:id="#+id/toolbar_layout"/>
Finally set a title in your java class:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_layout);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
mTitle.setText("Your Title");
setSupportActionBar(toolbar)

Change the background color of both the actionbar and the rest of the activity

In continues to this question, I'd like to change the colors of both the actionbar (the upper pane)to one color and the rest of the screen to a different color.
How can I do it?
when I tried this -
<style name="MyTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:background">#ffffd982</item>
</style>
it seems like the 'android:background' definition override also the actionbarstyle definition
Indeed, the background attribute is known to supersede the actionBarStyle attribute. However, changing the color of the entire Activity needs to be done through the Activity's XML layout, using the android:background attribute of the parent ViewGroup. The ActionBar styles won't help you there.
In your Activity's root ViewGroup, set the background attribute as:
<LinearLayout
android:id="#+id/outermost_viewgroup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background = "#00FF00"
....
....
EDIT:
I just realized that there is a way for this:
<item name="android:windowBackground">#color/background</item>
Add the above tag to to your ActionBar style definition, and the background in the colors.xml file:
<resources>
<color name="background">#00FF00 </color>
</resources>
There, done!
To change Actionbar style In your style.xml file define style like bellow
<style name="AppBaseTheme" parent="android:Theme.Light">
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.ActionBar">
<item name="android:background"><YourColor></item>
<item name="android:titleTextStyle"><Your String Color></item>
</style>
In your menifest.xml file used your style inside application tag like bellow
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
And for set background color of your activity just set android:background attribute in your each activity like
<RelativeLayout 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:background="#ff2323"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_below="#+id/textView2"
android:layout_marginTop="121dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
I think this is work for you...!

Categories

Resources