[Guide][TUT] Honami style Tab indicators

Search This thread

ljg211314

Senior Member
Jul 20, 2013
53
54
HangZhou
Let's see what I'll teaching you today



Preview:

Defaul---------------------------------------------------------------------------------------------------Honami
Screenshot_2014-08-02-10-13-55.png
Screenshot_2014-08-02-10-34-57.png


All right,here we go

1.Download resources View attachment 2884731
put folder file into res
forget about styles.txt


2.Goto framework-res\res\values open styles.xml :eek:

search code
HTML:
[HTML]    <style name="Widget.Holo.TabWidget" parent="@style/Widget.TabWidget">

An whole section replace (befour </style>)
HTML:
    <style name="Widget.Holo.TabWidget" parent="@style/Widget.TabWidget">
        <item name="divider">@null</item>
        <item name="tabStripLeft">@null</item>
        <item name="tabStripRight">@null</item>
        <item name="tabStripEnabled">false</item>
        <item name="measureWithLargestChild">true</item>
        <item name="showDividers">none</item>
        <item name="dividerPadding">8.0dip</item>
        <item name="tabLayout">@layout/semc_tab_indicator_holo_dark</item>
    </style>

seems like:
QQ%E6%88%AA%E5%9B%BE20140802140849.png


search code
HTML:
    <style name="Widget.Holo.Tab" parent="@style/Widget.Holo.ActionBar.TabView">

An whole section replace (befour </style>)
HTML:
    <style name="Widget.Holo.Tab" parent="@style/Widget.Holo.ActionBar.TabView">
        <item name="background">@drawable/semc_tab_indicator_holo_dark</item>
        <item name="layout_width">0.0dip</item>
        <item name="minWidth">80.0dip</item>
        <item name="layout_weight">1.0</item>
    </style>


search code
HTML:
    <style name="Widget.Holo.Light.Tab" parent="@style/Widget.Holo.Light.ActionBar.TabView">

An whole section replace (befour </style>)
HTML:
    <style name="Widget.Holo.Light.Tab" parent="@style/Widget.Holo.Light.ActionBar.TabView">
        <item name="background">@drawable/semc_tab_indicator_holo_light</item>
        <item name="layout_width">0.0dip</item>
        <item name="minWidth">80.0dip</item>
        <item name="layout_weight">1.0</item>
    </style>


search code
HTML:
    <style name="Widget.ActionBar.TabBar" parent="@style/Widget" />

An whole section replace (befour </style>)
HTML:
    <style name="Widget.ActionBar.TabBar" parent="@style/Widget" />
    <style name="Widget.Holo.ActionBar.TabView" parent="@style/Widget.ActionBar.TabView">
        <item name="background">@drawable/semc_tab_indicator_holo_dark</item>
        <item name="paddingLeft">@dimen/somc_actionbar_tab_padding</item>
        <item name="paddingRight">@dimen/somc_actionbar_tab_padding</item>
    </style>

Well,Then goto last line,befour </resources>
add code

HTML:
    <style name="Widget.Holo.Light.TabWidget" parent="@style/Widget.Holo.TabWidget">
        <item name="tabLayout">@layout/semc_tab_indicator_holo_light</item>
    </style>
    <style name="Widget.Holo.Light.ActionBar.TabView" parent="@style/Widget.Holo.ActionBar.TabView">
        <item name="background">@drawable/semc_tab_indicator_holo_light</item>
    </style>
    <style name="Widget.DeviceDefault.TabText" parent="@style/Widget.Holo.TabText" />

seems like:
0140802143906.png


Well ,done ,about Decompile i don't wanna crap , replace what file you have changed to original app
enjoy it :cowboy:
Like it , how about press thanks:highfive:

If you like honami styles framework , more detail visit Ambor's post
Over here http://xdaforums.com/crossdevice-de...z2-framework-to-cm11-15-t2836856/post54584204
 
Last edited:

