How do you set up custom dividers for a GridView?
I mean, there's a .png item with that blue gradient divider, but how do I put it in the GridView at the right place?
Searching through internet didn't bring any viable results..
Expectation:
Reality:
gridview wrapper xml:
<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:background="#color/primary_blue_dark"
android:orientation="vertical">
....
<GridView
android:id="#+id/gv_stock"
android:paddingEnd="#dimen/activity_horizontal_margin"
android:paddingStart="#dimen/activity_horizontal_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchMode="columnWidth"
android:numColumns="2"/>
</LinearLayout>
gridview item xml:
<?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:background="#color/primary_blue_dark"
style="#style/padded_layout"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/teal_text_middle"
android:gravity="center"
android:text="test"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.7"/>
<ImageView
android:id="#+id/iv_arrow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_weight="1.3"
android:src="#drawable/ic_arrow_green"/>
</LinearLayout>
<TextView
android:id="#+id/tv_value"
android:layout_width="wrap_content"
android:layout_height="match_parent"
style="#style/white_text_big"
android:gravity="center"
android:text="test"/>
</LinearLayout>
</LinearLayout>
Use GridLayoutManager with Recyclerview and add the Itemdecoration from the following gist.You can vary offset's as per your requirement.
By using this answer here and simply changing the grey solid color background color for an image like this one (I set it for hdpi resolution - but it should stretch well both up and down),
you should get an effect like this (here it's on an ldpi device, so scaled down twice):
Which is not too far from what you're looking for.
It works, at least in principle. It may need some tweaking (narrowing the vertical central part), but you got the concept.
You might also want to cover some of the top (and possibly the bottom part, too) part, so to hide the trick.
With a simple "see through" effect, you can avoid messing with styles/themes.
[EDIT]
Yes, I know, it's MAINZ, not MEINZ (but, well... the pronounce is indeed the same! Hurry is a bad advisor, you know).
Related
I would like to create an app that divides the screen into two squarish halves; in either orientation. The content within each half should rotate; but the two areas should remain fixed.
Could you tell me how to achieve this layout? I would like to place an embedded browser in one half, and a QR code scanner in the other.
I imagine this is a noobish question; I've done very little android development.
you can use layout weight sum and layout weight for this purpose.
use to following line of code:
<LinearLayout
android:id="#+id/head"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:weightSum="2"
android:baselineAligned="false"
android:layout_gravity="center_horizontal">
<LinearLayout
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
set layout_weight to 1 in both LinearLayout will divide the screen equally.
<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"
tools:context=".Main"
android:baselineAligned="false"
android:orientation="horizontal">
<LinearLayout
android:layout_weight="1"
android:background="#9561A7"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--views of the first section-->
/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:background="#006C91"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--views of the second section-->
/>
</LinearLayout>
good luck .
In my app, I have some spinners (each of which is part of a fragment) in a scrollView. This scrollView is placed below a textView.
The problem is that, when I'm running the app on my test device (Samsung Galaxy S6 Edge [G925F], API 23), the little arrow of the spinner stays visible above the textView, even though the rest of the spinner is already out of view.
I did a lot of research but couldn't find any solutions, so I'm asking here:
What do I need to do so that the arrows disappear like the rest of the spinner?
Here some pictures:
In this picture, you can see the textView at the top of the activity and below the spinners, before I scrolled down
In this screenshot, you can see the problem. The little triangles of the spinner are still visible, but the spinner itself is already scrolled out of view.
Here is the XML code of the fragment containing the spinner:
<?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">
<LinearLayout
android:id="#+id/fragLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/gradeDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp"
android:text="1"
android:textSize="30dp"/>
<Spinner
android:id="#+id/spinner"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:entries="#array/grades"/>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginEnd="15dp"
android:layout_marginRight="15dp"
android:src="#drawable/ic_remove_black_24dp"
android:background="#null"/>
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_below="#id/fragLayout"/>
</RelativeLayout>
And here is the code of the MainActivitys content:
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="de.jeanma.android.avo.MainActivity"
tools:showIn="#layout/activity_main">
<Space
android:id="#+id/mainContentSpace"
android:layout_width="match_parent"
android:layout_height="16dp" />
<TextView
android:id="#+id/textView"
android:layout_below="#id/mainContentSpace"
android:layout_width="match_parent"
android:text="Standard text"
android:layout_height="wrap_content"
android:textSize="40dp"
android:gravity="end"/>
<ScrollView
android:id="#+id/scrollView"
android:layout_below="#id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/divider"
android:showDividers="middle">
</LinearLayout>
</ScrollView>
</RelativeLayout>
The fragments are added to the LinearLayout (#id/layout) by a Java method. If needed, I will post that here as well.
I'm using Java 1.8.05 and the target SDK is 23, the minimum is 14. The code is written in Android Studio
The textView with the problems is the #id/textView, displaying the large number at the top.
#jeanma you can fix the issue with just setting
android:background="#00FFFFFF"
for your ScrollView or root LinearLayout of the ScrollView
I now have got a workaround running. As suggested as I set the textView's backgroundcolor the same as my activity, the arrrows wheren't showing any longer. But the space did behave difrently. There it han'd changed somethinf that I changed the backgroundcolor. So I just removed it. (It still looks kinda good).
The updated XML-file od the MainActivity'a content can be seen here:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="de.jeanma.android.avo.MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:text="Standard text"
android:layout_height="wrap_content"
android:textSize="40dp"
android:gravity="end"
android:background="#FAFAFA"/>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView">
<LinearLayout
android:id="#+id/layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/divider"
android:showDividers="middle">
</LinearLayout>
</ScrollView>
</RelativeLayout>
But because the arrows were showing threw the padding as well, I changed my
src\main\res\values\dimens.xml to the following (I know that that's really bad practice):
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">0dp</dimen><!-- This was changed from 16dp to 0dp -->
<dimen name="fab_margin">16dp</dimen>
</resources>
Thanks #ScriptKity #Wukash #Bryan for your support
Set Background Color in your parent layout.
android:background="#color/white"
I've run into this problem recently, and believe this is a bug in the hardware accelerated rendering on Android when you combine ScrollView and Spinner.
I was able to fix this by turning the hardware acceleration off for the Spinner(s):
mySpinner.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Other possibilities how to control the hardware acceleration are described here:
https://developer.android.com/guide/topics/graphics/hardware-accel
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.
I need to create a layout as shown in the image.
The rounded button with the arrow needs to be exactly between the blue and the gray background.
I'm having difficulties placing it without specifying the margins precisely, which is something I don't want to do because there is no guarantee it will look good on all resolutions and devices.
I would appreciate an xml sample for that
Thanks!
Use the desired drawable.. hope it works.. you can set width and height according to your need.
<?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="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#1b96d9"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/arrow" />
</FrameLayout>
</LinearLayout>
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.