Develop Reference

Custom View onDraw() is being called but not appearing

SOLVED: I fixed the problem, it had to do with the constraints in my layout.
I am trying to create a custom view that for the time being simply displays a chart. This is my custom View class:
public class ChartView extends View {
private final Paint paint;
public ChartView(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
setWillNotDraw(false);
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.STROKE);
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d("View ", "onDraw called");
int x = getWidth();
int y = getHeight();
int divX = x / 5;
int divY = y / 7;
for (int i = 0; i <= 5; i++) {
canvas.drawLine(divX * i, 0, divX * i, y, paint);
Log.d("View", "line drawn");
}
for (int i = 0; i <= 7; i++) {
canvas.drawLine(0, divY * i, x, divY * i, paint);
Log.d("View", "line drawn");
}
}
}
At first I assumed onDraw() must not ever have been called, but I added the log messages and it was in fact being called and each line in the chart was being drawn. I also have overridden onMeausure() so I don't think thats the problem.
Just to test if anything would be drawn at all I added in a test TextView which appeared just fine. I Then found that my chartView instance in the Main activity was null because I didn't call the parent constructor properly. I fixed that though and still nothing was drawn. However, when I fixed the problem with the parent constructor, the TextView also disappeared.
This is my Main Activity:
public class MainActivity extends AppCompatActivity {
private ChartView chartView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Intent mainIntent = getIntent();
boolean testPassed = mainIntent.getBooleanExtra("test", false);
if (testPassed) {
Log.d("Main", "intents test passed");
}
chartView = (ChartView) findViewById(R.id.chartView);
}
and this is my layout XML file:
<?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:visibility="visible"
tools:context=".MainActivity">
<Views.ChartView
android:id="#+id/chartView"
android:layout_width="425dp"
android:layout_height="634dp"
android:layout_marginEnd="601dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView"
android:layout_width="260dp"
android:layout_height="292dp"
android:layout_marginTop="256dp"
android:text="TextView"
android:textSize="100dp"
app:layout_constraintBottom_toTopOf="#+id/chartView"
app:layout_constraintEnd_toStartOf="#+id/chartView"
app:layout_constraintHorizontal_bias="0.582"
app:layout_constraintStart_toEndOf="#+id/chartView"
app:layout_constraintTop_toBottomOf="#+id/chartView"
app:layout_constraintVertical_bias="0.801" />
</androidx.constraintlayout.widget.ConstraintLayout>
Any help would be appreciated.

How to have text views that move along the progress bar

Context: I want to build a horizontal progress bar with some values and want to put some text that move along below this progress bar. So my final ideia is something like this (I already have the progress bar built I only left the text views below)
My current code is something like this:
This is my StackedHorizontalProgressBar class:
public class StackedHorizontalProgressBar extends ProgressBar {
private Paint paint;
int primary_progress, max_value;
public StackedHorizontalProgressBar(Context context) {
super(context);
init();
}
public StackedHorizontalProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
#Override public synchronized void setMax(int max) {
this.max_value = max;
super.setMax(max);
}
#Override public synchronized void setProgress(int progress) {
if (progress > max_value) {
progress = max_value;
}
this.primary_progress = progress;
super.setProgress(progress);
}
#Override public synchronized void setSecondaryProgress(int secondaryProgress) {
if ((primary_progress + secondaryProgress) > max_value) {
secondaryProgress = (max_value - primary_progress);
}
super.setSecondaryProgress(primary_progress + secondaryProgress);
}
private void init() {
paint = new Paint();
paint.setColor(Color.BLACK);
primary_progress = 0;
max_value = 100;
}
}
This is my Main Activity layout (that uses above class)
<android.support.constraint.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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<github.nisrulz.stackedhorizontalprogressbar.StackedHorizontalProgressBar
android:id="#+id/stackedhorizontalprogressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:progressDrawable="#drawable/stacked_horizontal_progress"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="16dp" />
</android.support.constraint.ConstraintLayout>
This is my MainActivity class:
public class MainActivity extends AppCompatActivity {
int max = 100;
int countPrimary = 20;
int countSecondary = 30;
StackedHorizontalProgressBar stackedHorizontalProgressBar;
TextView txt_primary, txt_secondary;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
stackedHorizontalProgressBar =
(StackedHorizontalProgressBar) findViewById(R.id.stackedhorizontalprogressbar);
stackedHorizontalProgressBar.setMax(max);
stackedHorizontalProgressBar.setProgress(countPrimary);
txt_primary.setText("Primary Value : " + countPrimary + "%");
stackedHorizontalProgressBar.setSecondaryProgress(countSecondary);
txt_secondary.setText("Secondary Value : " + countSecondary + "%");
}
}
I think I must use canvas for this, so if there is anyone with experience with this that can help me.

