Custom Views, to insert them dynamically to Layout in Java - java

I can't stress that often enough, I am new to Android and Java in general :-)
And these xml layouts are giving me headaches.
The code what you see consist of two ImageViews and two TextViews inside a RelativeLayout, together they form a layout which for me works as a "custom button". When I copy and paste it inside my layout it works almost the way I want.
How can I use this part of xml-layout dynamically in my code whenever I need a button like that and still be able to change certain properties, like the text inside the textviews?
I hope you understand what I mean, my first language is not english.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:src="#drawable/box" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myImageView"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignRight="#+id/myImageView"
android:layout_alignTop="#+id/myImageView"
android:layout_margin="1dp"
android:gravity="center"
android:text="S-"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myImageViewText"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:text="your turn!"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView1"
android:layout_alignParentTop="true"
android:layout_marginBottom="15dp"
android:layout_marginTop="-10dp"
android:cropToPadding="false"
android:src="#drawable/icon" />
</RelativeLayout>

Ok to start extend your own view like this one:
I do have a Button made with an ImageView and a TextView in a LinearLayout designed in xml:
XML
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:adjustViewBounds="true"
android:padding="3dp"
android:scaleType="fitStart" />
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#android:color/white" />
</merge>
ViewObject called
ViewMenuButton
public class ViewMenuButton extends View{
private TextView tvText;
private ImageView ivImage;
public ViewMenuButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public ViewMenuButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ViewMenuButton(Context context) {
super(context);
init();
}
private void init() {
LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//here you can inflate a own XML for that View
inflater.inflate(R.layout.view_menubutton, this, true);
this.tvText= (TextView)this.findViewById(R.id.tvText);
this.ivImage = (ImageView)this.findViewById(R.id.ivImage);
}
public void setText(String text){
if(this.tvText != null){
tvText.setText(text);
}
}
//... and so on
}
Whenever you want to use it in your xml make sure to give the View the complete package like this:
Usage XML
<com.your.package.views.ViewMenuButton
android:id="#+id/menu_bt_local"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="15dp"
android:layout_weight="1"
android:background="#drawable/action_button"
android:textSize="#dimen/text_cell" >
If you want to use it in a code just make it like this:
Usage JAVA
LinearLayout rootView =
(LinearLayout) findViewById(R.id.mainLayout); //Or sth like this
ViewMenuButton vmb = new ViewMenuButton(this);
rootView.add(vmb);
//or if you already have it in XML
ViewMenuButton vmb = (ViewMenuButton) findViewById(R.id.myVmbtID);
You can even go more in detail defining your own attributes to use in XML, like setting source of the Image, changing Text, changing TextColor etc pp Tutoiral

Create your custom View subclass. Inflate your layout in it's constructor, find necessary views there and create setters/getters of necessary properties. Then each time you need this custom button you'll be able to create it through code or xml using this subclass. If you need to be able to change some properties from xml too you may want to declare styleable attributes for your custom view. I think you can find lots of tutorials about how to create custom views.
Here's the common tutorial. Here you can read about custom attributes. And finally here is the best example of what I mentioned above.

You can inflate your layout and add it to another layout
RelativeLayout layout = new RelativeLayout(this);
View childButton = getLayoutInflater().inflate(R.layout.child_button, null);
layout.addView(childButton);
Now you can find the child views in the button layout as
TextView textViewInnerChild = (TextView)childButton.findViewById(R.Id. textInnerView):
Then you can change the value or properties of the inner child views
textViewInnerChild.set text("your text")

Related

Dynamically Created Layout not Showing

