Android - Implement Views programmatically - android

I want to implement an imageview and a textview side by side. I achieved this by using XML. However i wanted to achieve this programmatically but had no luck so far. My XML and Java code are below. Please help me to execute programmatically.
I'm executing the Java code in a fragment.
XML CODE:
<RelativeLayout
android:id="#+id/rl1"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<com.loopj.android.image.SmartImageView
android:id="#+id/my_image1"
android:layout_width="160dip"
android:layout_height="100dip"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/my_image1"
android:layout_alignTop="#+id/my_image1"
android:layout_toRightOf="#+id/my_image1"
android:gravity="center_vertical"
/>
</RelativeLayout>
JAVA CODE:
RelativeLayout rl1 = new RelativeLayout(getActivity());
RelativeLayout.LayoutParams rlParams;
rlParams = new RelativeLayout.LayoutParams(
newLayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
rlParams.addRule(LinearLayout.VERTICAL);
rl1.setLayoutParams(rlParams);
SmartImageView siv1 = new SmartImageView(getActivity());
siv1.setId(rand.nextInt(50000) + 1);
siv1.setLayoutParams(new LayoutParams(width,height));
siv1.setAdjustViewBounds(true);
siv1.setScaleType(ScaleType.FIT_XY);
siv1.setImageUrl(Uri);
TextView tv1 = new TextView(getActivity());
RelativeLayout.LayoutParams relativeLayoutParams;
relativeLayoutParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
tv1.setLayoutParams(relativeLayoutParams);
relativeLayoutParams.setMargins(10, 0, 0, 0);
tv1.setGravity(Gravity.CENTER_VERTICAL);
tv1.setText("Sample Text");
rl1.addView(siv1);
rl1.addView(tv1);
ll.addView(rl1);
By executing the above code, i'm getting the image but the text is inside the image. But, i want to get the image on the left and the text on the right.
Thanks in advance

Add below code to your Activity:
rlParams.addRule(RelativeLayout.ALIGN_TOP, siv1);
rlParams.addRule(RelativeLayout.ALIGN_BOTTOM, siv1);
rlParams.addRule(RelativeLayout.RIGHT_OF, siv1);
tv1.setLayoutParams(rlParams);
and then do:
rl1.addView(siv1);
rl1.addView(tv1);
Hope this helps.

In your case it is better to use a horizontal LinearLayout:
LinearLayout ll = new LinearLayout(getActivity());
ll.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
ll.setLayoutParams(param);
TextView textview = new TextView(getActivity());
...
SmartImageView siv1 = new SmartImageView(getActivity());
...
ll.addView(textview);
ll.addView(siv1);

To align the views in RelativeLayout is much difficult. I will suggest you to use the TableRows or LinearLayouts. Both these give much easier way to align views side by side. Here is a source in which one TextView is aligned-left with 4 ImageViews aligned on its right. You can get idea from this
TextView taking/consuming too much space above and below the text

You can set the margin of your text like this
relativeLayoutParams.setMargins(200, 0, 0, 0);
but this is not the best practice so do one thing take linear layout set orientation to horizontal add both imageview and textview to it and then add this linearlayout to your relative layout.
Hope this helps.

Related

Android - Wrap buttons within view

I am trying to make buttons wrap in a LinearLayout in Android, but they are just continuing off to the right of the view (the word shown in the screenshot should be "HELLO", so I want the "O" to drop down to the next line).
I am adding the buttons programmatically, but even if I code them into the XML layout file, they still don't wrap. Here is the layout file with the LinearLayout container into which I am dynamically adding the buttons:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constrainedWidth="true"
tools:context=".LetterTileView">
<LinearLayout
android:id="#+id/TilesContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
android:orientation="horizontal">
</LinearLayout>
And here is the code I am using to create and add the tile buttons:
Context context = this;
LinearLayout layout = (LinearLayout) findViewById(R.id.TilesContainer);
LayoutParams params = new LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT );
params.setMargins(50, 50, 0, 0);
for (int i=0;i<wordLength;i++) {
Button tileButton = new Button(this);
tileButton.setLayoutParams(params);
tileButton.setText(wordStringtoLetters[i]);
tileButton.setId(i);
tileButton.setBackgroundResource(R.drawable.tile_button);
tileButton.setTextSize(TypedValue.COMPLEX_UNIT_SP, 36);
layout.addView(tileButton);
}
Any advice would be appreciated. Thanks!
I ended up using FlexboxLayout, which works great for this. Thanks to those who offered suggestions!
First of all, there is no need to use a ConstraintLayout you can use your LinearLayout as the parent layout.
Then for the purpose of displaying all buttons in one line, you have to set weight for the LinearLayout in XML and set weight for the views you add to it.
The xml file should look like:
<LinearLayout
android:id="#+id/TilesContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="5"
app:layout_constrainedWidth="true"
android:orientation="horizontal">
</LinearLayout>
And in code you should set weight for each view you by adding ,1.0f to LayoutParam :
Context context = this;
LinearLayout layout = (LinearLayout) findViewById(R.id.TilesContainer);
LayoutParams params = new LayoutParams( LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT,1.0f );
params.setMargins(50, 50, 0, 0);
for (int i=0;i<wordLength;i++) {
Button tileButton = new Button(this);
tileButton.setLayoutParams(params);
tileButton.setText(wordStringtoLetters[i]);
tileButton.setId(i);
tileButton.setBackgroundResource(R.drawable.tile_button);
tileButton.setTextSize(TypedValue.COMPLEX_UNIT_SP, 36);
layout.addView(tileButton);
}

