Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set width for only active dots #129

Open
chiragsheta opened this issue Aug 11, 2019 · 4 comments
Open

Set width for only active dots #129

chiragsheta opened this issue Aug 11, 2019 · 4 comments

Comments

@chiragsheta
Copy link

<me.relex.circleindicator.CircleIndicator
                    android:id="@+id/indicator"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:ci_width="@dimen/_10sdp"/>

It affect inactive dots,
image

Inactive dots should be rounded like in 2nd image
image

@ongakuer
Copy link
Owner

You can set different drawables

app:ci_drawable
app:ci_drawable_unselected

@chiragsheta
Copy link
Author

chiragsheta commented Aug 13, 2019 via email

@ongakuer
Copy link
Owner

Here is a sample:

<me.relex.circleindicator.CircleIndicator
        android:id="@id/indicator"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_gravity="bottom"
        app:ci_animator="@animator/indicator_no_animator"
        app:ci_drawable="@drawable/active"
        app:ci_drawable_unselected="@drawable/normal"
        app:ci_height="12dp"
        app:ci_width="12dp"/>

active.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item
       android:bottom="3dp"
       android:left="0dp"
       android:right="0dp"
       android:top="3dp">
       <shape>
           <corners android:radius="6dp"/>

           <solid android:color="@android:color/holo_red_dark"/>
       </shape>
   </item>
</layer-list>

normal.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape>
            <corners android:radius="6dp"/>
            <solid android:color="@android:color/holo_green_dark"/>
        </shape>
    </item>
</layer-list>

@omkar-tenkale
Copy link

You need to add app:ci_animator because default animator will scale the center dot, and as height is wrap content, it'll appear as a strip

image


      <me.relex.circleindicator.CircleIndicator2
                android:id="@+id/indicator"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:ci_width="6dp"
                app:ci_animator="@anim/indicator_no_scale"
                app:ci_margin="2.5dp"
                app:ci_drawable="@drawable/ic_circle_a4a4a4"
                app:ci_height="6dp"
                android:layout_marginTop="5dp" />

res/anim/indicator_no_scale.xml


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime">

    <objectAnimator
        android:propertyName="alpha"
        android:valueType="floatType"
        android:valueFrom="0.5"
        android:valueTo="1.0"/>
</set>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants