Android : I want to create loader with flight image

Android : I want to create loader with flight image - android

I want to create loader in android as same as attached gif
Thanks in advance

Without Plane in your Image I prefer to use ProgressBar
but I will Be More Easy to user SeekBar As Progress Bar
so let`s make it in Simplest way
in Layout XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:hardwareAccelerated="false"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#32aaef"
android:id="#+id/sbHeight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:max="100"
android:progress="0"
android:progressDrawable="#drawable/seekbar_as_progress"
android:thumb="#drawable/plane"
/>
</LinearLayout>
And where seekbar_as_progress is
<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
android:shape="line"
android:useLevel="true">
<stroke
android:width="3dp"
android:color="#c9c9c9"
android:dashGap="20dp"
android:dashWidth="3dp" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape
android:shape="line"
android:useLevel="true">
<stroke
android:width="6dp"
android:color="#ffffff"
android:dashGap="20dp"
android:dashWidth="4dp" />
</shape>
</clip>
</item>
</layer-list>
and #drawable/plane is plane Icon
And In Your Activity
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// DountChart view = new DountChart(this);
setContentView(R.layout.empty);
final SeekBar sbHeight = findViewById(R.id.sbHeight);
sbHeight.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
sbHeight.setOnTouchListener(new View.OnTouchListener(){
#Override
public boolean onTouch(View v, MotionEvent event) {
return true;
}
});
final int[] progress = {0};
final Handler ha=new Handler();
ha.postDelayed(new Runnable() {
#Override
public void run() {
//call function
if (progress[0] != 100){
AppLogger.log("Prog",progress[0]+"");
progress[0]= progress[0]+1;
sbHeight.setProgress(progress[0]);
ha.postDelayed(this, 100);
}
}
}, 100);
}
and that`s All

Related

Custom Progress bar in android with Background

How i can make progress bar like this