Android relativelayout to right of programmaticaly

I have Relative layout :
<RelativeLayout
android:id="#+id/show_photo_details_comment_who_liked"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/show_photo_details_comment_who_liked_star"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="10dp"
android:src="#drawable/photo_rate_on" />
</RelativeLayout>
and want to add few text views into it, and I want to place them right next to ImageView...
ImageView img = (ImageView) findViewById(R.id.show_photo_details_comment_who_liked_star);
RelativeLayout rl = (RelativeLayout) findViewById(R.id.show_photo_details_comment_who_liked);
RelativeLayout.LayoutParams youParam = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
youParam.addRule(RelativeLayout.CENTER_VERTICAL,RelativeLayout.TRUE);
youParam.addRule(RelativeLayout.RIGHT_OF, img.getId() );
youParam.setMargins(10,0,0,0);
TextView tv = new TextView(getApplicationContext());
tv.setLayoutParams(youParam);
tv.setText( getString( R.string.who_liked_you ) );
tv.setTextColor( getResources().getColor(R.color.green) );
rl.addView(tv);
youParam.addRule(RelativeLayout.RIGHT_OF, tv.getId());
youParam.setMargins(0,0,0,0);
tv = new TextView(getApplicationContext());
tv.setLayoutParams(youParam);
tv.setText( "," );
tv.setTextColor( Color.BLACK );
rl.addView(tv);
But all theese views will show up in left top corner. Can anybody help me ?
You are reusing the same LayoutParams object with all views, so they end up using the same layout params. See May I reuse LayoutPrams with ViewGroup.addView?.
Also after you fix this, you should assign some id to the first TextView (via setId()) because otherwise the two TextViews have the same id -1, and RelativeLayout may choose the wrong one of them when processing this:
youParam.addRule(RelativeLayout.RIGHT_OF, tv.getId());
UPDATE
Actually do you really need to do all this programmatically? Consider adding all these views to the layout XML with android:visibility="gone" and unhiding them when needed.

How to create Hierarchical RelativeLayouts programmatically in android?

