Develop Reference

Adding buttons dynamically to custom FrameLayout

I have the following XML file that is built out of a custom layout that is created via Java code and 3 buttons inside a linear layout below it -
<?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="match_parent"
android:background="#color/grey_200"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/grey_200"
android:gravity="center_vertical"
android:orientation="vertical"
tools:layout_height="500dp">
<com.etiennelawlor.tinderstack.ui.TinderStackLayout
android:id="#+id/activity_main_tinder_stack_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp">
<Button
android:layout_width="wrap_content"
android:id="#+id/activity_main_delete_button"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#ff0000"
android:tag="1"
android:text="#string/activity_main_delete" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/activity_main_pass_button"
android:layout_margin="10dp"
android:background="#A9A9A9"
android:tag="2"
android:text="#string/activity_main_pass" />
<Button
android:layout_width="wrap_content"
android:id="#+id/activity_main_approve_button"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#98FB98"
android:tag="3"
android:text="#string/activity_main_approve" />
</LinearLayout>
</LinearLayout>
The issue I am facing looks like this -
I want the image to be able to move on top of the buttons when touching it, but also of course for the buttons to be touchable and functional.
Here is my TinderStackLayout class -
public class TinderStackLayout extends FrameLayout {
// Constants
private static final int DURATION = 300;
// Variable members
private OnCardSwipedListener onCardSwipedListener;
private int screenWidth;
private int yMultiplier;
//Top card
private TinderCardView topCardOnStack;
private Button mDeleteButton, mPassButton, mApproveButton;
//Constructors
public TinderStackLayout(Context context) {
super(context);
init();
}
public TinderStackLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TinderStackLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
#Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
super.addView(child, index, params);
if (onCardSwipedListener != null)
onCardSwipedListener.onNext(getChildCount());
}
#Override
public void removeView(View view) {
super.removeView(view);
if (onCardSwipedListener != null)
onCardSwipedListener.onNext(getChildCount());
}
#Override
public void onDetachedFromWindow() {
super.onDetachedFromWindow();
}
// Helper Methods
private void init() {
setClipChildren(false);
screenWidth = DisplayUtility.getScreenWidth(getContext());
yMultiplier = DisplayUtility.dp2px(getContext(), 8);
mDeleteButton = new Button(getContext());
mPassButton = new Button(getContext());
mApproveButton = new Button(getContext());
}
public void addCard(TinderCardView tinderCardView) {
View firstCard = getChildAt(0);
if (firstCard != null && firstCard.equals(tinderCardView)) {
return;
}
if (onCardSwipedListener == null)
onCardSwipedListener = tinderCardView.getOnCardSwipedListener();
topCardOnStack = tinderCardView;
ViewGroup.LayoutParams layoutParams;
layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
int childCount = getChildCount();
addView(tinderCardView, 0, layoutParams);
float scaleValue = 1 - (childCount / 50.0f);
tinderCardView.animate()
.x(0)
.y(childCount * yMultiplier)
.scaleX(scaleValue)
.setInterpolator(new AnticipateOvershootInterpolator())
.setDuration(DURATION);
}
public TinderCardView getTopCardOnStack() {
return topCardOnStack;
}
}
Do I need to add them dynamically? or is there a simpler way?
And if I do need to add them dynamically - I would be happy to get a code example of how to do so.

How to change a textview from a custom view's class

