I'm trying to create a custom view in android that I can use in the same way as a LinearLayout. The custom view should add two TextView on top of whatever I add inside the layout. How can I control the visibility of the contents of my custom view? I have to be able to add contents at design time and at run time visibility of that nested contents should be toggled, but not those two TextViews.
My question is somewhat similar to this one which didn't really get a satisfactory answer.
I've created a custom view that extends LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My title"
android:layout_marginLeft="10dp"
/>
<TextView
android:id="#+id/txt_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginRight="10dp"
android:text="My button"
android:onClick="txtButton_onClick"
android:clickable="true"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/all_contents"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_marginTop="10dp"
/>
<!-- This is where I _want_ to add all nested contents to make it easy to toggle its visibility -->
</merge>
All nested content I want to be contained in the LinearLayout at the bottom, so that when I click txt_button I can set visibility on all_contents to gone and make that disappear. I still want txt_title and txt_button to continue being visible, so I can toggle showing the content or not.
The custom view is supposed to be called like this:
<org.my.app.view.SlidingLayoutView
android:id="#+id/slv_date_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
custom:titleString="Date and time"
custom:buttonString="Change">
<!-- This is where all nested contents should go -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Example nested content"
/>
</org.my.app.view.SlidingLayoutView>
What I don't get is how to decide that nested contents goes into the all_content LinearLayout. Or am I thinking about this all wrong? Does nested content end up at the very bottom of the custom view, and if so how do I toggle its visibility and not my two TextView?
By on top of do you mean above in the linear layout? I think that your xml should work if you take out the all_contents LinearLayout, things will be added to the LinearLayout. Make your xml like this.
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My title"
android:layout_marginLeft="10dp"
/>
<TextView
android:id="#+id/txt_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginRight="10dp"
android:text="My button"
android:onClick="txtButton_onClick"
android:clickable="true"
/>
</LinearLayout>
<!-- This is where I _want_ to add all nested contents to make it easy to toggle its visibility -->
</merge>
I would add two methods in the class like this which you can use to toggle the visibility of your contents or the textViews at the top:
public void setTopTextViewVisibility(int visibility){
for(int i = 0; i < getChildCount(); i ++){
View view = getChildAt(i);
if(view.getId() == R.id.txt_title || view.getId() == R.id.txt_button){
view.setVisibility(visibility);
}
}
}
public void setContentVisibility(int visibility){
for(int i = 0; i < getChildCount(); i ++){
View view = getChildAt(i);
if(!(view.getId() == R.id.txt_title || view.getId() == R.id.txt_button)){
view.setVisibility(visibility);
}
}
}
I would use a FrameLayout, you can put a linear layout inside the frame and then put all your views inside that and make a new frame for each group of views.
Here's the basic structure of a menu screen I did where once you click a button it shows a new frame with more options.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mayne" >
<FrameLayout
android:id="#+id/frameMain" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1" />
<Button
android:id="#+id/button1" />
<Button
android:id="#+id/button2" />
</RelativeLayout>
</FrameLayout>
<FrameLayout
android:id="#+id/frameDiff" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/btnMed" />
<Button
android:id="#+id/btnHard" />
<Button
android:id="#+id/btnEasy" />
<TextView
android:id="#+id/textView2" />
<Button
android:id="#+id/btnCancel" />
</RelativeLayout>
</FrameLayout>
Related
I have a Linear layout then programatically I'm adding some spinners and buttons and so on, but I have xml button Wrap content (width) and then on java I add spinner (or anything else) and it goes below this view even if both views are wrap content:
progBar = new ProgressBar(this);
pBarToca = new ProgressBar(this);
pBarToca.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
linToca = (LinearLayout) findViewById(R.id.tetoca);
linToca.addView(pBarToca);
and it's placed under the button of xml:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
edit!!!!!!
I want textview on first line then on next line button + progressbar (for example)
You have android:orientation=vertical so the Views will be laid out starting at the top and going down.
If you want them to all be next to each other, remove that from your xml since the default orientation for a LinearLayout is horizontal. If you do this, you will obviously need to change the android:width to wrap_content for your TextView or else it will take up the entire screen.
After your comment, a RelativeLayout would work best here.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar"
android:id="#+id/tvID" /> // give it an id
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca"
android:layout_below="#/id=tvID"> // place it below the TV
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
</RelativeLayout>
Note the changes in the comments. Now when you add your progressbar to the LL, it should be next to the Button. You may need some changes but this should give you approximately what you want.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/te_toca_jugar"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
In your textView you are matching the parent
android:layout_width="match_parent"
This will cause the textview to take up the entire width of the parent view.
android:layout_width="wrap_content"
and
android:orientation="horizontal"
android:orientation="vertical" will cause the elements to be stacked.
If you are using "horizontal" it's important not to have a child element with width matching parent.
EDIT:
After OPs change to question:
I have used a textview, two buttons and listview to give you an idea of how you can format it. There are many ways to achieve the same thing, this is one suggestion.
The internal linearlayout has a horizontal orientation (by default).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="te_toca_jugar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar2"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lv">
</ListView>
</LinearLayout>
</LinearLayout>
I am just starting to develop android apps. I have a layout question. I want to create the main screen for my app. It is a menu with 7 options, each options would be an icon at the left, a short text and a check at the left (on/off component).
I have written it in a list view element, I have created a simple adapter with this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView android:id="#+id/icon"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_action_io"/>
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:singleLine="true" />
</RelativeLayout>
Menu will have always 7 options, I would like that the listview filled the height of the screen. Each element with the same height. Is it possible that with listview? Or, perhaps would be better making the menu out of a list view?
I have been reading about linear layout and the weight property. Please, could you help me? It is my first layout, I would thank any advice aboput layout I should use.
Thanks a lot, best regards!
P.D: Sorry for my english.
I would use a Linearlayout and inside i put all the items to be displayed...
Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<RelativeLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageView android:id="#+id/icon"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher"/>
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Texto"
android:singleLine="true" />
</RelativeLayout>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ImageView android:id="#+id/icon"
android:layout_width="?android:attr/listPreferredItemHeight"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher"/>
<TextView android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Texto"
android:singleLine="true" />
</RelativeLayout>
<!-- Repeat the item five times more -->
</LinearLayout>
if you want all the items to be displayed (without a scroll) then there's no use in a ListView. use a LinearLayout instead and set the layout_weight of each menu item to 1.
As the others guys said is better use the LinearLayout. And like you mentioned you can use weight attribute too.
Equally weighted children
To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1".
As you are trying to implement a Menu, I think the best approach is substitute each RelativeLayout(with textview and imageview) for a button. So, your layout will be like that:
<?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:orientation="vertical"
android:weightSum="7.0" > //Defines the maximum weight sum
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:height="0dp"
android:layout_weight="1"
android:text="Option 1"
android:drawableLeft="#drawable/icon1"
android:onClick="handleOption"/> // method to handle onClick
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:height="0dp"
android:layout_weight="1"
android:text="Option 2"
android:drawableLeft="#drawable/icon2"
android:onClick="handleOption"/> // method to handle onClick
//Add more five buttons
.
.
.
In your activity, you should load this layout, using setContentView() and you must implement a method handleOption like below to handle onClick event of each button.
public view handleOption(View view)
{
switch(view.getId()) ....
}
In that way, you do not need implement onClickListener Interface, have one method to each button and set the onClickListener for each button.
I'm new to android application development. I'm trying to create a calculator application, and I got 2 questions to ask.
1.
How can I create a new row in LinearLayout?
It's currently looking like this:
[textview][textview][button]
And I want it to look like this:
[textview][textview]
[button]
This is my xml code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:id="#+id/number1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/number1" />
<TextView
android:id="#+id/number2"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/number2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_calculate" />
2. How can I process the sum of "number1" and "number2" Textviews and display it on the Main Activity (where the TextViews are)?
Linear layout can be horizontal or vertical, if you need rows and columns you need to work with relative layout or just add more then one linear layout such as..
TextView txtvar = (TextView) findViewById(R.id.textViewIdFromXml);
txtvar.setText("blah");
this how you connect to textview element whit id textViewIdFromXml and set blah for text
Nested linear layouts.
For example (pseudo xml):
<Linear Layout : Vertical>
<Linear Layout : Horizontal>
<TextView />
<TextView />
</Linear Layout>
<Button />
</Linear Layout>
Edit: I tried the following in Eclipse and for me it does what I think you ask (though it doesn't look fancy):
<?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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
1st Ans: create a Vertical Linear Layout & use a Horinzental one nested in the Vertical one. But I prefer relative layout.
2ns Ans: use onClickListener() for the buttons. & under every onClickListener() change the text of Number display textbox using setText(). but on = button's onClickListener() use the value of Number display textbox using getText() and use it for + - or in * /
I've got problem with setting visibility to relative layout. I have part of big layout in relativelayout and below that next TextView. But in my code, when myRelativeLayout.setVisibility(View.GONE);
is called, TextView which is below that did not appear. I tried several ways to rearange layout, but i need that textview under it. Thanks
My XML:
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<ScrollView
android:id="#+id/scrollView_liab_ra_flipper_04"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/linearLayout_liab_ra_flipper_04"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/someTextView"
android:text="Something" />
<!-- This relative layout should be removable -->
<RelativeLayout
android:id="#+id/vg_liab_ra_04_flipper_car_container_visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/someTextView" >
<TextView
android:id="#+id/tv_1"
style="#style/WhiteFormText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="2dp"
android:text="#string/licence_plate_counter" >
</TextView>
<EditText
android:id="#+id/et_1"
style="#style/WhiteFormField"
android:layout_below="#+id/tv_1"
android:hint="#string/licence_plate_hint" >
</EditText>
</RelativeLayout>
<!-- This textview is not visible if relative layout is gone -->
<TextView
android:id="#+id/tv_liab_ra_04_flipper_mandat"
style="#style/WhiteFormTextHint"
android:layout_below="#+id/vg_liab_ra_04_flipper_car_container_visible"
android:layout_marginBottom="15dp"
android:text="#string/mandatory_field" >
</TextView>
</RelativeLayout>
</ScrollView>
</merge>
Java Code:
private void hideCar() {
if (!accident.getParticipant(0)) {
rlCarContainer.setVisibility(View.GONE);
} else {
rlCarContainer.setVisibility(View.VISIBLE);
}
}
The easiest way to do what you want is to use LinearLayout instead of your root RelativeLayout.. the child views will get realigned after you hide the RelativeLayout just the way you want.. if you don't want that, you can use android:layout_alignWithParentIfMissing on the TextView see here the documentation. That won't work exactly how you want but it might help you to solve the problem :).
I want to create a following kind of layout in android , rite now i have created with fixed height of listview which is causing a problem with different dimension of screens of mobiles.
Initially when this screen appears a button will be at the bottom side only with empty listview and as an when the items will get added in a list view , it grows but button will remain steady at the bottom.
so far i have written following code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/cText"
android:src="#drawable/c_text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dip"
/>
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
/>
<ImageButton
android:id="#+id/cBtn"
android:layout_width="150dip"
android:layout_height="52dip"
android:src="#drawable/preview"
android:layout_alignParentTop="#+id/list"
android:layout_gravity="center_horizontal"/>
</RelativeLayout>
Try this
< ?xml version="1.0" encoding="utf-8"?>
< RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageButton
android:id="#+id/cBtn"
android:layout_centerHorizontal="true"
android:layout_width="150dip"
android:layout_height="52dip"
android:src="#drawable/preview"
android:layout_alignParentBottom="true"
/>
<ListView
android:id="#+id//listview01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/cBtn"
android:layout_marginBottom="10dip"
/>
< /RelativeLayout>
You can add a Button as a footer to List View. The sample code sinppet is shown below
Step1: Create a Button
<Button android:id="#+id/footer" android:gravity="center"
android:layout_gravity="center"
android:text="My Footer"
android:layout_width="wrap_content"
android:layout_height="0dp" android:layout_weight="1"/>
Step2: Make it as Footer to the List View
ListView myList;
View footerView;
ViewGroup footerViewOriginal = (ViewGroup) findViewById(R.id.footer);
footerView = inflater2.inflate(R.layout.footer,footerViewOriginal);
footerView.findViewById(R.id.footer);
myList.addFooterView(footerView, null, true);
Step3: Create on ClickListener and write the action what you want to perform
footerView.findViewById(R.id.footer).setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
return false;
}