I would know if there is the possibility to create a new Android Activity with a different layout comparing to linear layout, table layout, relative layout ect...
My goal is to create an activity where the android load some object (for example notes) and place this notes into the activity in order to give the illusion at the final user to have a lot of post-it on the screen of the tablet.
The result that i would to achieve is very similar to the layout of computer, where you have a lot of icons and you can insert, remove and move this icon that represent my notes.
I thougth to use a grid like this http://developer.android.com/guide/tutorials/views/hello-gridview.html, but with this kind of layout can i move where i want my icons??
Something like this:
public class MyActivity extends Activity {
private RelativeLayout _mainLayout;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
_mainLayout = (RelativeLayout) findViewById(R.id.canvas);
addChild(50, 50, 150, 150, Color.RED);
addChild(150, 250, 50, 50, Color.GREEN);
addChild(200, 200, 100, 100, Color.BLUE);
}
public void addChild(int centerX, int centerY, int width, int height, int color) {
int X = centerX - width / 2;
int Y = centerY - height / 2;
RelativeLayout child = new RelativeLayout(this);
child.setBackgroundColor(color);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(width, height);
layoutParams.leftMargin = X;
layoutParams.topMargin = Y;
layoutParams.bottomMargin = -250;
layoutParams.rightMargin = -250;
child.setLayoutParams(layoutParams);
_mainLayout.addView(child);
}
}
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/canvas"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg0large"
>
</RelativeLayout>
You would need to draw your views manually to the screen, probably using something like a Canvas. This will allow you to draw yours views where you like.
Related
I have the following structure within a view hierarchy
ScrollView
LinearLayout (horizontal)
- RelativeLayout (X)
-LinearLayout
-CustomView
- RelativeLayout
- RelativeLayout
- RelativeLayout
- RelativeLayout
- RelativeLayout
Here is a sample of it in the xml
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:id="#+id/linLayoutWrapper"
android:layout_width="match_parent"
android:layout_height="1080dp"
android:background="#color/white">
<!--- note this include is a <RelativeLayout> -->
<include
android:id="#+id/dg_axis"
layout="#layout/day_grid_axis"></include>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/grayBorder"></View>
<--- start of repetitive substructure which his higlighted in screen shot -->
<RelativeLayout
android:id="#+id/sundayColumn"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="1080dp">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
</LinearLayout>
<com.mynursesstation.views.DayView
android:id="#+id/sundayDayView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/grayBorder"></View>
<!--- repeat above sub structure 6 more times --->
</LinearLayout>
</ScrollView>
where the inner structure (X) is repeated for all other RelativeLayout siblings. The Linear Layout, RelativeLayouts
NOTE: (X) is shown highlighted in its unusual behavior in Red, where as its parent is the entire screen width and is delimited with the grey vertical line above it.
The RelativeLayouts would all be flush to the top of the Linear Layout if all of them were the same size (That is my experimental opinion which has yet to be proved). If one is bigger than the rest, then they by default align to the bottom. My question is, how can These children of the RelativeLayout's exceed their parent when they are defined by the parent? Could it be that I am programmatically creating views whose intrinsic heights exceed the height of their parents? What is android's official handling of this case? Does the view overflow like an HTML DOM element?
UPDATE:
On inspecting each RelativeLayout, my hypothesis that one of them exceeded 3240pixels was wrong. None of them do. Only there seems to be a top margin applied to some (Which would theoretically increase the height of its parent, being wrap_content) but it does not.
The definition of the RelativeLayout called CustomView, is a RelativeLayout within which are programmatically positioned relativelayouts. They are positioned within their parent as follows:
int pixels = (int) (height * scale + 0.5f);
pixels = (pixels + 4) / 5 * 5;
relativeLayout.setLayoutParams(new RelativeLayout.LayoutParams(
columnWidth / maxConflicts,
pixels));
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) relativeLayout.getLayoutParams();
params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
params.addRule(RelativeLayout.ALIGN_PARENT_START);
start = cal2.get(Calendar.HOUR_OF_DAY);
height = start > 0 ? start * 44.000000000f + (start - 1) : start * 44.00000000f;
height += cal2.get(Calendar.MINUTE) / 60.00000000000f;
pixels = (int) (height * scale + 0.5f);
if (offsetAmount != null){
params.setMargins( (columnWidth / maxConflicts) * offsetAmount, pixels, 0, 0);
} else {
params.setMargins(0, pixels, 0, 0);
}
relativeLayout.setLayoutParams(params);
However there is never a case where the top margin of the relativeLayout above plus the height of the of the relativeLayout exceeds 1080dp. I verify this dynamically by logging the height of the CustomView DayView with the following code:
columnHeight = MeasureSpec.getSize(heightMeasureSpec);
which always logs out as 3240 pixels which at a scale of 3 is exactly 1080dp.
So this eliminates the possibility that one of the DayView exceeds 1080 and that is why not all the children of the top level LinearLayout are not flush to its top. However, I still cannot comprehend what could be causing this behavior. All elements programmatically added to the DayView are alignTop to their parent and are positioned with a vertically margin which, with the height of the view being programmatically added` never exceeds 1080dp.
Notice that the red views have a mysterious mTop added even though their dynamic height is 1080dp. mTop + 1080dp > 1080dp yet there parent is 1080dp (it is wrap_content) !
Take a good look at the view which is flush. It also has the same height but has a zero mTop. I don't understand why this is or how can be possible.
enter image description here
UPDATE Saturday:
Good News! i have narrowed down the problem to a subview of a subview, which when omitted, does not cause this strange inconsistency in my layout logic / intention. The culprit is a <TextView> which is programmatically added to the two types of events which are programmatically added <RelativeLayout>s added to DayView. when both types of views have textviews added as subviews it breaks the view hierarchy. When only one is present, the views present as intended. Here is the code for programmatically laying out the calendar events the entirety of which consist of all the subviews of a DayView:
private void createEventLayout(CalendarEvent e, Integer offsetAmount, int maxConflicts) {
final float scale = getContext().getResources().getDisplayMetrics().density;
int idForMyView = e.assignmentId > 0 ? e.assignmentId : -e.conflictId;
RelativeLayout relativeLayout = new RelativeLayout(getContext());
relativeLayout.setId(idForMyView);
Calendar cal2 = Calendar.getInstance();
cal2.setTimeZone(TimeZone.getTimeZone("UTC"));
cal2.setTime(e.startDate);
Calendar cal3 = Calendar.getInstance();
cal3.setTimeZone(TimeZone.getTimeZone("UTC"));
cal3.setTime(e.endDate);
float start = cal2.get(Calendar.HOUR_OF_DAY);
start += cal2.get(Calendar.MINUTE) / 60.0000000f;
float end = cal3.get(Calendar.HOUR_OF_DAY);
end += cal3.get(Calendar.MINUTE) / 60.00000000f;
float height = (end - start) * 45.0000000f;
int pixels = (int) (height * scale + 0.5f);
pixels = (pixels + 4) / 5 * 5;
relativeLayout.setLayoutParams(new RelativeLayout.LayoutParams(
columnWidth / maxConflicts,
pixels));
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) relativeLayout.getLayoutParams();
params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
params.addRule(RelativeLayout.ALIGN_PARENT_START);
start = cal2.get(Calendar.HOUR_OF_DAY);
height = start > 0 ? start * 44.000000000f + (start - 1) : start * 44.00000000f;
height += cal2.get(Calendar.MINUTE) / 60.00000000000f;
pixels = (int) (height * scale + 0.5f);
if (offsetAmount != null){
params.setMargins( (columnWidth / maxConflicts) * offsetAmount, pixels, 0, 0);
} else {
params.setMargins(0, pixels, 0, 0);
}
relativeLayout.setLayoutParams(params);
if (e.assignmentId > 0){
// company name
TextView tv = new TextView(getContext());
tv.setId(idForMyView);
tv.setText(e.companyName);
LayoutParams tvParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
tvParams.setMargins(0,0,0,0);
tv.setLayoutParams(tvParams);
RelativeLayout.LayoutParams companyNameParams = (RelativeLayout.LayoutParams) tv.getLayoutParams();
tv.setTextColor(Color.parseColor("#ffffff"));
tv.setTypeface(null, Typeface.BOLD);
companyNameParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
//time of assignment / conflict
TextView tvTime = new TextView(getContext());
tvTime.setTextColor(Color.parseColor("#ffffff"));
SimpleDateFormat sdf = new SimpleDateFormat("h:mm a");
sdf.setTimeZone(TimeZone.getTimeZone("UTC"));
String startTime = sdf.format(e.startDate);
String endTime = sdf.format(e.endDate);
tvTime.setText(startTime + " - " + endTime);
tvTime.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
RelativeLayout.LayoutParams timeParams = (RelativeLayout.LayoutParams) tvTime.getLayoutParams();
timeParams.addRule(RelativeLayout.BELOW, idForMyView);
relativeLayout.addView(tv); // ALSO this will break if present with the other kind
relativeLayout.addView(tvTime); // this too
relativeLayout.setBackground(ContextCompat.getDrawable(getContext(), R.drawable.gradient_background_home));
relativeLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
final int assignmentId = view.getId();
if (assignmentId > 0) {
Intent intent = new Intent(getContext(), AssignmentDetailActivity.class);
intent.putExtra(getContext().getString(R.string.extra_assignment_id), assignmentId);
getContext().startActivity(intent);
}
}
});
} else {
final CalendarEvent event = e;
relativeLayout.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.conflict));
if (isConflictMode && e.isAllDay == 1){
TextView tv = new TextView(getContext());
tv.setId(idForMyView);
tv.setText(ALL_DAY_TEXT);
LayoutParams tvParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
tvParams.setMargins(0,0,0,0);
tv.setLayoutParams(tvParams);
RelativeLayout.LayoutParams companyNameParams = (RelativeLayout.LayoutParams) tv.getLayoutParams();
tv.setTextColor(Color.parseColor("#ffffff"));
tv.setTypeface(null, Typeface.BOLD);
companyNameParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
tv.setTextSize(TypedValue.COMPLEX_UNIT_PX,
getResources().getDimension(R.dimen.calendar_small_font));
relativeLayout.addView(tv); //THIS will break the layout logic
}
}
this.addView(relativeLayout);
return;
}
I tried making sure the <TextView> is clipped by its parent by setting
tv.setGravity(Gravity.CLIP_HORIZONTAL | Gravity.CLIP_VERTICAL)
when I inspect it in the view it appears that it is clipping exactly to the bounds of the tv, yet, something seems to be exceeding the height of its parent based on the fact that when the <TextViews> are gone everything addes up, but when they are present, there seems to be too much vertical content.
So my problem was that i was assigning the same id to the <RelativeLayout> which was the particular CalendarEvent as well as to the children of this view, the <TextViews>. This created circular logic which referred to the parent and child which caused the views to not properly by aligned, I think specifically with the BELOW requirement of one of the textViews, being essentially made to be below itself. By creating a unique id with View.generateId() each time I created a <TextView> then the intended layout was made possible.
I have an image, I want to put a TextView on a certain point(on the brown rectangle) in different devices with different screen sizes. My image is below:
CAUTION:the scaleType of the ImageView is CenterCrop
in image below I show where I want to put the TextView:
And this is my 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="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/startpage"<!-- my background-->
android:scaleType="centerCrop"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#fff"/>
</RelativeLayout>
There's tons of options how to do that, but seeing your pics I'd simply make my TextView aligned to top-left corner and set its layout margin to right values in dp (which I'd simply figure out in any graphics program).
There are several ways. I am quite new so someone with more knowledge would most likely have a better answer. But, you can try to align with Relative Layout. Or you can use a layout gravity to change it so that it "gravitates" towards where you want it to be.
I suggest you to start with also draw 9-patch which is a tool that helps u to select where do u want the content to fit inside the picture.
The Draw 9-patch tool is a WYSIWYG editor that allows you to create
bitmap images that automatically resize to accommodate the contents of
the view and the size of the screen.
After that you will need to check alignment and such stuff. like top left, padding-top... etc
At last, I found it myself, see these java codes:
I find the display width and height, then calculate the scale, the according to the scale I scale the margins.
#Bind(R.id.name_tv)TextView nameTV;
public final static float bgWidth = 768;
public final static float bgHeight = 1136;
public float tVsRightMargin = 123;
public float nameTVtopMargin = 314;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ResourceManager.setActivity(this);
setContentView(R.layout.main);
ButterKnife.bind(this);
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int displayWidth = displayMetrics.widthPixels;
int displayHeight = displayMetrics.heightPixels;
Log.v("MainActivity","displayWidth: "+displayWidth);
Log.v("MainActivity", "displayHeight: " + displayHeight);
float scale = Math.max(displayWidth/bgWidth, displayHeight/bgHeight);
Log.v("MainActivity", "scale: "+scale);
float bgScaledWidth = scale*bgWidth;
float bgScaledHeight = scale*bgHeight;
tVsRightMargin *= scale;
nameTVtopMargin *= scale;
if(bgScaledWidth>displayWidth) {
tVsRightMargin -= ((bgScaledWidth - displayWidth) / 2f);
}
if(bgScaledHeight>displayHeight){
nameTVtopMargin -= ((bgScaledHeight-displayHeight)/2f);
}
nameTV.setText("محمد");
nameTV.setTypeface(ResourceManager.getTypeface());
Log.v("MainActivity", "top margin: " + nameTVtopMargin);
Log.v("MainActivity", "right margin: " + tVsRightMargin);
((RelativeLayout.LayoutParams) nameTV.getLayoutParams()).setMargins(0, (int) nameTVtopMargin, (int) tVsRightMargin, 0);
}
I want to place a ImageView at top left corner when runtime, but it does not work.
This is my layout and code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent"
android:id="#+id/layout_main"
android:layout_height="fill_parent" tools:context=".Main">
</RelativeLayout>
This is code:
RelativeLayout layout = (RelativeLayout)findViewById(R.id.layout_main);
ImageView imageView =new ImageView(getApplicationContext());
imageView.setImageResource(R.drawable.green_apple);
imageView.setScaleX(0.3f);
imageView.setScaleY(0.3f);
imageView.setLeft(0);
imageView.setTop(0);
layout.addView(imageView);
I also tried:
RelativeLayout layout = (RelativeLayout)findViewById(R.id.layout_main);
ImageView imageView =new ImageView(getApplicationContext());
imageView.setImageResource(R.drawable.green_apple);
imageView.setScaleX(0.3f);
imageView.setScaleY(0.3f);
imageView.setX(0);
imageView.setY(0);
layout.addView(imageView);
And:
RelativeLayout layout = (RelativeLayout)findViewById(R.id.layout_main);
ImageView imageView =new ImageView(getApplicationContext());
imageView.setImageResource(R.drawable.green_apple);
imageView.setScaleX(0.3f);
imageView.setScaleY(0.3f);
layout.addView(imageView);
set = new AnimatorSet();
ObjectAnimator aniX = ObjectAnimator.ofFloat(imageView, "x", 0);
aniX.setDuration(100);
ObjectAnimator aniY = ObjectAnimator.ofFloat(imageView, "y", 0);
aniY.setDuration(100);
set.playTogether(aniX, aniY);
set.start()
But same result, this is my result:
Always have large space to Top and Left screen, Although I set 0,0. I also try set height and width of screen, it fly out of screen. I don't know why.
Thank you very much for anyone can explain and how to help me fix it
That is because you use setScaleX and setScaleY, so try the code below:
final ImageView iv = new ImageView(context);
iv.setImageResource(R.drawable.green_apple);
rl.addView(iv);
iv.getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener() {
#Override
public boolean onPreDraw() {
iv.getViewTreeObserver().removeOnPreDrawListener(this);
int w = (int) (iv.getWidth() * 0.3);
int h = (int) (iv.getHeight() * 0.3);
RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(w, h);
iv.setLayoutParams(rlp);
return true;
}
});
I have to develop a UI like below:
I want to show this type of image and show hotspot on that image. The position of hotspot will be dynamic, as per x,y and radius provided the circle will be drawn on the original picture. The user can click on the hotspots and onclick action will be defined on the specific hotspot on which the user will click.
What is best process to develop this type of UI?
Make your main layout a RelativeLayout and then you can add programmatically a ImageView with an onClickListener to your layout with the following code:
private void addImageView(RelativeLayout mainLayout, int x, int y, int width, int height, OnClickListener onClickListener){
ImageView imageView = new ImageView(this);
imageView.setAdjustViewBounds(false);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.height = height;
params.width = width;
imageView.setLayoutParams(params);
imageView.setScaleType(ImageView.ScaleType.FIT_XY); //remove this if you want to keep aspect ratio
imageView.setImageDrawable(getResources().getDrawable(R.drawable.ic_launcher)); //here goes your drawable
params.leftMargin = x - width/2;
params.topMargin = y - height/2;
imageView.setOnClickListener(onClickListener);
mainLayout.addView(imageView);
}
to use it you call:
RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.relativeLayout); //this is your main layout
addImageButton(mainLayout, 200, 300, 200, 200, new OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "clicked", Toast.LENGTH_SHORT).show();
}
});
You can also use a ImageButton to achive the same porpose, although the image size will be affected by button border:
private void addImageButton(RelativeLayout mainLayout, int x, int y, int width, int height, OnClickListener onClickListener){
ImageButton imageButton = new ImageButton(this);
imageButton.setAdjustViewBounds(true);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.height = height;
params.width = width;
imageButton.setLayoutParams(params);
imageButton.setScaleType(ImageView.ScaleType.FIT_XY);
imageButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_launcher));
params.leftMargin = x - width/2;
params.topMargin = y - height/2;
imageButton.setOnClickListener(onClickListener);
mainLayout.addView(imageButton);
}
Try it.
I've made a very simple customView, a gray rectangle with an arbitrary amount of red markings inside the rectangle marked by percentages.
public class DemoView extends View {
private ShapeDrawable mDrawable;
private ArrayList<ShapeDrawable> mMarks;
public DemoView(Context context, int[] marks) {
super(context);
int x = 0;
int y = 0;
int width = 100;
int height = 10;
// Timeline Initially empty
mDrawable = new ShapeDrawable(new RectShape());
mDrawable.getPaint().setColor(Color.GRAY);
mDrawable.setBounds(x, y, x + width, y + height);
// Add marks
if (marks != null && marks.length % 2 == 0) {
mMarks = new ArrayList<ShapeDrawable>(marks.length / 2);
ShapeDrawable mark;
for (int i = 1; i < marks.length; i = i + 2) {
mark = new ShapeDrawable(new RectShape());
mark.getPaint().setColor(Color.RED);
mark.setBounds(x + marks[i - 1], y, x + marks[i], y + height);
mMarks.add(mark);
}
}
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mDrawable.draw(canvas);
if (mMarks != null)
for (ShapeDrawable mark : mMarks)
mark.draw(canvas);
}
}
However I can't figure out how to make use of the view. Each time I try to add more than one of the view in a linearlayout or relativelayout, I only see one of the views.
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/llayout"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
/>
</LinearLayout>
Layout code:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout ll = (LinearLayout) findViewById(R.id.llayout);
demoview = new DemoView(this, new int[]{10,15,35,60});
demoview.setId(ID_NUM++);
ll.addView(demoview);
demoview2 = new DemoView(this, new int[]{0,1,3,6});
demoview2.setId(ID_NUM++);
ll.addView(demoview2);
demoview3 = new DemoView(this, new int[]{25,60});
demoview3.setId(ID_NUM++);
ll.addView(demoview3);
demoview4 = new DemoView(this, new int[]{15,60});
demoview4.setId(ID_NUM++);
ll.addView(demoview4);
}
Results in:
Is this the wrong route to take? Am I missing some obvious key to using this view multiple times? If this is not the correct route is there some other method to making a custom shape? Perhaps extending rectShape?
Following Mibollma's advice, I watched the video above, a video from Google I/O 2009 about speeding up your UI.
The information is most definitely still applicable two years later. Not only was I able to speed up all of my ListViews through the use of ViewHolder, I was able to find the answer to my question.
When creating a custom view, two methods must be overriden, the first is listed above: onDraw.
The missing method? onMeasure(). More information can be found here.