Here i found my answer
Firstly you need add xml drawable resource with the name of progress_bar_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners android:radius="18dp" />
<stroke android:color="#color/transparent" android:width="6dp" />
</shape>
Now make an other xml resource file with the name of curved_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="18dp" />
<solid android:color="#color/transparent" />
<!-- <stroke android:color="#color/transparent" android:width="6dp" />-->
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="18dp" />
<solid android:color="#FFFFFF" />
</shape>
</clip>
</item>
</layer-list>
and Finally in Splash activity xml file paste this code for Progress bar
<TextView
android:id="#+id/textView"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:textColor="#color/white"
android:textSize="22dp"
android:textStyle="bold"
android:fontFamily="#font/symbioarltmedium"
android:layout_height="wrap_content"
android:text="80%"/>
<ProgressBar
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textView"
android:id="#+id/progressBar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="300dp"
android:layout_height="50dp"
android:indeterminate="false"
android:max="100"
android:padding="5dp"
android:progress="1"
android:background="#drawable/progress_bar_background"
android:progressDrawable="#drawable/curved_progress_bar"
/>
and here in Java
private ProgressBar progressBar;
TextView textView;
private int progressStatus = 0;
private Handler handler = new Handler();
progressBar = (ProgressBar) findViewById(R.id.progressBar);
textView = (TextView) findViewById(R.id.textView);
// Start long running operation in a background thread
new Thread(new Runnable() {
public void run() {
while (progressStatus < 100) {
progressStatus += 1;
// Update the progress bar and display the
//current value in the text view
handler.post(new Runnable() {
public void run() {
progressBar.setProgress(progressStatus);
textView.setText(progressStatus+"%");
}
});
try {
// Sleep for 200 milliseconds.
Thread.sleep(25);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
Intent intent = new Intent(SplashActivity.this, HomeActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
finish();
}
}).start();
and use this color
<color name="transparent">#27EEECEC</color>

it is compoundView (TextView + CustomProgressBar)

how to set ToolTip Text in android custom seekbar?

I have a custom seekbar with drawable and it is working fine, i am trying to make tooltip text on user action over the seekbar, is there any way without using third party library, i have posted the code below which i am using for custom seekbar
i have also attached a sample progress tooltip that i would like to achieve below
any reference or solution would be appreciated
implementation "com.android.support:appcompat-v7:${android_support_version}"
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int progressValue, boolean fromUser) {
seekBar.setThumb(getThumb(progressValue));
TooltipCompat.setTooltipText(seekBar, String.valueOf(progressValue));
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
//Do nothing
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
//Do nothing
}
});
private Drawable getThumb(int progress) {
View thumbView = LayoutInflater.from(getActivity()).inflate(R.layout.seekbar_tv, null, false);
((TextView) thumbView.findViewById(R.id.tvProgress)).setText(progress + "");
thumbView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
Bitmap bitmap = Bitmap.createBitmap(thumbView.getMeasuredWidth(), thumbView.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
thumbView.layout(0, 0, thumbView.getMeasuredWidth(), thumbView.getMeasuredHeight());
thumbView.draw(canvas);
return new BitmapDrawable(getResources(), bitmap);
}
<!--mySeekBarInLayout-->
<SeekBar
android:id="#+id/seekBar_Experience"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="10"
android:progressDrawable="#drawable/survey_seekbar_style"
android:splitTrack="false"
android:thumb="#drawable/survey_seekbar_thum" />
<!--survey_seekbar_thum-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/circle_yellow"/>
<size
android:width="30dp"
android:height="30dp"/>
</shape>
</item>
</layer-list>
<!--survey_seekbar_style-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#android:id/background"
android:drawable="#drawable/survey_border_shadow"
android:height="1dp"
android:gravity="center">
</item>
<item
android:id="#android:id/progress"
android:height="4dp"
android:gravity="center">
<clip android:drawable="#drawable/survey_seekbar_progress" />
</item>
</layer-list>
<!--survey_border_shadow-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:endColor="#color/thr_dark_blue"
android:startColor="#color/thr_dark_blue" />
</shape>
</item>
</layer-list>
<!--survey_seekbar_progress-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/progressshape" >
<clip>
<shape
android:shape="rectangle" >
<size android:height="3dp"/>
<corners
android:radius="5dp" />
<solid android:color="#color/thr_dark_blue"/>
</shape>
</clip>
</item>
</layer-list>

You should have your customized textview and change the text inside onProgressChanged.
Is that enough? ==> No
You need to change the x coordinate of the textview to change it's place to be compatible with seekbar place.
Code demonstrate that:
#Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
yourTextView.setText(progress + " miles");
// Get the thumb bound and get its left value
int x = seekBar.getThumb().getBounds().left;
// set the left value to textview x value
yourTextView.setX(x);
}

You can do the following:
1) MainActivity.class:
public class MainActivity extends AppCompatActivity {
private static final String TAG = MainActivity.class.getSimpleName();
private SeekBar sb;
private RelativeLayout rlMarker;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
sb = (SeekBar) findViewById(R.id.sb);
rlMarker = (RelativeLayout) findViewById(R.id.rlMarker);
sb.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
updateMarker(sb, rlMarker, (i + " miles"));
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
rlMarker.setVisibility(View.VISIBLE);
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
rlMarker.setVisibility(View.GONE);
}
});
//initialize
updateMarker(sb, rlMarker, "0 miles");
}
private void updateMarker(final SeekBar sb,
View rlMarker,
String message) {
final TextView tvProgress = (TextView) rlMarker.findViewById(R.id.tvProgress);
final View vArrow = (View) rlMarker.findViewById(R.id.vArrow);
/**
* According to this question:
* https://stackoverflow.com/questions/20493577/android-seekbar-thumb-position-in-pixel
* one can find the SeekBar thumb location in pixels using:
*/
int width = sb.getWidth()
- sb.getPaddingLeft()
- sb.getPaddingRight();
final int thumbPos = sb.getPaddingLeft()
+ width
* sb.getProgress()
/ sb.getMax() +
//take into consideration the margin added (in this case it is 10dp)
Math.round(convertDpToPixel(10, MainActivity.this));
tvProgress.setText(message);
tvProgress.post(new Runnable() {
#Override
public void run() {
final Display display = ((WindowManager) MainActivity.this.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
final Point deviceDisplay = new Point();
display.getSize(deviceDisplay);
//vArrow always follow seekBar thumb location
vArrow.setX(thumbPos - sb.getThumbOffset());
//unlike vArrow, tvProgress will not always follow seekBar thumb location
if ((thumbPos - tvProgress.getWidth() / 2 - sb.getPaddingLeft()) < 0) {
//part of the tvProgress is to the left of 0 bound
tvProgress.setX(vArrow.getX() - 20);
} else if ((thumbPos + tvProgress.getWidth() / 2 + sb.getPaddingRight()) > deviceDisplay.x) {
//part of the tvProgress is to the right of screen width bound
tvProgress.setX(vArrow.getX() - tvProgress.getWidth() + 20 + vArrow.getWidth());
} else {
//tvProgress is between 0 and screen width bounds
tvProgress.setX(thumbPos - tvProgress.getWidth() / 2f);
}
}
});
}
/**
* According to this question:
* https://stackoverflow.com/questions/4605527/converting-pixels-to-dp
* one can convert dp to pixels using the following method:
*/
public static float convertDpToPixel(float dp, Context context) {
Resources resources = context.getResources();
DisplayMetrics metrics = resources.getDisplayMetrics();
float px = dp * ((float) metrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT);
return px;
}
}
2) activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:textSize="40sp"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="Top"
android:layout_above="#id/v"
android:textColor="#android:color/white"/>
<include
layout="#layout/marker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_above="#id/v">
</include>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#id/sb"
android:id="#+id/v">
</View>
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sb"
android:layout_centerInParent="true"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:max="100"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:textSize="40sp"
android:gravity="center"
android:text="Bottom"
android:layout_below="#id/sb"
android:layout_alignParentBottom="true"
android:textColor="#android:color/white"/>
</RelativeLayout>
3) marker.xml:
<?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="wrap_content"
android:background="#android:color/transparent"
android:id="#+id/rlMarker">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvProgress"
android:gravity="center"
android:padding="10dp"
android:textColor="#android:color/white"
android:background="#drawable/marker_shape"
android:text="0 miles"/>
<View
android:layout_width="20dp"
android:layout_height="20dp"
android:id="#+id/vArrow"
android:gravity="center"
android:rotation="180"
android:layout_below="#id/tvProgress"
android:background="#drawable/marker_arrow_shape"/>
</RelativeLayout>
4) marker_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%">
<shape>
<solid
android:shape="rectangle"
android:color="#color/colorAccent" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
</rotate>
</item>
</layer-list>
5) marker_arrow_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="-40%"
android:pivotY="87%">
<shape>
<solid
android:shape="rectangle"
android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
</layer-list>
6) Result:

Android Adding Text inside switch toggle. Newer API approach

