Skip to content

Commit a2379db

Browse files
AndroidHelpAndroidHelp
authored
Create README.md
1 parent b0d222c commit a2379db

File tree

1 file changed

+136
-0
lines changed

1 file changed

+136
-0
lines changed

‎README.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
# BottomNavigationView
2+
Customizable library
3+
### developed in Kotlin
4+
5+
## Add Library
6+
Using Maven
7+
````
8+
<dependency>
9+
<groupId>com.katariya.bottomnavigation</groupId>
10+
<artifactId>bottomnavigation</artifactId>
11+
<version>1.3</version>
12+
<type>pom</type>
13+
</dependency>
14+
````
15+
Using Gradle
16+
````
17+
compile 'com.katariya.bottomnavigation:bottomnavigation:1.3'
18+
````
19+
Using Ivy
20+
````
21+
<dependency org='com.katariya.bottomnavigation' name='bottomnavigation' rev='1.3'>
22+
<artifact name='bottomnavigation' ext='pom' ></artifact>
23+
</dependency>
24+
````
25+
26+
## How to Use
27+
Add to XML
28+
```xml
29+
<com.katariya.bottomnavigation.BottomNavigationView
30+
android:id="@+id/bottomView"
31+
android:layout_width="match_parent"
32+
android:layout_height="?android:actionBarSize"></com.katariya.bottomnavigation.BottomNavigationView>
33+
```
34+
Add above properties in xml view
35+
1. tab_background_color : for adding/change tab background color
36+
2. tab_selected_item_background_color : for adding/change tab selected item color
37+
3. tab_selected_item_text_color: for adding/change tab selected item text color
38+
4. tab_unselected_item_text_color: for adding/change tab unselected item text color
39+
5. tab_item_text_size: for adding/change tab item text size
40+
6. tab_badge_text_size: for adding/change tab item badge size
41+
7. tab_badge_background_color: for adding/change tab item badge background color
42+
8. tab_badge_item_text_color: for adding/change tab item badge item color
43+
9. tab_badge_background_border_color: for adding/change tab item badge background border color
44+
10. tab_badge_background_border_size: for adding.change tab item badge background border size
45+
11. tab_icon_selected_width: for adding/change tab icon width when selected
46+
12. tab_icon_selected_height: for adding/change tab icon height when selected
47+
13. tab_icon_unselected_width: for adding/change tab icon width when unselected
48+
14. tab_icon_unselected_height: for adding/change tab icon height when unselected
49+
15. tab_margin_in_icon_text_in_selected: for adding/change tab margin between icon and text when selected
50+
15. tab_margin_in_icon_text_in_unselected: for adding/change tab margin between icon and text when unselected
51+
````
52+
app:tab_background_color="@color/colorWhite"
53+
app:tab_badge_background_border_color="@color/colorAccent"
54+
app:tab_badge_background_border_size="2"
55+
app:tab_badge_background_color="@color/colorRed"
56+
app:tab_badge_item_text_color="@color/colorBlack"
57+
app:tab_selected_item_background_color="@color/colorGreen"
58+
app:tab_badge_text_size="10"
59+
app:tab_item_text_size="12"
60+
app:tab_selected_item_text_color="@color/colorGrey"
61+
app:tab_unselected_item_text_color="@color/colorBlack"
62+
app:tab_icon_selected_height="50"
63+
app:tab_icon_selected_width="50"
64+
app:tab_icon_unselected_width="55"
65+
app:tab_icon_unselected_height="55"
66+
app:tab_margin_in_icon_text_in_selected="5"
67+
app:tab_margin_in_icon_text_in_unselected="6"
68+
````
69+
Initialization of BottomNavigationView
70+
71+
```
72+
private lateinit var bottomNavigationView: BottomNavigationView
73+
74+
bottomNavigationView = findViewById(R.id.bottomView)
75+
```
76+
77+
#### Add tab item in BottomNavigationView
78+
When you want to show only icon and title:
79+
<br />First icon will be for unselected state and second icon will be used for selected state
80+
81+
```
82+
bottomNavigationView.addChild(R.drawable.ic_chat_icon,R.drawable.ic_chat_icon, getString(R.string.title_chats))
83+
bottomNavigationView.addChild(R.drawable.ic_contacts_icon,R.drawable.ic_contacts_icon, getString(R.string.title_contacts))
84+
bottomNavigationView.addChild(R.drawable.ic_man_user_icon,R.drawable.ic_man_user_icon, getString(R.string.title_account))
85+
```
86+
When you want to show only icon:
87+
<br />Add only icon and rest should be null
88+
````
89+
bottomNavigationView.addChild(R.drawable.ic_chat_icon, null, null)
90+
bottomNavigationView.addChild(R.drawable.ic_contacts_icon, null, null)
91+
bottomNavigationView.addChild(R.drawable.ic_man_user_icon, null, null)
92+
````
93+
When you want to show only name:
94+
<br />Add only name and rest should be null
95+
````
96+
bottomNavigationView.addChild(null, null, getString(R.string.title_chats))
97+
bottomNavigationView.addChild(null, null, getString(R.string.title_contacts))
98+
bottomNavigationView.addChild(null, null, getString(R.string.title_account))
99+
````
100+
When you pass null for second icon and add first icon as well title
101+
then icon will remain same after click
102+
````
103+
bottomNavigationView.addChild(R.drawable.ic_chat_icon, null, getString(R.string.title_chats))
104+
````
105+
#### Add Listener
106+
````
107+
bottomNavigationView.initItemListener(this)
108+
109+
override fun bottomNavigationViewItemClickListener(position: Int) {
110+
if (position == 0) textTitle.text = getString(R.string.title_chats)
111+
if (position == 1) textTitle.text = getString(R.string.title_contacts)
112+
if (position == 2) textTitle.text = getString(R.string.title_account)
113+
// Toast.makeText(applicationContext, "" + position, Toast.LENGTH_SHORT).show()
114+
}
115+
````
116+
117+
##### Change Font of tab item
118+
119+
````
120+
bottomNavigationView.updateFont("fonts/roboto_medium.ttf")
121+
````
122+
##### Add Badge in tab
123+
Index: example pass 0 for first item and count is for badge quantity
124+
````
125+
bottomNavigationView.setBadge(index, count)
126+
````
127+
128+
###### Limitations
129+
if you add more item(more then 5,6), some icon or text can be have size/cut/invisible issues
130+
131+
![Alt text](/screenshots/1.png?raw=true "Optional Title") | ![Alt text](/screenshots/2.png?raw=true "Optional Title")
132+
133+
![Alt text](/screenshots/3.png?raw=true "Optional Title") | ![Alt text](/screenshots/4.png?raw=true "Optional Title")
134+
135+
![Alt text](/screenshots/5.png?raw=true "Optional Title") | ![Alt text](/screenshots/6.png?raw=true "Optional Title")
136+

0 commit comments

Comments
 (0)