How can I create this layout in Android?

Question

I've been trying to recreate this layout in Android Studio ( API 19 ) without success.

I added at the top part of the image what I need without texts on it, the part below has some explanations.

Every time I tried (no matter LinearLayout or GridLayout ), the text in the middle broke the design if it is long or if I do not set real DP size (like using wrap_content ), if the text has a fixed size I must adapt it to every screen size on both, vertical and horizontal, which I don't want, because I must update a lot of files it every time I make changes on layouts, and if it has wrap_content and the text is long the switch goes off of the screen.

I made this "design" with Photoshop of what I need to recreate on Android Studio on a layout ( xml only, not programmatically ), if possible I'd like LinearLayout or GridLayout or both, I don't care how much sub-layouts are needed.

Additional: If someone knows how to get that switch style for older versions of Android, it'd be really good to get the same style on that too, but is not necessary.

Please help me, I really can't make it, thanks a lot.

Answer 1

With a Relative Layout this kind of design wont be a problem.

You will need to use the properties android:layout_alignParentRight and android:layout_alignParentLeft.

Your center textview will use android:layout_toRightOf and ndroid:layout_toLeftOf.

More informations : Relative layout documentation

Answer 2

Use Follow XML code. it will fit in any screen

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight=".2"
    android:gravity="center">
    <ImageView
        android:layout_width="40dp"
        android:layout_height="wrap_content"
        android:src="@drawable/app_icon" />
</LinearLayout>
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight=".6">
</LinearLayout>
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight=".2"
    android:gravity="center">
    <Switch
        android:layout_width="40dp"
        android:layout_height="wrap_content" />
</LinearLayout>

Answer 3

Use following XML as your layout codes, this is exactly what you want on your designs

<?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="wrap_content">

<ImageView
    android:id="@+id/image"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:src="@drawable/icon_paypal"
    android:layout_margin="16dp"/>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/switchlayout"
    android:layout_toRightOf="@+id/image"
    android:layout_marginTop="16dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Text 1"
        android:textColor="#000"
        />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Text 2"
        android:textColor="#ccc"
        />

</LinearLayout>


<LinearLayout
    android:id="@+id/switchlayout"
    android:layout_width="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_marginRight="16dp"
    android:paddingLeft="16dp"
    android:gravity="center"
    android:layout_height="72dp">
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>