how to center webview contents in android - android

SCREENSHOT:
https://camo.githubusercontent.com/7c4b76724b703bcded8aafbba9c012542726462c/687474703a2f2f692e696d6775722e636f6d2f716375554d664a2e706e6725374275726c253744
Hi, is there a way I can center the text and the image of the articles?
this is the layout file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ptr="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text=""
android:textSize="20sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
</RelativeLayout>
<ScrollView
android:id="#+id/sv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/header" >
<LinearLayout
android:id="#+id/lin"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<WebView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:scrollbarStyle="insideOverlay"
android:text="#string/desc" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
Java Code
package com.iven.lfflfeedreader.mainact;
import com.iven.lfflfeedreader.R;
import com.iven.lfflfeedreader.domparser.RSSFeed;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebSettings.LayoutAlgorithm;
import android.widget.ScrollView;
import android.widget.TextView;
public class ArticleFragment extends Fragment {
private int fPos;
RSSFeed fFeed;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
fFeed = (RSSFeed) getArguments().getSerializable("feed");
fPos = getArguments().getInt("pos");
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater
.inflate(R.layout.article_fragment, container, false);
TextView title = (TextView) view.findViewById(R.id.title);
WebView wb = (WebView) view.findViewById(R.id.desc);
ScrollView sv = (ScrollView) view.findViewById(R.id.sv);
sv.setVerticalFadingEdgeEnabled(true);
// Set webview settings
WebSettings ws = wb.getSettings();
ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// Set the views
title.setText(fFeed.getItem(fPos).getTitle());
wb.loadData(fFeed.getItem(fPos).getDescription(), "text/html; charset=utf-8", "UTF-8");
return view;
}
}
the source code of the app is available here
thanks
https://github.com/enricocid/lffl-feed-reader

Try,
wb.getSettings().setDefaultZoom(ZoomDensity.FAR);
This will zoom out and fit the image to your screen and show it in center.
Note: Because the WebView is used to render the scripts and show it in a view, so as long as the source of the web url isn't aligned in center you can't change it. However you can parse the web content and then show them in any customizable way you want.
So far the the github project you are talking about also used the same approach. A html parser called Jsoup was used to parse the html contents and showing in a view.

I've solved my problem by adding
// set image scale to fit screen if larger than screen width
DisplayMetrics displayMetrics = new DisplayMetrics();
WindowManager wm = (WindowManager) view.getContext().getSystemService(Context.WINDOW_SERVICE);
wm.getDefaultDisplay().getMetrics(displayMetrics);
int screenWidth = displayMetrics.widthPixels; // minus some padding values if you have any left/right padding
Drawable drawable = getResources().getDrawable(R.id.image);
int wi = drawable.getIntrinsicWidth();
double scale = (wi>screenWidth) ? (double)screenWidth/wi : 1.0;
wb.setInitialScale((int) (scale*340));'code'
now the image is at the center below the abstract and on top of the article entry...:) gonna push changes later on git. thanks anyway:)

Related

How to fit all elements in gridview in the whole display?

I am new in android and want to create a gridview with some elements (element with Text and Image) and was guided by this link https://www.viralandroid.com/2016/04/android-gridview-with-image-and-text.html.
I have a layout for the activity screen:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/home_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<GridView
android:id="#+id/grid_view_image_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="110dp"
android:numColumns="3"/>
</LinearLayout>
the layout for the gridview with text and image:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/android_custom_gridview_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/android_gridview_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="15dp" />
<TextView
android:id="#+id/android_gridview_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textSize="25sp" />
</LinearLayout>
This is my code:
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
public class HomeScreenActivity extends AppCompatActivity {
private GridView androidGridView;
private String[] gridViewString = {
"Anlagenübersicht", "Instandhaltungsaufträge", "Handlungsleitfaden",
"Wiki", "Historie", "Fehlerdatenbank",
"Wartungsprotokoll", "Ersatzteile", "Werkzeugkasten",
"Remotezugriff", "Personal", "Über uns"
} ;
private int[] gridViewImageId = {
R.drawable.icons8_roboter_48, R.drawable.icons8_bestellung_48, R.drawable.icons8_aufgabenliste_48,
R.drawable.icons8_doktorhut_48, R.drawable.icons8_vergangenheit_48, R.drawable.icons8_datenbank_40,
R.drawable.icons8_wartung_48, R.drawable.icons8_ersetzen_48, R.drawable.icons8_werkzeugkasten_48,
R.drawable.icons8_assistent_48, R.drawable.icons8_gruppe_vordergrund_ausgewaehlte_48, R.drawable.icons8_ueber_48,
};
#Override
protected void onCreate(Bundle savedInstanceState) {
setTheme(R.style.AppTheme);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home_screen);
CustomGridViewActivity adapterViewAndroid = new CustomGridViewActivity(HomeScreenActivity.this, gridViewString, gridViewImageId);
androidGridView= (GridView) findViewById(R.id.grid_view_image_text);
androidGridView.setAdapter(adapterViewAndroid);
androidGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view,
int i, long id) {
Toast.makeText(HomeScreenActivity.this, "GridView Item: " + gridViewString[+i], Toast.LENGTH_LONG).show();
}
});
}
}
But my Output is:
But I want that all elements will fill the display in height and with, that there will be no space like you can see here:
Finally, I found a solution from this link:
android How to stretch rows in the gridview to fill screen?
I had to set some attributes for my activity class, and use this:
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int width = metrics.widthPixels;
int height = metrics.heightPixels;
to determine the height and width.
After that, I had to set the Minimum with and height for my View.
For more informations, I recommend you to check the link above. :)

Horizontal scrollview indicator android

I am using Horizontal Scrollview in android to show buttons in my app (i need to use horizontal scrollview.)
By calling some method of srollview, i want to force it to change imageView's background color(or drawable).
here is my sample code.
activity_main (i've set scrollbars="none")
<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=".MainActivity">
<HorizontalScrollView
android:scrollbars="none"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/buttonContainer"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
</HorizontalScrollView>
<LinearLayout
android:id="#+id/indicatorContainer"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</RelativeLayout>
MainActivity
import android.graphics.Point;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Display;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
LinearLayout buttonContainer, indicatorContainer;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/* getting display size */
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
/* set button size */
int buttonWidthSize = (int) (width / 2.5);
int buttonHeightSize = (int) (height / 5.0);
buttonContainer = (LinearLayout)findViewById(R.id.buttonContainer);
indicatorContainer = (LinearLayout)findViewById(R.id.indicatorContainer);
for(int i = 1; i <= 10 ; i++){
Button button = new Button(this);
button.setText("button"+i);
button.setWidth(buttonWidthSize);
button.setHeight(buttonHeightSize);
buttonContainer.addView(button, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
}
// how it can be solved.
}
so that,
How can I set indicator(they will just imageviews with canvas). is this possible?
thanks

Horizontal scrollview listing multiple image side by side

I am using horizontal scroll view to list images . But what is happening is multiple images are showing side by side. what I want is to show one image taking full screen width and on scroll show next image
my code is as follows
page4.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:id="#+id/horizontal_scroll"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:id="#+id/linear"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:scaleType="fitCenter">
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
page4.java:
package com.example.namrathasrinivas.karnatakatemples;
import android.app.ListActivity;
import android.graphics.BitmapFactory;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.text.method.ScrollingMovementMethod;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import android.content.Intent;
/**
* Created by namrathasrinivas on 23/07/15.
*/
public class page4 extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.page4);
int[] drawables = {R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5,R.drawable.img6};
LinearLayout layout = (LinearLayout) findViewById(R.id.linear);
for (int i = 0; i < 6; i++) {
ImageView imageView = new ImageView(this);
imageView.setId(i);
imageView.setPadding(5, 5, 5, 5);
imageView.setImageBitmap(BitmapFactory.decodeResource(
getResources(), drawables[i]));
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
layout.addView(imageView);
}
}
}
ViewPager is what you're looking for.
I suggest you used RecyclerView or Viewpager
Articles Collection for RecyclerView
add LinearLayout property
android:baselineAligned="true"
If you really want image to be placed in Horizontal scroll view instead of ViewPagers then set the minimum_width property to your ImageView like below
imageView.setMinimumWidth(getScreenWidth());
private int getScreenWidth() {
WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point size = new Point();
display.getSize(size);
return size.x;
}
Instead of horizontal scroll view you can use recyclerview as horizontal view is easy for use.
Implementation is like:
mRecyclerViewImages.setLayoutManager(new LinearLayoutManager(getContext(),LinearLayoutManager.HORIZONTAL,true));
Set below view to adapter (take singal image view like):
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:background="#color/cpb_white"
app:cardElevation="5dp"
app:cardUseCompatPadding="true">
<ImageView
android:id="#+id/test_image"
android:layout_width="#dimen/profile_image_size"
android:layout_height="#dimen/profile_image_size"
android:layout_margin="2dp"
android:background="#DBDBDB"
android:scaleType="center"
android:src="#drawable/camera" />
</android.support.v7.widget.CardView>

getMeasuredHeight() and width returning 0 after measure()