kraatus90

Senior Member
Sep 2, 2012
406
479
Redmi Note 10 Pro
Let's see what I'll teaching you today



Preview:

Defaul---------------------------------------------------------------------------------------------------Honami
Screenshot_2014-08-02-10-13-55.png
Screenshot_2014-08-02-10-34-57.png


All right,here we go

1.download resources View attachment 2880418
put folder file into res
forget about styles.xml


2.goto framework-res\res\values open styles.xml

search code
HTML:
    <style name="Widget.Holo.TabWidget" parent="@style/Widget.TabWidget">

An whole section replace (befour </style>)
HTML:
    <style name="Widget.Holo.TabWidget" parent="@style/Widget.TabWidget">
        <item name="divider">@null</item>
        <item name="tabStripLeft">@null</item>
        <item name="tabStripRight">@null</item>
        <item name="tabStripEnabled">false</item>
        <item name="measureWithLargestChild">true</item>
        <item name="showDividers">none</item>
        <item name="dividerPadding">8.0dip</item>
        <item name="tabLayout">@layout/semc_tab_indicator_holo_dark</item>
    </style>

seems like:
QQ%E6%88%AA%E5%9B%BE20140802140849.png


search code
HTML:
    <style name="Widget.Holo.Tab" parent="@style/Widget.Holo.ActionBar.TabView">

An whole section replace (befour </style>)
HTML:
    <style name="Widget.Holo.Tab" parent="@style/Widget.Holo.ActionBar.TabView">
        <item name="background">@drawable/semc_tab_indicator_holo_dark</item>
        <item name="layout_width">0.0dip</item>
        <item name="minWidth">80.0dip</item>
        <item name="layout_weight">1.0</item>
    </style>


search code
HTML:
    <style name="Widget.Holo.Light.Tab" parent="@style/Widget.Holo.Light.ActionBar.TabView">

An whole section replace (befour </style>)
HTML:
    <style name="Widget.Holo.Light.Tab" parent="@style/Widget.Holo.Light.ActionBar.TabView">
        <item name="background">@drawable/semc_tab_indicator_holo_light</item>
        <item name="layout_width">0.0dip</item>
        <item name="minWidth">80.0dip</item>
        <item name="layout_weight">1.0</item>
    </style>


search code
HTML:
    <style name="Widget.ActionBar.TabBar" parent="@style/Widget" />

An whole section replace (befour </style>)
HTML:
    <style name="Widget.ActionBar.TabBar" parent="@style/Widget" />
    <style name="Widget.Holo.ActionBar.TabView" parent="@style/Widget.ActionBar.TabView">
        <item name="background">@drawable/semc_tab_indicator_holo_dark</item>
        <item name="paddingLeft">@dimen/somc_actionbar_tab_padding</item>
        <item name="paddingRight">@dimen/somc_actionbar_tab_padding</item>
    </style>


Well,Then goto last line,befour </resources>
add code

HTML:
    <style name="Widget.Holo.Light.TabWidget" parent="@style/Widget.Holo.TabWidget">
        <item name="tabLayout">@layout/semc_tab_indicator_holo_light</item>
    </style>
    <style name="Widget.Holo.Light.ActionBar.TabView" parent="@style/Widget.Holo.ActionBar.TabView">
        <item name="background">@drawable/semc_tab_indicator_holo_light</item>
    </style>
    <style name="Widget.DeviceDefault.TabText" parent="@style/Widget.Holo.TabText" />

seems like:
0140802143906.png


Well ,done ,about Decompile i don't wanna crap , replace what file you have changed to original app
enjoy it :cowboy:
Like it , how about press thanks:highfive:
awesome :laugh: .


just a suggestion , maybe make a tutorial for theming whole framework to honami style ? :p
 

Ambor

Senior Member
Feb 10, 2014
1,249
2,251
Warsaw
xperiathemes.com
help me,please i got error
..
.
.