I want to add text inside switches and expect toggle to completely cover the texts
I was able to achieve this in API 16 with below option
<Switch
android:textOff="off"
android:showText="true"
android:textOn="on"/>
However same switch looks odd in the higher version(i'm testing with API 27) where switch toggle is a round icon behind the text.
Is there a way i can fit the text inside the switch toggle using native library/methods.

I found this code in GitHub. After some addition and modification, I get what I need. This toggle button has YES NO text on it and works like switch button. You can give it a go.
public class ToggleButton extends RelativeLayout implements View.OnClickListener {
FrameLayout layout;
TextView toggleCircle;
View background_oval_off, background_oval_on;
int dimen;
private Boolean _crossfadeRunning = false;
private ObjectAnimator _oaLeft, _oaRight;
public ToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.toggle_button, this, true);
background_oval_off = findViewById(R.id.background_oval_off);
background_oval_on = findViewById(R.id.background_oval_on);
toggleCircle = findViewById(R.id.toggleCircle);
layout = (FrameLayout) findViewById(R.id.layout);
layout.setOnClickListener(this);
//get a pixel size for a particular dimension - will differ by device according to screen density
dimen = getResources().getDimensionPixelSize(R.dimen.toggle_width);
_oaLeft = ObjectAnimator.ofFloat(toggleCircle, "x", dimen / 2, 0).setDuration(250);
_oaRight = ObjectAnimator.ofFloat(toggleCircle, "x", 0, dimen / 2).setDuration(250);
//setState();
}
public ToggleButton(Context context) {
this(context, null);
}
public void setState(String answer) {
Log.d("simul", "ans - " + answer);
if (answer.equals("1")) {
toggleCircle.setTextColor(ContextCompat.getColor(getContext(), R.color.green));
toggleCircle.setX(dimen / 2);
_crossfadeViews(background_oval_off, background_oval_on, 1);
toggleCircle.setText("Yes");
} else {
toggleCircle.setTextColor(ContextCompat.getColor(getContext(), R.color.red));
toggleCircle.setX(0);
_crossfadeViews(background_oval_on, background_oval_off, 1);
toggleCircle.setText("No");
}
}
private void _crossfadeViews(final View begin, View end, int duration) {
_crossfadeRunning = true;
end.setAlpha(0f);
end.setVisibility(View.VISIBLE);
end.animate().alpha(1f).setDuration(duration).setListener(null);
begin.animate().alpha(0f).setDuration(duration).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
begin.setVisibility(View.GONE);
_crossfadeRunning = false;
}
});
}
#Override
public void onClick(View view) {
if (_oaLeft.isRunning() || _oaRight.isRunning() || _crossfadeRunning) return;
if (toggleCircle.getText().equals("Yes")) {
_oaLeft.start();
_crossfadeViews(background_oval_on, background_oval_off, 110);
toggleCircle.setText("No");
toggleCircle.setTextColor(ContextCompat.getColor(getContext(), R.color.red));
mListener.toggleButtonClickListener("No");
} else {
_oaRight.start();
_crossfadeViews(background_oval_off, background_oval_on, 400);
toggleCircle.setText("Yes");
toggleCircle.setTextColor(ContextCompat.getColor(getContext(), R.color.green));
mListener.toggleButtonClickListener("Yes");
}
}
public ToggleButtonListener mListener = null;
public void setToggleButtonClickListener(ToggleButtonListener listener) {
mListener = listener;
}
public interface ToggleButtonListener {
public void toggleButtonClickListener(String content);
}
}
toogle_button_red_oval.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="#dimen/toggle_circle_diameter">
<shape android:shape="oval">
<solid android:color="#color/red"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
<item android:left="#dimen/toggle_circle_radius" android:right="#dimen/toggle_circle_radius">
<shape android:shape="rectangle">
<solid android:color="#color/red"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
<item android:left="#dimen/toggle_circle_diameter">
<shape android:shape="oval">
<solid android:color="#color/red"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
</layer-list>
toogle_button_green_oval.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="#dimen/toggle_circle_diameter">
<shape android:shape="oval">
<solid android:color="#color/green"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
<item android:left="#dimen/toggle_circle_radius" android:right="#dimen/toggle_circle_radius">
<shape android:shape="rectangle">
<solid android:color="#color/green"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
<item android:left="#dimen/toggle_circle_diameter">
<shape android:shape="oval">
<solid android:color="#color/green"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
</item>
</layer-list>
toogle_button_circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#color/white"/>
<size
android:height="#dimen/toggle_circle_diameter"
android:width="#dimen/toggle_circle_diameter" />
</shape>
toogle_button.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<FrameLayout
android:id="#+id/layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:layout_width="#dimen/toggle_width"
android:layout_height="#dimen/toggle_height"
android:id="#+id/background_oval_off"
android:background="#drawable/toggle_button_black_oval" />
<View
android:layout_width="#dimen/toggle_width"
android:layout_height="#dimen/toggle_height"
android:id="#+id/background_oval_on"
android:background="#drawable/toggle_button_green_oval"
android:visibility="gone" />
<TextView
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:layout_width="#dimen/toggle_circle_diameter"
android:layout_height="#dimen/toggle_circle_diameter"
android:layout_gravity="center_vertical"
android:id="#+id/toggleCircle"
android:textSize="#dimen/toggle_text_size"
android:text="No"
android:background="#drawable/toggle_button_circle"/>
</FrameLayout>
</merge>
XML layout code
<package.name.ToggleButton
android:id="#+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</cpackage.name.ToggleButton>
Java Code :
ToggleButton toggleButton = findViewById(R.id.toggleButton);
toggleButton.setToggleButtonClickListener(new ToggleButton.ToggleButtonListener() {
#Override
public void toggleButtonClickListener(String content) {
if (content.equals("Yes")) {
} else {
}
}
});
dimens.xml
<dimen name="toggle_width">100dp</dimen>
<dimen name="toggle_height">50dp</dimen>
<dimen name="toggle_circle_diameter">50dp</dimen>
<dimen name="toggle_circle_radius">25dp</dimen>
Sorry for this long long answer. I had to add all the code here. please let me know if anything missing here. :)

How to make blink effect on textview on click?

Hi I am new to android development. I want to create onclick effects to textview. When I click on the textview it will blink or something effects make. I tried it with change color, but it's not working. How can I make blink effect on textview onclick ??
please help me with example code. thanks in advance :)

The easiest way is to set this background in the TextView:
android:background="?attr/selectableItemBackground"
And if you want to set a different color for the background, set that attr as foreground instead of background.

try this. it worked for me.
android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"

create a xml with name something like txt_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/numpad_button_bg_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
</selector>
then add in texview xml
android:background="#drawable/txt_bg"
android:clickable="true"
hope it will help.

try below code:-
<Button
android:id="#+id/action"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:layout_margin="5dp"
android:background="#drawable/btn_click"
android:gravity="center"
android:textColor="#color/white"
android:textSize="12sp" />
btn_click.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_hover" android:state_pressed="true"/>
<item android:drawable="#drawable/button"/>
</selector>
or below also
btn_hover.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#000000" />
<gradient
android:angle="270"
android:centerColor="#1a000000"
android:endColor="#33000000"
android:startColor="#android:color/transparent" >
</gradient>
<corners android:radius="5dp" />
</shape>
btn.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:color="#000000"
android:width="1dp"
/>
<gradient
android:angle="270"
android:centerColor="#android:color/transparent"
android:endColor="#android:color/transparent"
android:startColor="#android:color/transparent" >
</gradient>
<corners android:radius="5dp" />
</shape>
btn_click.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_hover" android:state_pressed="true"/>
<item android:drawable="#drawable/btn"/>
</selector>

public class TesteBlinkActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
blink();
}
private void blink(){
final Handler handler = new Handler();
new Thread(new Runnable() {
#Override
public void run() {
int timeToBlink = 1000; //in milissegunds
try{Thread.sleep(timeToBlink);}catch (Exception e) {}
handler.post(new Runnable() {
#Override
public void run() {
TextView txt = (TextView) findViewById(R.id.usage);
if(txt.getVisibility() == View.VISIBLE){
txt.setVisibility(View.INVISIBLE);
}else{
txt.setVisibility(View.VISIBLE);
}
blink();
}
});
}
}).start();
}

How to Customize a Progress Bar In Android

I am working on an app in which I want to show a ProgressBar, but I want to replace the default Android ProgressBar.
So how can I customize the ProgressBar?
Do I need some graphics and animation for that?
I read the following post but could not get it to work:
Custom Progress bar Android

Customizing a ProgressBar requires defining the attribute or properties for the background and progress of your progress bar.
Create an XML file named customprogressbar.xml in your res->drawable folder:
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>
</layer-list>
Now you need to set the progressDrawable property in customprogressbar.xml (drawable)
You can do this in the XML file or in the Activity (at run time).
Do the following in your XML:
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="#drawable/custom_progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
At run time do the following
// Get the Drawable custom_progressbar
Drawable draw=res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawable
progressBar.setProgressDrawable(draw);
Edit: corrected xml layout