I'm really confused with this whole measuring thing that android does for layouts. Basically, I want to get the actual computed height and width of a view when it has been laid out BEFORE it gets laid out. I need to get the computed height and width because I have a hidden LinearLayout that I want to animate when opening using viewpropertyanimator. I need to supply the target width (which is the computed width) to the animator before it animates it. The width of this layout is dynamic because it relies on its android:weight parameter for the width, so I can't give a static value.
Here's my activity class:
package com.example.testproject;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
public class TestActivity extends Activity
{
private LinearLayout gmailListContainer, yahooMailListContainer, windowsLiveListContainer;
private LinearLayout emailMessageContainer;
private Display display;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
this.setContentView(R.layout.activity_test);
gmailListContainer = (LinearLayout) this.findViewById(R.id.email_activity_gmail_layout);
yahooMailListContainer = (LinearLayout) this.findViewById(R.id.email_activity_yahoo_mail_layout);
windowsLiveListContainer = (LinearLayout) this.findViewById(R.id.email_activity_windows_live_layout);
emailMessageContainer = (LinearLayout) this.findViewById(R.id.email_activity_email_content_layout);
gmailListContainer.setBackgroundColor(Color.CYAN);
yahooMailListContainer.setBackgroundColor(Color.MAGENTA);
windowsLiveListContainer.setBackgroundColor(Color.GREEN);
emailMessageContainer.setBackgroundColor(Color.RED);
display = getWindowManager().getDefaultDisplay();
setMeasuredDimensions();
}
private void setMeasuredDimensions()
{
View v = this.findViewById(R.id.email_activity_layout);
v.measure(display.getWidth(), display.getHeight());
Log.v("EmailActivity", v.getMeasuredHeight() + ", " +v.getMeasuredWidth());
}
private void setWeight(LinearLayout container, float weight)
{
LinearLayout.LayoutParams params = (LayoutParams) container.getLayoutParams();
params.weight = weight;
container.setLayoutParams(params);
container.setVisibility(View.VISIBLE);
}
}
Here's the relevant layout resource:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/email_activity_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:id="#+id/email_activity_gmail_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<LinearLayout
android:id="#+id/email_activity_yahoo_mail_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<LinearLayout
android:id="#+id/email_activity_windows_live_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<LinearLayout
android:id="#+id/email_activity_email_content_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="0"
/>
Add the below method to your Activity and call your method from it.
#Override
public void onWindowFocusChanged(boolean hasFocus) {
setMeasuredDimensions();
super.onWindowFocusChanged(hasFocus);
}
In onCreate() you can't assure that your view is drawn. It might take some time. But this above method gets called only when the view is drawn completely. So YOu should be able to get the width and height exactly here.

Android: ImageView that extends onTouchEvent for Drag

I wrote a simple cards game where the user plays his card
doing TAP on one of the three imageviews (the cards)
I'd like to add the possibility of playing the card
by dragging the ImageView on the "table"
(the table is another layout or simply another part of the screen).
I tryed to use the techinc indicated at
http://blahti.wordpress.com/2011/01/17/moving-views-part-2/
but as it uses AbsoluteLayout, it introduces a lot of limitations
on my current layout, more it requires adjustments depending
to the device screen resolution where the app runs.
I'd like to avoid this continue using
-if possibile- the RelativeLayout.
Maybe the starting point is extenting the ImageView
adding the onTouch support but i couldn't reproduce
the wished effect (drag)
Any idea or suggestion or sample code?
Thanks!
Just to give an idea, this is the draft of layout.
The 3 cards below should be moved via drag.
<?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"
>
<RelativeLayout android:id="#+id/player_cards_layout"
android:layout_width="fill_parent" android:layout_height="150dip"
android:gravity="center_horizontal"
android:background="#55335588"
android:layout_above="#+id/player_cards_layout"
>
<ImageView android:id="#+id/img_pc_card_1"
android:layout_width="100dip" android:layout_height="150dip"
android:src="#drawable/icon"
/>
</RelativeLayout>
<RelativeLayout android:id="#+id/player_cards_layout"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:background="#336699"
>
<ImageView android:id="#+id/img_user_card_1"
android:layout_width="100dip" android:layout_height="150dip"
android:src="#drawable/icon"
/>
<ImageView android:id="#+id/img_user_card_2"
android:layout_width="100dip" android:layout_height="150dip"
android:src="#drawable/icon"
android:layout_toRightOf="#+id/img_user_card_1"
/>
<ImageView android:id="#+id/img_user_card_3"
android:layout_width="100dip" android:layout_height="150dip"
android:src="#drawable/icon"
android:layout_toRightOf="#+id/img_user_card_2"
/>
</RelativeLayout>
</RelativeLayout>
here is nice example from link. i hope this will help you.
res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:gravity="center" android:id="#+id/LinearLayout01">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/btn"
android:text="Drag Me"></Button>
</FrameLayout>
src/com/beanie/example/Home.java
package com.beanie.example;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.FrameLayout.LayoutParams;
public class Home extends Activity implements OnTouchListener {
private final static int START_DRAGGING = 0;
private final static int STOP_DRAGGING = 1;
private Button btn;
private FrameLayout layout;
private int status;
private LayoutParams params;
private ImageView image;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
layout = (FrameLayout) findViewById(R.id.LinearLayout01);
// layout.setOnTouchListener(this);
btn = (Button) findViewById(R.id.btn);
btn.setDrawingCacheEnabled(true);
btn.setOnTouchListener(this);
params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
}
#Override
public boolean onTouch(View view, MotionEvent me) {
if (me.getAction() == MotionEvent.ACTION_DOWN) {
status = START_DRAGGING;
image = new ImageView(this);
image.setImageBitmap(btn.getDrawingCache());
layout.addView(image, params);
}
if (me.getAction() == MotionEvent.ACTION_UP) {
status = STOP_DRAGGING;
Log.i("Drag", "Stopped Dragging");
} else if (me.getAction() == MotionEvent.ACTION_MOVE) {
if (status == START_DRAGGING) {
System.out.println("Dragging");
image.setPadding((int) me.getRawX(), (int) me.getRawY(), 0, 0);
image.invalidate();
}
}
return false;
}
}

Categories

Resources