Let's say I have a custom view inside an activity and a TextView just below that custom view. I would like to change the TextView's text once the custom view was clicked but I seem to get a null pointer when I use findViewById(), so how can I do that?
<?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: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="com.yuvaleliav1gmail.quoridor_ye.MainActivity"
android:background="#dd7d23">
<com.yuvaleliav1gmail.quoridor_ye.ComBoardView
android:layout_width="900px"
android:layout_height="900px"
android:id="#+id/bview"
android:background="#drawable/game_board"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/radioGroup"
android:layout_below="#+id/bview"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Move Pawn"
android:id="#+id/radioPawn"
android:checked="true"
android:onClick="radioButtonClick"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set VERTICAL Wall"
android:id="#+id/verticalRdio"
android:checked="false"
android:onClick="radioButtonClick"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set HORIZONTAL Wall"
android:id="#+id/horizontalRdio"
android:checked="false"
android:onClick="radioButtonClick"/>
</RadioGroup>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Your turn"
android:id="#+id/turnText34"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/radioGroup"
android:layout_alignLeft="#+id/bview"
android:layout_alignStart="#+id/bview" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Your walls left: "
android:id="#+id/yourWallsText"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/turnText34"
android:layout_alignLeft="#+id/turnText34"
android:layout_alignStart="#+id/turnText34" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="10"
android:id="#+id/yourNumText"
android:layout_gravity="center_horizontal"
android:layout_alignTop="#+id/yourWallsText"
android:layout_toRightOf="#+id/yourWallsText"
android:layout_toEndOf="#+id/yourWallsText" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Opponent&apos;s walls left:"
android:id="#+id/opWallsText"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/yourWallsText"
android:layout_alignLeft="#+id/yourWallsText"
android:layout_alignStart="#+id/yourWallsText" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="10"
android:id="#+id/opNumText"
android:layout_gravity="center_horizontal"
android:layout_alignTop="#+id/opWallsText"
android:layout_toRightOf="#+id/opWallsText"
android:layout_toEndOf="#+id/opWallsText" />
</RelativeLayout>
comBoardView is the custom view's class
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.os.CountDownTimer;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.Display;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.widget.TextView;
import android.widget.Toast;
public class ComBoardView extends View {
private static final int ROWS = 9;
private static final int COLUMNS = 9;
public static Context con;
Paint paint;
GameService game;
TextView turns;
public static Point size = new Point();
/*
* constructor
*/
public ComBoardView(Context context, AttributeSet attrs) {
super(context, attrs);
con = context;
paint = new Paint();
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
display.getSize(size);
turns = (TextView) findViewById(R.id.turnText34);
}
/*
*/
public boolean onTouchEvent( MotionEvent event ) {
game = GameService.getInstance();
int x = (int)event.getX() / 100;
int y = (int)event.getY() / 100;
if ( event.getAction() != MotionEvent.ACTION_UP )
return true;
if(game.movePawn){
if(game.turn % 2 == 0){
if(game.isLegalMove(game.ai.MyLocation , y * ROWS + x)){
game.board.ClrPlayer(game.ai);
game.ai.MyLocation = y * ROWS + x;
game.board.SetPlayer(game.ai);
if(turns != null){
turns.setText("white's turn");
}
game.turn++;
}
}
else{
if(game.isLegalMove(game.player.MyLocation , y * ROWS + x)){
game.board.ClrPlayer(game.player);
game.player.MyLocation = y * ROWS + x;
game.board.SetPlayer(game.player);
if(turns != null){
turns.setText("black's turn");
}
game.turn++;
}
}
}
else {
if(((int)event.getX() % 100) < 50) x--;
if(((int)event.getY() % 100) < 50) y--;
if(game.setHWall){
game.board.SetHWall(y,x);
game.turn++;
}
else{
game.board.SetVWall(y,x);
game.turn++;
}
}
return true;
}
public void RestartTimer() {
new CountDownTimer(3500, 1000) {
public void onTick(long millisUntilFinished) {
final Toast toast = Toast.makeText(con, "restarting in: " + millisUntilFinished / 1000, Toast.LENGTH_LONG);
toast.show();
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
toast.cancel();
}
}, 1000);
}
public void onFinish() {
}
}.start();
}
protected void onDraw(Canvas canvas) {
paint.setAntiAlias(true);
paint.setColor(Color.BLACK);
GameService.getInstance().onDraw(canvas, paint);
}
}
and game is the activity's class
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;
import java.util.Timer;
public class Game extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_game);
Timer timer = new Timer();
GameUpdateTimer ut = new GameUpdateTimer();
ut.boardView = (ComBoardView)this.findViewById(R.id.bview);
timer.schedule(ut, 200, 200);
RadioButton pawn = (RadioButton)findViewById(R.id.radioPawn);
RadioButton hWall = (RadioButton)findViewById(R.id.horizontalRdio);
RadioButton vWall = (RadioButton)findViewById(R.id.verticalRdio);
final GameService g = GameService.getInstance();
pawn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
g.movePawn = true;
g.setHWall = false;
}});
hWall.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
g.movePawn = false;
g.setHWall = true;
}
});
vWall.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
g.movePawn = false;
g.setHWall = false;
}
});
}
}

