Advertisement

How to achieve circular UI in tab view android java

android java kotlin

Federico klez Culloca

edited 29 Jan, 2022

Bytes Bots

asked 29 Jan, 2022

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

Advertisement

Answer

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

Advertisement