How to achieve circular UI in tab view android java

user_17850889 0
Viewed 48

I am working on a project for a client and they gave me the UI where I have to implement a certain tab like layout and I was wondering how to achieve this kind of tab on android. I have attached the image below. Any help would be much appreciated.

The snapshot of what I want to achieve

kotlin android java
1 Answers

If you don't mind then this answer is not based on circular UI in tab view android java but it almost fulfills your need.

Output (please don't mind app name):

You can achieve your need by using this XML code :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#EDFAFF"
tools:context=".MainActivity">


<ImageView
    android:id="@+id/personalInfoTab"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_marginStart="50dp"
    android:layout_marginTop="30dp"
    android:contentDescription="@string/app_name"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/radio_btn_checked"
    app:tint="@color/black" />

<ProgressBar
    android:id="@+id/personalInfoProgress"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="-4dp"
    android:max="100"
    app:layout_constraintBottom_toBottomOf="@+id/personalInfoTab"
    app:layout_constraintStart_toEndOf="@+id/personalInfoTab"
    app:layout_constraintTop_toTopOf="@+id/personalInfoTab" />

<ImageView
    android:id="@+id/paymentTab"
    android:layout_width="30dp"
    android:layout_height="30dp"
    app:layout_constraintBottom_toBottomOf="@+id/personalInfoProgress"
    app:layout_constraintEnd_toStartOf="@+id/paymentProgressBar"
    app:layout_constraintStart_toEndOf="@+id/personalInfoProgress"
    app:layout_constraintTop_toTopOf="@+id/personalInfoProgress"
    app:srcCompat="@drawable/ic_baseline_circle_24"
    app:tint="#353535" />

<ProgressBar
    android:id="@+id/paymentProgressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@+id/paymentTab"
    app:layout_constraintEnd_toStartOf="@+id/confirmationTab"
    app:layout_constraintTop_toTopOf="@+id/paymentTab" />

<ImageView
    android:id="@+id/confirmationTab"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_marginEnd="50dp"
    app:layout_constraintBottom_toBottomOf="@+id/paymentProgressBar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/paymentProgressBar"
    app:srcCompat="@drawable/ic_baseline_circle_24"
    app:tint="#353535" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Personal Info"
    app:layout_constraintEnd_toStartOf="@+id/personalInfoProgress"
    app:layout_constraintStart_toStartOf="@+id/personalInfoTab"
    app:layout_constraintTop_toBottomOf="@+id/personalInfoTab" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Payment"
    app:layout_constraintEnd_toStartOf="@+id/paymentProgressBar"
    app:layout_constraintStart_toEndOf="@+id/personalInfoProgress"
    app:layout_constraintTop_toBottomOf="@+id/paymentTab" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Confirmation"
    app:layout_constraintEnd_toEndOf="@+id/confirmationTab"
    app:layout_constraintStart_toEndOf="@+id/paymentProgressBar"
    app:layout_constraintTop_toBottomOf="@+id/confirmationTab" />

//frameLayout for your fragments
<FrameLayout
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView2">

 </FrameLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>

Now you can increase the progress and you can use Fragments for different pages ie: Personal Info, Payment, Confirmation

user_157390400
Related