I have created a basic RelativeLayout in my XML file. In my code, I want to dynamically create several ImageViews and place them at different locations within the RelativeLayout. Everything I've tried (ImageView.setX(), ImageView.setTranslationX(), ImageView.setPadding()) either says I need a higher API level (11+) or causes the ImageView to not appear.
If I do not try to do anything with the location of the ImageView, then the image does appear on the screen in the (0,0) position.
This simple app will layout 15 icons in three rows dynamically using RelativeLayout. There is no reason to use AbsoluteLayout - it is also deprecated.
The main activity.
public class MainActivity extends Activity {
private int mWidth;
private int mTile;
private int mColMax = 5;
private Context mContext;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext = this;
// the screen width is need to work out the tile size
mWidth = mContext.getResources().getDisplayMetrics().widthPixels;
// how wide (and high) each icon will be to fit the screen.
mTile = (mWidth / mColMax);
setContentView(R.layout.activity_main);
// layout the icons
initUI();
}
/**
* Layout 15 icon images in three rows dynamically.
*/
private void initUI() {
// this is the layout from the XML
ViewGroup layout = (ViewGroup) findViewById(R.id.main_layout);
ImageView iv;
RelativeLayout.LayoutParams params;
int i = 0;
int row = 0;
int col = 0;
do {
params = new RelativeLayout.LayoutParams(mTile,mTile);
params.setMargins((col * mTile), (row * mTile), 0, 0);
iv = new ImageView(mContext);
iv.setAdjustViewBounds(true);
iv.setScaleType(ScaleType.FIT_CENTER);
iv.setImageResource(R.drawable.ic_launcher);
iv.setLayoutParams(params);
layout.addView(iv);
if (col == mColMax) {
row++;
col = 0;
} else {
col++;
}
} while (++i <= 16);
}
}
And the layout XML.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
RelativeLayouts are used to place items in relationship to other items. YOu don't use them to place layouts at specific positions like a setX. If you want to place the new item relative to existing items, look at RelativeLayout.LayoutParams- you can set layout_alignXXX and layout_toXXXOf type parameters through them.
If you need an exact pixel position, use the deprecated AbsoluteLayout. Just be aware its going to look ugly as heck on any device with a different aspect ratio or size screen without a ton of work.
Related
I'm trying to programmatically (not using XML files) create custom subviews in Android (that's what I call it in iOS) that is a basically a number of basic views (labels, buttons, text fields etc) put together into a reusable subview class so I can use it inside my UIViewControllers or Activity in Android.
I don't know what is the correct terminology in Android. There seems to be a million different terminologies.
Custom View, ViewGroups, Layouts, Widgets, Components, whatever you want to call it.
In iOS this is simply done like this:
CustomView.h
#interface CustomView : UIView
#property (nonatomic, strong) UILabel *message;
#property (nonatomic, strong) UIButton *button;
#end
CustomView.m
#implementation CustomView
-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(self)
{
[self initViews];
[self initConstraints];
}
return self;
}
-(void)initViews
{
self.message = [[UILabel alloc] init];
self.button = [[UIButton alloc] init];
[self addSubview:self.message];
[self addSubview:self.button];
}
-(void)initConstraints
{
id views = #{
#"message": self.message,
#"button": self.button
};
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[message]|" options:0 metrics:nil views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[button]|" options:0 metrics:nil views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[message][button]|" options:0 metrics:nil views:views]];
}
#end
Now I can reuse this custom view in any ViewController (Android Activity) I chose.
How does one achieve something like that in Android?
I've been looking around and from what I gather in Android, to add subviews, I add them to Layouts:
RelativeLayout relativeLayout = new RelativeLayout(...);
TextView textView = new TextView(...);
relativeLayout.addSubview(textView);
Does that mean I need extend RelativeLayout or ViewGroup?
Looking at this page: http://developer.android.com/reference/android/view/ViewGroup.html
It seems like we need to write some really complicated logic to layout the custom view such as:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
// These keep track of the space we are using on the left and right for
// views positioned there; we need member variables so we can also use
// these for layout later.
mLeftWidth = 0;
mRightWidth = 0;
// Measurement will ultimately be computing these values.
int maxHeight = 0;
int maxWidth = 0;
int childState = 0;
// Iterate through all children, measuring them and computing our dimensions
// from their size.
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() != GONE) {
// Measure the child.
measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, 0);
// Update our size information based on the layout params. Children
// that asked to be positioned on the left or right go in those gutters.
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (lp.position == LayoutParams.POSITION_LEFT) {
mLeftWidth += Math.max(maxWidth,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
} else if (lp.position == LayoutParams.POSITION_RIGHT) {
mRightWidth += Math.max(maxWidth,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
} else {
maxWidth = Math.max(maxWidth,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
}
maxHeight = Math.max(maxHeight,
child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);
childState = combineMeasuredStates(childState, child.getMeasuredState());
}
}
// Total width is the maximum width of all inner children plus the gutters.
maxWidth += mLeftWidth + mRightWidth;
// Check against our minimum height and width
maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight());
maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth());
// Report our final dimensions.
setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, childState),
resolveSizeAndState(maxHeight, heightMeasureSpec,
childState << MEASURED_HEIGHT_STATE_SHIFT));
}
All I'm trying to do is use multiple basic android labels, views, buttons in a custom view like the iOS example above, why is it so hard in Android ?
I was hoping for something simple like this:
public class CustomView extends View
{
public RelativeLayout mainLayout;
public TextView message;
public Button button;
// default constructor
public CustomView()
{
...
initViews();
initLayouts();
addViews();
}
public initViews()
{
mainLayout = new RelativeLayout(this);
message = new TextView(this);
button = new Button(this);
...
}
public initLayouts()
{
// --------------------------------------------------
// use Android layout params to position subviews
// within this custom view class
// --------------------------------------------------
}
public addViews()
{
mainLayout.addView(message);
mainLayout.addView(button);
setContentView(mainLayout);
}
}
I'm sorry I am sincerely trying to learn and build a basic Android application and not trying to bash Android's way of doing things.
I know how to add and layout subviews inside an Activity and have been doing so for the past two days but not inside a custom View/View Group/Layout. I don't want to end up constructing the exact same subview for each of my Activity in the Android app, that just goes against good coding practice right ? :D
Just need a bit of guidance here from others who have done both iOS and Android development.
Edit
It seems like what I'm looking for is called a Compound Control: http://developer.android.com/guide/topics/ui/custom-components.html
I'll keep digging and hopefully achieve the result I'm after :D
Just need to work out this Inflater business.
OK, I think I got it, not sure if it's the best solution but it does what I want.
So it goes something like this:
public class CustomView extends RelativeLayout
{
private Context context;
public TextView message;
public Button button;
public CustomView(Context context)
{
super(context);
// ---------------------------------------------------------
// store context as I like to create the views inside
// initViews() method rather than in the constructor
// ---------------------------------------------------------
this.context = context;
initViews();
initLayouts();
addViews();
}
public CustomView(Context context, AttributeSet attrs)
{
super(context, attrs);
// ---------------------------------------------------------
// store context as I like to create the views inside
// initViews() method rather than in the constructor
// ---------------------------------------------------------
this.context = context;
initViews();
initLayouts();
addViews();
}
public initViews()
{
// ----------------------------------------
// note "context" refers to this.context
// that we stored above.
// ----------------------------------------
message = new TextView(context);
...
button = new Button(context);
...
}
public initLayouts()
{
// --------------------------------------------------
// use Android layout params to position subviews
// within this custom view class
// --------------------------------------------------
message.setId(View.generateViewId());
button.setId(View.generateViewId());
RelativeLayout.LayoutParams messageLayoutParams = new RelativeLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT
);
message.setLayoutParams(messageLayoutParams);
RelativeLayout.LayoutParams buttonLayoutParams = new RelativeLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT
);
button.setLayoutParams(buttonLayoutParams);
}
public addViews()
{
// adding subviews to layout
addView(message);
addView(button);
}
}
Now I can use this custom view in any of my Activity:
public class MainActivity extends ActionBarActivity {
// custom view instance
protected CustomView approvalView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
initViews();
}
public initViews()
{
...
approvalView = new CustomView(this);
approvalView.message.setText("1 + 1 = 2");
approvalView.button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Log.d("Logger", "Math formula approved! :D");
}
});
}
}
Inflater is used if we create our layout using XML which isn't something I like to do, so I generated my view's layout programmatically :D
The above "RelativeLayout" in "extends RelativeLayout" can be replace with "LinearLayout" or other layouts of course.
To add a simple answer for the general visitor to this question...
You can't add subviews to an Android View like you can with an iOS UIView.
If you need to add subviews in Android, then use one of the ViewGroup subclasses (like LinearLayout, RelativeLayout, or even your own custom subclass).
myViewGroup.addView(myView);
Android and ios app development are two different concepts, each have its own way to perform your task. Sometimes its difficult to develop a piece of code in android and sometimes in ios.
To create your view screen/design/GUI in android you can create XML file (recommended) or by code (which is somehow difficult to maintain w.r.t XML).
For your question you don't need to create your own ViewGroup or RelativeLayout or LinearLayout e.g. if you want to use RelativeLayout as a parent for your view than by using XML you can use.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Text"/>
</RelativeLayout>
If you want to create your view pragmatically than use
RelativeLayout parentRelativeLayout = new RelativeLayout(context);
RelativeLayout.LayoutParams parentParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
parentRelativeLayout.setLayoutParams(parentParams);
TextView childTextView = new TextView(context);
childTextView.setText("Some Text");
mRelativeLayout.addView(childTextView);
Its just a sample code both have identical output but with programmatic approach it will be difficult as your view grows.
Looking your code you are creating custom view (why?) in android we only need custom views if default views not are providing some functionally which we need to use/implement in our code.
As far as i understand you want to use custom views for reuse. Its good approach but if android is providing some functionality than why you are trying to invent wheel again, just use different layouts, use only custom views if you want something extra.
I would like to inflate imagebuttons programmatically to a linearlayoutm, coded as follows:
Code:
public void set_keyboard_words(int row, int start, int end)
{
for (int p = start; p <= end; p++)
{
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(btn_ball_sq,btn_ball_sq);
params.setMargins(0, 0, 0, 0);
keyboard_btn = new ImageButton(this);
keyboard_btn.setId(p);
final int id_ = keyboard_btn.getId();
keyboard_btn.setImageResource(BUTTON_IMG[p-1]);
keyboard_btn.setBackgroundResource(R.drawable.btn_blue_selector);
keyboard_btn.setScaleType(ImageView.ScaleType.FIT_XY);
keyRow1.addView(keyboard_btn, params);
keyboard_btn.setOnClickListener(new View.OnClickListener()
{
public void onClick(View view)
{
button_action(id_);
}
});
}
}
Xml:
<LinearLayout
android:id="#+id/keyRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:splitMotionEvents="false" >
</LinearLayout>
Background:
The imagebuttons are some balls.
The imagebuttons could be inflated to the linearlayout keyRow1.
However, I do not know how to set the image resources to the imagebuttons correctly. The balls inflated are so small instead of fitting to XY of the buttons.
Screenshot as follows:
If image set as keyboard_btn.setImageResource(BUTTON_IMG[p-1]); (with blue backgrounds as BackgroundResource for seeing the actual size of button), the balls are very small
If image set as keyboard_btn.setBackgroundResource(BUTTON_IMG[p-1]);, the size is now proper but the actual backgroundResource cannot be set anymore
Question:
I would like to use the method of setImageResource for the imagebuttons as the button background would later be changed to other background image upon pressed.
How could I set the imagebutton's image using setImageResource but with size of balls similar to the 2nd screenshot??
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
keyboard_btn = new ImageButton(this);
keyboard_btn.setId(p);
final int id_ = keyboard_btn.getId();
keyboard_btn.setImageResource(BUTTON_IMG[p-1]);
keyboard_btn.setBackgroundResource(R.drawable.btn_blue_selector);
keyboard_btn.setLayoutParams(params);
Just try the above code, if the image doesn't shrink then you need to optimize the image based on the width you get for each button from screen width.
I am trying to create a bar chart in android where each bar consists of one Viewand one TextView.
I add these cells to a HorizontalScrollView. This works fine, all my bars appear.
Now I want to resize these bars(as they now all appear in full height) by multiplying them with a factor.
This is the activity class that i Use.
private ViewGroup linearScrollLayout;
private HorizontalScrollView hScrollView;
private ArrayList<NutrientCell> nutrientsData;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.box_plot);
this.hScrollView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView1);
this.linearScrollLayout = (ViewGroup) this.hScrollView
.findViewById(R.id.linearScrollLayout);
try {
Intent intent = getIntent();
this.nutrientsData = (ArrayList<NutrientCell>) intent
.getSerializableExtra("nutrientsData");
//
} catch (Exception e) {
// TODO: handle exception
}
this.initChart();
}
private void initChart() {
for (NutrientCell c : this.nutrientsData) {
RelativeLayout rlt = (RelativeLayout) getLayoutInflater().inflate(
R.layout.hv_boxplot_cell, this.linearScrollLayout, false);
((TextView) rlt.findViewById(R.id.textView1)).setText(c
.getNutrientName().toString());
View v = ((View) rlt.findViewById(R.id.vv1));
v.setBackgroundColor(c.getColor());
this.linearScrollLayout.addView(rlt);
}
}
Now, in the loop found in initChart() I iterate over all elements in an ArrayList, each of which has a percentage variable. This is the variable I would like to multiply the height with.
I have tried to just multiply the height of the LayoutParams of the inflated RelativeLayout found in initChart but as this is called in onCreate(), its height property is not correct.
So how can I make sure that the inflated RelativeLayout I add to my View has a height corresponding to the percentage obtained from c(c.getPercentage())
What exactly is the percentage used for? If the percentage is used to scale the view based on it's initial size, you could probably use the view's setScaleY() method to change it's height.
I am getting list of phone companies from web service and i have to set it to textview but the problem is i am not getting alignment as above image.How to achieve it.
From what I understand, you want to add text views one beside the other, but when they overflow (go out of the screen) the next text view should be placed in the next line.
Doing this is not trivial. Implementing something like this (optimally and correctly) requires understanding of how android draws views (onMeasure and onLayout). However if you do not care about efficiency that much (mainly because you are going to do it only for a small portion of the view) then here is my quick hack:
mContainer = (RelativeLayout) findViewById(R.id.container);
// first layout all the text views in a relative layout without any params set.
// this will let the system draw them independent of one another and calculate the
// width of each text view for us.
for (int i = 0; i < 10; i++) {
TextView tv = new TextView(getApplicationContext());
tv.setText("Text View " + i);
tv.setId(i+1);
tv.setPadding(10, 10, 20, 10);
mContainer.addView(tv);
}
// post a runnable on the layout which will do the layout again, but this time
// using the width of the individual text views, it will place them in correct position.
mContainer.post(new Runnable() {
#Override
public void run() {
int totalWidth = mContainer.getWidth();
// loop through each text view, and set its layout params
for (int i = 0; i < 10; i++) {
View child = mContainer.getChildAt(i);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
// this text view can fit in the same row so lets place it relative to the previous one.
if(child.getWidth() < totalWidth) {
if(i > 0) { // i == 0 is in correct position
params.addRule(RelativeLayout.RIGHT_OF, mContainer.getChildAt(i-1).getId());
params.addRule(RelativeLayout.ALIGN_BOTTOM, mContainer.getChildAt(i-1).getId());
}
}
else {
// place it in the next row.
totalWidth = mContainer.getWidth();
params.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
params.addRule(RelativeLayout.BELOW, mContainer.getChildAt(i-1).getId());
}
child.setLayoutParams(params);
totalWidth = totalWidth - child.getWidth();
}
mContainer.requestLayout();
}
});
Basically, I let the system do the layout and measurement for me in the first round(s) of drawing. Then using the widths of each text view now available, I reset the layout params based on the wrapping logic and do the layout again.
Try it with text of different size, it will auto adjust. I would say this solution is pretty hacky but it works. If you are not satisfied with it take a look at this.
use
android:textAlignment="textStart"
I want to make a GridView that contains 75dp width and 75dp height imageView. And also i want this square fill the screen size, with no space in between. Right now i am just using 500 count. So its randomly printing 500 square images. Its not filling up the space. Please check the image below for tablet version.
Here is my Adapter:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return 500;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it's not recycled, initialize some
// attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(75, 75));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(0, 0, 0, 0);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(R.drawable.sample_0);
return imageView;
}
}
In getCount you could divide the area of the screen by the area of the squares you're filling it with.
public int getCount() {
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int area = size.x * size.y;
// TODO: you may want to pass in the square dimensions or make them constants
return area / (75 * 75);
}
Of course, this isn't right, since it uses the display and not the parent ViewGroup. Instead of trying to do this all in the adapter, have the constructor for this take in the dimensions of the parent and do the math there, saving an instance variable with the count:
private int numBoxes = 0;
private static final SQUARE_SIZE = 75;
public ImageAdapter(Context c, ViewGroup parent) {
mContext = c;
numBoxes = (parent.getWidth() * parent.getHeight()) / (SQUARE_SIZE * SQUARE_SIZE);
}
public int getCount() {
return numBoxes;
}
Expanding on the answer by Nick White, you need to make sure the parent layout has been laid out before you can get the height and width. If the parent width and/or height are "wrap_content" or "match_parent", the getHeight() and getWidth() will return zero in the adapter's constructor, if the adapter is being created in the Activity onCreate().
This answer gives a way to listen for onLayout events and handle sizing. I did try to do something similar, but I found the results in my case were less than perfect, as the grid would draw then redraw after I applied the size changes. So far the best results I've had with grid sizing is to use qualified resource values to size the image views inside the grid. The resource size value is then set according to the screen density or size by creating various values in values-xxx resource folders.
In my case, I was altering the size of the cell images to make a certain number fit the screen by applying something like:
Integer size = getResources().getInteger(R.int.image_size));
imageView.setLayoutParams(new GridView.LayoutParams(size, size));
It should be possible to do something similar to calculate the number of columns for the screen size.