Horizontal scrollview listing multiple image side by side - android

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>

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. :)

Use Glide to Show Large Vector Drawable on Lollipop and above Devices

I'm able to use BumpTech Glide to show a large Vector Drawable on pre-lollipop devices but unable to do so on lollipop and above...The activity starts but the Imageview is not shown.
Here is the layout file
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF5722"
tools:context=".Main.SplashScreen2.SplashScreen2">
<ImageView
android:id="#+id/imageViewSplashScreen2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_of_ahilya_ghat_river_bank_of_varanasi" />
</FrameLayout>
here is the java file
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.example.raviseth.searchviewtrials.Main.MainActivityListViewPage.activities.MainActivity;
import com.example.raviseth.searchviewtrials.R;
import uk.co.senab.photoview.PhotoViewAttacher;
public class SplashScreen2 extends AppCompatActivity {
FloatingActionButton fabSplashScreen2;
ImageView imageViewSpashScreen2;
PhotoViewAttacher photoViewAttacher = null;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.splashsreen2);
imageViewSpashScreen2 = (ImageView) findViewById(R.id.imageViewSplashScreen2);
if (imageViewSpashScreen2 != null) {
photoViewAttacher = new PhotoViewAttacher(imageViewSpashScreen2);
Glide.with(getApplicationContext())
.load(R.drawable.ghat)
.into(imageViewSpashScreen2);
photoViewAttacher.update();
}
}
}

is there a way to dynamicaly add a widget on top of another widget

i'm trying to create a widget called DecoView dynamicaly every time i press a button.
if i just put two deco views in the XML i can see them both and they both look fine on ontop of the other.
but when i try to add it dynamicly in the code, i only create the first one,
and all the rest just aren't get created
what am i missing here ?
can someone help me with this ?
my mainActivity.java
package com.example.shay_v.dynamicdecoviewexample;
import android.graphics.Color;
import android.graphics.PointF;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;
import com.hookedonplay.decoviewlib.DecoView;
import com.hookedonplay.decoviewlib.charts.SeriesItem;
import com.hookedonplay.decoviewlib.events.DecoEvent;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
Button mainMenuButton;
int widgetInteger = 1;
LinearLayout ll;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//pointing to display
mainMenuButton = (Button) findViewById(R.id.button);
mainMenuButton.setOnClickListener(this);
//points to the linear layout in the xml
ll = (LinearLayout)findViewById(R.id.mainMenu_mainLayout);
}
private void createDecoViewWidget (int i) {
//adds params to the linear layout
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
//deco view widget
DecoView decoViewWidget = new DecoView(this);
//adding to view
decoViewWidget.setId(i);
ll.addView(decoViewWidget, params);
//decoViewWidget.configureAngles((int) (Math.random() * 360) + 1, (int) (Math.random() * 100));
//Create data series track
SeriesItem seriesItem = new SeriesItem.Builder(Color.argb(255, (int) (Math.random()*255), (int) (Math.random()*255), (int) (Math.random()*255)))
//third controller is end point
.setRange(0, 100, 0)
.setLineWidth(60f)
.setInset(new PointF(120f, 120f))
.build();
int series1Index = decoViewWidget.addSeries(seriesItem);
decoViewWidget.addEvent(new DecoEvent.Builder((float) (Math.random() * 100)).setIndex(series1Index).setDelay(1000).build());
}
//button listener
#Override
public void onClick(View v) {
createDecoViewWidget (widgetInteger);
widgetInteger++;
}
}
my activity_main.xml >
<?xml version="1.0" encoding="utf-8"?>
<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"
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="com.example.shay_v.dynamicdecoviewexample.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<LinearLayout
android:orientation="vertical"
android:layout_width="350dp"
android:layout_height="350dp"
android:layout_centerVertical="true"
android:id="#+id/mainMenu_mainLayout"
android:layout_centerHorizontal="true"></LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
anyone ?
When you are creating the Views they are being added into a LinearLayout. This type of layout will position the views one after the other, so the second view is being drawn off the visible area of the screen.
As you want all views to be drawn on top of each other you should use a RelativeLayout.

Android Studio, adding multiple images on click

