I'm new to Android development, and am having a tough time working something out. I want to make a composite view (called SkillDiceGroup) of a TextView, EditText, and SkillDiceButton (which is an extension of the Button class). I have it working when declaring my SkillDiceGroup as pure code, and putting this in my XML layout:
<com.jeremybush.d20.SkillDiceGroup android:id="#+id/skillDiceTest"
android:title="Foobar!"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</com.jeremybush.d20.SkillDiceGroup>
And I have this code:
public class SkillDiceGroup extends LinearLayout
{
// The View components
private TextView mTitle;
private EditText mSkill;
private SkillDiceButton mDice;
public SkillDiceGroup(Context context, AttributeSet attrs)
{
super(context);
this.setOrientation(HORIZONTAL);
mTitle = new TextView(context);
mTitle.setText("foobar");
addView(mTitle, new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT
));
mSkill = new EditText(context);
addView(mSkill, new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT
));
mDice = new SkillDiceButton(context, attrs);
mDice.setText("d20");
addView(mDice, new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT
));
}
private class SkillDiceButton extends DiceButton
{
public SkillDiceButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void onClick(View view)
{
modifier = Integer.parseInt(mSkill.getText().toString());
super.onClick(view);
}
}
}
This works how I want it, but I would like to declare the three items in the xml view on their own. How can I do this?
You should take a look at the extensive documention Android provides regarding xml layouts, for example: declaring layout, common layout objects, and hello views which has an detailed example of each layout type.
Taken directly from the LinearLayout tutorial, a layout with 3 items:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="row one"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row two"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row three"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row four"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
Just replace the second two text views with an EditText and a SkillDiceButton.
If you wan't to create your own view/widget that 'hides' internal layout structure, and can be reusable in various places - you should read document about creating custom components
also read about tag, and LayoutInflater
But if want to use SkillDiceGroup only once - just create layout as proposed by Mayra
Related
I am trying to implement horizontal timeline. SO I have written the code to design the horizontal line but I am able to figure out how I will write text on the above and below of the line.
One more thing I don't want to use any other library.
I have try to solve it through Custom view as people here have been suggested but got struck.
timeline_segment.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:weightSum="1"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="3dp"
android:textAlignment="textEnd"
android:text="Top"
android:id="#+id/top_data"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_gravity="center"
android:layout_weight="0.5"
android:background="#color/alphabet_a"
android:layout_width="wrap_content"
android:layout_height="2dp" />
<ImageView
android:background="#drawable/circle1"
android:layout_width="15dp"
android:layout_height="15dp" />
<TextView
android:layout_weight="0.5"
android:layout_gravity="center"
android:background="#color/alphabet_a"
android:layout_width="wrap_content"
android:layout_height="2dp" />
</LinearLayout>
<TextView
android:padding="3dp"
android:gravity="center"
android:text="bottom"
android:id="#+id/bottom_data"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</merge>
timeline_segment.java
public class timeline_segement extends LinearLayout {
View rootView;
TextView upperText;
TextView startLine;
TextView endLine;
ImageView circleView;
TextView bottomText;
public timeline_segement(Context context) {
super(context);
init(context);
}
public timeline_segement(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public timeline_segement(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
rootView=inflate(context, R.layout.timeline_segment, this );
upperText=(TextView) rootView.findViewById(R.id.top_data);
bottomText=(TextView) rootView.findViewById(R.id.bottom_data);
upperText.setText("Top");
bottomText.setText("Bottom");
}
public void setUpperText(String string)
{
upperText.setText(string);
}
public void setBottomText(String string)
{
bottomText.setText(string);
}
}
Decided to answer because the comment box is kinda limiting. This is my comment:
You'll need a custom view to achieve this. You can either composite ready-made views or go full custom
If you choose to composite views, then you start by breaking down that image level by level. At the highest level, its a horizontal layout with 'TimelineCell's (or whatever you choose to call it).
A TimelineCell will basically be a vertical LinearLayout with a right aligned TextView, a View that draws the line and another center aligned TextView.
You can then create these programmatically and add them to a parent horizontal LinearLayout.
If you however choose to go full custom, Youll have to handle measuring, layouting and drawing of all the components including the text above and below the line.
Take a look at this link for a good introduction to custom views on android
I've got problem with creating custom view programmatically.
I wrote something like:
public class TimerCardView extends CardView {
private LinearLayout horizontalContentLayout;
private TextView timeTextView;
public TimerCardView(Context context, AttributeSet attrs) {
super(context, attrs);
horizontalContentLayout = new LinearLayout(context);
LinearLayout.LayoutParams horizontalContentXLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
horizontalContentXLayoutParams.gravity = Gravity.CENTER;
horizontalContentLayout.setLayoutParams(horizontalContentXLayoutParams);
this.addView(horizontalContentLayout);
timeTextView = new TextView(context);
timeTextView.setTextColor(Color.parseColor("#A3A3A3"));
timeTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 40);
timeTextView.setText("0:00:00");
this.horizontalContentLayout.addView(timeTextView);
}
}
and in xml I added:
<com.example.paciu.belmondo.ViewsExtends.TimerCardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="2dp"
android:layout_margin="4dp">
</com.example.paciu.belmondo.ViewsExtends.TimerCardView>
And the problem is that my text view isn't centered on the screen in the layout. It still stays to the left. But when I added firstly to the xml the same (but the whole in xml):
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="2dp"
android:layout_margin="4dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40sp"
android:text="sdasdasd"
android:textColor="#AAAAAA" />
</LinearLayout>
</android.support.v7.widget.CardView>
What am I doing wrong? Thank you for your help!
CardView extends the FrameLayout class. The layout_gravity attribute lands on the FrameLayout.LayoutParams, not on the view horizontalContentLayout. For setting gravity like in your XML use something like:
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT, Gravity.CENTER);
this.addView(horizontalContentLayout,params);
I am working on an android application that will get data from an xml file and insert it in a listview
but I want to change the UI and instead of displaying the data in a listview vertically, I want to display them horizontally in a scrollview
My question is if I have the following code
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none">
<LinearLayout
android:id="#+id/linearLayout1"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:padding="2dp">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:id="#+id/imageView11"
android:layout_height="wrap_content"
android:src="#drawable/i1"/>
<TextView
android:id="#+id/TextOnImage11"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Fantasia Reviews"
android:layout_alignParentBottom="true"
android:paddingLeft="2dp"
android:background="#drawable/txt_bg"
android:textSize="10dp"
android:paddingTop="2dp"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:width="0dp" />
</RelativeLayout>
</LinearLayout>
</HorizontalScrollView>
how can I add more images and text dynamically from the java code ??
Thank you
I presume that your intent would be to add another RelativeLayout with it's own image/text pair straight after the RelativeLayout that you have shown in your code sample?
In that case as it is not simply adding one more view, I would take the time to create a class that represents your "structure" that you want to insert.
e.g. A class called "TextImagePair" that extends "RelativeLayout"
public class TextImagePair extends RelativeLayout {
public ReportDetailRow(Context context){
super(context);
}
public TextImagePair(Context context,AttributeSet attributeSet){
super(context, attributeSet);
}
public TextImagePair(Context context,AttributeSet attributeSet, int i){
super(context, attributeSet,i);
}
public TextImagePair(Context context, AttributeSet attributeSet, String text, int drawableResource) {
super(context, attributeSet);
// Inflate the layout
LayoutInflater inflator = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflator.inflate(R.layout.lay_textimagepair, this);
TextView tvText = (TextView)this.findViewById(R.id.layTextImagePair_textview);
tvText.setText(text);
ImageView imgView = (ImageView)this.findViewById(R.id.layTextImagePair_imageview);
imgView.setDrawable(getResources().getDrawable(drawableResource));
}
}
You would then have a seperate xml layout file (named lay_textimagepair in my code) that just contains the text and image views.
You would then add this to your view at run time with:
LinearLayout parent = (LinearLayout)findViewById(R.id.layParentView_liniearlayout);
TextImagePair tip = new TextImagePair(null,null,"Blah Blah Blah",R.drawable.something);
parent.addView(tip);
Sorry if there are any bugs in the above code but I am writing it without access to Eclipse!
I created a compound component Box which I want to add to the layout. Box xml:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayoutForBlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" android:background="#drawable/screen_background" android:layout_marginLeft="5dp" android:layout_marginTop="5dp">
<ImageButton
android:id="#+id/imageButtonContent"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:scaleType="fitCenter"
android:src="#drawable/beach_bed" android:background="#drawable/buttonbackground" android:clickable="true" android:layout_margin="5dp" android:contentDescription="#string/sample_text"/>
<TextView
android:id="#+id/textViewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/sample_text"
android:textColor="#color/deep_blue" android:layout_margin="5dp"/>
</LinearLayout>
</merge>
Box class:
public class Box extends LinearLayout {
private TextView textContent;
private ImageView imageContent;
public Box(Context context, AttributeSet attrs) {
super(context, attrs);
((Activity)getContext()).getLayoutInflater().inflate(R.layout.box, this);
setupViewItems();
}
private void setupViewItems() {
textContent = (TextView) findViewById(R.id.textViewContent);
imageContent = (ImageView) findViewById(R.id.imageButtonContent);
}
public void setTextContent(String text) {
this.textContent.setText(text);
}
public void setImageContent(String tag) {
this.imageContent.setContentDescription(tag);
}
}
Everything works if I add the Box to the main xml file like:
<com.mypackage.alexey.Box
android:id="#+id/mybox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
/>
The problem is that I'd like to create many of boxes programmatically something like this: Box mybox= new Box();. How to do it?
I would suggest you also implement the constructors of the LinearLayout that takes only a Context:
public Box(Context context) {
super(context);
}
Then in your Activity, when you want to add a new Box, instantiate the Box class and add it to your layout:
// I assumed you have a LinearLayout to which you want to add your Box
LinearLayout parent = (LinearLayout) findViewById(R.id.parent_id);
//create the Box and added to the parent above
Box theBox = new Box(this); // if you are in an Activity
//some LayoutParams to replicate your xml attributes
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
// set the Orientation for the Box
theBox.setOrientation(LinearLayout.HORIZONTAL);
//add the Box
parent.addView(theBox);
I am trying to create a compound viewgroup after inflating the group from an XML file.
The viewgroup is composed as: A LinearLayout Root, 2 child LinearLayouts. I am able to see the layout correctly in the layout editor; however, when I attempt to add a view (say a button) from the editor, the view does not show up and the application immediately force closes. I was told i may need to Override the onLayout method to correctly draw the view components but I'm am fairly confused.
My Class:
public class FocusBox extends LinearLayout {
private LinearLayout rootLayout,
contentLayout,
topLayout;
public FocusBox(Context context)
{
super(context, null);
}
public FocusBox(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.focus_box, this);
rootLayout = (LinearLayout)findViewById(R.id.focusBoxParent);
contentLayout = (LinearLayout)findViewById(R.id.focusBottom);
topLayout = (LinearLayout)findViewById(R.id.focusTop);
}
}
And the xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:id="#+id/focusBoxParent"
android:orientation="vertical">
<LinearLayout
android:background="#drawable/gradients"
android:layout_weight=".1"
android:gravity="center"
android:id="#+id/focusTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:text="TextView"
android:id="#+id/focusTitle"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_width="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight=".9"
android:id="#+id/focusBottom"
android:background="#drawable/gradient2"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
Generally, if you inflate a layout from a valid XML you shouldn't get an error. You should do a clean build and re-deploy the app again.
Also check if you're using the correct class in the import statement in other classes (you could be using a FocusBox from some 3rd-party library instead of the one you made)