I have my main home screen, but after it loads I want to display an overlaid wheel selector that will go away once a choice is made. Everything has gone well so far except that the submit button for the wheel selector is having some transparency forced upon it.
I've tried android:alpha to force it to be fully opaque but that has not had an effect. Here is the xml layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:textColor="#000000"
android:background="#faff67"
>
<LinearLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
[ Not relevant? ]
</LinearLayout>
<RelativeLayout android:id="#+id/wheelView" android:background="#CC000000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<kankan.wheel.widget.WheelView android:id="#+id/deptWheel"
android:layout_height="110dp"
android:layout_width="wrap_content"
android:layout_weight="1"/>
<Button android:id="#+id/button_selectDept"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:alpha="1"
android:text="Submit"></Button>
</LinearLayout>
</RelativeLayout>
Any ideas for what I'm doing wrong here?
Maybe throw in a background for the button:
android:background="#FFFFFF"
Or change the color alpha:
android:color="#FF000000"
Perhaps both:
android:background="#FFFFFFFF"
Related
enter image description hereIn linear layout I'm using image view, text view and also the edit text irrespective of the linear layout I'm thinking to add an image in the background which should be transparent when ever I try to use transparency then the whole activity is changing.However, need only the background image is transparent not the whole page.
According to what, I understood........
<?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:background="#drawable/download"
android:weightSum="2"
android:layout_height="match_parent">
<ImageView
android:layout_gravity="center"
android:src="#drawable/download"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="0dp" />
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:text="#string/dummy_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
In my opinion, your design is not really appealing.
In your example, the text is not readable, it makes no sense to have an image twice in the same screen, the background picture is stretched and the front image is so small.
I would suggest you use something like this:
If you like it this way, here yo have the XML definition:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Taj Mahal"
android:layout_marginBottom="5dp"
android:textSize="24sp"/>
<View
android:layout_height="2dp"
android:layout_width="match_parent"
android:background="#aaaaaa"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:padding="10dp"
android:scaleType="fitXY"
app:srcCompat="#drawable/taj_mahal"/>
<View
android:layout_height="2dp"
android:layout_width="match_parent"
android:background="#aaaaaa"/>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="The Taj Mahal is an ivory-white marble mausoleum on the south bank of the Yamuna river in the Indian city of Agra. It was commissioned in 1632 by the Mughal emperor, Shah Jahan (reigned 1628–1658), to house the tomb of his favourite wife."
android:textSize="18sp"/>
</LinearLayout>
I am trying to use a BottomSheet in my layout.
The root view is an CoordinatorLayout and I want to set Elevation on top for the Bottom Sheet so i am setting it with a high value (50dp), however it is not showing when the app runs but it appears on android studio design tool.
I have tried to set background for the sheet with a solid color instead of gradient but it still did work. I also tried to use Shadow shapes but it does not give the same elevation appearance.
here is my XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.atefhares.StartActivity"
android:clipToPadding="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/DetailsView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Details Should be shown here"
android:id="#+id/textView"
android:textSize="25sp"
android:padding="20dp" />
</LinearLayout>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.atefhares.Start_Activity" />
</LinearLayout>
<android.support.v4.widget.SlidingPaneLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_peekHeight="70dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:background="#drawable/gradiant"
android:fillViewport="true"
android:elevation="50dp">
<include layout="#layout/bottom_sheet_layout"/>
</android.support.v4.widget.SlidingPaneLayout>
</android.support.design.widget.CoordinatorLayout>
Edit:
bottom_sheet_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/colorPrimary"
android:padding="10dp"
android:id="#+id/inviteLL">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/imageView"
android:background="#drawable/invite_icon"
android:layout_margin="5dp"
android:layout_gravity="center_vertical" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Invite Friends"
android:textSize="22sp"
android:textColor="#ffffff"
android:padding="10dp"
android:fontFamily="sans-serif-condensed"
android:gravity="center_vertical"
android:id="#+id/inviteTV"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/arrowIV"
android:layout_gravity="center_vertical"
android:background="#drawable/arrow_up" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:id="#+id/usersLV"
android:dividerHeight="1dp"
android:divider="#ffffff"
android:background="#ffffff" />
</LinearLayout>
So how can I make the elevation shows on top of the Bottom Sheet
Any one can help, please ?
Try this,
<android.support.v4.widget.SlidingPaneLayout
android:id="#+id/bottom_sheet"
xmlns:slide_panel="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_peekHeight="70dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:background="#drawable/gradiant"
android:fillViewport="true"
slide_panel:elevation="50dp">
According to the google guidelines with the android:elevation is not possible (Also you can read more about the keyligth).
Anyway on the most common cases when you scroll up the "BottomSheet" a semitransparent layer appears behind the "BottomSheet", this helps to keep the user focus on the "BottomSheet" actions, like these examples.
If anyway you want a top shadow you can set a drawable background with gradient like this (shadow_top.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:centerColor="#000000"
android:endColor="#android:color/transparent"
android:startColor="#000000"
android:type="linear" />
And your SlidingPanelLayout will be:
<android.support.v4.widget.SlidingPaneLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_peekHeight="95dp"
android:paddingTop="25dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:background="#drawable/shadow_top"
android:fillViewport="true"
>
Best regards.
Do not forget that to draw shadow you must use hardwareAccelerated drawing
hardwareAccelerated = true
hardwareAccelerated = false
See Android Hardware Acceleration for details
The answer is: no, it is not possible (unless you create your own view custom with an elevation feature on top).
Elevetion is not meant to be visible in the top of a view, but in the bottom, on the right and on the left.
If you see closely on the official Material Design guidelines, you can see that the bottom bar simply don't have it (do not confuse with the gray space between the card and the bottom bar).
For example: import Card View sample from Android Studio and play with it with emulator or your device. You will see that if you increment the elevation value, the view will have his shadow everywhere except on top (see second image below).
Another example is given by importing Elevation Basic.
EDIT
Following code is taken from Card View sample. There is a layout containing a CardView with elevation. Whenever you change the elevation, you will always see shadow everywhere, but not on top (the code was tested with Lollipop and Marshmallow).
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
>
<android.support.v7.widget.CardView
android:id="#+id/cardview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:elevation="100dp"
card_view:cardBackgroundColor="#color/cardview_initial_background"
card_view:cardCornerRadius="8dp"
android:layout_marginLeft="#dimen/margin_large"
android:layout_marginRight="#dimen/margin_large"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_medium"
android:text="#string/cardview_contents"
/>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_large"
android:orientation="horizontal"
>
<TextView
android:layout_width="#dimen/seekbar_label_length"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="#string/cardview_radius_seekbar_text"
/>
<SeekBar
android:id="#+id/cardview_radius_seekbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_medium"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="#dimen/seekbar_label_length"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="#string/cardview_elevation_seekbar_text"
/>
<SeekBar
android:id="#+id/cardview_elevation_seekbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_medium"
/>
</LinearLayout>
</LinearLayout>
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 am novice in Android trying to make this layout:
Simply what I want to achieve:
The red container should take as much space as it needs but not as much that green container have to be shrinked. If there are too many items, red container will be scrollable. Green container is also always centered in orange one if there is space for it (if not it is actually still centered).
I don't know how to do it at all :( . Here is my try:
The problem is that I want to always maintain height of green container (minHeight does not work I can't understand why) and make the green container centered in orange one. I have problem with Scenario 2 (as you can see in the picture), this code works good in first scenario.
<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">
<ScrollView
android:id="#+id/red_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Items are here -->
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/orange_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_orange_dark"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:id="#+id/green_container"
android:layout_width="100dp"
android:background="#android:color/holo_green_dark"
android:layout_height="50dp"
android:orientation="horizontal">
<!-- My content -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
Edit: minHeight does not help:
Edit: image for user Illegal Argument:
Try setting property android:minHeight = "(whatever)dp" to orangeContainer. This worked for me in others "similiar" cases.
:)
Is this what you are looking for:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/list_items"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/background_dark" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/list_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:color/darker_gray"
android:gravity="center"
android:minHeight="200dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
Snapshot in ecllipse:
So i have a layout in Android where its a vertical LinearLayout that encompasses A ScrollView, LinearLayout, LinearLayout.
I made each child take about roughly a 3rd of the screen. When I have them Holo or Holo.Light with an ActionBar is looks as expected:
However, when I change the Theme to Holo.NoActionBar or Holo.Light.NoActionBar, for some reason, it completely ignores my android:layout_weight, or even my ScrollView. Like all my contents in my scroll view are no longer collapsed.
It then looks like this:
Why does this happen? I cannont figure out why. I even made a custom theme in my styles.xml and the problem still existed. How come ScrollView only works when I have an ActionBar?
Here is my code:
<?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"
android:paddingTop="10dp"
android:weightSum="100"
>
<ScrollView
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="30">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/email" />
<EditText
android:id="#+id/etEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textNoSuggestions" />
.......................
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_height="0dp"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_weight="40">
<Button
android:id="#+id/bSendEmail"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="#string/sendEmail" />
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_weight="30">
<AnalogClock
android:id="#+id/analogClock1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</LinearLayout>