public class ProgressBarAvtivity extends AppCompatActivity {
ProgressBar progressBar;
TextView tvProgress;
int d = 1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_bar_avtivity);
progressBar = (ProgressBar) findViewById(R.id.progressBar);
progressBar.setProgress(d);
tvProgress = (TextView)findViewById(R.id.tvProgress);
tvProgress.setText(String.valueOf(d));
if (d > 40) {
tvProgress.setX(((width )* d / 100) - (d/2));
}
else {
tvProgress.setX(((width )* d / 100));
}
}}

Carousel effect using android-supportv4.viewpager

I need an example of view pager with carousel effect.I've searched through internet but I couldn't find any example.So , have you done anything like this before ? Do you have any examples that I can examine.

You need:
activity_main
item
Custom Fragment
Custom LinearLayout
CustomPagerAdapter
Activity
I use this code:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:attrs="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.thedeveloperworldisyours.carouselviewpager.MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/activity_main_view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
item
<?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:gravity="center"
android:orientation="vertical">
<com.thedeveloperworldisyours.carouselviewpager.CustomLinearLayout
android:id="#+id/item_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/item_size_text" />
<Button
android:id="#+id/item_content"
android:layout_width="230dp"
android:layout_height="120dp"
android:background="#android:color/black"/>
</com.thedeveloperworldisyours.carouselviewpager.CustomLinearLayout>
</LinearLayout>
Custom Fragment
public class CustomFragment extends Fragment {
public static Fragment newInstance(Activity context, int position, float scale) {
Bundle bundle = new Bundle();
bundle.putInt("position", position);
bundle.putFloat("scale", scale);
return Fragment.instantiate(context, CustomFragment.class.getName(), bundle);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (container == null) {
return null;
}
LinearLayout linearLayout = (LinearLayout)
inflater.inflate(R.layout.item, container, false);
int position = this.getArguments().getInt("position");
TextView textView = (TextView) linearLayout.findViewById(R.id.item_text);
textView.setText(String.valueOf(position));
CustomLinearLayout root = (CustomLinearLayout) linearLayout.findViewById(R.id.item_root);
float scale = this.getArguments().getFloat("scale");
root.setScaleBoth(scale);
return linearLayout;
}
}
Custom LinearLayout
public class CustomLinearLayout extends LinearLayout {
private float mScale = BIG_SCALE;
public CustomLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomLinearLayout(Context context) {
super(context);
}
public void setScaleBoth(float scale) {
this.mScale = scale;
this.invalidate(); // If you want to see the mScale every time you set
// mScale you need to have this line here,
// invalidate() function will call onDraw(Canvas)
// to redraw the view for you
}
#Override
protected void onDraw(Canvas canvas) {
// The main mechanism to display mScale animation, you can customize it
// as your needs
int w = this.getWidth();
int h = this.getHeight();
canvas.scale(mScale, mScale, w / 2, h / 2);
super.onDraw(canvas);
}
}
The most import thing is the adapter
public class CustomPagerAdapter extends FragmentPagerAdapter implements ViewPager.PageTransformer {
public final static float BIG_SCALE = 1.0f;
public final static float SMALL_SCALE = 0.7f;
public final static float DIFF_SCALE = BIG_SCALE - SMALL_SCALE;
private Activity mContext;
private FragmentManager mFragmentManager;
private float mScale;
public CustomPagerAdapter(Activity context, FragmentManager fragmentManager) {
super(fragmentManager);
this.mFragmentManager = fragmentManager;
this.mContext = context;
}
#Override
public Fragment getItem(int position) {
// make the first mViewPager bigger than others
if (position == FIRST_PAGE)
mScale = BIG_SCALE;
else
mScale = SMALL_SCALE;
return CustomFragment.newInstance(mContext, position, mScale);
}
#Override
public int getCount() {
return PAGES;
}
#Override
public void transformPage(View page, float position) {
CustomLinearLayout myLinearLayout = (CustomLinearLayout) page.findViewById(R.id.item_root);
float scale = BIG_SCALE;
if (position > 0) {
scale = scale - position * DIFF_SCALE;
} else {
scale = scale + position * DIFF_SCALE;
}
if (scale < 0) scale = 0;
myLinearLayout.setScaleBoth(scale);
}
}
and now the Activity
public class MainActivity extends AppCompatActivity {
public final static int PAGES = 5;
public final static int FIRST_PAGE = 0 ;
public CustomPagerAdapter mAdapter;
public ViewPager mViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.activity_main_view_pager);
mAdapter = new CustomPagerAdapter(this, this.getSupportFragmentManager());
mViewPager.setAdapter(mAdapter);
mViewPager.setPageTransformer(false, mAdapter);
// Set current item to the middle page so we can fling to both
// directions left and right
mViewPager.setCurrentItem(FIRST_PAGE);
// Necessary or the mViewPager will only have one extra page to show
// make this at least however many pages you can see
mViewPager.setOffscreenPageLimit(3);
// Set margin for pages as a negative number, so a part of next and
// previous pages will be showed
mViewPager.setPageMargin(-400);
}
}
Also you check this Tutorial and this exmple in GitHub.

