App Starting Page UI Questions - android

I have a couple of simple UI questions in regards to the initial app screen I am designing:
(a) How can I make the gray box surrounding the 'Join...' and 'Sign...' buttons transparent?
(b) Are there varying degrees of transparency?
(c) When I change between portrait and landscape orientation, my buttons disappear. How can I keep them visible?
Portrait UI...
Landscape UI...
(d) How do I add 'Company XYZ' to the TextView and have it centered above my two buttons inside the gray box?
Below is my current code...
My activity_main.xml code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true"
tools:context="com.companyxyz.companyxyz_0002.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"/>
</android.support.design.widget.CoordinatorLayout>
My content_main.xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:background="#fff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="48dp"
android:paddingRight="48dp"
android:paddingTop="368dp"
android:paddingBottom="48dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="com.companyxyz.companyxyz_0002.MainActivity">
<LinearLayout
android:background="#eee"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="40dp"
android:paddingBottom="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:text="Join Free"
android:layout_width="fill_parent"
android:layout_weight="1"/>
<Button
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:text="Sign In"
android:layout_width="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

Problem is with your paddingTop of 368dp which you have given it to the LinearLyaout in content_main. When you rotates to screen from vertical to horizontal this padding push the view out side of the visible region. You need to adjust this padding for the landscape mode with different layout or you can adjust it with the RelativeLayout as suggested in other answers.

A & B: The format for the android:background is hex ARGB, (alpha-red-green-blue), so what you currently have is the same as #FFeeeeee, which is full alpha and grey. Knock that FF (256) down to 00 (0), and it will be fully transparent. So, yes, there are "varying degrees of transparency".
C & D: I've striped all the padding and extra stuff from your content_main.xml, changed to a RelativeLayout and I got this. Let me know if you wanted something different. I also added the login fields to demonstrate the layout anchoring features of RelativeLayout.
Note, you'll need to add stuff back-in like xmlns:tools=... and tools:showIn="#layout/activity_main"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#fff"
android:layout_width="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_height="match_parent">
<!-- Sign in Form -->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:layout_alignParentTop="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username"
android:labelFor="#id/edit_username"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_username"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password"
android:labelFor="#id/edit_password"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_password"/>
</LinearLayout>
<!-- Button Bar -->
<LinearLayout
android:background="#77eeeeee"
android:layout_width="match_parent"
android:gravity="bottom"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<TextView
android:text="Pick an action"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout android:layout_width="match_parent"
android:id="#+id/registrationButtonRow"
android:layout_height="wrap_content">
<Button
android:layout_height="wrap_content"
android:text="Join Free"
android:id="#+id/btn_register"
android:layout_width="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_height="wrap_content"
android:text="Sign In"
android:id="#+id/btn_sign_in"
android:layout_width="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Related

Why can't I see the right side of my activity on my phone?

I'm trying to code an app for a school project. I'm stuck with the design. I can't see the right side of my activity on my phone, but it's appearing on the Android Studio preview. It's possible that my code isn't right or that i've didn't respect something.
And here are the 2 screenshots:
Android Studio Preview:
https://pasteboard.co/I6uT89f.png
Phone view:
https://pasteboard.co/I6uSgpW.jpg
Here's the code:
activity_main.xml
<android.support.design.widget.CoordinatorLayout 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:background="#color/colorPrimaryDark"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
</android.support.design.widget.AppBarLayout>
<include
android:id="#+id/include"
layout="#layout/content_main" />
<com.leinardi.android.speeddial.SpeedDialOverlayLayout
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#131313"/>
<com.leinardi.android.speeddial.SpeedDialView
android:id="#+id/speedDial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:sdMainFabClosedSrc="#drawable/ic_menu"
app:sdOverlayLayout="#id/overlay"/>
</android.support.design.widget.CoordinatorLayout>
content_main.xml
<ScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="340dp"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/header2"
android:scaleType="fitCenter"
android:layout_marginTop="-20dp"/>
</RelativeLayout>
<RelativeLayout
android:clickable="true"
android:focusable="true"
android:id="#+id/plante1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:background="#drawable/ripple"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="-10dp"
android:layout_marginBottom="15dp"
android:gravity="center">
<RelativeLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginLeft="10dp"
android:background="#drawable/logo_shape">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:orientation="vertical">
<fr.visufo.titouan.jardin.UnderlinedTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:layout_marginTop="0dp"
android:gravity="left"
android:text="Plante 1"
android:textSize="20dp"
android:fontFamily="#font/raleway_light"
android:textColor="#000000"
app:underlineColor="#6DB85C"
app:underlineWidth="10px"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="80dp"
android:layout_marginTop="30dp"
android:textSize="15dp"
android:textColor="#000000"
android:text="Pensez à rentrer votre plante demain"
android:fontFamily="#font/raleway_light"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="335dp"
android:layout_marginRight="7dp"
android:layout_marginTop="-4dp"
android:background="#drawable/degrees_shape">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="0°C"
android:gravity="center"
android:fontFamily="#font/roboto"
android:textSize="18dp"
android:textColor="#636363"/>
</RelativeLayout>
</RelativeLayout>
There are 8 similar relative layouts showing quite the same thing, here's
only one
</LinearLayout>
</ScrollView>
#titouan-pellerin - Unlike using div as a container for (most) things as in Website Design, you don't need to be repeatedly wrapping each individual view inside of it's own layout..For Example, if I wanted to my activity to vertically show something like this:(Title)(some smaller subtext)(An Image)(Some Description text)(And two buttons at the bottom)..I wouldn't wrap each of these things individually in their own layout - I would simply create 1 base layout (to act as the main container), and then inside of it, I would create 1 vertical layout for the content (arranged vertically), and 1 horizontal layout for the Buttons at the bottom (arranged horizontally).Of course you will also want to set your margins according to how you want everything displayed.You are most likely experiencing issues due to a mixture of margins getting added together over and over again and expanding past the screen's boundaries, combined with the fact that the phone is likely of different pixel density and resolution compared to the emulator.Step 1: Fix your Layout, as I described above.Step 2: Choose/Setup an Emulator that matches your Device most closely in Resolution/PixelDensity.Hope this helps!If you found this to be a good explanation, please accept this as the answer to your question.Thanks, and happy coding!