You can't call turns = (TextView) findViewById(R.id.turnText34); from your custom view, it will always return Null because TextView exist in the activity xml and not in ComBoardView.
What you can do, is to instantiate your TextView in the activity, then add a clickListener to your ComBoardView.
TextView turns;
#Override
protected void onCreate(Bundle savedInstanceState) {
//...
turns = (TextView) findViewById(R.id.turnText34);
ut.boardView.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
turns.setText("ComBoardView was clicked!");
}});
//...
}

Draw and animate a dashed line

I have a fullscreen activity that should look like this:
where the big white circle would have some text, I've already done it, but the problem is that I don't know how to do that dashed lines between the icons, also they want a little animation in the icons, so I assumed that each one should be a separate view, so far I've done this (it doesn't need to look exactly the same):
So, how could I draw that lines? Also if I could make that dashes to "run" acrross the lines would be awesome.
this is my xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rlt_welcome"
android:layout_weight="9"
android:background="#drawable/bg"
>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:padding="10dp"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:id="#+id/img_youtube"
android:src="#drawable/youtube_circle"
android:layout_marginTop="60dp"
android:layout_marginRight="60dp"
android:layout_height="wrap_content"
/>
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/tablet_circle"
android:layout_height="wrap_content"
android:layout_above="#+id/img_stats"
android:layout_marginRight="30dp"
android:layout_below="#+id/img_youtube"
/>
<ImageView
android:layout_width="wrap_content"
android:id="#+id/img_stats"
android:src="#drawable/stats_circle"
android:layout_height="wrap_content"
android:layout_marginRight="70dp"
android:layout_marginBottom="20dp"
android:layout_alignParentBottom="true"/>
<ImageView
android:id="#+id/img_iphone"
android:layout_width="wrap_content"
android:src="#drawable/iphone_circle"
android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
/>
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/imac_circle"
android:layout_height="wrap_content"
android:layout_below="#+id/img_iphone"
android:layout_marginLeft="70dp"
android:layout_marginTop="-30dp"
/>
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/webcam_circle"
android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_vertical"
android:padding="40dp"
android:textSize="25sp"
android:textColor="#color/text1"
android:layout_margin="20dp"
android:text="Bienvenido"
android:background="#drawable/flat_circle"
android:id="#+id/txt_welcome"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow_circle"
android:id="#+id/img_arrow"
android:layout_alignParentTop="true"
android:layout_marginRight="60dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/news_circle"
android:layout_below="#+id/img_arrow"
android:layout_marginTop="-90dp"
android:layout_marginRight="2dp"
android:layout_marginLeft="70dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/line_circle"
android:id="#+id/img_line"
android:layout_below="#+id/img_arrow"
android:layout_marginTop="-10dp"
android:layout_marginRight="70dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/money_circle"
android:layout_below="#+id/img_line"
android:layout_marginRight="6dp"
android:layout_marginTop="-70dp"
android:layout_marginLeft="70dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mouse_circle"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginRight="80dp"
/>
</RelativeLayout>
</LinearLayout>

Please check this, may be this will help you
http://www.rengelbert.com/tutorial.php?id=182