Please find the link below as solution to implement Carousel in android using View Pager:
https://github.com/haerulmuttaqin/SwipeViewPager
Hope it helps anyone looking for answers.

You can have a look at CarouselView.
Might help you if you need a simple carouselview.
Add view in your layout:
<com.synnapps.carouselview.CarouselView
android:id="#+id/carouselView"
android:layout_width="match_parent"
android:layout_height="200dp"
app:fillColor="#FFFFFFFF"
app:pageColor="#00000000"
app:radius="6dp"
app:slideInterval="3000"
app:strokeColor="#FF777777"
app:strokeWidth="1dp"/>
Add images by implementing callback:
public class SampleCarouselViewActivity extends AppCompatActivity {
CarouselView carouselView;
int[] sampleImages = {R.drawable.image_1, R.drawable.image_2, R.drawable.image_3, R.drawable.image_4, R.drawable.image_5};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sample_carousel_view);
carouselView = (CarouselView) findViewById(R.id.carouselView);
carouselView.setPageCount(sampleImages.length);
carouselView.setImageListener(imageListener);
}
ImageListener imageListener = new ImageListener() {
#Override
public void setImageForPosition(int position, ImageView imageView) {
imageView.setImageResource(sampleImages[position]);
}
};
}

How to create a view on an activity

So I have this class which extends an activity. But I want to draw something on the screen, so I need to make a canvas. However I can't extends View, because it's an activity allready. What should I do?
My activity has the onClick method which I use to do some stuff, but what I wanna do is draw a simple image when I call the onClick method as well.
Thanks.
public class Stuff extends Activity implements OnClickListener {
#Override
protected void onCreate(Bundle savedInstanceState) {
(...)
}
#Override
public void onClick(View arg0) {
(...)
}

STEP 1: create a class by extends View as:
public class DrawView extends View {
public float currentX=40;
public float currentY=50;
public DrawView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint=new Paint();
paint.setColor(Color.RED);
canvas.drawCircle(currentX, currentY, 25, paint);
}
}
STEP 2: In Your Stuff Activity :
public class Stuff extends Activity implements OnClickListener {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout root=(LinearLayout) findViewById(R.id.root);
(...)
}
#Override
public void onClick(View arg0) {
//DRAW YOUR VIEW ON BUTTON CLICK
final DrawView drawView=new DrawView(this);
drawView.setMinimumWidth(300);
drawView.setMinimumHeight(500);
drawView.currentX=200;
drawView.currentY=200;
drawView.invalidate();
root.addView(drawView);
(...)
}
STEP 3: Your Activity main.xml as :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#99FFCC"
android:id="#+id/root">
</LinearLayout>
and finally try to search on google before asking question here.thanks

You can declare an inner class within ur activity for ex refer this code:
public class GraphicsTest extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new GraphicsTestView(this));
}
private static class GraphicsTestView extends View
{
private ShapeDrawable mDrawable =
new ShapeDrawable();
/* Drawable's are objects which can be drawn on a Canvas
ShapeDrawable is used to draw primitive shapes such as:
ArcShape, OvalShape, PathShape, RectShape, RoundRectShape
A Canvas is the object provided by Android on which
a view tries to draw itself. In addition to ShapeDrawable,
there are other subclasses of Drawable like PictureDrawable,
RotateDrawable, ScaleDrawable, ClipDrawable,GradientDrawable, etc
Some of these we will see when we consider the XML approach to
graphics
*/
public GraphicsTestView (Context context)
{
super(context);
setFocusable(true);
this.mDrawable.getPaint().setColor(0xFFFF0000);
//argb where a is alpha (transparency)
}
#Override
protected void onDraw(Canvas canvas)
/* the onDraw method is where a view draws itself
this is our first time overriding it.
*/
{
int x = 10;
int y = 10;
int width = 300;
int height = 50;
this.mDrawable.setBounds(x, y, x + width, y + height);
this.mDrawable.draw(canvas);
ArcShape arc = new ArcShape(45,90); //start angle, sweep angle
ShapeDrawable test = new ShapeDrawable(arc);
Paint p = test.getPaint();
p.setColor(0xFF00FFFF);
p.setStyle(Paint.Style.STROKE);
test.setBounds(10, 70, 310, 370);
//Top-Left, Bottom Right of rectangle to draw into
test.draw(canvas);
}
}
}

