CODEWITHSUNDEEP
androidbottomnavigationviewandroid-bottomappbarandroid-bottomnavigationview
Jaimin Modi
Jaimin Modi

Reputation: 1667

Customisation for Android BottomView

[![I want bottom bar like this][1]][1]

Using below library in android to customize bottom tab bar : https://github.com/Droppers/AnimatedBottomBar

It is quite easy to use and provide many animation. But, I don't want the menu text content to display in bottom bar.

I want only icons to display while it is selected or not selected.

How can I achieve with this library? Or Is there any way to acheive such thing?

Upvotes: 1

Views: 523

Answers (2)

Rajan Kali
Rajan Kali

Reputation: 12953

I went through the library mentioned, it does not support this feature currently, but we can tweak the code to make it work for your usecase, but to do that you need to include the code as a module/folder instead instead of dependency.

To achieve that, you need to follow below steps

  • You need to get rid of dependency of implementation 'nl.joery.animatedbottombar:library:1.0.9'
  • Clean project to remove it from cache
  • you can clone the code, add 'library' folder from code as a Android module, then include it in your gradle using implementation project(path: ':library')

Once above steps are done, you can modify the code to your needs. Now for your use case, do replace updateTabType method present at line#99 inside library/src/main/java/nl/joery/animatedbottombar/TabView.kt file to below

private fun updateTabType() {
    animatedView = icon_layout
    selectedAnimatedView = icon_layout //here we are forcing it use icon_layout for both views all the time
    if (selectedAnimatedView.visibility == View.VISIBLE) {
        animatedView.visibility = View.VISIBLE
        selectedAnimatedView.visibility = View.INVISIBLE
    } else {
        animatedView.visibility = View.INVISIBLE
        selectedAnimatedView.visibility = View.VISIBLE
    }
    bringViewsToFront()
}

Also the library is licensed under MIT Open Source License, so you can happily change your own version of code free of cost.

Update

Also, in library modules gradle, please remove references to bintray, that is not required

apply plugin: 'com.android.library'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 29

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 29
        versionCode 1
        versionName "1.0.9"

        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
        consumerProguardFiles 'consumer-rules.pro'
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.3.61"
    implementation 'androidx.core:core-ktx:1.3.2'
    implementation 'androidx.appcompat:appcompat:1.2.0'

    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
    implementation 'com.google.android:flexbox:2.0.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.2'

    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    implementation "androidx.navigation:navigation-ui-ktx:2.3.1"
}

Upvotes: 2

Greeshma
Greeshma

Reputation: 412

If you see in the description of the repo, you will see there are some attributes regarding the tab appearance

add this app:abb_selectedTabType = "icon" to the code that you might have already added in the xml like below

<nl.joery.animatedbottombar.AnimatedBottomBar
        android:id="@+id/bottom_bar"
        android:background="#FFF"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:abb_selectedTabType="text"
        app:abb_indicatorAppearance="round"
        app:abb_indicatorMargin="16dp"
        app:abb_indicatorHeight="4dp"
        app:abb_tabs="@menu/tabs"
        app:abb_selectedTabType = "icon" 
        app:abb_selectedIndex="1" />

Upvotes: 0

Related Questions