JAVA:
package com.example.scott.testapplication;
import android.app.Activity;
import android.media.Image;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
public class HomeScreen extends Activity {
RelativeLayout Backround;
Button InitButton;
ImageView image;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home_screen);
Backround = (RelativeLayout) findViewById(R.id.Backround);
InitButton = (Button) findViewById(R.id.InitButton);
image = (ImageView) findViewById(R.id.image);
InitButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
/*insert code here*/
}
});
}
}
In order to insert the image, i'm thinking that I need to use a command like ImageView image = new (image), and then use another command to draw it on the display. I dont know which commands I should use.
XML:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/Backround"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<ImageView
android:layout_width ="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image"
android:scaleType="fitXY"
android:src="#drawable/DESERT2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Initiate"
android:id="#+id/InitButton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_vertical" />
</RelativeLayout>
I would like to create the image on the event of the click of a button, I also created the ImageView in the xml file. Not sure if I should change something there.
you can use
image.setImageResource(R.drawable.yourDesiredImageName);

Android gridview for creating puzzle in multiple screens

I have a problem with making UI for a puzzle in android that support multiple screens!
Desired puzzle is something like this:
I used GridView and set image in each cell.(Each cell has a distinct image)
I don't know how set dimensions of Gridview and it's cells (Row Height/Col Width) without using screen resolution! :(
images have 1:1 aspect ratio and must stretch in cells.
What I did:
row_grid.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="300dp"
android:layout_height="100dp"
android:padding="0dp" >
<ImageView
android:id="#+id/item_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="fitXY"
android:src="#drawable/icon2" >
</ImageView>
</FrameLayout>
Activity_main.xml
<FrameLayout 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"
android:background="#drawable/katy">
<GridView
android:id="#+id/gridView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:horizontalSpacing="0dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="0dp" >
</GridView>
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="TextView"
android:textSize="30sp" />
</FrameLayout>
MainActivity.java
package com.example.test;
import java.util.ArrayList;
import android.R.dimen;
import android.R.integer;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.view.Display;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.GridView;
import android.widget.TextView;
public class MainActivity extends Activity {
GridView gridView;
ArrayList<Item> gridArray = new ArrayList<Item>();
CustomGridViewAdapter customGridAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
//Remove App TitleBar
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView txt = (TextView) findViewById(R.id.textView1);
txt.setText(Integer.toString(width)+" x "+Integer.toString(height));
Bitmap block = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon1);
Bitmap block2 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon2);
Bitmap block3 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon3);
Bitmap block4 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon4);
gridArray.add(new Item(block));
gridArray.add(new Item(block2));
gridArray.add(new Item(block3));
gridArray.add(new Item(block4));
gridView = (GridView) findViewById(R.id.gridView1);
ViewGroup.LayoutParams layoutParams = gridView.getLayoutParams();
layoutParams.height = 300; //this is in pixels
layoutParams.width = 300; //this is in pixels
gridView.setLayoutParams(layoutParams);
customGridAdapter = new CustomGridViewAdapter(this, R.layout.row_grid, gridArray);
gridView.setAdapter(customGridAdapter);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Result:
How can I make it independent of screen size and resolution?! :(
Edit:
I tried to change width of GridView dynamically, but fatal exception occured !
package com.example.test;
import java.util.ArrayList;
import android.R.dimen;
import android.R.integer;
import android.os.Bundle;
import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.view.Display;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends Activity {
GridView gridView;
ArrayList<Item> gridArray = new ArrayList<Item>();
CustomGridViewAdapter customGridAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
//Remove App TitleBar
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Get Screen Dimensions
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
final TextView txt = (TextView) findViewById(R.id.textView1);
txt.setText(Integer.toString(width)+" x "+Integer.toString(height));
Bitmap block = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon1);
Bitmap block2 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon2);
Bitmap block3 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon3);
Bitmap block4 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon4);
gridArray.add(new Item(block));
gridArray.add(new Item(block2));
gridArray.add(new Item(block3));
gridArray.add(new Item(block4));
gridView = (GridView) findViewById(R.id.gridView1);
//###### Change Height of cells #####//
LinearLayout rg = (LinearLayout) findViewById(R.layout.row_grid);
ViewGroup.LayoutParams rgparam = rg.getLayoutParams();
rgparam.height = rgparam.width;
rg.setLayoutParams(rgparam);
customGridAdapter = new CustomGridViewAdapter(this, R.layout.row_grid, gridArray);
gridView.setAdapter(customGridAdapter);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
also I tested this:
customGridAdapter = new CustomGridViewAdapter(this, rg.getId(), gridArray);
Have a look at Relative Layout. I believe it will solve your problem. You specify where the image lies and what it is adjacent to. So in the above image, box 2 would be to the right of box 1 and aligned to the top of the parent view. Box 1 would be aligned to the top and the left of the parent.
Try with below code and check if its working or not?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="0dp" >
<ImageView
android:id="#+id/item_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
-------------------------------
<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"
android:background="#drawable/background" >
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:horizontalSpacing="0dp"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="0dp" >
</GridView>
</RelativeLayout>

Categories

Resources