I've looked at this question here, however I still cannot find out what I'm doing wrong. There are no errors in Logcat and there definitely is data being passed to it to be made. Here's my setup:
This is all taking place below manually placed elements that I have placed in Android Studio. I have a ScrollView. Inside that ScrollView, I have a LinearLayout, parentLayout, that get's passed to this class. This method is supposed to add another Horizontal LinearLayout, layout, parentLayout. Then it is supposed to add a TextView, titleDisplay, and two Buttons to layout. So far I have only programmed just layout and titleDisplay. I tested it, and nothing was added. So before I program the other two buttons, I would like to know what I am doing wrong. Here's the Java Code:
public class FollowupOption {
private String displayName;
private JSONObject jsonInformation;
private Context context;
private LinearLayout parentLayout;
private LinearLayout layout;
private TextView titleDisplay;
private Button deleteButton, editButton;
public FollowupOption(String displayName, JSONObject jsonInformation,
Context context, LinearLayout parentLayout){
this.displayName = displayName;
this.jsonInformation = jsonInformation;
this.context = context;
this.parentLayout = parentLayout;
buildLayout();
}
private void buildLayout(){
//Horizontal Linear Layout to hold everything
this.layout = new LinearLayout(context);
this.layout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
this.layout.setOrientation(LinearLayout.HORIZONTAL);
this.parentLayout.addView(this.layout);
//Text View Displaying title of followup option.
this.titleDisplay = new TextView(context);
try {
this.titleDisplay.setText(this.jsonInformation.getJSONObject("list").getString("title"));
} catch(JSONException e){ e.printStackTrace(); }
this.titleDisplay.setTextColor(0x8f142a); //Black
this.titleDisplay.setTextSize(18);
this.titleDisplay.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1f));
this.layout.addView(this.titleDisplay);
}
}
Here's my XML:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="38dp"
android:orientation="horizontal">
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.22"
android:gravity="center"
android:text="#string/followup_text"
android:textColor="#color/myRed"
android:textSize="18sp" />
<Button
android:id="#+id/followup_add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="#string/plus"
android:textAlignment="center"
android:textColor="#android:color/holo_green_dark"
android:textSize="30sp"
android:textStyle="bold" />
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="279dp"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:paddingTop="7dp">
<LinearLayout
android:id="#+id/followup_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/followup_new_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/new_followup_text" />
</LinearLayout>
</merge>
If someone could let me know what I am doing wrong or a good way to debug something like this, that would be appreciated.
Are you adding this.layout view to some view?
UPD: The problem is with your text color. Consider using the Color class to get color from its hex value or constants from that class.
Does your XML view (without the addition of the dynamic layout) take up the entire screen?
The new LinearLayout view will be added below the button. If the button is at the bottom of the screen, the layout will be added off the screen and therefore not visible.
You should add your new layout to the scroll view instead.

GridLayout adding customView as a child issue, Android

