I want to display a page numbering, like 3/10 at the bottom of my app, after swiping, the number will be 4/10.
My layout is webviews that the user ban swipe between them, i want to indicate the webview current index in a bottom bar that will be updated after each swipe.
basic layout:
<?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="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="413.3dp"
android:id="#+id/tipsWebView"
android:layout_marginBottom="0.0dp" />
//bar position
</LinearLayout>
And to display different webviews i use :
adaptor.AddFragmentView((i, v, b) =>
{
if(m_swipeCounter < m_links.Length)
{
m_swipeCounter++;
}
else
{
m_swipeCounter= 0;
}
var view = i.Inflate(Resource.Layout.tab, v, false);
var client = new WebClient();
string htmlData = client.DownloadString(m_links[m_swipeCounter]);
htmlData +="<link rel=\"stylesheet\" type=\"text/css\" href=\"cssInject.css\">";
WebView tipsWebView = view.FindViewById<WebView>(Resource.Id.tipsWebView);
tipsWebView.SetWebViewClient(new WebViewClient());
tipsWebView.Settings.JavaScriptEnabled = true;
tipsWebView.LoadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "", null);
return view;
//create pager, pager adaptor to create the right webview link
});
So the index will be based on m_swipeCounter variable.
All the best.
it's possible with a LinearLayout, using weights and stuff, but it'll run faster using a RelativeLayout
<?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"
>
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/tipsWebView"
android:layout_alignParentTop="true"
android:layout_above="#+id/bottomText"
/>
<TextView
android:id="#+id/bottomText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="0/0"
/>
</RelativeLayout>
Related
I have a list(container) with couple views I'd like to hide and show again when collapse/expand button is clicked.
No problem so far, now i want to animate hiding and showing of my nested views, i didn't want to complicate with animations and i went with default ones.
That is why i added android:animateLayoutChanges="true" to container layout, this works great when showing/expanding views, but looks terrible when hiding/collapsing views.
Is there any particular reason behind this behavior?
Code and example below:
Code
container layout
<LinearLayout
android:id="#+id/izdelek_podrponud_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:animateLayoutChanges="true"
>
</LinearLayout>
child view layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/spacing_medium"
android:paddingBottom="#dimen/spacing_medium"
android:gravity="center_vertical">
<View
android:layout_width="5dp"
android:layout_height="5dp"
android:background="#color/colorPrimary"/>
<TextView
android:id="#+id/row_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/spacing_small"
android:textSize="#dimen/font_size_60px"
android:textColor="#color/black"/>
</LinearLayout>
And this is how i handle showing and hiding;
private void showViews(LinearLayout container, int visible, boolean show) {
if (container.getChildCount() > visible) {
for (int i = visible; i < container.getChildCount(); i++) {
if (show) {
container.getChildAt(i).setVisibility(View.VISIBLE);
} else {
container.getChildAt(i).setVisibility(View.GONE);
}
}
}
}
I'm trying to create a layout that contains a ListView with a button underneath it, and also make it so that the button 'sticks' to the bottom of the ListView, even when I add or delete a row from the ListView.
With the layout code below, when I add a new row to the list, the button 'moves' to its correct location right beneath the bottom of the ListView. So that works fine.
The problem is when I delete a row from the ListView, the button stays where it is and doesn't 'move up' so that it sticks to the bottom of the ListView. When I rotate the device and it recreates the view, the button does in fact move up, but I'd like it to automatically move up when a row is deleted.
Here is the code I have now:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0" />
<ImageButton
android:id="#+id/addButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/add_button" />
</LinearLayout>
SOLUTION:
The solution was to create a small layout file that contains just the button, then add it as the footer of the ListView programatically.
Inside my fragment:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState)
{
...
View footerView = inflater.inflate(R.layout.listview_footer, null, false);
addButton = (ImageButton) footerView.findViewById(R.id.addButton);
listView.addFooterView(footerView);
data = getListViewData();
adapter = new MyListAdapter(getActivity(), data);
listView.setAdapter(adapter);
...
}
listview_footer.xml:
<?xml version="1.0" encoding="utf-8"?>
<ImageButton
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/addButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/add_button" />
The listview_footer.xml just contains the button, and no layout.
Now, when I delete a row from the ListView, the button moves up to 'stick' to the bottom of the ListView. And as before, when I add a row to the ListView, the button moves down below it.
You can add button to the footer of the listview.
View footerView = View.inflate(this, R.layout.footer, null);
listview.addFooterView(footerView);
Make an xml file for the footer view in which you will add a button as per your UI needs.
Footer.xml may look like following:
<?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"
android:padding="5dip">
<Button android:id="#+id/previous"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
</RelativeLayout>
This link may be helpful for you.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<ImageButton
android:id="#+id/addButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below= "#+id/listView"
android:src="#drawable/add_button" />
</RelativeLayout>
I had a similar situation where I wanted a button to always be in the bottom right of my list, and there would be many deletion/additions to the list. I used a relative Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/search_bg" >
<ListView
android:id="#+id/list_searchfilters"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:dividerHeight="10dp"
android:listSelector="#drawable/search_list_selector" />
<Button
android:id="#+id/add_filter_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:layout_below="#id/list_searchfilters"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp" />
</RelativeLayout>
And everytime a row would be deleted or added I would just call LayoutUtils.setListViewHeightBasedOnChildren(mSearchListView); which I had defined as :
public static void setListViewHeightBasedOnChildren(ListView listView) {
ListAdapter listAdapter = listView.getAdapter();
if (listAdapter == null) {
// pre-condition
return;
}
int totalHeight = 0;
for (int i = 0; i < listAdapter.getCount(); i++) {
View listItem = listAdapter.getView(i, null, listView);
listItem.measure(0, 0);
totalHeight += listItem.getMeasuredHeight();
}
ViewGroup.LayoutParams params = listView.getLayoutParams();
params.height = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));
listView.setLayoutParams(params);
listView.requestLayout();
}
User RelativeLayout instead. Add android:layout_alignParentBottom="true" to Image Button and android:layout_above="#+id/addButton" to listView
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/addButton"
android:layout_alignParentTop="true"/>
<ImageButton
android:id="#+id/addButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/add_button"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
I am trying to create the effect seen on this webpage for example
http://www.soyuzcoffee.com/ru/home
the part where as you scroll it appears as the main content is scrolling over the big images (images that act as dividers between sections)
I am very close but if the image is smaller that the height of the view (image does not fill the entire screen) the image scrolls up like it normally would until it hits the top. I am trying to make it look like the image is stationary and the frame is moving over it.
here is my 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" >
<com.example.pinnedscrollview.CustomScrollView
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.pinnedscrollview.PinnedImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.pinnedscrollview.PinnedImageView
android:id="#+id/image2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.pinnedscrollview.PinnedImageView
android:id="#+id/image3"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.pinnedscrollview.PinnedImageView
android:id="#+id/image4"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</LinearLayout>
</com.example.pinnedscrollview.CustomScrollView>
</RelativeLayout>
Then I have an onScrollChangedListener that runs this method everytime the scroll position changes
private void handleScroll(ViewGroup source, int top) {
ViewGroup container = (ViewGroup) source.findViewById(R.id.container);
final int count = container.getChildCount();
for (int i = 0; i < count; i++) {
View item = container.getChildAt(i);
View v = null;
if(i == 0){
v = item.findViewById(R.id.image);
}else if(i == 1){
v = item.findViewById(R.id.image2);
}else if(i == 2){
v = item.findViewById(R.id.image3);
}else if(i == 3){
v = item.findViewById(R.id.image4);
}
source.getHitRect(mTempRect);
if (v != null && v.getLocalVisibleRect(mTempRect)) {
((PinnedImageView) v).reveal(source, item.getBottom(),item.getTop());
}
}
}
Then this is the reveal method that just sets the Translation in the Y direction
public void reveal(View scroller,int parentBottom,int parentTop) {
float previousOffset = mOffsetY;
if(parentTop - scroller.getScrollY() < 0){
mOffsetY= Math.abs(parentTop - scroller.getScrollY());
}else{
mOffsetY = Math.min(0, scroller.getHeight() - (parentBottom - scroller.getScrollY()));
}
if (previousOffset != mOffsetY) {
setTranslationY(mOffsetY);
}
}
I am not sure if I need to do something with the Matrix of the image in the onDraw and redraw the bitmap or not.
Any ideas or other ways that I can accomplish something similar to that website?
I would set the desired image as a background image of a containing layout. Then set appropriate transparencies and place the scrollable view as a child of the parent layout that contains the image. You may even be able to set the background of the scrollable view itself.
You then may be able to use conditionals etc to adjust the frame of the background image and swap images based on the scroll position.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_marginTop="48dp"
android:background="#drawable/tmf_background"
>
<ImageView
android:src="#drawable/the_lineup_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="16.5dp"
android:contentDescription="#string/noDescription" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/tmf_sub_header" >
<TextView... />
<Button ... />
<Button... />
<Button ... />
<TextView ... />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/tmf_divider"
android:background="#android:color/transparent" >
</ListView>
</LinearLayout>
Here is a chunk of the xml for the free app I did for True Music Festival for it's first year.
https://play.google.com/store/apps/details?id=com.fyresite.truemusicapp
There we have a single background image that stays static while the content scrolls over it. Combining that with your scroll position listener you should be able to, at the very least, change the background image as you scroll. You could then try transforming the background image to get that scrolling effect on the site.
You may find this question to be useful Android: Moving background image while navigating through Views
I want to create an app with UI as follow..I have two webview add in screen..I want to when click to webview2,webview1 will hide and webview2 will fill fullscreen...If two webview load url is "http://www.google.com" ,it will display two webview separate but if I load an url different "http://www.google.com" as "http://www.youtube.com" it only display 1 webview youtube full screen..How I must do..Thank
Here is file XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/layout1"
android:layout_weight="1"
>
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/webview1"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/layout2"
android:layout_marginLeft="10dip"
>
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/webview2"
/>
</LinearLayout>
and here is code in Activity:
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
height = displaymetrics.heightPixels;
width = displaymetrics.widthPixels;
layout1=(LinearLayout)findViewById(R.id.layout1);
layout2=(LinearLayout)findViewById(R.id.layout2);
webview1=(WebView)findViewById(R.id.webview1);
webview1.loadUrl("http://www.google.com");
webview2=(WebView)findViewById(R.id.webview2);
webview2.loadUrl("http://www.google.com");
final LayoutParams lp=webview1.getLayoutParams();
final LayoutParams lp1=webview2.getLayoutParams();
lp.height=height;
lp1.height=height;
webview1.setLayoutParams(lp);
webview2.setLayoutParams(lp1);
webview2.setOnClickListener(new OnClickListener() {
public void onClick(View arg0) {
// TODO Auto-generated method stub
webview1.setVisibility(View.GONE);
lp.height=height;
lp.width=width;
webview2.setLayoutParams(lp);
}
});
I would recommend creating 2 custom WebViews.
WebView wv1 = findViewById(ID_WEBVIEW_1);
WebView wv2 = findViewById(ID_WEBVIEW_2);
if (wv1.getUrl() != "http://google.com" || wv2.getUrl() != "http://google.com") {
((ViewManager)entry.getParent()).removeView(entry);
}
http://developer.android.com/reference/android/view/ViewManager.html
I can't resolve my problem with scrollView and webView,
I know, that i can't put webview into scrollview but I have't idea how to jump it.
In my scrollView, I have image ( 1280 x 1300 > ) and this image must be scrolling, under image i must have webview with html content. have you any idea how should I do that?
is any another way to put html content with to some view?
this is my xml view, and I add image and webview in my activity class
<?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:id="#+id/mainLinear"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:id="#+id/scroll_journal_page"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ScrollView>
<Gallery
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#d5d5d3" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
i create view somethink like that:
protected void onPostExecute(Bitmap result) {
Animation fadeInAnimation = AnimationUtils.loadAnimation(Journal.this, R.anim.fade_in);
relativeLayout = new LinearLayout(getApplicationContext());
relativeLayout.setLayoutParams(new FrameLayout.LayoutParams(WIDTH, result.getHeight() + HEIGHT));
relativeLayout.setOrientation(1);
coverImage = new ImageView(getApplicationContext());
coverImage.setImageBitmap(result);
relativeLayout.addView(coverImage);
Integer pageNumber = Integer.valueOf(ArrayHelper.journalList.get(pageIdentity).get("pageId").toString());
File file = new File(Environment.getExternalStorageDirectory() + "/MCW/"+ pageNumber +"/content.html");
if(file.exists()) {
LinearLayout linearLayout = new LinearLayout(getApplicationContext());
linearLayout.setLayoutParams(new FrameLayout.LayoutParams(WIDTH, HEIGHT));
WebView wV = new WebView(getApplicationContext());
try {
InputStream fin = null;
int len;
fin = new BufferedInputStream(new FileInputStream(file));
byte[] buffer = new byte[fin.available()];
len = fin.read(buffer);
fin.close();
String rawText = EncodingUtils.getString(buffer, 0, len, "utf-8");
wV.loadDataWithBaseURL("", rawText, "text/html", "utf-8", null);
}catch (Exception e) {}
linearLayout.addView(wV);
relativeLayout.addView(linearLayout);
}
scrollview.addView(relativeLayout);
scrollview.setAnimation(fadeInAnimation);
isReadyToChange = true;
}
Just use a Scrollview with Height FillParent
add a linearlayout height= deviceHeight+imageHeight
use a linearlayout with height of device
add webview to this linearlayout
add image and linearlayout to this layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView android:layout_width="wrap_content"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView android:id="#+id/pho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dd1"/>
<WebView android:id="#+id/webView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
I am not sure whether this would meet your requirement or not, however
is any another way to put html content with to some view ?
You can use TextView to display HTML content
mTextView.setText(Html.fromHtml('html_content'));
Also go through Mark Murphy - HTML Tags Supported By TextView
As a side note, HTML may also be used as a string resource, as described Here