My Client wants a diamond shaped progress that looks like this:
My first attempt was to use a library, but I can't find one that exists
My next attempt was to learn how to use the ProgressBar view that comes with android, and set my own drawable using this answer (the closest thing to an answer on stack overflow), but the answer only works on ring shapes, not rectangles.
What is the best way to create a diamond-shaped progress view? (By any means: custom view, progressDrawable) and how do I do that?
After some more tests, I came up with a hacky answer. It's just 4 progress bars aligned to the edge of a Relative layout, and a CardView on top of them. Rotate the whole thing, and wrap it in a class and bam, you got yourself a diamond progress bar. (Use math to calculate the progress of each bar)
It can be a little weird on the corners (where the progress bars overlap) but overall it works well enough
Usage:
ViewGroup background;
int count = 1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Something to add the progress bar to
background = (ViewGroup) findViewById(R.id.relative);
//initializing the progress bar
final DiamondProgress diamondProgress = new DiamondProgress(this);
diamondProgress.setMax(1000);
//adding the progress bar
background.addView(diamondProgress.getView());
/* Sample Code for animating the progress bar*/
new Timer().scheduleAtFixedRate(new TimerTask() {
#Override
public void run() {
runOnUiThread(new Runnable() {
#Override
public void run() {
diamondProgress.setProgress(count++);
}
});
}
}, 0, 25);
}
Code:
XML: layout/diamond_view
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="wrap_content"
android:rotation="45"
android:padding="43dp"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp">
<RelativeLayout
android:layout_width="wrap_content"
android:rotation="90"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="8dp"
android:layout_alignParentBottom="true"
android:rotation="180">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_marginLeft="3dp"
android:id="#+id/dp_progress4"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="#drawable/progress_drawable"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="8dp"
android:layout_alignParentBottom="true"
android:rotation="180">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_marginLeft="3dp"
android:progress="50"
android:id="#+id/dp_progress3"
android:progressDrawable="#drawable/progress_drawable"
style="?android:attr/progressBarStyleHorizontal"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:rotation="90"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_marginLeft="3dp"
android:progress="100"
android:id="#+id/dp_progress2"
android:progressDrawable="#drawable/progress_drawable"
style="?android:attr/progressBarStyleHorizontal" />
</RelativeLayout>
<ProgressBar
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_marginLeft="3dp"
android:progress="100"
android:progressDrawable="#drawable/progress_drawable"
style="?android:attr/progressBarStyleHorizontal"
android:id="#+id/dp_progress1"/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_margin="4dp"
android:id="#+id/dp_card"
android:elevation="10dp"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:rotation="-45"
android:id="#+id/dp_addView"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Sample Inside Content"
android:id="#+id/dp_text"
android:gravity="center"
android:textSize="24sp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</RelativeLayout>
XML: drawable/progress_drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- background -->
<item android:id="#android:id/background">
<shape>
<corners android:radius="3dp"/>
<solid android:color="#f2f2f2" />
</shape>
</item>
<!-- for the actual progress bar -->
<item android:id="#android:id/progress">
<clip android:gravity="left">
<shape>
<corners android:radius="3dp"/>
<solid android:color="#color/colorAccent" />
</shape>
</clip>
</item>
</layer-list>
Java Class
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;
/**
* Created by Pythogen on 9/27/2017.
*/
public class DiamondProgress {
Context context;
View view;
RelativeLayout addView;
int progress = 0;
int max = 100;
ProgressBar p1;
ProgressBar p2;
ProgressBar p3;
ProgressBar p4;
public DiamondProgress(Context context) {
this.context = context;
view = LayoutInflater.from(context).inflate(R.layout.diamond_view, null);
addView = ((RelativeLayout) view.findViewById(R.id.dp_addView));
p1 = (ProgressBar) view.findViewById(R.id.dp_progress1);
p2 = (ProgressBar) view.findViewById(R.id.dp_progress2);
p3 = (ProgressBar) view.findViewById(R.id.dp_progress3);
p4 = (ProgressBar) view.findViewById(R.id.dp_progress4);
}
public View getView() {
return view;
}
public RelativeLayout getHostOfInsideContent() {
return addView;
}
public void setProgress(int progress) {
this.progress = progress;
updateProgressBar();
}
public void setMax(int max) {
this.max = max;
p1.setMax(max);
p2.setMax(max);
p3.setMax(max);
p4.setMax(max);
}
public void updateProgressBar() {
double prog = ((double)progress)/max;
if (prog<.25) {
p1.setProgress(this.progress*4);
p2.setProgress(0);
p3.setProgress(0);
p4.setProgress(0);
} else {
p1.setProgress(max);
if (prog<.5) {
p2.setProgress((this.progress*4)-max);
p3.setProgress(0);
p4.setProgress(0);
} else {
p2.setProgress(max);
if (prog<.75) {
p3.setProgress((this.progress*4)-max*2);
p4.setProgress(0);
} else {
p3.setProgress(max);
p4.setProgress((this.progress*4)-max*3);
}
}
}
}
}
Oh, and if you plan on using this, be sure to add the CardView dependancy to your build.grade compile 'com.android.support:cardview-v7:25.1.1'
Related
I am trying to start a shining affect animation on an Image view.
the problem is that the animation does not show on screen.
It is work only when I start it inside a button listener.
this is my shine_effect.xml file:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:centerColor="#beffffff"
android:endColor="#00ffffff"
android:startColor="#00ffffff" />
</shape>
this is my layout xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/img"
android:layout_width="170dp"
android:layout_height="170dp"
android:contentDescription="#string/desc"
android:src="#drawable/logo" />
<ImageView
android:id="#+id/shine"
android:layout_width="50dp"
android:layout_height="170dp"
android:layout_marginStart="-50dp"
android:contentDescription="#string/desc"
android:src="#drawable/shine_effect" />
</RelativeLayout>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/relativeLayout"
android:layout_centerHorizontal="true"
android:layout_marginTop="43dp"
android:text="#string/pending"
android:textColor="#android:color/white" />
</RelativeLayout>
and my activity onCreate method:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_chat_pending);
img=(ImageView)findViewById(R.id.img) ;
shine=(ImageView)findViewById(R.id.shine) ;
shine_anim=new TranslateAnimation(0, img.getWidth()+ shine.getWidth(),0,
0);
shine_anim.setDuration(550);
shine_anim.setFillAfter(true);
shine_anim.setRepeatMode(Animation.RESTART);
shine_anim.setInterpolator(new AccelerateDecelerateInterpolator());
shine_anim.setRepeatMode(Animation.INFINITE);
shine.startAnimation(shine_anim);
}
It is because the ImageView has not layouted yet so the width is 0. You can give it a layout cycle and start the animation then.
img.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
img.getViewTreeObserver().removeOnGlobalLayoutListener(this);
// Create and start animation
}
});
Alternatively if your image width is always static, you can convert e.g. that 170dp to px and use that value when creating the TranslateAnimation instead of using getWidth() methods of views.
Call your animation in onWindowFocusChanged method
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if(hasFocus) {
shine_anim = new TranslateAnimation(0, img.getWidth() + shine.getWidth(), 0,
0);
shine_anim.setDuration(550);
shine_anim.setFillAfter(true);
shine_anim.setRepeatMode(Animation.RESTART);
shine_anim.setInterpolator(new AccelerateDecelerateInterpolator());
shine_anim.setRepeatMode(Animation.INFINITE);
shine.startAnimation(shine_anim);
}
}
On my Android app (react-native but it doesn't matter) I have a splash screen. I created res/drawable and added a image called "emblem.png". I then center that with gravity of center as seen in my xml here:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item name="android:windowBackground">#drawable/background</item>
<item>
<bitmap android:gravity="center" android:src="#drawable/emblem"/>
</item>
</layer-list>
However this centering does not take into consideration the "top status bar" height nor the "width of 'system nav bar' when landscape"/"height of 'system nav bar' when in portrait". Is there a way to do this?
Thanks
THIS IS NOT AN ANSWER, I'M JUST SHARING SOME CODELayout file - activity_splash.xml
<?xml version="1.0+ encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
xmlns:tools="http://schemas.android.com/tools"
android:id=#+id/activity_splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context="com.splash.splash.Splash">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/iV"
android:gravity="center"
android:src="#drawable/applogo"/>
<TextView
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
android:text="My welcome screen"
android:textsize="25sp"
android:textStyle="bold"
android:textcolor="#color/white"
android:layout_marginTop="10dp"
android:id="#+id/tV" />
</LinearLayout>
</RelativeLayout>
MainActivity.java
public class Splash extends AppCompatActivity{
private TextView tv;
private ImageView iv;
#Override
protected void onCreate(Bundle savedInstanceState){
super.OnCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
tv= findViewById(R.id.tV);
iv= findViewById(R.id.iV);
final intent i = new intent(this,MainActivity.class);
Thread timer = new thread(){
public void run(){
try{
sleep(5000);
}catch(InterruptedException e){
e.printStackTrace();
}
finally{
startActivity(i);
finish();
}
}
};
timer.start();
}
}
This is how I set a splash screen in android. Hope this helps you.
This question already has answers here:
Outlined Edit Text from Material Design
(7 answers)
Closed 4 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I am trying to create custom TextInputLayout. How can I create below custom TextInputLayout?
You should use Material Design style for Outline Box. Just simple use:
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
in TextInputLayout. See Text Field for Android in Material Design Guide
Here is an workaround:
1. Design your layout structure as below:
activity_test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
android:background="#android:color/white">
<!-- Username -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_rounded_input_field" />
<TextView
android:id="#+id/text_dummy_hint_username"
android:layout_width="wrap_content"
android:layout_height="2dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="16dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="Username"
android:textSize="16sp"
android:background="#android:color/white"
android:visibility="invisible"/>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:hint="Username"
android:textColorHint="#android:color/black"
app:hintTextAppearance="#style/HintTextStyle">
<EditText
android:id="#+id/edit_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text|textCapWords"
android:maxLines="1"
android:backgroundTint="#android:color/transparent"/>
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
<!-- Password -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<View
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_rounded_input_field" />
<TextView
android:id="#+id/text_dummy_hint_password"
android:layout_width="wrap_content"
android:layout_height="2dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="16dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="Password"
android:textSize="16sp"
android:background="#android:color/white"
android:visibility="invisible"/>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:hint="Password"
android:textColorHint="#android:color/black"
app:hintTextAppearance="#style/HintTextStyle">
<EditText
android:id="#+id/edit_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLines="1"
android:backgroundTint="#android:color/transparent"/>
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
</LinearLayout>
2. Use below drawable bg_rounded_input_field.xml for rounded corners.
res/drawable/bg_rounded_input_field.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:color="#android:color/black"
android:width="2dp">
</stroke>
<corners
android:radius="8dp">
</corners>
</shape>
3. Use below HintTextStyle to TextInputLayout by adding attribute app:hintTextAppearance="#style/HintTextStyle".
res/values/styles.xml
<style name="HintTextStyle" parent="TextAppearance.Design.Hint">
<item name="android:textSize">16sp</item>
</style>
4. Finally, in your Activity just show/hide TextView text_dummy_hint_username and text_dummy_hint_password
during focus change.
FYI, I have used Handler with delay 100 millis to
show the dummy hints TextView to sync with TextInputLayout hint text
animation.
TestActivity.java
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
public class TestActivity extends AppCompatActivity {
TextView textDummyHintUsername;
TextView textDummyHintPassword;
EditText editUsername;
EditText editPassword;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
textDummyHintUsername = (TextView) findViewById(R.id.text_dummy_hint_username);
textDummyHintPassword = (TextView) findViewById(R.id.text_dummy_hint_password);
editUsername = (EditText) findViewById(R.id.edit_username);
editPassword = (EditText) findViewById(R.id.edit_password);
// Username
editUsername.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
// Show white background behind floating label
textDummyHintUsername.setVisibility(View.VISIBLE);
}
}, 100);
} else {
// Required to show/hide white background behind floating label during focus change
if (editUsername.getText().length() > 0)
textDummyHintUsername.setVisibility(View.VISIBLE);
else
textDummyHintUsername.setVisibility(View.INVISIBLE);
}
}
});
// Password
editPassword.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
// Show white background behind floating label
textDummyHintPassword.setVisibility(View.VISIBLE);
}
}, 100);
} else {
// Required to show/hide white background behind floating label during focus change
if (editPassword.getText().length() > 0)
textDummyHintPassword.setVisibility(View.VISIBLE);
else
textDummyHintPassword.setVisibility(View.INVISIBLE);
}
}
});
}
}
OUTPUT:
Hope this will help~
I have a custom progress bar and basically when I enter a value and then press a button, I would like to have that progress bar update. My progress bar is going to have only three values basically it can be 0 percent, 33 percent, 66 percent, or 100 percent. For some reason when I do go to the page with the progress bar and even enter the value into the TextView and then enter the button, it's just showing a loading circle for some reason that never ends. I've posted my all the code needed for the progress bar, so does anyone know why it's not showing the correct progress bar and why it's just showing that loading circle?
custom_progressBar.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<gradient
android:startColor="#000001"
android:centerColor="#0b131e"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#007A00"
android:centerColor="#007A00"
android:centerY="1.0"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
progressBarShirts.java
package ankitkaushal.app.healthysizing;
import android.graphics.drawable.Drawable;
import android.sax.TextElementListener;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
public class progressBarShirts extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_bar_shirts);
final DatabaseHelper db = new DatabaseHelper(this);
final TextView currentSizeDisplay = (TextView) findViewById(R.id.currentSizeShirts);
Button enterNewSizeButton = (Button) findViewById(R.id.newSizeEnterButtonShirts);
final EditText newSize = (EditText) findViewById(R.id.newSizeShirts);
final String currentSize = db.getCurrentShirtSize();
currentSizeDisplay.setText("Your current size: " + currentSize);
Drawable draw = getResources().getDrawable(R.drawable.custom_progressbar);
enterNewSizeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
String size = newSize.getText().toString().toUpperCase();
currentSizeDisplay.setText("Your current size: " + size);
db.updateSizeShirts(size);
}
});
ProgressBar shirts = (ProgressBar) findViewById(R.id.progressBarShirts);
shirts.setProgressDrawable(draw);
String startSize = db.getStartSizeShirts();
String newCurrentSize = db.getCurrentShirtSize();
String limit = db.getLimit("setLimitShirts");
shirts.setMax(100);
if (startSize.equals("XL") && limit.equals("S")) {
if (newCurrentSize.equals("L")) {
// Fill progress bar by 1/3
shirts.setProgress(33);
}
if (newCurrentSize.equals("M")) {
// Fill progress bar by 2/3
shirts.setProgress(66);
}
if (newCurrentSize.equals("S")) {
// Fill progress bar 100 percent
shirts.setProgress(100);
// Give a toast saying you've reached your limit
Toast.makeText(this, "You've reached your limit! ", Toast.LENGTH_LONG).show();
// Set all values in database to null
db.removeLImit("setLimitShirts");
}
}
}
}
activity_progress_bar_shirts.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="#29A9D2"
android:orientation="vertical"
android:weightSum="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Track your progress"
android:id="#+id/TrackProgressShirts"
android:layout_gravity="center_horizontal"
android:textColor="#FFFFFF"
android:textSize="30dp"
android:layout_marginTop="5dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Current Size: Large"
android:id="#+id/currentSizeShirts"
android:layout_gravity="center_horizontal"
android:textSize="30dp"
android:layout_marginTop="80dp"
android:textColor="#FFFFFF" />
<EditText
android:layout_width="350dp"
android:layout_height="wrap_content"
android:id="#+id/newSizeShirts"
android:layout_marginTop="20dp"
android:hint="Enter your new size"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:textSize="30dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter new size"
android:id="#+id/newSizeEnterButtonShirts"
android:layout_gravity="center_horizontal" />
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="300dp"
android:progressDrawable="#drawable/custom_progressbar"
android:layout_height="wrap_content"
android:id="#+id/progressBarShirts"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginTop="170dp"
android:max="100"
android:minWidth="300dp"
android:minHeight="100dp"
android:maxWidth="300dp"
android:maxHeight="100dp"
android:indeterminateOnly="true"
android:progress="0" />
</LinearLayout>
I'm working on a project and I need to lock my own app with a PIN code.
I want to use four circles as background of my edittext and fill each circle when user enters a digit. Just like iOS lock screen.
How can I fill these circles when there's an input?
Here's a quick example I put together for you to get started.
You should firstly define what your ellipse's for the pass-code will look like, I've defined mine inside two files inside my drawable folder:
elipse.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<gradient android:startColor="#8BE807" android:endColor="#68B002" android:angle="270" />
</shape>
ellipse_checked.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<gradient android:startColor="#C7C7C7" android:endColor="#8A8A8A" android:angle="270"/>
</shape>
Next I have added four ellipses (View's) and an ExitText to my view like so:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ellipse"
android:id="#+id/elipse1"
android:layout_margin="10dip" />
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ellipse"
android:id="#+id/elipse2"
android:layout_margin="10dip" />
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ellipse"
android:id="#+id/elipse3"
android:layout_margin="10dip" />
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ellipse"
android:id="#+id/elipse4"
android:layout_margin="10dip" />
</LinearLayout>
<EditText
android:layout_width="100dip"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="#+id/txtPass"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dip"
android:textAlignment="center"
android:maxLength="4"
android:gravity="center" />
</LinearLayout>
Then inside my MainActivity I have:
int passlen = 0;
Drawable mDrawableElipseChecked;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Used to change our pass-code ellipses style
mDrawableElipseChecked = this.getResources().getDrawable(R.drawable.ellipse_checked);
// Ellipses
final View elipse1 = findViewById(R.id.elipse1);
final View elipse2 = findViewById(R.id.elipse2);
final View elipse3 = findViewById(R.id.elipse3);
final View elipse4 = findViewById(R.id.elipse4);
// Listen for text changes to our pass-code EditText
final EditText txtPass = (EditText) findViewById(R.id.txtPass);
txtPass.setOnKeyListener(new View.OnKeyListener() {
#Override
public boolean onKey(View view, int i, KeyEvent keyEvent) {
if (keyEvent.getAction() == KeyEvent.ACTION_UP) {
// Crude example of how to "check" / "un-check" our
// ellipses NOTE: You should write a better implementation
// for handling deletes etc
passlen = txtPass.getText().length();
if (passlen == 1) {
elipse1.setBackground(mDrawableElipseChecked);
} else if (passlen == 2)
elipse2.setBackground(mDrawableElipseChecked);
else if (passlen == 3)
elipse3.setBackground(mDrawableElipseChecked);
else if (passlen == 4)
elipse4.setBackground(mDrawableElipseChecked);
else {
return true;
}
}
return false;
}
});
}
You should now have a very simple example of how to implement pass-code like functionality to an app.
Note: This is a simple demo of how to get started implementing a pass-code like screen, you should adapt and improve this to suit your needs.