Are you saying you want to get the layout view in your XML file? You can draw the views in it, get your code to call it and view it, and then set the images to respond when clicked.
In your onCreate method, after super.onCreate(savedInstanceState); add this setContentView(R.id.layoutname)
For example
#Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
As for the onClickListener, you can set the views to implement it like this since you already implement it in the Activity.
// set this after "setContentView(R.layout.main);"
b1 = (Button)findViewById(R.id.main);
b1.setOnClickListener(this);

Issue in aligning the custom view

I am just trying to implement a customView from scratch i.e by extending the view class and overriding the onDraw() method. Just trying to build a simple view, a view which just draws a circle for now. I am facing some issue in aligning it and i am not able to understand how android is calculating the views dimensions.
Just having only the view i.e setContentView(new MyCustomView(this)) works fine... it takes the entire space and draws the circle. But if i impose any constraints i.e giving margin, or aligning it in centreparent makes my view completely lost and it doesnt draw anything. The issue is the view is getting clipped by its parent but not able to understand why its getting clipped. Any help around this would be greatly appreciated. Here is my code.
Here is my customView
public class MyCustomView extends View {
private Paint myPaint=null;
private boolean useCenters;
private float xCoordinate;
private float yCoordinate;
private float viewWidth;
private float viewHeight;
private int totalTime;
private static float SWEEP_INC ;
private RectF myRect;
private boolean shouldInvalidate;
private float mSweep;
public MyCustomView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initPaintComponents();
}
public MyCustomView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public MyCustomView(Context context) {
this(context,null);
}
private void initPaintComponents() {
myPaint = new Paint();
myPaint.setStyle(Paint.Style.STROKE);
myPaint.setStrokeWidth(4);
myPaint.setColor(0x880000FF);
useCenters = false;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
calculateCoordinates();
}
private void calculateCoordinates() {
xCoordinate = getX();
yCoordinate = getY();
viewWidth = getWidth();
viewHeight = getHeight();
myRect = new RectF(xCoordinate+3, yCoordinate+3, xCoordinate+viewWidth-(viewWidth/10), yCoordinate+viewHeight-(viewHeight/10));
Log.i("SAMPLEARC","xcoordinate: "+xCoordinate+" ycoordinate: "+yCoordinate+" view width:"+viewWidth+" view height:"+viewHeight+" measured width: "+getMeasuredWidth()+"measured height:"+getMeasuredHeight());
}
public int getTotalTime() {
return totalTime;
}
public void setTotalTime(int totalTime) {
this.totalTime = totalTime;
SWEEP_INC = (float)6/totalTime;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawArc(myRect, 0, mSweep, useCenters, myPaint);
mSweep += SWEEP_INC;
if(mSweep > 280)
{
myPaint.setColor(0x888800FF);
}
invalidate();
}
}
MyActivity:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
MyCustomView myView = (MyCustomView) findViewById(R.id.customimg);
myView.setTotalTime(10);
}
main.xml
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
com.example.anim.MyCustomView android:id="#+id/customimg"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
if i remove that centerInParent in xml it gets drawn. so callling setMeasureDimentions() in onMeasure() doesnt have any affect either. But the xcoodinate,ycoordinate,viewWidth and viewHeight seems to give the correct values. Just need to understand why the view is getting clipped and how android is calculating the dimensions at runtime. And how do i consider the margin paramters while drawing these customViews. Any help would be greatly appreciated.
Thanks in advance

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:lib="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.ind.Custom_Attribute.LibView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=""
lib:xattr="Custom attribute APPLIED!"
/>
</LinearLayout>

<resources>
<declare-styleable name="CustomAttrs">
<attr name="xattr" format="string" />
</declare-styleable>
</resources>
in values/attrs.xml