I'm working with gridView, each item has an image and a TextView in the footer.
All images have the same size, so I use match_parent or wrap_content as required.
But the screen only show one line and a half on items, it scroll, and that is perfect, but I would like to show two complete rows and then scroll.
Also, when I run the app in small devices, only show 1 line, I would like to show 2 lines always.
I tried to use this example, but it doesn't work to me because stop scrolling.
Here, some of my code XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_app">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
android:id="#+id/header"
android:padding="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon_back"
android:src="#drawable/ic_back" />
</RelativeLayout>
<com.xetux.util.ExpandableHeightGridView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:horizontalSpacing="15dp"
android:isScrollContainer="true"
android:numColumns="3"
android:padding="10dp"
android:id="#+id/family_grid_view"
android:layout_below="#+id/header"
android:verticalSpacing="15dp"/>
<!--<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:id="#+id/family_grid_view"
android:horizontalSpacing="15dp"
android:verticalSpacing="15dp"
android:layout_below="#+id/header"
android:numColumns="3"/>-->
</RelativeLayout>
and each item XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/family_image"
android:background="#drawable/bg_family">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black_transparency"
android:text="FAMILIA"
android:gravity="center"
android:id="#+id/family_name"
android:padding="10dp"
android:layout_alignParentBottom="true"
android:textColor="#color/white"
android:textSize="15sp"/>
</RelativeLayout>
I think your image size is big. You can checkout for supporting multiple screen tutorials. Try using small images for small screen.
Related
I am trying to design a layout as shown in below image. It contains an ImageView for cover image, GridView in which each cell will act as a button for performing various actions and below that TextView as footer.
I am not able to achieve this thing. Below is my xml code:
home.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="7">
<ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_weight="3"
android:scaleType="centerCrop"
android:src="#drawable/xyz" />
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="3.5"
android:background="#000000"
android:columnWidth="100dp"
android:horizontalSpacing="1dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="1dp"></GridView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="OSKAR" />
</LinearLayout>
singlegrid.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#ffffff"
android:orientation="vertical">
<ImageView
android:id="#+id/grid_img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/grid_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" />
</LinearLayout>
I am struggling with this issue and searched a lot with various solutions but not able to find out the correct one. Thanks in advance.
I think Why should you use scrollView?
Without scrollview your requirement satisfied.
you can set height of grid's child dyanamically like below:
Child_item_height=
(screenheight - (toolbar_height+imageview_height+footer_height+textview_height))/2
Note: you can set textview height fix like 20dp.
Using above login you can get height of grid so that you can display 4 grid in screen and another grid in scroll.
So I have been trying every mix and match with different layouts and settings and still cant figure out how to make this work. I want to have a spinner on the Same Screen as an MPAndroid Line Chart, I know I can fix the height Manually and adjust it to fit properly, but fill parent or match parent does not account for the spinner and just pushes it off the screen! If I load the application on my phone with height of 290dp Great fits perfectly! Load it on the 7" tablet not so pretty... Half the screen is empty. How do I contain the Chart to fill a layout that accounts for spinner? Wrap Content on the chart makes it unusable.
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".history"
android:background="#303030">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner4"
android:entries="#array/list3"
android:popupBackground="#303030"
android:layout_centerHorizontal="true" />
</LinearLayout>
Try using this I have removed some attributes which were missing at my end. This is where spinner is on top and rest is filled with line chart.
<?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:background="#303030"
android:orientation="vertical">
<Spinner
android:id="#+id/spinner4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:popupBackground="#303030" />
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_below="#+id/spinner4"
android:layout_height="fill_parent" />
</RelativeLayout>
Try this,
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".history"
android:background="#303030">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="70">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<Spinner
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="30"
android:id="#+id/spinner4"
android:entries="#array/list3"
android:popupBackground="#303030"
android:layout_centerHorizontal="true" />
</LinearLayout>
Because of using weight, on any screen "map and spinner" will look like in same screen height ratio.
Hi there i have spent the good part of a day trying to figure this one out.
Problem
So i have a recyclerview (NOT GRIDVIEW) implemented and it is showing 3 icons currently but they are at the top of the desired view. What i require is for the 3 icons to be centered and any x amount of icons that are used to be automatically centered both vertically sand horizontally.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Xview" >
<com.exmaple.app.topBar
custom:gameState="paused"
android:id="#id/score_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<com.exmaple.app.BottomBar
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/bottom_bar"
/>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/score_bar"
android:layout_above="#+id/bottom_bar"
android:layout_centerInParent="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:background="#000000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top|center"
android:scrollbars="none"
/>
</FrameLayout>
</RelativeLayout>
What i have tried:
I have tried setting the recyclerview to layout:gravity="center"
I'm currently trying to build a simple Contacs Card myself. I just want a Profile picture on the top left, about a quarter to a third of the width, and the Name + description on the right side.
No matter what i try, it always looks very similar to the screenshot below.
this is my Layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_standard_padding"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"
style="#style/AppBaseThemeCardBG">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/nowCardStyle">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="top"
android:paddingRight="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/schuckCard"
android:scaleType="fitCenter"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="vertical">
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/schuckHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="JESCO SCHUCK"
android:textSize="#dimen/textSizeVeryLarge" />
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="Description" />
</LinearLayout>
</LinearLayout>
</ScrollView>
This is how it looks like:
I'd like the image to be approximately as wide as the description in the action bar. Obviously i brutally failed here
Use different values for the layout weights. Like 4 for the image and 6 for the content to give it 40‰ of the cards width
Consider using cardslib ( https://github.com/gabrielemariotti/cardslib) to do your card layout. It is very well put together.
Got my stupid Problem fixed:
In the ImageView I have declared android:scaleType="fitCenter" which apparently also centers the ImageView in my Layout.
When changing the scaleType to fitStart I get the result I wanted.
One of my DialogFragments implements two equal-sized GridViews, one stacked on top of the other. Ideally, my layout would look like this (as seen in Android Studio):
Unfortunately, when I load up the layout on an actual Android device, I get something like this:
When the Kanji GridView is empty, it's completely invisible. Additionally, its height varies depending on the number of elements it has to display. How can I force the bottom GridView to fill 50% of the height as per the layout seen in Android Studio, even when it's empty?
Here is the XML for this particular layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:focusableInTouchMode="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
android:layout_width="32dp"
android:layout_height="32dp"
android:id="#+id/progress_bar"
android:layout_toStartOf="#+id/search_box_kanji"
android:visibility="gone"
android:indeterminate="true"
android:layout_centerVertical="true"/>
<SearchView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="#id/search_box_kanji"
android:queryHint="#string/menu_search_hint"
android:iconifiedByDefault="false"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/components" />
<com.tonicartos.widget.stickygridheaders.StickyGridHeadersGridView
android:id="#+id/grid_components"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="9"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/kanji" />
<GridView
android:id="#+id/grid_kanji"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:numColumns="9"/>
</LinearLayout>
</LinearLayout>
(By the way I'm using the StickyGridHeaders library for the upper Components GridView)
Change the '0dp' layout_height on your two LinearLayouts to 'match_parent'.
You're missing a weightSum attribute on your outermost LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:weightSum="2" > <!-- This line is what you were missing -->
...
</LinearLayout>
Tested this as working on device (assuming your EntryDetailsHeader style sets match_parent width and wrap_content height).