How do I get this work, I made a new activity that holds a Canvas controller, and place the bitmaps on the canvas and draw the lines between them with this, I didn't use any external library:
Hope someone could reuse some code and not only been told to google it.
MainActivty.java
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
relativeMainActivity = (RelativeLayout) findViewById(R.id.rlt_main);
DisplayMetrics dm = new DisplayMetrics();
this.getWindowManager().getDefaultDisplay().getMetrics(dm);
final int heightS = dm.heightPixels;
final int widthS = dm.widthPixels;
Log.d("MainActvitiy", "widht:" + widthS);
myPanel = new Panel(getApplicationContext(),this,widthS, heightS);
relativeMainActivity.addView(myPanel);
RelativeLayout RR = new RelativeLayout(this);
RR.setGravity(Gravity.CENTER);
relativeMainActivity.addView(RR,400,150);
RR.setX(0);
LayoutInflater myInflater = (LayoutInflater) getApplicationContext().getSystemService(getApplicationContext().LAYOUT_INFLATER_SERVICE);
}
Panel.java
public class Panel extends SurfaceView implements SurfaceHolder.Callback {
public MainThread thread;
private Background background;
private CircleManager CM;
public int ScreenWidth;
public int Screenheigt;
private CircleIcon icon1;
private CircleIcon icon2;
private CircleIcon icon3;
//and so on
public MainActivity myMain;
public Panel(Context context, MainActivity _main, int width , int height) {
super(context);
getHolder().addCallback(this);
this.myMain = _main;
this.ScreenWidth=width;
this.Screenheigt=height;
thread = new MainThread(getHolder(),this);
background = new Background(BitmapFactory.decodeResource(getResources(), R.drawable.bg), Screenheigt, this);
CM = new CircleManager( this,context,ScreenWidth);
CM.setScreen(ScreenWidth, Screenheigt);
SetIcons();
CM.setManager();
setFocusable(true);
}
void SetIcons()
{
icon1 = new CircleIcon(BitmapFactory.decodeResource(getResources(),R.drawable.circle_iphone),39,40);
icon2 = new CircleIcon(BitmapFactory.decodeResource(getResources(),R.drawable.circle_chat),280,40);
icon3 = new CircleIcon(BitmapFactory.decodeResource(getResources(),R.drawable.circle_youtube),60,200);
//and so on
icon1.myConnections.add(2);
icon1.myConnections.add(3);
icon2.myConnections.add(15);
icon3.myConnections.add(4);
icon3.myConnections.add(5);
//and so on
CM.iconsList.add(icon1);
CM.iconsList.add(icon2);
CM.iconsList.add(icon3);
//and so on
}
void Draw(Canvas canvas){
if (canvas!=null)
{
background.draw(canvas);
CM.draw(canvas);
iconEvent.draw(canvas);
}
}
void Update(float dt)
{
CM.Update(dt);
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,int height) {
}
#Override
public void surfaceCreated(SurfaceHolder holder) {
// TODO Auto-generated method stub
thread.setRunning(true);
thread.start();
}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {
// TODO Auto-generated method stub
boolean retry = true;
while (retry)
{
try
{
thread.join();
retry=false;
}
catch (InterruptedException e)
{
}
}
}
}
Background.java
public class Background {
Bitmap BackBitmap;
int x,y;
int ScreenHeight;
Panel root_panel;
public Background(Bitmap bitmap , int Screen_h, Panel _panel) {
this.BackBitmap = bitmap;
this.x=0;
this.y=0;
this.ScreenHeight=Screen_h;
root_panel =_panel;
}
public void draw(Canvas canvas)
{
canvas.drawBitmap(BackBitmap,x,y, null);
}
}
CircleIcon.java
public class CircleIcon {
private Bitmap bitmap;
private int x;
private int y;
CircleManager circManager;
ArrayList<Integer> myConnections;
public int getX() {
return x;
}
public void setX(int x) {
this.x = x;
}
public int getY() {
return y;
}
public void setY(int y) {
this.y=y;
}
public CircleIcon(Bitmap icon, int x, int y) {
bitmap=icon;
this.x=x;
this.y=y;
myConnections = new ArrayList<>();
}
public ArrayList<Integer> getMyConnections() {
return myConnections;
}
public void setMyConnections(ArrayList<Integer> myConnections) {
this.myConnections = myConnections;
}
public void setManager(CircleManager icManager) {
circManager = icManager;
}
public Bitmap getBitmap()
{
return bitmap;
}
public void setBitmap(Bitmap bitmap) {
this.bitmap = bitmap;
}
public void draw(Canvas canvas) {
canvas.drawBitmap(bitmap, x, y, null);
}
public void update()
{
// x=+1; example
}
}
CircleManager.java
public class CircleManager {
Bitmap icons;
int screenWidth;
int hour;
int min;
Context myContext;
int ScreenWidht;
public Panel myPanel;
public ArrayList<CircleIcon> iconsList;
public CircleManager(Panel _Panel, Context context,int screenW) {
this.myPanel = _Panel;
this.screenWidth = screenW;
this.myContext = context;
iconsList = new ArrayList<CircleIcon>();
}
public void setScreen(int screenWidth, int screenHeight)
{
this.ScreenWidht=screenWidth;
}
public void draw(Canvas canvas)
{
drawLines(canvas);
for(CircleIcon myIcon: iconsList)
{
myIcon.draw(canvas);
}
}
public void Update(float dt)
{
//some animation updates
}
public void drawLines(Canvas canvas)
{
Paint mPaint = new Paint();
mPaint.setColor(Color.WHITE);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(2);
mPaint.setPathEffect(new DashPathEffect(new float[]{7, 5}, 0));
for (CircleIcon myIcon: iconsList)
{
for( int connectedIcon: myIcon.getMyConnections())
{
Path mPath;
mPath = new Path();
mPath.moveTo(myIcon.getX()+myIcon.getBitmap().getWidth()/2, myIcon.getY()+myIcon.getBitmap().getHeight()/2);
mPath.lineTo(iconsList.get(connectedIcon-1).getX()+myIcon.getBitmap().getWidth()/2, iconsList.get(connectedIcon-1).getY()+myIcon.getBitmap().getHeight()/2);
canvas.drawPath(mPath, mPaint);
}
}
}
public void setManager()
{
for(CircleIcon myIcon: iconsList)
{
myIcon.setManager(this);
}
}
}