I am new in android and I have done so much googling for this issue. Actually I want to create below UI in Code of android:
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/tab_background">
<RelativeLayout
android:id="#+id/event_1"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/color_001">
<TextView
android:id="#+id/txt_event_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_margin="1dp"
android:gravity="center"
android:text="j1"
android:textStyle="bold"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
Can anybody help me, please?
I have written a quick example code based on your xml layout. I tried make it clear by using comments but if you don't understand something, I can try to explain it a little more.
// Creating the outer RelativeLayout which has id "relativeLayout2" in your xml layout.
RelativeLayout outerRelativeLayout = new RelativeLayout(context);
// ------------------------------------------------------------------
// Creating the inner RelativeLayout which has id "event_1" in your xml layout.
RelativeLayout innerRelativeLayout = new RelativeLayout(context);
// Creating the TextView which has id "txt_event_1" in your xml layout.
TextView textView = new TextView(context);
textView.setGravity(Gravity.CENTER);
textView.setText("j1");
// Defining the layout parameters of the TextView
RelativeLayout.LayoutParams textViewParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
textViewParams.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
textViewParams.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);
// Adding the TextView to the inner RelativeLayout as a child
innerRelativeLayout.addView(textView, new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
// ------------------------------------------------------------------
// Adding the inner RelativeLayout to the outer RelativeLayout as a child
outerRelativeLayout.addView(innerRelativeLayout, new RelativeLayout.LayoutParams(convertDptoPx(40), convertDptoPx(40)));
// ------------------------------------------------------------------
// Defining the layout parameters of the outer RelativeLayout
RelativeLayout.LayoutParams rootParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
rootParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
// Set the layout parameters associated with the outer RelativeLayout.
outerRelativeLayout.setLayoutParams(rootParams);
Although this code snippet doesn't include some of the xml attributes defined in your xml layout, you can find the related methods in the documentation of the view.
For instance, if you look at the TextView documentation (http://developer.android.com/reference/android/widget/TextView.html), you can see the "XML Attributes" table which shows the attribute name and related method.
use this code.
RelativeLayout layout1= new RelativeLayout(this);
LayoutParams param1= new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
RelativeLayout layout2= new RelativeLayout(this);
LayoutParams param2= new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
TextView text= new TextView(this);
text.setText("your text");
layout2.addView(text, param2);
layout1.addView(layout2, param1);
setContentView(layout1);
RelativeLayout.LayoutParams childVw = new RelativeLayout.LayoutParams(40, 40);
TextView textVw = new TextView(this);
textVw.setLayoutParams(childVw);
Then add this to your main relative layout
setContentView(R.layout.layoutfilename);
RelativeLayout layout1= (RelativeLayout)findViewById(R.id.yourlayoutid);
LayoutParams param1= new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
RelativeLayout layout2= new RelativeLayout(this);
LayoutParams param2= new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
TextView text= new TextView(this);
text.setText("your text");
layout2.addView(text, param2);
layout1.addView(layout2);

Linearlayout overlay another linearlayout

I have some problem with add linearlayout dynamically. It's add on the top of screen, overlay other linearlayout.
Here XML,code and results.
XML:
<TextView
android:id="#+id/top_km"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#888"
android:gravity="top"
android:textColor="#fff"
android:textSize="30dip"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/top_km"
android:id="#id/textLayout">
</RelativeLayout>
Code:
myLayout = (RelativeLayout) page.findViewById(R.id.textLayout);
LinearLayout linLayout = new LinearLayout(this);
linLayout.setOrientation(LinearLayout.VERTICAL);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
myLayout.addView(linLayout);
LinearLayout hozLayout = new LinearLayout(this);
hozLayout.setOrientation(LinearLayout.HORIZONTAL);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
myLayout.addView(hozLayout);
Results:
enter link description here
Thanks
Don't use a RelativeLayout as your holder. Use a LinearLayout with orientation="vertical" instead.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/top_km"
android:orientation="vertical"
android:id="#id/textLayout" />
then in code
myLayout = (LinearLayout) page.findViewById(R.id.textLayout);
followed by
// rest of your code
It's because you use RealativeLayout for proper adding use
1. RelativeLayout.LayoutParams for st LayoutParams
2. In LayoutParams use field below
Example:
RelativeLayout rl=new RelativeLayout(this);
LinearLayout ll1=new LinearLayout(this);
TextView tx1=new TextView(this);
tx1.setText("Test1");
ll1.addView(tx1);
rl.addView(ll1);
LinearLayout ll2=new LinearLayout(this);
TextView tx2=new TextView(this);
tx2.setText("Test1");
ll2.addView(tx1);
rl.addView(ll2);
RelativeLayout.LayoutParams lp2=(LayoutParams) ll2.getLayoutParams();
And then use lp2.addRule
Here some help:
Parameters
verb One of the verbs defined by RelativeLayout, such as ALIGN_WITH_PARENT_LEFT.
anchor The id of another view to use as an anchor, or a boolean value(represented as TRUE) for true or 0 for false). For verbs that don't refer to another sibling (for example, ALIGN_WITH_PARENT_BOTTOM) just use -1.
Maybe it's easier for you to add it in the XML file with android:visibility="GONE" and then in the code just show it (View.VISIBLE) or hide it (View.GONE).

Android. Align xml-layout view according view created from code

I create a button from code and places it on bottom of rootView
RelativeLayout.LayoutParams buttonParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
buttonParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
rootView.addView(getSaveButton(), buttonParams);
In xml layout I have a list that height = wrap_content. I want align list bottom with button top when button is created.
<ExpandableListView
android:id="#+id/episodes_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:layout_below="#id/show_status_buttons_layout"
android:groupIndicator="#drawable/indicator"
/>
How I can add android:layout_above="#id/button_save" layout parameter to ListView?
Thanks.
RelativeLayout.LayoutParams listParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
listParams.addRule(RelativeLayout.ABOVE, getSaveButton().getId());
episodesList.setLayoutParams(listParams);
This should work
buttonParams.addRule(RelativeLayout.ABOVE, R.id.button_save);

Categories

Resources