In case of complex ProgressBar like this,
use ClipDrawable.
NOTE : I've not used ProgressBar here in this example. I've achieved
this using ClipDrawable by clipping image with Animation.
A Drawable that clips another Drawable based on this Drawable's current level value. You can control how much the child Drawable gets clipped in width and height based on the level, as well as a gravity to control where it is placed in its overall container. Most often used to implement things like progress bars, by increasing the drawable's level with setLevel().
NOTE : The drawable is clipped completely and not visible when the level is 0
and fully revealed when the level is 10,000.
I've used this two images to make this CustomProgressBar.
scall.png
ballon_progress.png
MainActivity.java
public class MainActivity extends ActionBarActivity {
private EditText etPercent;
private ClipDrawable mImageDrawable;
// a field in your class
private int mLevel = 0;
private int fromLevel = 0;
private int toLevel = 0;
public static final int MAX_LEVEL = 10000;
public static final int LEVEL_DIFF = 100;
public static final int DELAY = 30;
private Handler mUpHandler = new Handler();
private Runnable animateUpImage = new Runnable() {
#Override
public void run() {
doTheUpAnimation(fromLevel, toLevel);
}
};
private Handler mDownHandler = new Handler();
private Runnable animateDownImage = new Runnable() {
#Override
public void run() {
doTheDownAnimation(fromLevel, toLevel);
}
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
etPercent = (EditText) findViewById(R.id.etPercent);
ImageView img = (ImageView) findViewById(R.id.imageView1);
mImageDrawable = (ClipDrawable) img.getDrawable();
mImageDrawable.setLevel(0);
}
private void doTheUpAnimation(int fromLevel, int toLevel) {
mLevel += LEVEL_DIFF;
mImageDrawable.setLevel(mLevel);
if (mLevel <= toLevel) {
mUpHandler.postDelayed(animateUpImage, DELAY);
} else {
mUpHandler.removeCallbacks(animateUpImage);
MainActivity.this.fromLevel = toLevel;
}
}
private void doTheDownAnimation(int fromLevel, int toLevel) {
mLevel -= LEVEL_DIFF;
mImageDrawable.setLevel(mLevel);
if (mLevel >= toLevel) {
mDownHandler.postDelayed(animateDownImage, DELAY);
} else {
mDownHandler.removeCallbacks(animateDownImage);
MainActivity.this.fromLevel = toLevel;
}
}
public void onClickOk(View v) {
int temp_level = ((Integer.parseInt(etPercent.getText().toString())) * MAX_LEVEL) / 100;
if (toLevel == temp_level || temp_level > MAX_LEVEL) {
return;
}
toLevel = (temp_level <= MAX_LEVEL) ? temp_level : toLevel;
if (toLevel > fromLevel) {
// cancel previous process first
mDownHandler.removeCallbacks(animateDownImage);
MainActivity.this.fromLevel = toLevel;
mUpHandler.post(animateUpImage);
} else {
// cancel previous process first
mUpHandler.removeCallbacks(animateUpImage);
MainActivity.this.fromLevel = toLevel;
mDownHandler.post(animateDownImage);
}
}
}
activity_main.xml
<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"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/etPercent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"
android:maxLength="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ok"
android:onClick="onClickOk" />
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/scall" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clip_source" />
</FrameLayout>
clip_source.xml
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="vertical"
android:drawable="#drawable/ballon_progress"
android:gravity="bottom" />
In case of complex HorizontalProgressBar just change cliporientation in clip_source.xml like this,
android:clipOrientation="horizontal"
You can download complete demo from here.

in your xml
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#style/CustomProgressBar"
android:layout_margin="5dip" />
And in res/values/styles.xml:
<resources>
<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#drawable/custom_progress_bar_horizontal</item>
<item name="android:minHeight">10dip</item>
<item name="android:maxHeight">20dip</item>
</style>
<style name="AppTheme" parent="android:Theme.Light" />
</resources>
And custom_progress_bar_horizontal is a xml stored in drawable folder which defines your custom progress bar. For more detail see this blog.
I hope this will help you.

There are two types of progress bars called determinate progress bar (fixed duration) and indeterminate progress bar (unknown duration).
Drawables for both of types of progress bar can be customized by defining drawable as xml resource. You can find more information about progress bar styles and customization at http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples.
Customizing fixed or horizontal progress bar :
Below xml is a drawable resource for horizontal progress bar customization.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:gravity="center_vertical|fill_horizontal">
<shape android:shape="rectangle"
android:tint="?attr/colorControlNormal">
<corners android:radius="8dp"/>
<size android:height="20dp" />
<solid android:color="#90caf9" />
</shape>
</item>
<item android:id="#android:id/progress"
android:gravity="center_vertical|fill_horizontal">
<scale android:scaleWidth="100%">
<shape android:shape="rectangle"
android:tint="?attr/colorControlActivated">
<corners android:radius="8dp"/>
<size android:height="20dp" />
<solid android:color="#b9f6ca" />
</shape>
</scale>
</item>
</layer-list>
Customizing indeterminate progress bar
Below xml is a drawable resource for circular progress bar customization.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/progress"
android:top="16dp"
android:bottom="16dp">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="315">
<shape android:shape="rectangle">
<size
android:width="80dp"
android:height="80dp" />
<stroke
android:width="6dp"
android:color="#b71c1c" />
</shape>
</rotate>
</item>
</layer-list>