Bro probably missing file in the layoutfolder semc_tab_indicator_holo_light in framework-res.apk

if you an my files must add i folder color this files


semc_widget_text_color_dark.xml
semc_widget_text_color_light.xml

this is files from my Z2 framework-res.apk

semc_tab_indicator_holo_light.xml

Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="horizontal" android:layout_height="?actionBarSize" style="@android:style/Widget.DeviceDefault.Light.Tab"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:layout_gravity="center_vertical" android:id="@id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    <TextView android:textColor="@color/semc_widget_text_color_tabs_light" android:layout_gravity="center_vertical" android:id="@id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@android:style/Widget.DeviceDefault.TabText" />
</LinearLayout>




semc_tab_indicator_holo_dark.xml


Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="horizontal" android:layout_height="?actionBarSize" style="@android:style/Widget.DeviceDefault.Tab"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:layout_gravity="center_vertical" android:id="@id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    <TextView android:textColor="@color/semc_widget_text_color_tabs_dark" android:layout_gravity="center_vertical" android:id="@id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@android:style/Widget.DeviceDefault.TabText" />
</LinearLayout>
 

Attachments

  • 3-Out.rar
    1.3 KB · Views: 40
Last edited:
  • Like
Reactions: ljg211314

ljg211314

Senior Member
Jul 20, 2013
53
54
HangZhou
Bro probably missing file in the layoutfolder semc_tab_indicator_holo_light in framework-res.apk

if you an my files must add i folder color this files


semc_widget_text_color_dark.xml
semc_widget_text_color_light.xml

this is files from my Z2 framework-res.apk

semc_tab_indicator_holo_light.xml

Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="horizontal" android:layout_height="?actionBarSize" style="@android:style/Widget.DeviceDefault.Light.Tab"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:layout_gravity="center_vertical" android:id="@id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    <TextView android:textColor="@color/semc_widget_text_color_tabs_light" android:layout_gravity="center_vertical" android:id="@id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@android:style/Widget.DeviceDefault.TabText" />
</LinearLayout>




semc_tab_indicator_holo_dark.xml


Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="horizontal" android:layout_height="?actionBarSize" style="@android:style/Widget.DeviceDefault.Tab"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:layout_gravity="center_vertical" android:id="@id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    <TextView android:textColor="@color/semc_widget_text_color_tabs_dark" android:layout_gravity="center_vertical" android:id="@id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@android:style/Widget.DeviceDefault.TabText" />
</LinearLayout>

Indeed ! there is on thing I've missed,sorry!! semc_tab_indicator_holo_light.xml
it's in res\layout
Now dowmload it
View attachment semc_tab_indicator_holo_light.zip
 

Ambor

Senior Member
Feb 10, 2014
1,249
2,251
Warsaw
xperiathemes.com
Bro check orginal Z2 framework in It Is in LAYOUT

Even explain to you why there is

See this valiue, this is color text of swithers

<TextView android:textColor="@color/semc_widget_text_color_tabs_dark"
<TextView android:textColor="@color/semc_widget_text_color_tabs_light"


If you add this files in color folder

semc_widget_text_color_tabs_dark.xml

Code:
<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/@color/somc_theme_accent_color_dark" android:state_activated="true" />
    <item android:state_selected="true" android:color="@color/somc_theme_accent_color_dark" />
    <item android:state_enabled="false" android:color="#80bebebe" />
    <item android:color="#ffffffff" />
</selector>


semc_widget_text_color_tabs_light.xml


Code:
<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/somc_theme_accent_color_light" android:state_activated="true" />
    <item android:state_selected="true" android:color="@color/somc_theme_accent_color_light" />
    <item android:state_enabled="false" android:color="#ffbebebe" />
    <item android:color="#ff333333" />
</selector>


And add this valiue in color.xml


<color name="somc_theme_accent_color_dark">#ff64c9ff</color>
<color name="somc_theme_accent_color_light">#ff64c9ff</color>