i have made a simple timetable with GridLayout and it looks like this
Now the idea is to insert required subject into specific row and column. In order to achieve that i have created a class that extends CardView in which i need to insert TextView.
code:
TimeTable.xml
<GridLayout 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"
android:columnCount="8"
android:columnOrderPreserved="true"
android:rowCount="6"
tools:context="com.digiart.schoolapp.fragments.TimetableFragment">
<android.support.v7.widget.CardView
android:id="#+id/timetable_card_space"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:layout_row="0"
app:cardElevation="2dp"
app:contentPadding="5dp">
<TextView
android:id="#+id/timetable_dummy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="time"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:visibility="invisible" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/timetable_day1_card"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
app:cardElevation="2dp"
app:contentPadding="5dp">
<TextView
android:id="#+id/timetable_day1_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday"
android:textAppearance="#style/TextAppearance.AppCompat.Body2" />
</android.support.v7.widget.CardView>
.....
........
<android.support.v7.widget.CardView
android:id="#+id/timetable_time1_card"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
app:cardElevation="2dp"
app:contentPadding="5dp">
<TextView
android:id="#+id/timetable_time1_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="09.00"
android:textAppearance="#style/TextAppearance.AppCompat.Body2" />
</android.support.v7.widget.CardView>
.....
......
</GridLayout>
TimetableSubject:
public class TimetableSubject extends CardView {
TextView subjectText;
public TimetableSubject(Context context,int column,int row,int columnSpan,String subjectName) {
super(context);
GridLayout.LayoutParams subjectParam =new GridLayout.LayoutParams();
subjectParam.columnSpec = GridLayout.spec(column,columnSpan);
subjectParam.rowSpec = GridLayout.spec(row);
subjectText = new TextView(context);
CardView.LayoutParams textParams = new CardView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
subjectText.setText(subjectName);
subjectText.setLayoutParams(textParams);
setLayoutParams(subjectParam);
}
}
Now i get what i need to do, i need to pass row and column to the custom view, and set those as layout params. the issue i think is with the Layout parameters code, i must be messing something up there. Could anyone explain how to set layout params for this situation properly? Thanks.
This is an age old ticket and I know this is marked as solved, but I'll just leave my experience here. I faced a somewhat similar issue: I was using custom views - extended RelativeLayout - inside GridLayout, I wanted to create a Grid with two columns and N rows (rows don't matter in my case). My custom views did not want to stretch horizontally, to take up the space they have. I have tried the support library, the Android X version of the library, weights, gravity - none of these worked.
It turns out that the GridLayout's parameters were set ok. My custom view was the problem. In my case there was no need to subclass a RelativeLayout, simply subclass a LinearLayout and you can still have whatever layout built inside.
Solution:
<androidx.gridlayout.widget.GridLayout
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_margin"
android:layout_marginEnd="#dimen/activity_margin"
app:columnCount="2">
<custom.MenuButtonGrid
android:id="#+id/item1"
app:abg_title="Title1"
app:layout_columnWeight="1"
app:layout_gravity="fill" />
<custom.MenuButtonGrid
android:id="#+id/item2"
app:abg_title="Title2"
app:layout_columnWeight="1"
app:layout_gravity="fill" />
<custom.MenuButtonGrid
android:id="#+id/item3"
app:abg_title="Title3"
app:layout_columnWeight="1"
app:layout_gravity="fill" />
</androidx.gridlayout.widget.GridLayout>
The implementation of MenuButtonGrid:
/**
* A component that creates a card view with an icon and texts.
* They are designed to use as buttons.
*/
class MenuButtonGrid #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {
private var binding =
LayoutButtonGridViewBinding.inflate(LayoutInflater.from(context), this, true)
init {
// do whaterver you want in here
}
}
The inside of layout_button_grid_view.xml:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp">
// Content doesn't matter here
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>
You should go with TableLayout. In TableLayout you can create any number of rows and column. Go through the TableLayout documentation and read the concepts of rows and column. Here is a very nice tutorial for table layout.
This tutorial is also very helpful for you.
There was an issue with GridLayout weight parameter in Spec. Managed to solve the problem by inserting weight as a float parameter in Spec
Code:
public class TimetableSubjectView extends CardView {
TextView subjectText;
public TimetableSubjectView(Context context, int column, int row, float columnWeight, String subjectName, int color) {
super(context);
GridLayout.Spec rowI = GridLayout.spec(row,1,columnWeight);
GridLayout.Spec colI = GridLayout.spec(column,1,columnWeight);
GridLayout.LayoutParams subjectParam =new GridLayout.LayoutParams(rowI,colI);
subjectParam.setMargins(5,5,5,5);
setBackgroundColor(color);
subjectText = new TextView(context);
CardView.LayoutParams textParams = new CardView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
subjectText.setText(subjectName);
subjectText.setGravity(Gravity.CENTER);
subjectText.setLayoutParams(textParams);
this.addView(subjectText);
setLayoutParams(subjectParam);
}
}

Changing font style / format inside a string array in android

