Which grid-like layout in Android for Remote Control interface? - android

I want to draw a TV remote interface on an Android Activity screen. But I don't succeed in getting the buttons to the right places. Because I'm using a grid internally to init the buttons (programmatically by the way) I thought using a GridLayout and placing the buttons as subviews should be the best way. (I was trying it with TableLayout before, but I couldn't find out how to init a button that has a height going over two or more TableRows.)
But the GridLayout class automatically resets all buttons when I change the size of one button, as a result my view looks pretty bad. Is there a way to set the exact places where my buttons should be using a GridLayout? Or would you recommend another type of Layout?
This is what I expect the whole thing to look like at the end (except the "Endgeräte auswählen" button):

try relative layout :
RelativeLayout Main = new RelativeLayout(this);
RelativeLayout.LayoutParams viewParamsCenter = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.FILL_PARENT);
Main.setLayoutParams(viewParamsCenter);
Button but = new Button(this);
but.setText("BTN");
but.setBackgroundResource(R.drawable.ic_launcher);
viewParamsCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
viewParamsCenter.addRule(RelativeLayout.ALIGN_PARENT_TOP);
viewParamsCenter.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
but.setLayoutParams(viewParamsCenter);
Main.addView(but);
but = new Button(this);
but.setText("BTN 2");
but.setBackgroundResource(R.drawable.ic_launcher);
viewParamsCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
viewParamsCenter.addRule(RelativeLayout.ALIGN_PARENT_TOP);
viewParamsCenter.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
but.setLayoutParams(viewParamsCenter);
Main.addView(but);
but = new Button(this);
but.setText("Center");
but.setId(998900);
but.setBackgroundResource(R.drawable.ic_launcher);
viewParamsCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
viewParamsCenter.addRule(RelativeLayout.CENTER_IN_PARENT);
but.setLayoutParams(viewParamsCenter);
Main.addView(but);
but = new Button(this);
but.setText("below");
but.setBackgroundResource(R.drawable.ic_launcher);
viewParamsCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
viewParamsCenter.addRule(RelativeLayout.BELOW, 998900);
viewParamsCenter.addRule(RelativeLayout.CENTER_IN_PARENT);
but.setLayoutParams(viewParamsCenter);
Main.addView(but);
but = new Button(this);
but.setText("Center above");
but.setBackgroundResource(R.drawable.ic_launcher);
viewParamsCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
viewParamsCenter.addRule(RelativeLayout.ABOVE, 998900);
viewParamsCenter.addRule(RelativeLayout.CENTER_IN_PARENT);
but.setLayoutParams(viewParamsCenter);
Main.addView(but);
but = new Button(this);
but.setText("Center left");
but.setBackgroundResource(R.drawable.ic_launcher);
viewParamsCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
viewParamsCenter.addRule(RelativeLayout.LEFT_OF, 998900);
viewParamsCenter.addRule(RelativeLayout.CENTER_IN_PARENT);
but.setLayoutParams(viewParamsCenter);
Main.addView(but);
but = new Button(this);
but.setText("Center right");
but.setBackgroundResource(R.drawable.ic_launcher);
viewParamsCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
viewParamsCenter.addRule(RelativeLayout.RIGHT_OF, 998900);
viewParamsCenter.addRule(RelativeLayout.CENTER_IN_PARENT);
but.setLayoutParams(viewParamsCenter);
Main.addView(but);
but = new Button(this);
but.setText("Bottom");
but.setBackgroundResource(R.drawable.ic_launcher);
viewParamsCenter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
viewParamsCenter.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
but.setLayoutParams(viewParamsCenter);
Main.addView(but);
RelativeLayout Main_SUPER = (RelativeLayout) findViewById(R.id.relativeLayout);
Main_SUPER.addView(Main);

Related

RelativeLayout addRule not working

