Hello i am trying to make a design of chess board, I am using GridLayout containing buttons that corresponds to blocks of the boards. But the layout is so much bigger that it is not fitting the screen, how can i reduce the button size so that the layout fits the screen.
here is the code
public class BoardActivity extends AppCompatActivity {
private GridLayout mBoard;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_board);
mBoard = (GridLayout)findViewById(R.id.board_grid);
addItems();
}
public void addItems(){
int index = 0;
Button button;
for(int i = 0; i < 8; i++){
for(int j = 0; j < 8; j++){
button = new Button(this);
button.setId(index);
button.setPadding(0,0,0,0);
button.setText(""+index);
mBoard.addView(button);
index++;
}
}
}
}
and below is the xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context="com.example.harsh.chessgame.BoardActivity">
<GridLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:rowCount="8"
android:columnCount="8"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
android:layout_marginTop="0dp"
android:id="#+id/board_grid">
</GridLayout>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/test_text"/>
</LinearLayout>
and the screenshot of the problem is below
Please help, sorry for mistakes and thanks for help.
In your code you have created Buttons programmatically and you haven't specified any width or height for them. You can add the below line in your code and the width and height will be adjusted.
button.setLayoutParams(new LinearLayout.LayoutParams(100, 100));
But for implementing a chess game, I you should better create a custom adapter for the gridview and images for black and white boxes should be inflated. Anyway for your current try this would help you.
Note: The width and height are just a random number currently given as 100.
I want to add dynamic view into a Horizontal LinearLayout. But my issue is if there is no space at Horizontal it should automatically placed on vertically.
My Image
My Expected Result
My Codes are
for (int j = 0; j < jobDet.getKeywords().length; j++) {
RelativeLayout tr_head = (RelativeLayout) getLayoutInflater().inflate(R.layout.tag_lay, null);
TextView label_date = (TextView) tr_head.findViewById(R.id.tag_name);
label_date.setText(jobDet.getKeywords()[j]);
keywordL.addView(tr_head, new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT));
}
My "tag_lay.xml"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:id="#+id/tag_name"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/round_edit_box"
android:text=" PHP "
android:gravity="center"
android:lines="1"
android:layout_marginRight="5dp"/>
</RelativeLayout>
You can not do that with single LinearLayout because it has either VERTICAL or HORIZONTAL orientation. I would suggest you to take a look at google's FlexboxLayout. Its a library which provides a layout where you can achieve similar view. You can add this library by adding below line to your app level gradle file:
compile 'com.google.android:flexbox:0.1.3'
You can change the keywordL to FlexboxLayout from LinearLayout. A sample code for container layout can be something like below:
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="wrap"/>
You can change the value of alignContent, alignItems and flexWrap according to your requirement. Although this should work because it is working for me. While adding the childs you can do something like below:
for (int j = 0; j < jobDet.getKeywords().length; j++) {
RelativeLayout tr_head = (RelativeLayout) getLayoutInflater().inflate(R.layout.tag_lay, keywordL, false );
TextView label_date = (TextView) tr_head.findViewById(R.id.tag_name);
label_date.setText(jobDet.getKeywords()[j]);
keywordL.addView(tr_head);
}
Please let me know if you have trouble implementing.
I have a gridview and make a custom adapter for fill it, user can set by spinner rows and columns of my grid. In each cell of grid I set a videoview.
So I need to set dinamically the size for each videoview in my custom Adapter in order to fill the remaining part of the screen. Following this I can do the task, I take display size and set layout for my view dividing by the number of rows and columns.
The problem is that principal layout has action-bar and a textview . So, windows size is not correct. I need to subtract action-bar and textview size.
I find a solution for know action-bar size, but when get height of my textview it is always 0.
As suggest here I should take textview size after rendering, but for render my gridview I need to know this size !!
There are other ways to do it ? It's necessary to manually calculate view size ??
this is my layout
<?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="fill_parent"
android:layout_height="fill_parent"
tools:context="it.nexera.visiamobile.ViewLiveMultiActivity"
>
<TextView
android:id="#+id/txt_grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:textColor="#454545"
android:gravity="left"
android:text="#string/sel_grid" />
<Spinner
android:id="#+id/grid_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/gridview"
android:layout_toRightOf="#+id/txt_grid" />
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchMode="columnWidth"
android:layout_below="#+id/txt_grid"
android:gravity="center"
/>
</RelativeLayout>
and this is my getView method for custom adapter :
// create a new VideoView for each item referenced by the Adapter
#SuppressLint("NewApi")
public View getView(int position, View convertView, ViewGroup parent) {
VideoView videoView;
if (convertView == null) { // if it's not recycled, initialize some attributes
videoView = new VideoView(mContext);
WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
int width=0;
int height=0;
if (android.os.Build.VERSION.SDK_INT >= 13){
Point size = new Point();
display.getSize(size);
width = size.x;
height = size.y;
}
else{
width = display.getWidth();
height = display.getHeight();
}
// Calculate ActionBar height
TypedValue tv = new TypedValue();
int actionBarHeight=0;
if (mContext.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true))
{
actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data,mContext.getResources().getDisplayMetrics());
}
TextView textview = (TextView) ((Activity) mContext).findViewById (it.nexera.visiamobile.R.id.txt_grid);
int textview_height=textview.getHeight();
height=height-actionBarHeight-textview_height;
AbsListView.LayoutParams param = new AbsListView.LayoutParams(
(width/COL_NUMBER),
(height/ROW_NUMBER));
videoView.setLayoutParams(param);
Uri video = Uri.parse(mvideoSrc[position]);
videoView.setVideoURI(video);
videoView.start();
} else {
videoView = (VideoView) convertView;
}
return videoView;
}
Your problem is that you retrieve at the beginning the size of the whole screen of your device.
So ActionBar must be substracted, but any other views if your layout doesn't take all the remaining space. So your method contradicts android modularity, for example, if your view is used in different ways depending on the size of the device.
I think what you need instead is using ViewTreeObserver, like this :
final View myView = ... // The RelativeLayout that's declared as root of your layout file
myView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
// You can here use View.getMeasuredWidth() or View.getMeasuredHeight() which correspond to the available space for the view containing your GridView and your TextView and then set your TextView's size
}
}
Edit : To make the gridview fill all remaining space you can instead use a LinearLayout, using its weight attribute :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:weightSum="1"
tools:context="it.nexera.visiamobile.ViewLiveMultiActivity"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/txt_grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:textColor="#454545"
android:gravity="left"
android:text="#string/sel_grid" />
<Spinner
android:id="#+id/grid_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<GridView
android:id="#+id/gridview"
android:layout_width="0dp"
android:layout_height="0dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:layout_weight="1"
/>
</LinearLayout>
Have you tried by adding a RelativeLayout under the Grid, and adding two hidden views on it, one in the topleft corner, and another one in the bottoright corner (1dip height/width, for example). Then, from code you can findViewById them, and call getLocationOnScreen. It's just the first dirty idea that came to my mind. That way you can get the exact size in pixels (or dpi) of the Grid.
I have a code which generate several ImageView and put it on Layout.
for (int i = 0; i < NUMBER_OF_MATCHES; i++) {
imageView = new ImageView(this);
if (random.nextBoolean()) {
imageView.setImageResource(R.drawable.match);
} else {
imageView.setImageResource(R.drawable.match_inverse);
}
gameLinearLayout.addView(imageView, 0, params);
}
But all images are in one line. I want to place it in two lines. Which layout to use and how to fix code for working correctly?
If I understand correctly, you want 2 seperate rows of images.
So we need a base LinerLayout with a vertical orientation to hold each row, while each row consists of a LinerLayout with a horizontal orientation:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<LinearLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</LinearLayout>
look here for explanation why it is happening:
Place two ImageViews programmatically
and look here for explanation to the last answer in this thread which talking about RelativeLayout Rules:
How to set RelativeLayout layout params in code not in xml
Try out as below:
//LinearLayOut Setup
LinearLayout linearLayout= new LinearLayout(this);
linearLayout.setOrientation(LinearLayout.VERTICAL);
linearLayout.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
for (int i = 0; i < NUMBER_OF_MATCHES; i++)
{
//ImageView Setup
ImageView imageView = new ImageView(this);
//setting image resource
if (random.nextBoolean()) {
imageView.setImageResource(R.drawable.match);
} else {
imageView.setImageResource(R.drawable.match_inverse);
}
//setting image position
imageView.setLayoutParams(linearLayout);
//adding view to layout
linearLayout.addView(imageView);
}
I encountered a problem when embedding a ListView inside a ScrollView, or at least that's where I guess the problem comes from. The ListView element is a fairly simple one:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/general_background_list_middle"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingRight="0dp"
android:paddingLeft="0dp">
<ImageView
android:id="#+id/chat_friends_avatar"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="8dp"
android:paddingRight="0dp"
android:paddingLeft="0dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/friends_icon_avatar_default"/>
<TextView
android:id="#+id/chat_message_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/chat_friends_avatar"
android:layout_alignParentTop="true"
android:layout_marginRight="35dp"
android:maxLines="10"
android:textSize="12dp"/>
<TextView
android:id="#+id/chat_friend_name"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
style="#style/SubText"
android:layout_toRightOf="#id/chat_friends_avatar"
android:layout_below="#id/chat_message_text" />
<TextView
android:id="#+id/chat_message_time"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:layout_marginTop="3dp"
style="#style/SubText"
android:layout_alignParentRight="true"
android:layout_below="#id/chat_message_text" />
</RelativeLayout>
However, when I embed a list of such elements in a ScrollView, in between some other elements, the rows are not fully displayed, they are clipped (see image below) if the text is wrapped. The ListView is instantiated as follows in the ScrollView:
<ListView
android:id="#+id/info_chat_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:cacheColorHint="#color/frame_background_color"
android:clickable="false"
android:divider="#null"
android:footerDividersEnabled="false"
android:focusable="false" >
</ListView>
If the height of the ListView is set to "wrap_content" only the first element is shown. That's why I'm using a method to calculate the height of the rows of the list:
private int getCommentsListHeight() {
if (mChatAdapter != null && mChatAdapter.getCount() != 0) {
if (mChatList != null) {// && mCommentsListItemHeight == 0) {
mCommentsListItemHeight = 0;
for (int i = 0; i < mChatAdapter.getCount(); i++) {
// Get view item height
View viewItem = mChatAdapter
.getView(i, new View(OnAirActivity.this), mChatList);
viewItem.measure(0, 0);
Logger.d(LOGTAG, "View " + i + " measured height = " + viewItem.getMeasuredHeight());
mCommentsListItemHeight += viewItem.getMeasuredHeight();
}
}
//return mChatAdapter.getCount() * mCommentsListItemHeight;
return mCommentsListItemHeight;
} else {
return 0;
}
}
Unfortunately, in case when the text inside the TextView is wrapped, even over several lines, the height of the row element returned by the getMeasuredHeight() method is constant. Also the getLineCount() called on the TextView inside the row element returns 1 even if the text is wrapped.
On the other hand, if this ListView is embedded in a LinearLayout, everything works fine and the full list is displayed with no clipping.
Do you have any suggestions as to what might be wrong here? I really don't like the idea of manually measuring the height of the list elements and it apparently doesn't work but why can't android nicely stretch the ListView inside the ScrollView to fit it all in there?
Clipped list:
Use this method created by https://stackoverflow.com/users/205192/dougw
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);
}
It's a BAD practice to encapsulate ListView within a ScrollView because ListView itself contains scrolling capabilities. You should implement a solution that does not contain such hierarchy of views and I hope it will do the magic :)
Here resource of main layout with ScrollView:
<ScrollView android:layout_height="fill_parent" android:layout_width="fill_parent">
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="#+id/parentLayout"/>
</ScrollView>
Here the code to insert items:
parentLayout.removeAllViews();
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
for (int i = comments.size() - 1; i >= 0; i--) {
CommentInfo comment = comments.get(i);
View view = inflater.inflate(your_resource_id, null, false);
TextView commentsContent =(TextView)view.findViewById(R.id.commentContent);
if (commentsContent != null) {
String data = String.format("%s (by %s, %s)", comment.getCommentText(), comment.getUserName(),
commentsContent.setTextSize(st.getTextSize());
commentsContent.setText(data);
}
parentLayout.addView(view, 0);
}
I had the same problem in my project.You need to create simple LinearLayout inside ScrollView. After that you need create new View with your listview item xml using LayoutInflater. After creation put all data in new View and add to LinearLayout as child view:
linearLayot.addView(newView, position_you_need).
Hope it would help you!
I took the recommendation of not using a ListView element inside a ScrollView to heart and decided to use a slightly brute force method to achieve what I need. Since there is a constant number of up to five list rows that need to be displayed I removed the ListView instantiation from the xml file and replaced it with five instances of rows:
<include android:id="#+id/info_comment_1" layout="#layout/chat_single_message" />
<include android:id="#+id/info_comment_2" layout="#layout/chat_single_message" />
<include android:id="#+id/info_comment_3" layout="#layout/chat_single_message" />
<include android:id="#+id/info_comment_4" layout="#layout/chat_single_message" />
<include android:id="#+id/info_comment_5" layout="#layout/chat_single_message" />
In the Activity class I declare five placeholders for these views:
private RelativeLayout mChatMessages[] = new RelativeLayout[COMMENTS_NUMBER];
and initialize them with:
mChatMessages[0] = (RelativeLayout) mMoreInfoLayout.findViewById(R.id.info_comment_1);
mChatMessages[1] = (RelativeLayout) mMoreInfoLayout.findViewById(R.id.info_comment_2);
mChatMessages[2] = (RelativeLayout) mMoreInfoLayout.findViewById(R.id.info_comment_3);
mChatMessages[3] = (RelativeLayout) mMoreInfoLayout.findViewById(R.id.info_comment_4);
mChatMessages[4] = (RelativeLayout) mMoreInfoLayout.findViewById(R.id.info_comment_5);
Then, whenever a new message is received I use the ChatAdapter (the same I used for the ListView previously) and call its getView() method:
protected void updateChatMessages() {
int msgCount = mChatAdapter.getCount();
for (int i = 0; i < COMMENTS_NUMBER; i++) {
if (msgCount <= i) {
mChatMessages[i].setVisibility(View.GONE);
} else {
mChatMessages[i] = (RelativeLayout) mChatAdapter.getView(i, mChatMessages[i], null);
mChatMessages[i].setVisibility(View.VISIBLE);
}
}
}
I don't inflate the pariculat views ever again since the only thing that changes is the content of each row, not the layout. This means there is no performance penalty here.
This is basically a manual implementation of a ListView with a limited maximum number of elements. This time, however, ScrollView is able to fit them nicely and nothing gets clipped.
For a dynamic number of rows the approach suggested by Layko could be employed with the views being instantiated programatically and added to the LinearLayout inside the ScrollView.
I can see the ListView is inside a ViewPager; one other simple approach to resolving this issue is to add
app:layout_behavior="#string/appbar_scrolling_view_behavior" to the ViewPager in your layout xml as seen below.
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
To prevent the same behavior at the bottom of the list, you can also add android:layout_marginBottom="?attr/actionBarSize" to the ViewPager like so
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_marginBottom="?attr/actionBarSize"/>
This is coming late, but I hope it helps any other person.
try it..
after create all view add bellow line for ScrollView location on screen (x,y)
ScrollView scrollView = (ScrollView)findViewById(R.id.scrollView);
scrollView.smoothScrollTo(0,0);// top location zero index
I had a similar problem. I have a
RelativeLayout
listView
includeLayout
where I include some bottom nav beneath the listView with this
<include
android:id="#+id/includeLayout"
layout="#layout/bottom_nav_bar"
and my listView was clipped - not taking the full height available between the header and bottom nav. I tried various xml settings suggested in this and other threads, but what worked for me was to add
android:layout_alignBottom="#+id/includeLayout"
to my listView. That seemed to pull the listView down to the top of the bottom nav, so that the listView is now using the full available height (and it scrolls as needed).
This works for me
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/tv_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="17sp"
android:text="#string/text_list_devices" />
<ListView
android:id="#+id/lv_paired"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:cacheColorHint="#00000000"
android:layout_above="#+id/signup_t"
android:layout_below="#id/tv_status"
/>
<Button
android:id="#+id/signup_t"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textColor="#android:color/white"
android:layout_alignParentBottom="true"
android:text="Print All Records"
android:typeface="sans"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
android:textSize="24sp"
android:background="#drawable/selector_for_button"
android:textStyle="bold" />
</RelativeLayout>
This is BAD practice. But there are some situations we can not avoid using that. For example dynamic e-commerce layouts we may put multiple lists or recycle views but you don't want to scroll inside a single item height (if accidentally wanted!!). I faced this kind of problem. I fixed using a simple way. I don't tell this is the correct way but it may help some.
!! I used to recycle the view.
(01) Create an Interface to return view height.
public interface AfterViewLoadListener {
void onViewHeightMeasured(int height, String mode);
}
(02) implement with your activity
public class *Activity extends AppCompatActivity implements AfterViewLoadListener{
/** your codes **/
final SimpleListRecycleAdapter order_adapter = new SimpleListRecycleAdapter(this,"ORDER");
}
#Override
public void onViewHeightMeasured(int height, String mode) {
if(mode.equals("ORDER") && height > 0){
recycleView.setMinimumHeight(height);
}
}
(03) inside the recycle view custom adapter
AfterViewLoadListener viewLoadListener = null;
public SimpleListRecycleAdapter(AfterViewLoadListener listener, String mode) {
if(listener instanceof AfterViewLoadListener){
viewLoadListener = listener;
}
this.mode = mode;
}
(04) override the onViewAttachedToWindow method
#Override
public void onViewAttachedToWindow(#NonNull SimpleListViewHolder holder) {
super.onViewAttachedToWindow(holder);
View view = holder.itemView;
view.measure(0, 0);
this.viewMinHeight = view.getMeasuredHeight();
if(!firstFlag){
firstFlag = true;
viewLoadListener.onViewHeightMeasured(this.viewMinHeight*filtered.length(),mode);
}
}
(05) That's it. It worked for me.