I have a TabHost with several tabs, which content is defined as a FrameLayout, which wraps a TextView, each one of them having a lot of text, more than it can be shown within the screen layout, so I had to enable vertical scrolling for every tab.
The main thing is that those tabs are created dynamically (programatically), so I have to specify all the options this way:
final SoftReference<TabHost> th = new SoftReference<TabHost>((TabHost) ((Activity) globvars.getContext()).findViewById(android.R.id.tabhost));
final TabSpec setContent = th.get().newTabSpec(tag).setIndicator(tabview).setContent(new TabContentFactory() {
public View createTabContent(String tag) {
view.setBackground(globvars.getContext().getResources().getDrawable(R.drawable.rounded_edges));
view.setPadding(25, 25, 25, 25);
view.setTextColor(Color.WHITE);
view.setLines(50);
view.setMaxLines(maxLines);
view.setEllipsize(TextUtils.TruncateAt.START);
view.setHorizontalScrollBarEnabled(false);
view.setVerticalScrollBarEnabled(true);
view.setMovementMethod(new ScrollingMovementMethod());
view.setScrollBarStyle(View.SCROLLBARS_INSIDE_INSET);
view.setVerticalFadingEdgeEnabled(true);
view.setGravity(Gravity.BOTTOM);
view.setOverScrollMode(1);
view.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 11);
view.setTypeface(Typeface.MONOSPACE);
return view;
}
});
Using this approach, I can scroll backwards and forwards indeed, but visually the scrollbar is not shown. I'm mean this bar:
Am I missing something? Does the scrollbar have to be defined by a customized drawable by imperative?
Thanks!
------ EDIT (12-31-2013) ------
I've been looking around and still can't find any solution to this. I've tried as many combinations of parameters as I was able to find, but no result. Particularly, I've tried this and also wrapping the FrameLayout within a ScrollView, but instead of showing a scrollbar at the TextView itself, the whole TextView is wrapped within a scrollbar and grows when buffer gets bigger and bigger, that's not what I want.
Any help appreciated!
------ EDIT (01-17-2014) ------
Well, at this point, I can assure I've tried any logical step (well, at least to me) to make this work and still can't! I clarify that I have about 7-8 additional activities and I have no trouble with scrolling in any of them. I just work with TabHost in this one, though. So I'm starting a bounty on this, because that's already endangering my mental sanity.
I'm posting my layout below:
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/fondo_imagen"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:id="#+id/TabContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="99"
android:orientation="vertical">
<TabHost
android:id="#+android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/TabLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Horizontal scrolling for the tab widget -->
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<TabWidget
android:id="#+android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</HorizontalScrollView>
<FrameLayout
android:id="#+android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp" />
</LinearLayout>
</TabHost>
</LinearLayout>
<!-- Some additional LinearLayouts that don't have anything to do with the tab widget -->
...
</LinearLayout>
------ EDIT (01-19-2014) ------
Ok, based on corsair992's answer, I could finally get this working. My real mistake was assuming that even the method that creates the tab (posted above) receives a TextView as parameter, working with a View in the TabSpec definition would be casting it to the TextView. So indeed, I wasn't aware I was actually setting the scrollbars on a View (didn't know the View class didn't provide a public programatic method to configure scrollbars neither), so I followed corsair992's advice and created a separate layout with this content:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/tabsContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="3dp"
android:background="#drawable/rounded_edges"
android:gravity="bottom"
android:padding="8dp"
android:scrollHorizontally="false"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical"
android:textColor="#FFFFFF"
android:textSize="11sp"
android:typeface="monospace"
tools:ignore="SmallSp" />
So now, instead of calling the above method which sets all those attributes to the View, I simply inflate this layout and set the MovementMethod:
final TabSpec setContent = th.get().newTabSpec(tag).setIndicator(tabview).setContent(new TabContentFactory() {
public View createTabContent(String tag) {
// tabs_content is the layout above
final View ll_view = LayoutInflater.from(globvars.getContext()).inflate(R.layout.tabs_content, null);
final TextView view = (TextView) ll_view.findViewById(R.id.tabsContent);
view.setMovementMethod(new ScrollingMovementMethod());
return ll_view;
}
});
It appears that the base View class does not provide a public method for initializing scroll bars if they are not specifically enabled in an XML layout resource. However, there is no reason you can't define your tab content in an XML resource, enable vertical scroll bars by setting the android:scrollbars attribute to vertical, and inflate it from the TabContentFactory dynamically.
Something like this in your case:
public View createTabContent(String tag) {
Activity activity = (Activity) globvars.getContext();
TextView view = (TextView) LayoutInflater.from(activity).inflate(R.layout.mytabcontent,
(ViewGroup) activity.findViewById(android.R.id.tabcontent), false);
view.setMovementMethod(new ScrollingMovementMethod());
view.setText("My Text");
return view;
}
Related
I have several Activities in my Android app that have the same basic structure, and I'm trying to make my layouts DRY. The duplicated code looks like the below. It contains a scrollable area with a footer that has "Back" and "Dashboard" links. There's also a FrameLayout being used to apply a gradient on top of the scrollable area.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ScrollView
android:layout_width="match_parent"
android:layout_height="689px">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- THE REAL PAGE CONTENT GOES HERE -->
</LinearLayout>
</ScrollView>
<ImageView
android:src="#drawable/GradientBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="50px"
android:background="?attr/primaryAccentColor">
<Button
android:layout_width="wrap_content"
android:layout_height="26px"
android:layout_gravity="center_vertical"
local:MvxBind="Click GoBackCommand" />
<Button
android:layout_width="wrap_content"
android:layout_height="26px"
local:MvxBind="Click ShowDashboardHomeCommand" />
</FrameLayout>
</LinearLayout>
To de-dupcliate my Activities, I think what I need to do is create a custom ViewGroup inherited from a LinearLayout. In that code, load the above content from an XML file. Where I am lost is how to get the child content in the Activity to load into the correct spot. E.g. let's say my Activity now contains:
<com.myapp.ScrollableVerticalLayoutWithDashboard
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- THE REAL PAGE CONTENT GOES HERE -->
<TextView android:text"blah blah blah" />
</com.myapp.ScrollableVerticalLayoutWithDashboard>
Now how do I cause the "blah blah blah" to appear in the correct place? I'm pretty sure if I did this, I would either end up with "blah blah blah" at the top or bottom of the page, not in the middle of the ScrollView as desired.
I'm using API 21 / v5.0+. Technically I'm doing all this with Xamarin, but hopefully that's irrelevant to the answer?
EDIT: An example of what the result would look like is this. The footer and gradient are part of the custom ViewGroup, but the rest would be content within the custom ViewGroup.
I don't know Xamarin so this is an native android solution, but should be easy to translate.
I think what I need to do is create a custom ViewGroup inherited from
a LinearLayout.
Yes, you could extend the LinearLayout class.
Where I am lost is how to get the child content in the Activity to
load into the correct spot.
In your custom implementation you need to handle the children manually. In the constructor of that custom class inflate the layout manually:
private LinearLayout mDecor;
public ScrollableVerticalLayoutWithDashboard(Context context, AttributeSet attrs) {
super(context, attrs);
// inflate the layout directly, this will pass through our addView method
LayoutInflater.from(context).inflate(R.layout.your_layout, this);
}
and then override the addView()(which a ViewGroup uses to append it's children) method to handle different types of views:
private LinearLayout mDecor;
public void addView(View child, int index, ViewGroup.LayoutParams params) {
// R.id.decor will be an id set on the root LinearLayout in the layout so we can know
// the type of view
if (child.getId() != R.id.decor) {
// this isn't the root of our inflated view so it must be the actual content, like
// the bla bla TextView
// R.id.content will be an id set on the LinearLayout inside the ScrollView where
// the content will sit
((LinearLayout) mDecor.findViewById(R.id.content)).addView(child, params);
return;
}
mDecor = (LinearLayout) child; // keep a reference to this static part of the view
super.addView(child, index, params); // add the decor view, the actual content will
// not be added here
}
In Xamarin you're looking for the https://developer.xamarin.com/api/member/Android.Views.ViewGroup.AddView/p/Android.Views.View/System.Int32/Android.Views.ViewGroup+LayoutParams/ method to override. Keep in mind that this is a simple implementation.
EDIT: Rather than putting a LinearLayout inside a LinearLayout, you could just use the 'merge' tag. Here's the final layout you'd want:
<?xml version="1.0" encoding="utf-8" ?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:id="#+id/svfFrame1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ScrollView
android:layout_width="match_parent"
android:layout_height="689px">
<LinearLayout
android:id="#+id/svfContentLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="23px" />
</ScrollView>
<ImageView
android:src="#drawable/GradientBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</FrameLayout>
<FrameLayout
android:id="#+id/svfFrame2"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="50px"
android:background="?attr/primaryAccentColor">
<Button
android:id="#+id/FooterBackButton"
android:layout_width="wrap_content"
android:layout_height="26px"
android:layout_gravity="center_vertical"
android:layout_marginLeft="24px" />
<Button
android:id="#+id/FooterDashboardButton"
android:layout_width="wrap_content"
android:layout_height="26px"
android:layout_gravity="center_vertical|right"
android:layout_marginRight="24px" />
</FrameLayout>
</merge>
And here's the final working C# view for Xamarin based on that layout:
public class ScrollableVerticalLayoutWithDashboard: LinearLayout
{
public ScrollableVerticalLayoutWithDashboard(Context context, IAttributeSet attrs) : base(context, attrs)
{
LayoutInflater.From(context).Inflate(Resource.Layout.ScrollableVerticalFooter, this);
base.Orientation = Orientation.Vertical;
}
public override void AddView(View child, int index, ViewGroup.LayoutParams #params)
{
// Check to see if the child is either of the two direct children from the layout
if (child.Id == Resource.Id.svfFrame1 || child.Id == Resource.Id.svfFrame2)
{
// This is one of our true direct children from our own layout. Add it "normally" using the base class.
base.AddView(child, index, #params);
}
else
{
// This is content coming from the parent layout, not our own inflated layout. It
// must be the actual content, like the bla bla TextView. Add it at the appropriate location.
((LinearLayout)this.FindViewById(Resource.Id.svfContentLayout)).AddView(child, #params);
}
}
}
I am trying to design a 3D page curl.
In my mainActivity, I have a viewPager which contains pages to be curled. For each page I have a separate layout file.
In the layout file if i just add a text view like below it is showing up fine:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/PageTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/green"
android:text="VIEW 1" /> -->
But if I wrap the textview inside relative layout, it just shows a white blank screen and textview is not shown.
<RelativeLayout 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"
tools:context=".DemoActivity" >
<TextView
style="#style/PageTitle"
android:id="#+id/sampletextview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="VIEW 1" />
</RelativeLayout>
Can someone please help me to know why i am not able to use relative layout in my view layout file:
I inflate the view like this:
LayoutInflater inflater = (LayoutInflater) myAppContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view1 = inflater.inflate(mViewIds[0], null);
Try changing the second parameter of the inflate() call from null to the ViewGroup that view1 is added to. Or post the code where you add it (and include the part where you define the LayoutParams).
I have implemented a ListView in my application using a custom implementation of CursorAdapter. My problem is, that whenever I fling to scroll quickly to the bottom of the list (right after launching the application), I sometimes end up with all the ListView items drawn overlapping each other. If I scroll back up or touch one of the items, they become properly arranged.
Here is how it looks after I quickly scroll down :
http://i.stack.imgur.com/cTcfD.png
Here is how it looks when I am select-ing one of the items :
http://i.stack.imgur.com/ZTRSt.png
Here is the XML for my ListView :
<ListView
android:id="#+id/all_reminders_list"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:clickable="true"
android:dividerHeight="1.0sp"
android:animateLayoutChanges="true">
Here's the newView(..) method of my custom CursorAdapter :
public View newView(Context context, Cursor cursor, ViewGroup parent) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
View view = inflater.inflate(R.layout.view_list_item, parent, false);
return view;
}
And this is the bindView(..) method :
public void bindView(View view, Context context, Cursor cursor) {
TextView whatTextView = (TextView) view.findViewById(R.id.item_what_text);
whatTextView.setText(cursor.getString(1));
TextView whenTextView = (TextView) view.findViewById(R.id.item_when_text);
if(cursor.getInt(9) != 0) // DONE_FLAG = 1 (completed)
{
//Arrow visibility
ImageView arrow = (ImageView)view.findViewById(R.id.list_item_arrow);
arrow.setVisibility(View.INVISIBLE);
//Text color
whatTextView.setTextColor(Color.LTGRAY);
whenTextView.setTextColor(Color.LTGRAY);
//WHEN text
whenTextView.setText(TimeCalculationHelper.getCompletedTimeString(cursor.getLong(2)));
}
else // DONE_FLAG = 0
{
//Arrow visibility
ImageView arrow = (ImageView)view.findViewById(R.id.list_item_arrow);
arrow.setVisibility(View.VISIBLE);
//Text color
whatTextView.setTextColor(Color.BLACK);
whenTextView.setTextColor(Color.BLACK);
//WHEN text
whenTextView.setText(TimeCalculationHelper.getTimeRemainingString(cursor.getLong(2)));
}
}
I've also noticed that I have been able to replicate it only when my device (Galaxy S2) is in power saving mode. Is there something I should be doing differently here? Thanks in advance!
EDIT : Including the list item's 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="wrap_content"
android:orientation="horizontal"
android:paddingLeft="2dp">
<TextView android:id="#+id/item_what_text"
android:lines="1"
android:maxLines="2"
android:textSize="22dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="3dp"/>
<TextView android:id="#+id/item_when_text"
android:lines="1"
android:maxLines="1"
android:textSize="14dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="13 minutes"
android:paddingBottom="2dp"
android:layout_below="#+id/item_what_text"/>
<ImageView
android:id="#+id/list_item_arrow"
android:src="#drawable/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
I also faced the same problem, with List items in my ListView overlapping each other whilst scrolling.
My fix:
I just specified a background for the parent layout that contained the ListView in question. Previously it was transparent.
I had the same problem and found it was caused by setting the animateLayoutChanges attribute to true on the listview.
Unfortunately I lose the animation of the listview by removing it but at least it draws properly when scrolling fast.
Giving the parent layout a background also appears to fix the issue, as mentioned by Pavan. Will experiment and change my answer if I discover issues with the background change.
For solving this ,i have one more solution:
I faced problem by using this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:paddingTop="4dip"
android:dividerHeight="0dp"
android:divider="#null"
android:cacheColorHint="#00000000"
android:listSelector="#color/transprent_editbox"
android:focusableInTouchMode="false" />
</RelativeLayout>
In order to solve that Problem,i just did few modifications on Above layout,those are:
1)Changed top layout from Relative to Linear Layout.
2)Put my ListView in other Relative Layout ..
i did like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:paddingTop="4dip"
android:dividerHeight="0dp"
android:divider="#null"
android:cacheColorHint="#00000000"
android:listSelector="#color/transprent_editbox"
android:focusableInTouchMode="false" />
</RelativeLayout>
</LinearLayout>
After using this,my problem is solved.
1.
in my opinion, height is wrap_content
because listview is restore row
2.
other opinion is write this code android:cacheColorHint="#00000000" in ListView
I also faced the same problem and found that animateLayoutChanges attribute causing the problems.
So i changed
android:animateLayoutChanges="true"
to
android:animateLayoutChanges="false"
and it worked.
I am learning to use the Hierarch Viewer tool, but meanwhile any hint on why below layout is not rendering correctly is appreciated.
I am trying to render an "html" table view. The content (table body) is rendered correctly with a custom list adapter. This works. But, when I add a textView (text_test below) to use as header, the list is not rendered anymore. I could see the code flow through my adapter (populate view holder, etc), but on screen I only see the Title text, no listView. I used to use FrameLayout (as noted in the comment), but then switched to LinearLayout.
Thanks.
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.my_list_view, container,
false);
ListView lv = (ListView)view.findViewById(R.id.my_list_view_one);
// Tell the list view which view to display when the list is empty
//lv.setEmptyView(getActivity().findViewById(R.id.my_list_view_empty));
// Set up the adapter
mCustomAdapter = new ListAdapterMyType(inflater, new ArrayList<MyType>());
lv.setAdapter(mCustomAdapter);
return view;
}
my_list_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The frame layout is here since we will be showing either
the empty view or the list view. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/text_test"/>
<ListView
android:id="#+id/my_list_view_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="false"/>
<!-- Here is the view to show if the list is emtpy -->
<TextView android:id="#+id/my_list_view_empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/list_no_items"
android:visibility="gone"/>
</LinearLayout>
</LinearLayout>
But, when I add a textView (text_test below) to use as header, the list is not rendered anymore.
The TextView is set to match_parent in both the width and height, so it will fill the entire screen... To put a TextView above your ListView try:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text_test"/>
<ListView
android:id="#+id/my_list_view_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="false"/>
<!-- Here is the view to show if the list is emtpy -->
<TextView android:id="#+id/my_list_view_empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/list_no_items"
android:visibility="gone"/>
</LinearLayout>
I removed the outer LinearLayout, since it only had one child it did nothing. I also changed the remaining LinearLayout's orientation to vertical and set the header TextView height to wrap_content.
If you want your custom header to scroll with your ListView, use the addHeaderView() method (before calling setAdapter()) instead of a separate TextView in your layout. This approach will also hide the header when the ListView is empty.
I would like to show two views in a service context. One is a TextView, and the other is a class that I have developed extending the basic View class.
prompt.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mtPrompt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_dark"
android:text="#string/demoString"
android:textColor="#android:color/white"
android:minLines="2"
android:textSize="25dp" >
</TextView>
and input.xml:
<com.xxx.ime.sssView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/inputView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/translucent_gray"
android:cacheColorHint="#null" >
</com.xxx.ime.sssView>
in my onInitializeInterface() implementation I inflate them as follows:
sssView sv =
(sssView) getLayoutInflater().inflate(R.layout.input, null);
TextView tv =
(TextView) getLayoutInflater().inflate(R.layout.prompt, null);
I see the sssView, but not the TextView. Any ideas why?
This isn't quite an answer, but it is a solution. Rather than having two separate views, all I needed to do was inherit my sssView from TextView rather than view. Then I inflated the one view, and placed my text where I want it using gravity.