Custom view is being displayed as nested views in Component Tree

I have created custom view which extends FrameLayout. After adding it into RelativeLayout it's being displayed as two nested views:
Is it normal? It sometimes messes up with wrap_content flags but I couldn't figure out why. When I use View as a base class everything looks normal.
Here is my code:
MainActivity.java
package com.example.app;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.SeekBar;
import com.codersmill.tset.R;
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
activity_main.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"
tools:context=".MainActivity">
<com.example.app.RateBar
android:layout_width="match_parent"
android:layout_height="48dp"
android:id="#+id/rateBar"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
RateBar.java
package com.example.app;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TextView;
import com.codersmill.tset.R;
public class RateBar extends FrameLayout {
TextView star1, star2, star3, star4, star5;
View dot;
private boolean isAnimating = false;
int radius = 36;
private int step = 100;
private int leftMargin = 50;
private int topMargin = 0;
private int currentPosition = 0;
public RateBar(Context context) {
this(context, null);
}
public RateBar(Context context, AttributeSet attrs) {
super(context, attrs);
View.inflate(context, R.layout.view_rate_bar, this);
star1 = (TextView) this.findViewById(R.id.star1);
star2 = (TextView) this.findViewById(R.id.star2);
star3 = (TextView) this.findViewById(R.id.star3);
star4 = (TextView) this.findViewById(R.id.star4);
star5 = (TextView) this.findViewById(R.id.star5);
star1.setOnClickListener(onClickListener);
star2.setOnClickListener(onClickListener);
star3.setOnClickListener(onClickListener);
star4.setOnClickListener(onClickListener);
star5.setOnClickListener(onClickListener);
dot = this.findViewById(R.id.selector);
}
public RateBar(Context context, AttributeSet attrs, int defStyleAttr) {
this(context, attrs);
}
private OnClickListener onClickListener = new OnClickListener() {
#Override public void onClick(View v) {
if(isAnimating) return;
switch (v.getId()) {
case R.id.star1:
animateToPosition(0);
break;
case R.id.star2:
animateToPosition(1);
break;
case R.id.star3:
animateToPosition(2);
break;
case R.id.star4:
animateToPosition(3);
break;
case R.id.star5:
animateToPosition(4);
break;
}
}
};
#Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
step = (int) (getMeasuredWidth() / 5.0f);
leftMargin = (int) (step / 2.0f - radius);
topMargin = (int) (getMeasuredHeight() / 2.0f - radius);
if(!isAnimating) {
FrameLayout.LayoutParams params = (LayoutParams) dot.getLayoutParams();
params.leftMargin = leftMargin + currentPosition * step;
params.topMargin = topMargin;
dot.setLayoutParams(params);
}
}
private void animateToPosition(final int position) {
final int from = currentPosition*step + leftMargin;
final int to = position*step + leftMargin;
ValueAnimator animation = ValueAnimator.ofInt(from, to);
animation.setDuration(250);
animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override public void onAnimationUpdate(ValueAnimator animation) {
FrameLayout.LayoutParams params = (LayoutParams) dot.getLayoutParams();
params.leftMargin = (int) animation.getAnimatedValue();
params.topMargin = topMargin;
dot.setLayoutParams(params);
}
});
animation.addListener(new AnimatorListenerAdapter() {
#Override public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
isAnimating = true;
FrameLayout.LayoutParams params = (LayoutParams) dot.getLayoutParams();
params.topMargin = topMargin;
params.leftMargin = currentPosition * step + leftMargin;
dot.setLayoutParams(params);
}
#Override public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
isAnimating = false;
currentPosition = position;
FrameLayout.LayoutParams params = (LayoutParams) dot.getLayoutParams();
params.leftMargin = currentPosition * step + leftMargin;
params.topMargin = topMargin;
dot.setLayoutParams(params);
}
});
animation.start();
}
private void updateDotPosition() {
}
}
view_rate_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content">
<View
android:id="#+id/selector"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="#drawable/oval"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="1"
android:id="#+id/star1"
android:layout_weight="1"
android:gravity="center"
android:padding="12dp"
android:background="#2200ff00"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="2"
android:id="#+id/star2"
android:layout_weight="1"
android:gravity="center"
android:padding="12dp"
android:background="#22ff0000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="3"
android:id="#+id/star3"
android:layout_weight="1"
android:gravity="center"
android:padding="12dp"
android:background="#2200ff00"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="4"
android:id="#+id/star4"
android:layout_weight="1"
android:gravity="center"
android:padding="12dp"
android:background="#22ff0000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="5"
android:id="#+id/star5"
android:layout_weight="1"
android:gravity="center"
android:padding="12dp"
android:background="#2200ff00" />
</LinearLayout>
</merge>