I'm currently working on my first app - no experience in java or android so please have patience with me :)
In the app I'm using a custom list view with text only and 4 text views in each list item/container.
With these text views I'm using a custom font (applied using java in the listview adapter).
The font is loaded in assets/fonts
Text is fetched from a string array in strings.xml
I have figured all this out so far using all the Q&A's on this website however can't seem to find a solution for the following...
I want to change the style of my text (which has the custom font) during the paragraph/sentence. I want to highlight specific words or phrases in Italics for example:
I enjoy coding.
The word enjoy is Italics where the rest of the sentence is in Regular format.
I've seen plenty of guides on how to change a whole class or text-view into italics or bold styles however not specific portions of text.
So far the only possible solution I've found is to try italic markers in strings.xml however this doesn't seem to work and I don't know why
I'm assuming what I need to do is:
1. load the italic version of the font separately in java
2, then write some code that tells the app to apply this font to specific portions of text, either in strings xml or some other way. (preferably in strings xml as there is alot of text)
Your help is much appreciated, Many thanks in advance.
Apologies if my explanation is too brief its my first post.
my code: (if you need anything else let me know.)
the main activity
custom listview adapter
main xml layout
row xml layout
public class WirdActivity extends Activity {
MediaPlayer mp;
String[] Arabic;
String[] Transliteration;
String[] Translation;
String[] Number;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_wird);
Resources res=getResources();
Arabic=res.getStringArray(R.array.wirdarabic);
Transliteration=res.getStringArray(R.array.wirdtransliteration);
Translation=res.getStringArray(R.array.wirdtranslation);
Number=res.getStringArray(R.array.wirdnumber);
mp = MediaPlayer.create(this, R.raw.wird);
Button playwird = (Button) findViewById(R.id.playwird);
playwird.performClick();
playwird.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
mp.start();
}
});
ImageButton pausewird = (ImageButton) findViewById(R.id.pausewird);
pausewird.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
mp.pause();
}
});
ListAdapter theAdapter = new Wirdadapter(this, Arabic, Transliteration, Translation, Number);
final ListView wirdlist = (ListView) findViewById(R.id.wirdlist);
wirdlist.setAdapter(theAdapter);
}
#Override
protected void onDestroy() {
super.onDestroy();
mp.stop();
}
class Wirdadapter extends ArrayAdapter<String> {
private AssetManager assets;
Typeface font = Typeface.createFromAsset(getContext().getAssets(),
"fonts/trado.ttf");
Typeface font2 = Typeface.createFromAsset(getContext().getAssets(),
"fonts/JaghbUni-Rom.ttf");
String[] titleArray;
String[] descriptionArray;
String[] subtitleArray;
String[] numberArray;
public Wirdadapter(Context context, String[] titles, String[] desc,String[] sub,String[] num) {
super(context, R.layout.row_layout_3, R.id.textview2,titles);
this.titleArray=titles;
this.descriptionArray=desc;
this.subtitleArray=sub;
this.numberArray=num;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater theInflater = LayoutInflater.from(getContext());
View theView = theInflater.inflate(R.layout.row_layout_3, parent, false);
TextView Arabic = (TextView) theView.findViewById(R.id.textview2);
TextView Transliteration = (TextView) theView.findViewById(R.id.transliteration);
TextView Translation = (TextView) theView.findViewById(R.id.translation);
TextView Number = (TextView) theView.findViewById(R.id.number);
Arabic.setText(titleArray[position]);
Transliteration.setText(descriptionArray[position]);
Translation.setText(subtitleArray[position]);
Number.setText(numberArray[position]);
Arabic.setTypeface(font);
Transliteration.setTypeface(font2);
Translation.setTypeface(font2);
Number.setTypeface(font2);
return theView;
}
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="5000pt"
android:background="#drawable/gradient_background3"
tools:context=".WirdActivity"
android:orientation="vertical"
android:focusableInTouchMode="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#927e68"
>
<TextView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="#string/wird_title"
android:textSize="16sp"
android:padding="10dp"
android:layout_marginStart="5dp"
android:textColor="#ffffff"
android:id="#+id/wirdtitle"
/>
<ImageButton
android:layout_height="25dp"
android:layout_width="30dp"
android:id="#+id/pausewird"
android:background="#drawable/pause"
android:clickable="true"
android:layout_gravity="center"
android:layout_marginEnd="65dp"
android:layout_alignParentEnd="true"
android:layout_alignBottom="#+id/playwird"
/>
<Button
android:layout_height="25dp"
android:layout_width="25dp"
android:id="#+id/playwird"
android:background="#drawable/play"
android:clickable="true"
android:layout_alignBottom="#id/wirdtitle"
android:layout_marginEnd="15dp"
android:layout_marginBottom="17.5dp"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="515dp" >
<LinearLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/w1"
android:id="#+id/wirdhead"
android:adjustViewBounds="true"/>
<ListView
android:layout_width="match_parent"
android:layout_height="4100dp"
android:id="#+id/wirdlist"
android:gravity="right"
android:divider="#f1f1f1"
android:dividerHeight="0.5dp"
>
</ListView>
</LinearLayout>
</ScrollView>
</LinearLayout>
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/number"
android:textSize="10sp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
android:textColor="#4c4c4c">
</TextView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/textview2"
android:textSize="30sp"
android:padding="15dp"
android:layout_alignParentRight="true"
android:layoutDirection="rtl"
android:gravity="right"
android:textColor="#4c4c4c">
</TextView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/transliteration"
android:textSize="15sp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingBottom="5dp"
android:textColor="#4c4c4c">
</TextView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/translation"
android:textSize="15sp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingBottom="15dp"
android:textColor="#4c4c4c">
</TextView>
</LinearLayout>
You can either use the SpannableStringBuilder class or the Html.fromHtml() method. The simpler one is the Html.fromHtml() method.
Example:
tView.setText(Html.fromHtml("I <i>enjoy</i> coding"));
The Html.fromHtml() method basically returns a SpannableString, but I usually find it easier than using the SpannableStringBuilder class.
That being said, if you want to modify the String dynamically, then you need to use the SpannableStringBuilder class.
Note:
I have not tried the fromHtml() method on an XML string resource, but do try it and share the results.
PS:
If you are really curious about SpannableString class, go here for a simple example or here for the full documentation.

Adding Views with Java LayoutInflater in a loop either doesn't set the width or only adds the first item in the loop

I have function that loads data form a server, like a search then adds these tot the main menu.
To accomplish this I am using a for loop on the JSON results to add the items.
This loop works fine, it reads the data and loops through fine:
Java Loop:
JSONArray teams = result.getJSONArray("teams");
LayoutInflater inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
LinearLayout parent = (LinearLayout) mainMenu.findViewById(R.id.team_list_view);
//Log.d("TEAMS",teams.toString());
for(int x = 0; x < teams.length(); x++) {
JSONObject cTeam = teams.getJSONObject(x);
String name = cTeam.getString("name");
String thumb = cTeam.getString("thumb");
String id = cTeam.getString("id");
View custom = inflater.inflate(R.layout.teams_menu_template, null);
int width = LinearLayout.LayoutParams.FILL_PARENT;
int height = LinearLayout.LayoutParams.WRAP_CONTENT;
ImageButton pp = (ImageButton) custom.findViewById(R.id.tempPPbtn);
Button teamName = (Button) custom.findViewById(R.id.tempPPTxtbtn);
teamName.setText(name);
loadImage loadImage = new loadImage("imagebutton",pp);
loadImage.execute(thumb);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(width,height);
parent.addView(custom);
}
Now this does work fine it loops through and adds the image and text and appends to the parent layout. But instead of stacking the new layouts it places them side by side like in the image below:
After some googling I tried adding params to set the width to FILL_PARENT but the outcome only adds the first item. However it does add it as I want.
I've stuck on this for quite some time, if anyone can help it would be greatly appriated.
My Template XML file i'm using.
<?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="wrap_content"
android:layout_marginTop="10dp"
android:id="#+id/tempDropCont"
android:background="#drawable/drop_down"
android:weightSum="100"
android:baselineAligned="true">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="70dp"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/tempPPbtn"
android:background="#drawable/profile"
android:layout_marginLeft="15dp" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="20dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/leader_board"
android:id="#+id/tempPPTxtbtn"
android:background="#android:color/transparent"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_marginTop="10dp" />
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tempDrop"
android:visibility="gone">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/view_team"
android:id="#+id/tempTxtBtn1"
android:background="#android:color/transparent"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_marginTop="10dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/edit_team"
android:id="#+id/tempTxtBtn2"
android:background="#android:color/transparent"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_marginTop="10dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/team_settings"
android:id="#+id/tempTxtBtn3"
android:background="#android:color/transparent"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_marginTop="10dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
At first I did think it was the xml but I have tried using include on a different layout and it includes the file fine as its supposed too.
NOTE from the server there is two items returned.
It would have been nice to have the parent layout as well, or at least the way you defined the parent (LinearLayout with the id listview).
However, there are several culprits for the behavior that you describe:
Make sure that the parent layout has the orientation set to vertical. At this point you can copy paste a couple of template items in your layout and see if they look alright when you define them in xml
When you inflate your item, you need to pass the parent as well, so that the child inherits the layout properties:
View custom = inflater.inflate(R.layout.teams_menu_template, parent, false);
This will create the item with the expected properties as defined in the parent container, but not attach it to the parent just yet.
This line is not used:
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(width,height);
You don't set the parameters once you created them. But I think this will be redundant once you do the inflation properly.

Gridview alignment of elements

I have a grid view with 7 images, and now when I inflate it I get it like this
Here you can see the images are aligned as per normal view
But I dont want it like that I want it like this
The bottom images are aligned to form kind of a pyramid or triangle type
How can i achieve this in gridview in android ???
If you try to set the padding then you get the view to be shrinked like this
if(position == 4){
view.setPadding(50, 0, 0, 0);
}
So I would suggest something like this
Create 2 gridviews in xml as this such that they have their alignments centered
<TextView
android:id="#+id/txtControl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall" />
<GridView
android:id="#+id/gridView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/txtControl"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:numColumns="4" >
</GridView>
<GridView
android:id="#+id/gridView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtControl"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:numColumns="3" >
</GridView>
Now In your main activity create 2 String values for each
public class MainActivityWrapped extends Activity {
static final String[] MOBILE_OS1 = new String[] {
"Android", "iOS", "Windows", "Blackberry"};
static final String[] MOBILE_OS2 = new String[] {
"Android", "iOS", "Windows"};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.gridviewlayout);
GridView gridView1 = (GridView) findViewById(R.id.gridView1);
gridView1.setAdapter(new ImageAdapterWrapped(this, MOBILE_OS1,gridView1));
GridView gridView2 = (GridView) findViewById(R.id.gridView2);
gridView2.setAdapter(new ImageAdapterWrapped(this, MOBILE_OS2,gridView1));
}
}
Either you can create 2 adapter or control the same 1st adapter to be reused
The output would be like this
As Takendarkk comments, the layout you want is not a grid
You should be able to achieve what you want with nested linearlayouts:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- first 4 image views here -->
</LinearLayout>
<LinearLayout
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- last 3 image views here -->
</LinearLayout>
</LinearLayout>
This is do-able, but the solution is messy.
If you know how many images are going to be in the row, you can calculate how much padding you'll need on the left and right images of your row.
Then, in your getView() of your adapter, you can set this padding bearing in mind that due to the way views are recycled in adapters, you'll need to unset the padding for those that do not need it.
Let me know in a comment if you need some code to better illustrate what I'm proposing.

Categories