Guys I have a cardview and I want to add 2 button on it with rule but addRule() method is not working. In the picture, figure A is occurring but I want to make figure B, I mean, I want the buttons set align_parent_right and align_parent_bottom and the second button adjacent to first one. When I run it, figure A occuring. Any suggestions?
RelativeLayout.LayoutParams rl= (RelativeLayout.LayoutParams) iView.getLayoutParams();
RelativeLayout.LayoutParams lparams = new RelativeLayout.LayoutParams(width/4,height/5);
RelativeLayout.LayoutParams lparams2 = new RelativeLayout.LayoutParams(width/4,height/5);
removeButton=new Button(mContext);
modifyButton=new Button(mContext);
lparams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
lparams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
cardView.setLayoutParams(rl);
cardView.addView(removeButton,lparams);
cardView.addView(modifyButton,lparams2);
Try this:-
RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.mainLayout);
CardView cardView = new CardView(this);
ViewGroup.LayoutParams cardParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
cardView.setLayoutParams(cardParams);
mainLayout.addView(cardView);
RelativeLayout relativeLayout = new RelativeLayout(this);
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
relativeLayout.setLayoutParams(layoutParams);
cardView.addView(relativeLayout);
LinearLayout linearLayout = new LinearLayout(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
linearLayout.setLayoutParams(params);
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
linearLayout.setGravity(Gravity.RIGHT);
relativeLayout.addView(linearLayout);
Button removeButton = new Button(this);
Button modifyButton = new Button(this);
removeButton.setText("Remove");
modifyButton.setText("Modify");
linearLayout.addView(removeButton);
linearLayout.addView(modifyButton);

Programmatically added Views not behaving

I've created many custom views and I am trying to add them to my fragment. They get added but I can't seem to get them to go where I want. There should be 2 columns and 3 rows but it ends up as 1 column with all of the custom views stacked on top of one another. Here is my code to add the views and set the layout params to the fragment layout:
RelativeLayout fm = (RelativeLayout) view.findViewById(R.id.fragmentLayout);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
CustomImages cs = new CustomImages(getActivity());
cs.setId(R.id.one);
cs.setLayoutParams(params);
params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
params.addRule(RelativeLayout.RIGHT_OF, cs.getId());
CustomImages2 cs2 = new CustomImages2(getActivity());
cs2.setId(R.id.two);
cs2.setLayoutParams(params);
RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params2.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
params2.addRule(RelativeLayout.BELOW, cs2.getId());
CustomImages3 cs3 = new CustomImages3(getActivity());
cs3.setId(R.id.three);
cs3.setLayoutParams(params);
RelativeLayout.LayoutParams params3 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params3.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
params3.addRule(RelativeLayout.RIGHT_OF, cs3.getId());
CustomImages4 cs4 = new CustomImages4(getActivity());
cs4.setId(R.id.four);
cs4.setLayoutParams(params);
RelativeLayout.LayoutParams params4 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params4.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
params4.addRule(RelativeLayout.BELOW, cs4.getId());
CustomImages5 cs5 = new CustomImages5(getActivity());
cs5.setId(R.id.five);
cs5.setLayoutParams(params);
cs3.setLayoutParams(params);
cs4.setLayoutParams(params);
cs5.setLayoutParams(params);
I believe params there should be replaced with params2, params3 and params4 respectively.
UPDATE:
Also, you should specify LAYOUT_BELOW for all views which are not on top, and do it correctly:
params2.addRule(RelativeLayout.BELOW, cs.getId()); // not cs2
params3.addRule(RelativeLayout.BELOW, cs2.getId()); // add this
params4.addRule(RelativeLayout.BELOW, cs3.getId()); // not cs4

Trying to center buttons, TextView and Image View I’m creating Dynamically

I have a program that generates a rows of 4 buttons, in a horizontal container that gets added to a vertical container.
I cannot figure out how to have it so the buttons are centered, now they are aligns to the right hand side. Code:
for(int i=0; i<cGlobals.mNames.length; i+=2) {
iSoundIdList[i]=soundPool.load(this, cGlobals.mSounds[i], 1);
iSoundIdList[i+1]=soundPool.load(this, cGlobals.mSounds[i+1], 1);
// would like these views to all be centered
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
layout.setLayoutParams(llp);
favBut[i]=new ImageView(this);
favBut[i].setImageResource(R.drawable.heartunselected);
favBut[i].setId(defStartFavId+i);
favBut[i].setOnClickListener(this);
layout.addView(favBut[i]);
Button but1=new Button(this);
but1.setText( cGlobals.mNames[i]);
but1.setWidth(120);
layout.addView(but1);
but1.setOnClickListener(this);
but1.setId(defStartButId+i);
TextView t=new TextView(this);
t.setText(" ");
layout.addView(t);
favBut[i+1]=new ImageView(this);
favBut[i+1].setImageResource(R.drawable.heartunselected);
favBut[i+1].setId(defStartFavId+i+1);
favBut[i+1].setOnClickListener(this);
layout.addView(favBut[i+1]);
t=new TextView(this);
t.setText(" ");
layout.addView(t);
Button but2=new Button(this);
but2.setText( cGlobals.mNames[i+1]);
but2.setWidth(120);
but2.setId(defStartButId+i+1);
but2.setOnClickListener(this);
layout.addView(but2);
Container.addView(layout);
}
Below snippet will help
RelativeLayout relativeLayout = new RelativeLayout(this);
relativeLayout.setLayoutParams(new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.FILL_PARENT,
RelativeLayout.LayoutParams.FILL_PARENT));
ImageView imageView = new ImageView(this);
imageView.setImageResource(getResources().getIdentifier(
"sample_image", "drawable", getPackageName()));
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
lp.addRule(RelativeLayout.CENTER_IN_PARENT);
imageView.setLayoutParams(lp);
relativeLayout.addView(imageView);

android creating a RelativeLayout programmatically

