I like the Android market apps design, very bright and catchy layout. How it has been done? i tried to put such green semi-circle bar on top with transparency on circle, but my listview is not going behind, where in market apps listview scrolls behind the green bar.
Many thanks in advance.
Rgds
Balaji
I don't know exactly you want this or not but it may help you.
xml layout
<RelativeLayout 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:layout_height="match_parent"
tools:context=".MainActivity">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent">
</android.support.v7.widget.Toolbar>
in Manifest file
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:theme="#style/Theme.AppCompat.NoActionBar" >
Color.xml
<color name="transparent">#64000000</color>
As a way I can suggest something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<View
android:id="#+id/top_place_holder"
android:layout_width="fill_parent"
android:layout_height="100dip"
/>
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/top_place_holder"
/>
<View
android:id="#+id/your_top_panel"
android:layout_width="fill_parent"
android:layout_height="130dip"
androis:background="#drawable/your_transparent_semi_circle_here"
/>
So it goes like this:
#id/top_place_holder is used to take some space and push the ListView down a bit, so it won't take the whole screen.
#id/your_top_panel is a top panel (the one that will hold your transparent semi circle stuff). It must be a little bigger (in height) than place_holder since it'll cover it and a bit of it will be hovering over the list view, so it would look, like the list view is below.
To not make the actual list elements hide below the top panel - set a header view for your ListView (ListView.addHeaderView()) that will take some space and won't let the first row of data to hide below the top panel.
That above is, of course, a hack way. The best way is to layout components yourself programmatically, so you won't be needing any place_holders and your sizes wouldn't be so hardcoded.
Related
I want to reuse top and bottom screen - only the Red part of the picture above.
The middle white part, for each situation, I need to write XML.
But my app always has the same top-bottom view. I want to write once and reuse it.
Is it possible? How to solve this problem on android?
You have to add two xml layout name bottom and top, then you can use it in any layout you want,just add this code
<include layout="#layout/top" />
<include layout="#layout/bottom" />
this solution is useful for toolbar layout.
in bottom and top layout, write your code that you want reuse it.
Example:
<?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">
<include layout="#layout/top" />
<ImageView
android:id="#+id/your_dynamic_part"
android:layout_width="wrap_content"
android:layout_height="300dp" />
<include layout="#layout/bottom" />
</LinearLayout>
I know there are lots of questions about this but none of the answers are working for me. Here's a screen in question before opening the keyboard.
Here's the screen after opening the keyboard by tapping on an EditText, and then scrolling as far down as possible.
Note that besides the final edit control being mostly concealed, all the text and the button after it are inaccessible.
Here's the fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:validator="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity$PlaceholderFragment"
android:background="#color/background">
<TextView android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/primary"
android:text="#string/help_header"
android:textSize="20sp"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
/>
<TextView android:id="#+id/drop"
android:layout_below="#id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/help_sub_header"
android:textSize="16sp"
android:textColor="#color/material_drawer_secondary_text"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_vertical_margin"
/>
<View android:id="#+id/divider1"
android:layout_below="#id/drop"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray_background"
android:layout_marginBottom="#dimen/activity_vertical_margin"/>
<LinearLayout android:id="#+id/linear1"
android:layout_below="#id/divider1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<!-- Several EditTexts and such -->
</LinearLayout>
</RelativeLayout>
</ScrollView>
It was originally in a LinearLayout and I changed it to a RelativeLayout based on a suggestion, but that didn't change anything. I have also played with the layout height (wrap_content / match_parent) of the top two levels of view groups to no effect. Here is the activity declaration in the manifest:
<activity
android:name=".MainActivity"
android:label="#string/application_name"
android:windowSoftInputMode="adjustResize" >
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
I've also tried adjustPan and it doesn't seem to change. I'm not too concerned about what exactly the UI elements do when the keyboard opens, I just want the whole layout to be accessible by scrolling.
Basically everyone points to the soft input mode, but that doesn't seem to be doing anything. Is there something about fragments that I'm missing? Or maybe this is harder than I'm expecting and I need to make a custom layout class and measure the layout and nasty stuff like that? I can add the activity layout though there's not much to it, or code such as the fragment creation/transaction stuff.
THat's what the keyboard does. It covers the bottom of the screen. If you want it to not cover your app at all, you can use adjustResize. That will scale your app to only draw in the top half. But if your content is too big it still won't fit and it will look as if your app is covered (even though it isn't. Scrolling it via a scroll view should work then (although I've never actually tried it). But the only thing you can do to control the behavior when the keyboard is up is the softInputMode.
If you have lots of adjustable space or whitespace, there are techniques that will shrink you somewhat and may allow your full app to appear in the reduced space. This isn't the case here, you have too much stuff on screen (except for maybe on a tablet in portrait mode). So they aren't going to apply here.
It turns out the problem was with a library, material-drawer (nice library). For anyone else encountering this:
https://github.com/mikepenz/MaterialDrawer/blob/master/README.md#i-have-problems-with-the-softkeyboard-how-can-i-fix-this
Call Drawer.keyboardSupportEnabled(this,true) and the layout will arrange and scroll appropriately.
I am developing an Android app in full screen mode. I want the screen automatically adjusted when a soft input is shown. I am using ScrollView to make my screen can extend larger than the maximum height. You can see the layout XML below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="${packageName}.${activityClass}" >
<VideoView
android:id="#+id/taskdetail_bgvideo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
<ScrollView
android:id="#+id/taskdetail_scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- Other Widgets -->
</LinearLayout>
</ScrollView>
</RelativeLayout>
The VideoView in the background is placed as intended to create a background video in the overall layout.
I tried the workaround in Android How to adjust layout in Full Screen Mode when softkeyboard is visible but somehow in my case, it doesn't work as expected. When I choose the bottommost TextView, all screen somehow pushed upwards to the top, leaving a very big black area between soft keyboard and the activity screen. Check the screenshot below (Sorry, still low reputation, so cannot post the image directly :( )
Giant blackhole
So do you have any possible idea to tackle this weird behavior? In addition, I also have tried setting the softInputMode to ADJUST_RESIZE or ADJUST_PAN, and both settings did that. When I set it to ADJUST_NOTHING, nothing really adjusted at all.
When I don't use the workaround I mentioned above, I cannot scroll the view to the bottommost widget, but somehow the window view is panned to the focused TextView. I believe that this is actually the major culprit, but I don't know how to fix it.
Thanks in advance :)
If you have the property <item name="windowFullscreen">true</item> in your theme then the android:windowSoftInputMode="adjustResize" doesn't work.
Try change
<ScrollView
android:id="#+id/taskdetail_scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
to
<ScrollView
android:id="#+id/taskdetail_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent" >
you have to write
android:windowSoftInputMode="stateHidden|adjustPan"
in your manifest file
Try to add below properties to your <activity tag declaration in AndroidManifest.xml
android:windowSoftInputMode="stateHidden|adjustPan"
I am thinking to build an app which will have the same grid layout like in the picture, but I cant figure out what layout I should use.
GridView, or something like that?
It is possible using StaggeredGridView . Check out below repos on github
https://github.com/maurycyw/StaggeredGridView
https://github.com/chrisjenx/StaggeredGridView/tree/master/demo
Simple enough to do it with LinearLayout:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Stack rows vertically -->
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- First row, two items -->
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- First item, 50% of width -->
<FooView android:id="#+id/foo1"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content" >
<!-- Second item, 50% of width -->
<FooView android:id="#+id/foo2"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content" >
</LinearLayout>
<!-- Next row, just one item -->
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- Third item, 100% of width -->
<FooView android:id="#+id/foo2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</LinearLayout>
<!-- And so on... -->
</LinearLayout>
</ScrollView>
Obviously, the exact nature of "FooView" is up to you, as are decorative borders, shadows, etc. In practice, you'd want to do this programatically, but this static xml layout shows you what you're after.
GridLayout also would work, but it's only available in 4.0 and above, unless you want to start using the compatibility library. Since LinearLayout will do the job, that's what I would use. RelativeLayout would probably also work, but I've never been able to get the damn thing to work, myself.
I'm not sure exactly what they use, but you can achieve the same effect with either a GridLayout or a ListView.
i am designing an application which have diff types of functionalies through buttons/image buttons. At final the list might increase. i want to put one custom home button which always keeps on screen when i am in diff activities.
or either if you have any idea about how this Home button is coded to this layout
below screen. please help.
Have you considered the Action Bar which is exactly designed for this purpose?
http://developer.android.com/guide/topics/ui/actionbar.html
While the home button at the bottom can be easily achieved using an image view/button,Using an action Bar is the recommended option.Not only can you link with the home activity but also any other activity of your choice.Refer this to gain a deeper insight.
http://developer.android.com/guide/topics/ui/actionbar.html
http://developer.android.com/reference/android/app/ActionBar.html
You can either place a button/image button/image anything in xml layout and set on click listener on that component. You can also use option menu and give multiple option on all the screens of your application.
Make a layout with a ScrollView on top, and your image-button below the scrollview.
Example:
<!-- language: lang-xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Your Content Here"
/>
</ScrollView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
</LinearLayout>
It looks like this: