Android GridLayout placement issue - android

I'm currently using a GridLayout to get a view that looks something like this:
I'm trying to create this layout by defining the following layout xml:
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="5"
android:rowCount="2" >
<LinearLayout
android:id="#+id/banner"
android:layout_row="0"
android:layout_columnSpan="5"
android:orientation="horizontal" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_row="1"
android:layout_columnSpan="2" />
<RelativeLayout android:id="#+id/previewpane"
android:layout_row="1"
android:layout_column="2"
android:layout_columnSpan="3"/>
</android.support.v7.widget.GridLayout>
While this compiles and runs without crashing, the ViewPager is taking up all the screen space for some reason. Why would this happen (seeing it should only occupy 2 columns out of 5 and only the bottom row) and how can I change this layout to properly display like shown in the illustration?

I didn't manage to get it right using the GridLayout so in the end I decided to just use a RelativeLayout/LinearLayout construction instead. (Using a RelativeLayout as the root view to prevent having to use nested weights)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#color/default_bg_color">
<LinearLayout android:id="#+id/banner"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_below="#id/banner"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<RelativeLayout android:id="#+id/previewPane"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"/>
</LinearLayout>
</RelativeLayout>

Related

scrollbar in constraint layout not working

I have tried the below code but it doesn't scroll when I rotate my application it will cover most of screen but I need to scroll there it doesn't working there. Is it right way to use scroll view in constraint layout. I have seen this type of example. There it was in working condition I have tried the below code but it doesn't scroll when I rotate my application it will cover most of screen but I need to scroll there it doesn't working there. Is it right way to use scroll view in constraint layout. I have seen this type of example.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
tools:context=".MainActivity">
<include layout="#layout/tool_bar" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="611dp"
android:layout_marginTop="70dp"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/main_bmi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/bmi" />
<ImageView
android:id="#+id/bmr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/bmr" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/ideal_weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ideal" />
<ImageView
android:id="#+id/water_intake"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/water" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/calorie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/calories" />
<ImageView
android:id="#+id/nutrition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/nutrition" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
follow this layer it might work.put appbarlayout inside ConstraintLayout layout
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--add your scrollview or nestedscrollview here-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
Your ScrollView height is fixed to 611dp.
If you use a fixed size, then the content should be greater than 611dp to be able to scroll.
You should use
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
....>

Issue creating a ListView menu in Xamarin/Android

I'm having trouble creating a simple menu of links in Xamarin. The desired layout is an image header, the list of links, and a button at the bottom to close the menu. I'm using a ListView to display the links.
My layout displays as desired in the Visual Studio Designer, but when run on the emulator or an actual Android device, the ListView takes up the entire screen and the header and footer aren't visible. I've tried everything I can think of, including several different layouts, and always get the same result.
My XAML is below. Help?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linearLayout1">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/topLayout">
<Toolbar
android:minHeight="?android:attr/actionBarSize"
android:background="?android:attr/colorPrimary"
android:minWidth="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar1">
<ImageView
android:src="#drawable/logo1"
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="1.0dp"
android:layout_gravity="center" />
</Toolbar>
</LinearLayout>
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/android.r."
android:background="#ffffffff" />
<LinearLayout
android:orientation="vertical"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2">
<Toolbar
android:minHeight="?android:attr/actionBarSize"
android:background="#ffff8902"
android:minWidth="25px"
android:layout_width="match_parent"
android:layout_height="35dp"
android:id="#+id/toolbar3"
android:layout_alignParentBottom="true"
android:layout_marginTop="0.0dp">
<Button
android:text="^"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/menuCloser"
android:layout_gravity="center"
android:layout_marginLeft="0.0dp"
android:layout_marginRight="0.0dp"
android:textSize="40dp"
android:background="?android:attr/selectableItemBackground"
android:ems="1"
android:onClick="OnCloseMenu"
android:shadowColor="#android:color/transparent"
android:textColor="#ffffffff" />
</Toolbar>
</LinearLayout>
</LinearLayout>
In your list if you have more items then you have to scroll to get to the bottom to see the footer. Visual studio designer will show you the sample list with less items so that you can see header and footer. If you want footer to be placed in a fixed i.e you don't want to scroll then use relative layout.
Just replace your listview tag by
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/android.r."
android:background="#ffffffff" />
1> Issue was in your android:layout_height="0dp" it should be 0dp if you are using weight.
2> My suggestion is to use RecyclerView of android as you will face many inconsistency in ListView
3> Your code need to be cleanup as i think you are new to android
So as suggestion i just removed some unused properties,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linearLayout1">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/topLayout">
<Toolbar
android:background="?android:attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/toolbar1">
<ImageView
android:src="#drawable/ic_back"
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</Toolbar>
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/android.r."
android:background="#ffffffff" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2">
<Toolbar
android:minHeight="?android:attr/actionBarSize"
android:background="#ffff8902"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar3"
>
<Button
android:text="^"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/menuCloser"
android:layout_gravity="center"
android:layout_marginLeft="0.0dp"
android:layout_marginRight="0.0dp"
android:textSize="40dp"
android:background="?android:attr/selectableItemBackground"
android:ems="1"
android:onClick="OnCloseMenu"
android:shadowColor="#android:color/transparent"
android:textColor="#ffffffff" />
</Toolbar>
</LinearLayout>
</LinearLayout>

