How to align widget.TextInputLayout with MaterialSpinner view? - android

I have a specific question concerning the use of the MaterialSpinner view.
I want the spinner to be perfectly aligned to the right of an EditText wrapped in a android.support.design.widget.TextInputLayout view group for floating label support.
I've tried both LinearLayout and RelativeLayout (using the align to layout attributes) and none are working properly.
I end up with something looking like this.
Below is my layout so far:
<?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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.design.widget.TextInputLayout
android:id="#+id/weightWidget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<EditText
android:id="#+id/weight"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ems="10"
android:hint="#string/weight"
android:inputType="number" />
</android.support.design.widget.TextInputLayout>
<fr.ganfra.materialspinner.MaterialSpinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/weights_unit_array"
app:ms_alignLabels="false"
app:ms_arrowColor="#0000FF"
app:ms_arrowSize="16dp"
app:ms_floatingLabelColor="#00FF00"
app:ms_floatingLabelText="floating label"
app:ms_hint="#string/unit"
app:ms_multiline="false"
app:spinnerMode="dialog" />
</LinearLayout>
</LinearLayout>
In the preview of the layout designer in Android Studio, it seems that it's aligned but when I run it either on the emulator or a real device, the views are not aligned as shown in the previous screenshot.

I decided not to use the MaterialSpinner view although it looks good with the floating label.
I'm using a regular Spinner with the .underline style applied:
<Spinner
android:id="#+id/height_unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/heights_unit_array"
android:prompt="#string/unit"
android:spinnerMode="dialog"
style="#style/Widget.AppCompat.Spinner.Underlined"
android:layout_gravity="bottom"/>

Related

Android Grey Out LinearLayout

I have a linear layout which contains a set of child views (mixture of text, images and other layouts).
I want to grey out the linear layout and all the child views so they look disabled (similar to how a button works).
Is this possible to achieve? I know i can set a colour filter when painting on the canvas, is there something similar for layouts?
Another way is to call setEnabled() on each child (for example if you want to do some extra check on child before disabling), check out this answer:
https://stackoverflow.com/a/7069377/4840812
You can use Frame-layout
Using TEST ONE you can achieve above text view like disabled. You can set root layout clickable false for actually disable views inside layout.
TEST TWO is for understanding purpose. Like you need to manage order of view to show effect.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--THIS IS TEST ONE-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="150dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<!--THIS IS TEST TWO-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="300dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="400dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30dp" />
</FrameLayout>
To achieve your layout you can use the RelativeLayout. In RelativeLayout you can use the 2 different views or LinearLayout. In first layout you can add views according to your need, and In second layout you can set the alpha colorcode for disable the layout.
Please try below code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1"
android:layout_marginLeft="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/trans"/>
</RelativeLayout>
Here is output for code:

Android TextView strange text alignment

In many different questions the answer to align the text inside a TextView was either: android:layout_width="match_parent" or to set the gravity or textAlignment however none of these options seemed to work on my emulator. I don't have the preview since it's code generated text.
Using my current layout I get this in my emulator:
Why does the black text behave in such a strange way? I want to left align it. This is my current xml:
<?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"
xmlns:font="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="com.domain.citytour.activity.ImpressumActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/locationTitle"
android:textAlignment="center"
android:padding="#dimen/activity_horizontal_margin"
android:background="#color/primary"
android:textColor="#color/cardview_light_background"
android:textSize="20sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:textAlignment="viewStart"
android:id="#+id/locationContent"
android:padding="#dimen/activity_horizontal_margin"
android:textColor="#color/primary_text"
android:textSize="14sp"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
I'm sorry to bother this comunity again with this question.
<TextView
android:text="Left Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|left"/>
Here's a similar question:
Android TextView Align text to Right and Left

How to make a "subLayout" fixed in Android

I'm creating an app that gets some values, you click in a button and it returns some other values and this views are distributed in 2 subLayouts of a bigger vertical LinearLayout like 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"
android:padding="10dp">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.4">
<EditText
android:layout_width="70dp"
android:layout_height="wrap_content"
android:inputType="number"
android:id="#+id/number1" />
<EditText
android:layout_width="70dp"
android:layout_height="wrap_content"
android:inputType="number"
android:id="#+id/number2"
android:layout_below="#+id/number1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calc!"
android:id="#+id/calcButton"
android:layout_below="#+id/number2"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.6"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Answer"
android:id="#+id/Answer" />
</RelativeLayout>
</LinearLayout>
My problem is that when I click on my EditText and the keyboard appears the answer's TextView goes up with the keyboard and "overrides" my button (the entire RelativeLayout follows the keyboard), there's a way of setting the RelativeLayout fixed so that it stays where it is mean to be?
Here what is happening:
There's a way of fixing that RelativeLayout?
Try setting android:windowSoftInputMode="adjustPan" for the activity in Android Manifest file.

First time programmer confused as to why the EditText and Button fields aren't going where I want them to

I am coding in XML on android studios, and I am having trouble getting the EditText to be centered at the top and the Button to be centered in the center. I do not know a lot about code so the other things I've read about Relative vs Linear Layout have been very confusing. I've never coded prior to this, so I'm very sorry if most of it is wrong.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/touch" >
<EditText android:id="#+id/edit_message"
android:layout_width="225dp"
android:layout_height="225dp"
android:layout_gravity="center"
android:hint="#string/edit_message"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:textSize="62sp"
android:text="#string/begin_app"/>
</LinearLayout>
Use the below code in your layout:
android:layout_alignParentTop will align the view on Top
android:layout_alignParentTop will align the view on center of parent
android:layout_centerHorizontal="true" and android:layout_centerVertical="true" will align the view in center of the parent
Layout code with RelativeLayout
<?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"
android:orientation="vertical">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="text" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Button" />
</RelativeLayout>
In android studio just go to the layout xml file and click Design, you can drag and drop the widgets wherever you want and the system will generate the code for you with the placement you desired. Its great for starters.

Defining a specific xml layout with a nested layout

I am in the process of designing my first Android application and I am trying to get the hang of creating an XML layout. (I have a great deal of experience with Java)
Essentially what I wanna do:
Where the outlines describes:
Blue: A basic View (where i can set a text)
Red: A ButtonView (Used so the user can synchronize data)
Green: A nested RelativeLayout (Where i am going to add a lot of other stuff)
More specifically what i wanna do:
So my question is this: How can i set up the different layouts? I am having the must trouble with setting up the blue and red views because i want the red view to fill up around 25% of the screen width(and the blue to fill up the last 75%).
Thank you in advance.
Use layout_weight property to specify the percentage of screen space a view takes.
Like here, for e.g:
<LinearLayout android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical" .........>
<LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent"
android:orientation="horizontal">
<EditText android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="3"/>
<Button android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="1"/>
</LinearLayout>
//Other view
</LinearLayout>
Use following xml, this is specially designed for you.
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="0.75">
<TextView
android:id="#+id/headingTextView"
style="#android:style/TextAppearance.WindowTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cafe Vigeos"
android:textColor="#android:color/white"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.25">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/nested_relative_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
</RelativeLayout>
</LinearLayout>

Categories

Resources