Efect
 

Attachments

  • Screenshot_2014-07-24-10-43-05.png
    Screenshot_2014-07-24-10-43-05.png
    146.6 KB · Views: 285
  • Screenshot_2014-07-23-19-18-24.png
    Screenshot_2014-07-23-19-18-24.png
    144.9 KB · Views: 244
  • Screenshot_2014-08-02-10-43-38.png
    Screenshot_2014-08-02-10-43-38.png
    135.4 KB · Views: 227
  • Screenshot_2014-08-02-21-10-07.png
    Screenshot_2014-08-02-21-10-07.png
    136.8 KB · Views: 182
Last edited:

ljg211314

Senior Member
Jul 20, 2013
53
54
HangZhou
Awesome !!:thumbup: doesn't working on ICS ?because my device still have not a perfect CM 11:(

Sent from my R800i using XDA Free mobile app
 

FdeKlerk

Senior Member
Oct 10, 2013
669
517
Johannesburg
Touchwiz

Hi all.

I know this is z2 and yea.

But is there somebody that is willing to share some info or TUT on theming the 4.4.2 touchwiz framework-res?

if so please share.

Thanks in advance. :good:
 

Top Liked Posts

  • There are no posts matching your filters.
  • 7
    Let's see what I'll teaching you today



    Preview:

    Defaul---------------------------------------------------------------------------------------------------Honami
    Screenshot_2014-08-02-10-13-55.png
    Screenshot_2014-08-02-10-34-57.png


    All right,here we go

    1.Download resources View attachment 2884731
    put folder file into res
    forget about styles.txt


    2.Goto framework-res\res\values open styles.xml :eek:

    search code
    HTML:
    [HTML]    <style name="Widget.Holo.TabWidget" parent="@style/Widget.TabWidget">

    An whole section replace (befour </style>)
    HTML:
        <style name="Widget.Holo.TabWidget" parent="@style/Widget.TabWidget">
            <item name="divider">@null</item>
            <item name="tabStripLeft">@null</item>
            <item name="tabStripRight">@null</item>
            <item name="tabStripEnabled">false</item>
            <item name="measureWithLargestChild">true</item>
            <item name="showDividers">none</item>
            <item name="dividerPadding">8.0dip</item>
            <item name="tabLayout">@layout/semc_tab_indicator_holo_dark</item>
        </style>

    seems like:
    QQ%E6%88%AA%E5%9B%BE20140802140849.png


    search code
    HTML:
        <style name="Widget.Holo.Tab" parent="@style/Widget.Holo.ActionBar.TabView">

    An whole section replace (befour </style>)
    HTML:
        <style name="Widget.Holo.Tab" parent="@style/Widget.Holo.ActionBar.TabView">
            <item name="background">@drawable/semc_tab_indicator_holo_dark</item>
            <item name="layout_width">0.0dip</item>
            <item name="minWidth">80.0dip</item>
            <item name="layout_weight">1.0</item>
        </style>


    search code
    HTML:
        <style name="Widget.Holo.Light.Tab" parent="@style/Widget.Holo.Light.ActionBar.TabView">

    An whole section replace (befour </style>)
    HTML:
        <style name="Widget.Holo.Light.Tab" parent="@style/Widget.Holo.Light.ActionBar.TabView">
            <item name="background">@drawable/semc_tab_indicator_holo_light</item>
            <item name="layout_width">0.0dip</item>
            <item name="minWidth">80.0dip</item>
            <item name="layout_weight">1.0</item>
        </style>


    search code
    HTML:
        <style name="Widget.ActionBar.TabBar" parent="@style/Widget" />

    An whole section replace (befour </style>)
    HTML:
        <style name="Widget.ActionBar.TabBar" parent="@style/Widget" />
        <style name="Widget.Holo.ActionBar.TabView" parent="@style/Widget.ActionBar.TabView">
            <item name="background">@drawable/semc_tab_indicator_holo_dark</item>
            <item name="paddingLeft">@dimen/somc_actionbar_tab_padding</item>
            <item name="paddingRight">@dimen/somc_actionbar_tab_padding</item>
        </style>

    Well,Then goto last line,befour </resources>
    add code

    HTML:
        <style name="Widget.Holo.Light.TabWidget" parent="@style/Widget.Holo.TabWidget">
            <item name="tabLayout">@layout/semc_tab_indicator_holo_light</item>
        </style>
        <style name="Widget.Holo.Light.ActionBar.TabView" parent="@style/Widget.Holo.ActionBar.TabView">
            <item name="background">@drawable/semc_tab_indicator_holo_light</item>
        </style>
        <style name="Widget.DeviceDefault.TabText" parent="@style/Widget.Holo.TabText" />

    seems like:
    0140802143906.png


    Well ,done ,about Decompile i don't wanna crap , replace what file you have changed to original app
    enjoy it :cowboy:
    Like it , how about press thanks:highfive:

    If you like honami styles framework , more detail visit Ambor's post
    Over here http://xdaforums.com/crossdevice-de...z2-framework-to-cm11-15-t2836856/post54584204
    3
    Bro check orginal Z2 framework in It Is in LAYOUT

    Even explain to you why there is

    See this valiue, this is color text of swithers

    <TextView android:textColor="@color/semc_widget_text_color_tabs_dark"
    <TextView android:textColor="@color/semc_widget_text_color_tabs_light"


    If you add this files in color folder

    semc_widget_text_color_tabs_dark.xml

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <selector
      xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/@color/somc_theme_accent_color_dark" android:state_activated="true" />
        <item android:state_selected="true" android:color="@color/somc_theme_accent_color_dark" />
        <item android:state_enabled="false" android:color="#80bebebe" />
        <item android:color="#ffffffff" />
    </selector>


    semc_widget_text_color_tabs_light.xml


    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <selector
      xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/somc_theme_accent_color_light" android:state_activated="true" />
        <item android:state_selected="true" android:color="@color/somc_theme_accent_color_light" />
        <item android:state_enabled="false" android:color="#ffbebebe" />
        <item android:color="#ff333333" />
    </selector>


    And add this valiue in color.xml


    <color name="somc_theme_accent_color_dark">#ff64c9ff</color>
    <color name="somc_theme_accent_color_light">#ff64c9ff</color>


    Efect
    1
    preview nothing ?
    1
    nice work bro thanks:good::good::good:
    1
    help me,please i got error
    ..
    .
    .

    Bro probably missing file in the layoutfolder semc_tab_indicator_holo_light in framework-res.apk

    if you an my files must add i folder color this files


    semc_widget_text_color_dark.xml
    semc_widget_text_color_light.xml

    this is files from my Z2 framework-res.apk

    semc_tab_indicator_holo_light.xml

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout android:orientation="horizontal" android:layout_height="?actionBarSize" style="@android:style/Widget.DeviceDefault.Light.Tab"
      xmlns:android="http://schemas.android.com/apk/res/android">
        <ImageView android:layout_gravity="center_vertical" android:id="@id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
        <TextView android:textColor="@color/semc_widget_text_color_tabs_light" android:layout_gravity="center_vertical" android:id="@id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@android:style/Widget.DeviceDefault.TabText" />
    </LinearLayout>




    semc_tab_indicator_holo_dark.xml


    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout android:orientation="horizontal" android:layout_height="?actionBarSize" style="@android:style/Widget.DeviceDefault.Tab"
      xmlns:android="http://schemas.android.com/apk/res/android">
        <ImageView android:layout_gravity="center_vertical" android:id="@id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
        <TextView android:textColor="@color/semc_widget_text_color_tabs_dark" android:layout_gravity="center_vertical" android:id="@id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@android:style/Widget.DeviceDefault.TabText" />
    </LinearLayout>