Customizing the color of progressbar namely in case of spinner type needs an xml file and initiating codes in their respective java files.
Create an xml file and name it as progressbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
tools:context=".Radio_Activity" >
<LinearLayout
android:id="#+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ProgressBar
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ProgressBar>
</LinearLayout>
</LinearLayout>
Use the following code to get the spinner in various expected color.Here we use the hexcode to display spinner in blue color.
Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner);
spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"),
android.graphics.PorterDuff.Mode.MULTIPLY);

For using custom drawable:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:drawable="#drawable/my_drawable"
android:pivotX="50%"
android:pivotY="50%" />
(add under res/drawable progress.xml). my_drawable may be xml, png
Then in your layout use
<ProgressBar
android:id="#+id/progressBar"
android:indeterminateDrawable="#drawable/progress_circle"
...
/>

Creating Custom ProgressBar like hotstar.
Add Progress bar on layout file and set the indeterminateDrawable with drawable file.
activity_main.xml
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="#+id/player_progressbar"
android:indeterminateDrawable="#drawable/custom_progress_bar"
/>
Create new xml file in res\drawable
custom_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="1080" >
<shape
android:innerRadius="35dp"
android:shape="ring"
android:thickness="3dp"
android:useLevel="false" >
<size
android:height="80dp"
android:width="80dp" />
<gradient
android:centerColor="#80b7b4b2"
android:centerY="0.5"
android:endColor="#f4eef0"
android:startColor="#00938c87"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>

Simplest way to create customize a progress bar in Android:
Initialize and show dialog:
MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
progressdialog.show();
Create method:
public class MyProgressDialog extends AlertDialog {
public MyProgressDialog(Context context) {
super(context);
getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
}
#Override
public void show() {
super.show();
setContentView(R.layout.dialog_progress);
}
}
Create layout XML:
<RelativeLayout 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"
android:background="#android:color/transparent"
android:clickable="true">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ProgressBar
android:id="#+id/progressbarr"
android:layout_width="#dimen/eightfive"
android:layout_height="#dimen/eightfive"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/progresscustombg" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/progressbarr"
android:layout_marginTop="#dimen/_3sdp"
android:textColor="#color/white"
android:text="Please wait"/>
</RelativeLayout>
</RelativeLayout>
Create shape progresscustombg.xml and put res/drawable:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="20"
android:useLevel="false" >
<size
android:height="#dimen/eightfive"
android:width="#dimen/eightfive" />
<gradient
android:centerY="0.50"
android:endColor="#color/color_green_icash"
android:startColor="#FFFFFF"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>

If you want to do this in code, here is a sample:
pd = new ProgressDialog(MainActivity.this);
pd.setProgressStyle(ProgressDialog.STYLE_SPINNER);
pd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
pd.getWindow().setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
TextView tv = new TextView(this);
tv.setTextColor(Color.WHITE);
tv.setTextSize(20);
tv.setText("Waiting...");
pd.setCustomTitle(tv);
pd.setIndeterminate(true);
pd.show();
Using TextView gives you an option to change color, size, and font of your text. Otherwise you can just call setMessage(), as usual.

<ProgressBar
android:indeterminateDrawable="#drawable/loading"
style="?android:attr/progressBarStyleLarge"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleY="0.5"
android:scaleX="0.5"
android:id="#+id/progressBarGallery"/>
and #drawable/loading is src\main\res\drawable\loading.gif file, and its size is 200 by 200

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Android : I want to create loader with flight image - android

I want to create loader in android as same as attached gif Thanks in advance

Related

Custom Progress bar in android with Background

how to set ToolTip Text in android custom seekbar?

Android Adding Text inside switch toggle. Newer API approach

How to make blink effect on textview on click?

How to Customize a Progress Bar In Android

Categories

Resources