I'm having some troubles creating a relativeLayout programmatically.For better understanding I attached a picture below. The things with plus and minus are buttons, which should also be dynamically created and added to the layout. The values of tv4 and tv5 should increase/decrease accordingly to button presses.
What I have done so far:
1) creating the layout:
RelativeLayout rl = new RelativeLayout(this);
rl.setId(i);
rl.setBackgroundResource(R.drawable.bg);
RelativeLayout.LayoutParams Lparams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
Lparams.addRule(RelativeLayout.BELOW, R.id.RL_default);
Lparams.setMargins(3, 5, 3, 0);
rl.setLayoutParams(Lparams);
2) adding the tv1:
Lparams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
Lparams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
Lparams.setMargins(10, 0, 0, 0);
TextView txt = new TextView(this);
txt.setTextColor(Color.parseColor("#FFFFFF"));
txt.setId(x);
txt.setTextSize(25);
txt.setLayoutParams(Lparams);
txt.setText(name);
rl.addView(txt);
3) adding the tv2:
Lparams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
Lparams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
Lparams.addRule(RelativeLayout.BELOW, txt.getId());
Lparams.setMargins(10, 0, 0, 0);
TextView txtS = new TextView(this);
txtS.setId(y);
txtS.setText("Test: ");
txtS.setTextSize(22);
txtS.setLayoutParams(Lparams);
txtS.setGravity(Gravity.BOTTOM);
txtS.setPadding(0, 0, 0, 20);
rl.addView(txtS);
4) now I want to create the first button:
Button btnSminus = new Button(this);
btnSminus.setId(btn1);
btnSminus.setText("<");
btnSminus.setTextSize(20);
Lparams= new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
Lparams.addRule(RelativeLayout.RIGHT_OF, txtS.getId());
btnSminus.setLayoutParams(Lparams);
rl.addView(btnSminus);
The problem is, the the button View seems to just disappear from the screen when the line Lparams.addRule(RelativeLayout.RIGHT_OF, txtS.getId()); is executed. What can be the reason?
My guess would be that it's because you set the width of txtS to match_parent, so the button gets pushed off the screen. You can fix that by changing that to wrap_content.

How to overlay text on image programmatically

I have a image placed in the relative layout. How can i place a small image over the background image and two text view side by side next to the image. Any help will be really appreciated. The only thing is I want to do this programmatically. I have tried doing it the following way but for some reason the textview appears on the top left of the screen. I want it appear on the imagebutton.
LinearLayout LinearLayout = new LinearLayout(this);
RelativeLayout relativeLayout = new RelativeLayout(this);
RelativeLayout.LayoutParams relativeLayoutParams;
Button[] btn = new Button[1];
btn[0] = new Button(this);
btn[0].setId(1);
btn[0].setGravity(Gravity.CENTER);
btn[0].setText("text");
btn[0].setBackgroundResource(R.drawable.button_grey);
btn[0].setTextColor(Color.parseColor("#FFFFFF"));
relativeLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
relativeLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT | RelativeLayout.ALIGN_PARENT_TOP);
relativeLayoutParams.setMargins(20, 20, 15, 15);
relativeLayout.addView(btn[0], relativeLayoutParams);
ImageButton[] Imgbtn = new ImageButton[10];
Imgbtn[0] = new ImageButton(this);
Imgbtn[0].setId(2);
Imgbtn[0].setBackgroundResource(R.drawable.box_round_corners);
Imgbtn[0].setMaxHeight(200);
Imgbtn[0].setClickable(true);
relativeLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
relativeLayoutParams.addRule(RelativeLayout.BELOW,btn[0].getId());
relativeLayoutParams.height = 100;
relativeLayoutParams.setMargins(15, 0, 15, 10);
Imgbtn[0].setLayoutParams(relativeLayoutParams);
relativeLayout.addView(Imgbtn[0], relativeLayoutParams);
TextView[] txtview = new TextView[10];
txtview[0] = new TextView(this);
txtview[0].setId(3);
txtview[0].setTextColor(Color.parseColor("#000000"));
txtview[0].setText("text");
relativeLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
// relativeLayoutParams.addRule(RelativeLayout.ALIGN_LEFT | RelativeLayout.ALIGN_TOP);
relativeLayoutParams.addRule(RelativeLayout.BELOW,Imgbtn[0].getId());
relativeLayoutParams.height = 20;
relativeLayoutParams.setMargins(5, 5, 5, 5);
txtview[0].setLayoutParams(relativeLayoutParams);
relativeLayout.addView(txtview[0], relativeLayoutParams);
android.widget.ScrollView ScrollV = new ScrollView(this);
ScrollV.addView( relativeLayout, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
addContentView(ScrollV, new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
try to set your views LayoutParams with setLayoutParams() method;
RelativeLayout.LayoutParams lp=new RelativeLayout.LayoutParams(width,height);
lp.topMargin=//what is your desired y coordinate
lp.leftMargin=//what is your desired x coordinate
lp.gravity=Gravity.NO_GRAVITY;
view.setLayoutParams(lp);
FrameLayout is better choise for overlaying purposes in my opinion.

Categories

Resources