android relativelayout: the last viewgroup won't get over the header?

I want the last viewgroup with ID chats to overlap the previous viewgroups and occupy the whole screen of my phone. With the XML code below I presume it will get what I want. But the codes does not. Please help.
Below is the xml codes.
<?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:id="#+id/root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.testapp.MainActivity">
<LinearLayout
android:id="#+id/bar"
android:layout_alignParentStart="true"
android:orientation="horizontal"
android:gravity="center_vertical"
android:background="#999999"
android:elevation="10dp"
android:layout_width="match_parent"
android:layout_height="40dp">
<ImageView
android:id="#+id/bar_img"
android:src="#drawable/ic_autorenew_black_24dp"
android:gravity="clip_vertical"
android:paddingStart="8dp"
android:layout_width="36dp"
android:layout_height="36dp" />
<TextView
android:id="#+id/bar_title"
android:text="title"
android:ellipsize="end"
android:layout_weight="1"
android:gravity="center"
android:textColor="#ffffff"
android:textStyle="bold"
android:textSize="18sp"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
<FrameLayout
android:id="#+id/root_frag"
android:layout_below="#id/bar"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
<LinearLayout
android:id="#+id/chats"
android:background="#ea2312"
android:orientation="vertical"
android:layout_alignParentStart="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/chat_list"
android:orientation="vertical"
android:layout_width`enter code here`="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="hello world"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
this is the preview screenshot.
enter image description here
The "chats" LinearLayout does fill the whole screen, but the "bar" LinearLayout appears on top of it (even though it's defined earlier inside the RelativeLayout) because of its android:elevation attribute.
To make this stop, either remove the elevation attr from the "bar" view, or add a (larger) elevation attr to the "chats" view.

Resize views on Soft Keyboard launch

I am trying to create a chat application. The chat layout currently looks like this
The corresponding layout file is
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:fillViewport="true"
android:layout_height="match_parent">
<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"
tools:context="com.example.nirmal.chatadapter.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/iconuser"
app:civ_border_width="2dp"
app:civ_border_color="#color/White"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="#dimen/marginLeftForToolbar"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:text="UserName Here"
android:layout_marginTop="#dimen/marginTopBottomForBubble"
android:id="#+id/user_name"
android:textSize="#dimen/textMedium"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:text="User details Here"
android:layout_marginTop="#dimen/marginTopBottomForBubble"
android:id="#+id/user_details"
android:textSize="#dimen/textSmall"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:layout_marginTop="#dimen/recyclerViewMargin"
android:isScrollContainer="true"
android:id="#+id/chatRecycler"
android:layout_above="#+id/chatBoxAndSend">
</android.support.v7.widget.RecyclerView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:layout_marginBottom="5dp"
android:id="#+id/chatBoxAndSend">
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:minWidth="50dp"
android:maxWidth="50dp"
android:id="#+id/chatBox"
android:paddingStart="#dimen/cardViewPadding"
android:background="#drawable/rounded_chat_box"
android:layout_margin="#dimen/marginForChatBox"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:background="#drawable/oval_button"
android:minWidth="50dp"
android:maxWidth="50dp"
android:text="Send"
android:imeOptions="flagNoExtractUi"
android:id="#+id/chatSendButton"
android:layout_margin="#dimen/marginForChatBox"
android:textColor="#color/Black"
/>
<!--<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:id="#+id/send_button"
android:src="#drawable/send"
android:background="#drawable/oval_button"
android:layout_marginBottom="#dimen/marginForChatBox"
android:layout_marginTop="#dimen/marginForChatBox"
android:layout_marginEnd="#dimen/marginForChatBox"
/>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:id="#+id/send_button"
android:src="#drawable/send"
app:civ_border_width="2dip"
android:layout_marginEnd="#dimen/marginForChatBox"
app:civ_border_color="#color/greenChatColor"/>-->
</LinearLayout>
</RelativeLayout>
</ScrollView>
When I open my soft keyboard the layout looks likes this
I have added this in my manifest file
android:windowSoftInputMode="adjustPan|stateHidden"
The output is not what I expected it to be. I want the recyclerview to dynamically resize in the center of the screen and the Toolbar and the edittext to stay fully visible.
As you can see the toolbar has been pushed up and is not visible even when scrolled. The edittext is hidden partially by the suggestions given by the keyboard. Some of the posts I saw asked me to add a scrollview which I did and still the same result. How can I solve this problem?
If you want to resize RecyclerView on SoftInput open or close then you can use below single line code
((LinearLayoutManager)myRecyclerView.getLayoutManager()).setStackFromEnd(true);
For more read this post: https://trinitytuts.com/tips/resize-recyclerview-on-android-softinput-keyboard-appear/
Hope this code helps you
The flag adjustPan is wrong. Use the adjustResize instead:
android:windowSoftInputMode="adjustResize|stateHidden"
What adjustPan does is equivalent to enlarging a picture more than the screen and then panning - i.e. moving the picture so you see different parts of it. (like a map in google map for instance).

2 Images On Top of Each Other - XML - Android

So I want to use 2 images. One should be on top of the other but smaller, so that the border of the image that's behind is only shown.
Take a look at these 2 photos.
Image that's behind (The border Image)
[IMG]http://i66.tinypic.com/25zgguh.jpg[/IMG]
Image that should be inside the border
[IMG]http://i67.tinypic.com/10mpgt4.jpg[/IMG]
XML CODE
<com.inthessaloniki.cityguide.view.SelectorRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_poi_list_item"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:minHeight="#dimen/fragment_poi_list_recycler_item_size"
android:listSelector="#drawable/selector_clickable_item_bg_inverse">
<ImageView
android:id="#+id/fragment_poi_list_item_image"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_panel_height"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="#dimen/global_spacing_xs"
android:paddingRight="#dimen/global_spacing_xxs"
android:background="#color/fragment_poi_list_recycler_item_panel_bg">
<TextView
android:id="#+id/fragment_poi_list_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="2"
android:ellipsize="end" />
<TextView
android:id="#+id/fragment_poi_list_item_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_grid_distance"
android:drawablePadding="#dimen/fragment_poi_list_recycler_item_icon_padding"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
I was thinking if I could add an android:background="First Image" and make my Image view center but leaving some space on the edges for the background to be shown.
Would have posted 2 more images showing how the app is and how it should look, but the site won't let me post more than 2 links cause my reputation is lower than 10 -_-
Thanks in advance for the help!!!
Do it like this:
<com.inthessaloniki.cityguide.view.SelectorRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_poi_list_item"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:minHeight="#dimen/fragment_poi_list_recycler_item_size"
android:listSelector="#drawable/selector_clickable_item_bg_inverse">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_image"
tools:context=".MainActivity">
<ImageView
android:id="#+id/view"
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/foreground_image" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_panel_height"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="#dimen/global_spacing_xs"
android:paddingRight="#dimen/global_spacing_xxs"
android:background="#color/fragment_poi_list_recycler_item_panel_bg">
<TextView
android:id="#+id/fragment_poi_list_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="2"
android:ellipsize="end" />
<TextView
android:id="#+id/fragment_poi_list_item_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_grid_distance"
android:drawablePadding="#dimen/fragment_poi_list_recycler_item_icon_padding"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
hope I got it clear, you could simply use two layout and adjust margin for the small one.
put your images as RelativeLayout background or use ImageView in layouts
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="25dp"></RelativeLayout>
</RelativeLayout>

Android Toolbar layout is horizontal

I'm trying to use a couple views within a support.v7.widget.Toolbar, but it looks like they're all placed as if in a horizontal LinearLayout. I'm looking to create something more like this where the EditText ends past the overflow menu, rather than where the overflow menu begins. Here's my currently layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="250sp"
android:background="#color/primary"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button_id"
android:layout_width="40sp"
android:layout_height="40sp"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/url"
android:textColor="#color/accent"
android:textSize="16sp" />
<EditText
android:id="#+id/url_text_field_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textNoSuggestions"
android:maxLines="1" />
<TextView
android:id="#+id/output_text_view_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/initial_output_text_id"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Here's a screenshot. You can see the views are in line with the share button and overflow menu. The title is also hidden on the left hand side by the views. How would I have a second row for my views in the Toolbar so they span the width of the page? Hopefully, I'm just missing something small, as I'm new to Android. Thanks in advance for the help.
You could, probably, put a vertical LinearLayout into your Toolbar

Categories

Resources