Skip to content

Commit a6f863b

Browse files
MartoYankovMartoYankov
committed
feat: add css for tabstripitem for bottom navigation android
1 parent 9ad860b commit a6f863b

19 files changed

Lines changed: 518 additions & 28 deletions

File tree

‎e2e/ui-tests-app/app/bottom-navigation/background-color-page.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,18 @@ BottomNavigation {
22
background-color: gold;
33
}
44

5+
TabContentItem.special {
6+
background-color: olive;
7+
}
8+
59
TabStrip {
610
background-color: skyblue;
711
}
812

9-
TabStripItem {
10-
background-color: olive;
13+
TabStripItem.special {
14+
background-color: teal;
15+
}
16+
17+
TabStripItem.special:active {
18+
background-color: yellowgreen;
1119
}

‎e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55

66
<BottomNavigation>
77
<TabStrip>
8-
<TabStripItem title="First"></TabStripItem>
8+
<TabStripItem title="First" class="special"></TabStripItem>
99
<TabStripItem title="Second"></TabStripItem>
1010
</TabStrip>
1111

12-
<TabContentItem>
12+
<TabContentItem class="special">
1313
<GridLayout>
1414
<Label text="First View" />
1515
</GridLayout>

‎e2e/ui-tests-app/app/bottom-navigation/color-page.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
BottomNavigation {
2+
color: gold;
3+
}
4+
5+
TabContentItem.special {
6+
color: olive;
7+
}
8+
9+
TabStrip {
10+
color: skyblue;
11+
}
12+
13+
TabStripItem.special {
14+
color: teal;
15+
}
16+
17+
TabStripItem.special:active {
18+
color: yellowgreen;
19+
}

‎e2e/ui-tests-app/app/bottom-navigation/color-page.xml‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
<Page class="page">
2+
23
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
34
</ActionBar>
45

5-
<BottomNavigation style="color: green;">
6+
<BottomNavigation>
67
<TabStrip>
7-
<TabStripItem title="First"></TabStripItem>
8-
<TabStripItem title="Second"></TabStripItem>
8+
<TabStripItem title="First" class="special"></TabStripItem>
9+
<TabStripItem title="Second"></TabStripItem>
910
</TabStrip>
1011

11-
<TabContentItem>
12-
<GridLayout>
13-
<Label text="First View" />
14-
</GridLayout>
12+
<TabContentItem class="special">
13+
<GridLayout>
14+
<Label text="First View" />
15+
</GridLayout>
1516
</TabContentItem>
1617

1718
<TabContentItem>
18-
<GridLayout>
19-
<Label text="Second View" />
20-
</GridLayout>
19+
<GridLayout>
20+
<Label text="Second View" />
21+
</GridLayout>
2122
</TabContentItem>
2223
</BottomNavigation>
2324
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/font-page.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
BottomNavigation {
2+
font: 24 'Times New Roman', Times, serif;
3+
}
4+
5+
TabContentItem.special {
6+
font: italic bold 12 Georgia, serif;
7+
}
8+
9+
TabStrip {
10+
font: 15 arial, sans-serif;
11+
}
12+
13+
TabStripItem.special {
14+
font: 12 monospace;
15+
}
16+
17+
TabStripItem.special:active {
18+
font: 16 monospace;
19+
}

‎e2e/ui-tests-app/app/bottom-navigation/font-page.xml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Page class="page">
2+
3+
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<BottomNavigation>
7+
<TabStrip>
8+
<TabStripItem title="First" class="special"></TabStripItem>
9+
<TabStripItem title="Second"></TabStripItem>
10+
</TabStrip>
11+
12+
<TabContentItem class="special">
13+
<GridLayout>
14+
<Label text="First View" />
15+
</GridLayout>
16+
</TabContentItem>
17+
18+
<TabContentItem>
19+
<GridLayout>
20+
<Label text="Second View" />
21+
</GridLayout>
22+
</TabContentItem>
23+
</BottomNavigation>
24+
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/main-page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export function loadExamples() {
1515
examples.set("issue-5470", "bottom-navigation/issue-5470-page");
1616
examples.set("background-color", "bottom-navigation/background-color-page");
1717
examples.set("color", "bottom-navigation/color-page");
18+
examples.set("font", "bottom-navigation/font-page");
19+
examples.set("text-transform", "bottom-navigation/text-transform-page");
1820
examples.set("icon-title-placement", "bottom-navigation/icon-title-placement-page");
1921
examples.set("icon-change", "bottom-navigation/icon-change-page");
2022
examples.set("binding", "bottom-navigation/binding-page");

‎e2e/ui-tests-app/app/bottom-navigation/text-transform-page.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
BottomNavigation {
2+
text-transform: lowercase;
3+
}
4+
5+
TabContentItem.special {
6+
text-transform: uppercase;
7+
}
8+
9+
TabStrip {
10+
text-transform: capitalize;
11+
}
12+
13+
TabStripItem.special {
14+
text-transform: lowercase;
15+
}
16+
17+
TabStripItem.special:active {
18+
text-transform: uppercase;
19+
}

‎e2e/ui-tests-app/app/bottom-navigation/text-transform-page.xml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Page class="page">
2+
3+
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<BottomNavigation>
7+
<TabStrip>
8+
<TabStripItem title="First" class="special"></TabStripItem>
9+
<TabStripItem title="Second"></TabStripItem>
10+
</TabStrip>
11+
12+
<TabContentItem class="special">
13+
<GridLayout>
14+
<Label text="First View" />
15+
</GridLayout>
16+
</TabContentItem>
17+
18+
<TabContentItem>
19+
<GridLayout>
20+
<Label text="Second View" />
21+
</GridLayout>
22+
</TabContentItem>
23+
</BottomNavigation>
24+
</Page>

‎tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -205,14 +205,22 @@ private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, Tab
205205
textView.setVisibility(GONE);
206206
}
207207

208+
if (tabItem.backgroundColor != 0) {
209+
ll.setBackgroundColor(tabItem.backgroundColor);
210+
}
211+
208212
ll.setMinimumHeight((int) (BOTTOM_NAV_HEIGHT * density));
209213

210214
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll.getLayoutParams();
211215
lp.width = 0;
212216
lp.weight = 1;
213217
}
214218

215-
public void onSelectedPositionChange(int position) {
219+
public void onTap(int position) {
220+
// to be overridden in JS
221+
}
222+
223+
public void onSelectedPositionChange(int position, int prevPosition) {
216224
// to be overridden in JS
217225
}
218226

@@ -239,13 +247,15 @@ private void populateTabStrip() {
239247
int tabTextColor = mTabStrip.getTabTextColor();
240248
mTabStrip.setTabTextColor(Color.argb(100, Color.red(tabTextColor), Color.green(tabTextColor), Color.blue(tabTextColor)));
241249
mTabStrip.setSelectedTabTextColor(Color.argb(255, Color.red(tabTextColor), Color.green(tabTextColor), Color.blue(tabTextColor)));
242-
mTabStrip.setSelectedPosition(0);
243250
}
244251
}
245252

246253
public void setSelectedPosition(int position) {
247-
mTabStrip.setSelectedPosition(position);
248-
onSelectedPositionChange(position);
254+
int prevPosition = mTabStrip.getSelectedPosition();
255+
if (position != prevPosition) {
256+
mTabStrip.setSelectedPosition(position);
257+
onSelectedPositionChange(position, prevPosition);
258+
}
249259
}
250260

251261
public void setContentDescription(int i, String desc) {
@@ -257,6 +267,7 @@ private class TabClickListener implements OnClickListener {
257267
public void onClick(View v) {
258268
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
259269
if (v == mTabStrip.getChildAt(i)) {
270+
onTap(i);
260271
setSelectedPosition(i);
261272
return;
262273
}

0 commit comments

Comments
 (0)