even i was facing the same issue, it appears that new version of android studio comes up with two files content_main.xml and activity_mail.xml , when we select Activity_main.xml>Design view everything appears 'Custom View' , instead when we highlight content_main.xml>Design, everything is bac to normal. I dont know why it happens but that;s how i fix mine ( android nooob here )
More can be found here : https://teamtreehouse.com/community/i-cant-drag-widgets-onto-the-phone-mockup-component-tree-shows-customview-instead-of-the-relative-view-help

Custom designed view disappeared while using ScrollView

I am using one custom designed CalendarView in Android. While I am using Scrollview in the layout, the custom designed CalendarView is not getting displayed in the screen.
what could cause the CalendarView to disappear?
My layout is:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/NextMonth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/NextMonth" />
<Button
android:id="#+id/PreviousMonth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#string/PreviousMonth" />
<TextView
android:id="#+id/MonthText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Month" />
<TextView
android:id="#+id/SundayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/PreviousMonth"
android:layout_marginLeft="25dp"
android:text="#string/SundayText"
android:textSize="10sp" />
<TextView
android:id="#+id/MondayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/PreviousMonth"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/SundayText"
android:text="#string/MondayText"
android:textSize="10sp" />
<TextView
android:id="#+id/TuesdayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/PreviousMonth"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/MondayText"
android:text="#string/Tuesday"
android:textSize="10sp" />
<TextView
android:id="#+id/WednesdayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/PreviousMonth"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/TuesdayText"
android:text="#string/Wednesday"
android:textSize="10sp" />
<TextView
android:id="#+id/Thursday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/PreviousMonth"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/WednesdayText"
android:text="#string/ThurdayText"
android:textSize="10sp" />
<TextView
android:id="#+id/Friday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/PreviousMonth"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/Thursday"
android:text="#string/FridayText"
android:textSize="10sp" />
<TextView
android:id="#+id/Saturday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/PreviousMonth"
android:layout_marginLeft="27dp"
android:layout_toRightOf="#+id/Friday"
android:text="#string/SaturdayText"
android:textSize="10sp" />
<com.example.calendar_module.CalendarView
android:id="#+id/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/NextMonth" />
</RelativeLayout>
</ScrollView>
My CalenderView Class file :
package com.example.calendar_module;
import java.util.Calendar;
import android.app.ActionBar.LayoutParams;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.MonthDisplayHelper;
import android.view.MotionEvent;
import android.widget.ImageView;
public class CalendarView extends ImageView {
private static int WEEK_TOP_MARGIN = 0;
private static int WEEK_LEFT_MARGIN = 05;
private static int CELL_WIDTH = 20;
private static int CELL_HEIGH = 20;
private static int CELL_MARGIN_TOP = 05;
private static int CELL_MARGIN_LEFT = 29;
private static float CELL_TEXT_SIZE;
private static final String TAG = "CalendarView";
private String[] mDayString = {"Sun","Mon","Tue","Wed","Thu","Fri","Sat"};
private Calendar mRightNow = null;
private Drawable mWeekTitle = null;
private Cell mToday = null;
private Cell[][] mCells = new Cell[6][7];
private Cell[] mDayCells = new Cell[7];
private OnCellTouchListener mOnCellTouchListener = null;
MonthDisplayHelper mHelper;
Drawable mDecoration = null;
public interface OnCellTouchListener {
public void onTouch(Cell cell);
}
public CalendarView(Context context) {
this(context, null);
}
public CalendarView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CalendarView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mDecoration = context.getResources().getDrawable(R.drawable.typeb_calendar_today);
initCalendarView();
}
private void initCalendarView() {
mRightNow = Calendar.getInstance();
// prepare static vars
Resources res = getResources();
WEEK_TOP_MARGIN = (int) res.getDimension(R.dimen.week_top_margin);
WEEK_LEFT_MARGIN = (int) res.getDimension(R.dimen.week_left_margin);
CELL_WIDTH = (int) res.getDimension(R.dimen.cell_width);
CELL_HEIGH = (int) res.getDimension(R.dimen.cell_heigh);
CELL_MARGIN_TOP = (int) res.getDimension(R.dimen.cell_margin_top);
CELL_MARGIN_LEFT = (int) res.getDimension(R.dimen.cell_margin_left);
CELL_TEXT_SIZE = res.getDimension(R.dimen.cell_text_size);
// set background
// setImageResource(R.drawable.background);
mWeekTitle = res.getDrawable(R.drawable.calendar_week);
mHelper = new MonthDisplayHelper(mRightNow.get(Calendar.YEAR), mRightNow.get(Calendar.MONTH));
}
private void initCells() {
class _calendar {
public int day;
public boolean thisMonth;
public _calendar(int d, boolean b) {
day = d;
thisMonth = b;
}
public _calendar(int d) {
this(d, false);
}
};
_calendar tmp[][] = new _calendar[6][7];
for(int i=0; i<tmp.length; i++) {
int n[] = mHelper.getDigitsForRow(i);
for(int d=0; d<n.length; d++) {
if(mHelper.isWithinCurrentMonth(i,d))
tmp[i][d] = new _calendar(n[d], true);
else
tmp[i][d] = new _calendar(n[d]);
}
}
Calendar today = Calendar.getInstance();
int thisDay = 0;
mToday = null;
if(mHelper.getYear()==today.get(Calendar.YEAR) && mHelper.getMonth()==today.get(Calendar.MONTH)) {
thisDay = today.get(Calendar.DAY_OF_MONTH);
}
// // build cells
Rect Bound = new Rect(CELL_MARGIN_LEFT, CELL_MARGIN_TOP, CELL_WIDTH+CELL_MARGIN_LEFT, CELL_HEIGH+CELL_MARGIN_TOP);
// for( int i=0 ; i < 7 ; i++ )
// {
//
// mDayCells[i] = new Cell(mDayString[i],new Rect(Bound),CELL_TEXT_SIZE);
// Bound.offset(CELL_WIDTH, 0);
//
// }
//
// Bound.offset(0, CELL_HEIGH); // move to next row and first column
// Bound.left = CELL_MARGIN_LEFT;
// Bound.right = CELL_MARGIN_LEFT+CELL_WIDTH;
//
for(int week=0; week<mCells.length; week++) {
for(int day=0; day<mCells[week].length; day++)
{
if(tmp[week][day].thisMonth) {
if(day==0 || day==6 )
mCells[week][day] = new RedCell(tmp[week][day].day, new Rect(Bound), CELL_TEXT_SIZE);
else
mCells[week][day] = new Cell(tmp[week][day].day, new Rect(Bound), CELL_TEXT_SIZE);
} else {
mCells[week][day] = new GrayCell(tmp[week][day].day, new Rect(Bound), CELL_TEXT_SIZE);
}
Bound.offset(CELL_WIDTH, 0); // move to next column
// get today
if(tmp[week][day].day==thisDay && tmp[week][day].thisMonth) {
mToday = mCells[week][day];
mDecoration.setBounds(mToday.getBound());
}
}
Bound.offset(0, CELL_HEIGH); // move to next row and first column
Bound.left = CELL_MARGIN_LEFT;
Bound.right = CELL_MARGIN_LEFT+CELL_WIDTH;
}
}
#Override
public void onLayout(boolean changed, int left, int top, int right, int bottom) {
// Rect re = getDrawable().getBounds();
// WEEK_LEFT_MARGIN = CELL_MARGIN_LEFT = (right-left - re.width()) / 2;
// mWeekTitle.setBounds(WEEK_LEFT_MARGIN, WEEK_TOP_MARGIN, WEEK_LEFT_MARGIN+mWeekTitle.getMinimumWidth(), WEEK_TOP_MARGIN+mWeekTitle.getMinimumHeight());
initCells();
super.onLayout(changed, left, top, right, bottom);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(CELL_WIDTH, CELL_HEIGH);
}
public void setTimeInMillis(long milliseconds) {
mRightNow.setTimeInMillis(milliseconds);
initCells();
this.invalidate();
}
public int getYear() {
return mHelper.getYear();
}
public int getMonth() {
return mHelper.getMonth();
}
public void nextMonth() {
mHelper.nextMonth();
initCells();
invalidate();
}
public void previousMonth() {
mHelper.previousMonth();
initCells();
invalidate();
}
public boolean firstDay(int day) {
return day==1;
}
public boolean lastDay(int day) {
return mHelper.getNumberOfDaysInMonth()==day;
}
public void goToday() {
Calendar cal = Calendar.getInstance();
mHelper = new MonthDisplayHelper(cal.get(Calendar.YEAR), cal.get(Calendar.MONTH));
initCells();
invalidate();
}
public Calendar getDate() {
return mRightNow;
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if(mOnCellTouchListener!=null){
for(Cell[] week : mCells) {
for(Cell day : week) {
if(day.hitTest((int)event.getX(), (int)event.getY())) {
mOnCellTouchListener.onTouch(day);
}
}
}
}
return super.onTouchEvent(event);
}
public void setOnCellTouchListener(OnCellTouchListener p) {
mOnCellTouchListener = p;
}
#Override
protected void onDraw(Canvas canvas) {
// draw background
super.onDraw(canvas);
mWeekTitle.draw(canvas);
// draw cells
for(Cell[] week : mCells) {
for(Cell day : week) {
day.draw(canvas);
}
}
// draw today
if(mDecoration!=null && mToday!=null) {
mDecoration.draw(canvas);
}
}
public class GrayCell extends Cell {
public GrayCell(int dayOfMon, Rect rect, float s) {
super(dayOfMon, rect, s);
mPaint.setColor(Color.LTGRAY);
}
}
private class RedCell extends Cell {
public RedCell(int dayOfMon, Rect rect, float s) {
super(dayOfMon, rect, s);
mPaint.setColor(0xdddd0000);
}
}
}

I think, height of your custom view equals == 0. try to log it. If it is right just override onMeasure and set size for your view.
And esle : why in xml height == match_parent? Can you imagine how it looks in ScrollView?)
UPD: Ok, in your case height == 0. You must override onMeasure() method in your custom view like this :
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(WIDTH, HEIGHT);
}
Where width and height values in pixels.
Good luck!