Android - Layout doesn't appear on the device as it appears on the preview

This is the code of the XML file of the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context="com.example.barda.wikirace.MainActivity"
android:background="#drawable/backgroundmain"
android:orientation="vertical"
android:weightSum="1"
android:id="#+id/activity_main"
>
<ImageView
android:id="#+id/wikiRaceTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/transparent"
app:srcCompat="#drawable/wikiracetop" />
<TextView
android:id="#+id/emptyView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/twoPlayersBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/twoplayersbutton"
/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/singlePlayerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/playbutton"
android:onClick="startSinglePlayerMenuActivity"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
</LinearLayout>
</LinearLayout>
This is how it looks in the preview:
And this is how it appears on the device (LG G4):
What can cause the problem?
As you can see, I want the buttons to be on the right color for them.
why don't just use the constraint layout?
if you want to do it in the way you're doing it, you will have to setup the width with a fixed value or match_parent why? because when you say wrap_content and the image is big is going to be over the other views as is happening also you can setup a android:layout_weight for the button if you want to use the weight as "control" for your layout, be coherent with the method that you use to adapt the views.

Distribute grids evenly to fit screen

i am trying to get three rows in my recyclerview to fit the screen perfectly. In other words distributed evenly with no scrolling. I have a toolbar and a recyclerview with two columns/three rows. As of now i have just set the items height to fit the screen close enough but there has to be a better way?
activity_main.xml
<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">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_below="#id/toolbar"
android:background="#CCCC"
android:layout_width= "match_parent"
android:layout_height = "match_parent"/>
</RelativeLayout>
item.xml
<?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">
<View
android:id="#+id/colorBlock"
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#CCCCCC" />
<ImageView
android:id="#+id/item"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:padding="16dp"
/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:textColor="#android:color/white"
android:textSize="16sp"/>
</RelativeLayout>
By definition, the RecyclerView is supposed to be used in situations where recycling views can happen - a.k.a. scrollable because large amount of views. I don't mean to say it can not be used for smaller collections, but there's no value in using it upon other layouts. As a matter of fact, not being built for such scenarios, it becomes very difficult to make use of it in scenarios like in this question. If you absolutely want to use RecyclerView, I am not aware of any way to do it in xml only. I think you'll have to implement your own layout manager for this.
If you are open to using other layouts, here's a solution involving a bunch of linear layouts and weights. Not optimal, having to use nested weights, but a solution nevertheless:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/toolbar"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ff0000"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#fff000"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff0f00"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff00f0"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#00ff00"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f0ff00"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0fff00"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00fff0"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#0000ff"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f000ff"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0f00ff"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00f0ff"/>
</LinearLayout>
</LinearLayout>

ImageView not displaying in android xml (relative layout)

![I had coded it in linear layout (code given below) but want to know how to do the same using relative layout, or is that just a bad idea given the layout?
linear layout -
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:src="#drawable/ocean"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
/>
<TextView
android:text="You're invited!"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="45sp"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:background="#009688"/>
<TextView
android:text="Bonfire at the beach"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:paddingTop="8dp"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:textSize="24sp"
android:background="#009688"/>
][1]When using relative layout my ImageView does not appear on the screen:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:src="#drawable/ocean"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/ocean"
/>
</RelativeLayout>
Its because you are using android:layout_height="0dp"
Please use android:layout_height="wrap_content"
Change your ImageView's height like this.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:src="#drawable/ocean"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/ocean"
/>
You can only use layout_weight in LinearLayout.
Try this.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertizal">
<ImageView
android:src="#drawable/ocean"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/ocean"/>
android:layout_height="0dp" This is wrong in your ImageView
Change this to
android:layout_height="match_parent"
or
android:layout_height="wrap_content"
Basically you set your height as 0. So nothing to show.
Edit :
Also you can remove this android:layout_weight="1". No need for weight in RelativeLayout

Categories

Resources