Как я могу создать такой интерфейс в студии Android?

Привет, уважаемый разработчик Android. Надеюсь, вы хорошо проведете выходные. Я занимаюсь разработкой приложения для Android. Недавно я наткнулся на снимок экрана пользовательского интерфейса ниже, как я могу добиться такого рода интерфейса в моем макете **.

под моим XML-макетом, где я реализовал свой снимок экрана пользовательского интерфейса

    <LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        android:orientation = "vertical">

        <LinearLayout
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:orientation = "horizontal">

            <ImageView
                android:layout_width = "match_parent"
                android:layout_height = "wrap_content"
                android:layout_marginRight = "250dp"
                android:src = "@drawable/education_information" />


            <TextView
                android:id = "@+id/education_info"
                android:layout_width = "match_parent"
                android:layout_height = "wrap_content"
                android:gravity = "center"
                android:text = "@string/education_info" />

        </LinearLayout>

        <TextView
            android:id = "@+id/duration"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:gravity = "center"
            android:text = "@string/text_duration" />


        <TextView
            android:id = "@+id/institution"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:gravity = "center"
            android:text = "@string/text_institution"
            android:textSize = "16sp"
            android:textStyle = "bold" />


        <TextView
            android:id = "@+id/degree"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:layout_margin = "16dp"
            android:layout_marginTop = "20dp"
            android:gravity = "center"
            android:text = "@string/text_degree"
            android:textSize = "16sp" />

    </LinearLayout>

под моим скриншотом с реального устройства Как я могу создать такой интерфейс в студии Android?

В вашем случае будет проще использовать относительный макет

— 27.10.2018 12:12

Также покажите скриншот того, как выглядит ваш текущий макет

— 27.10.2018 12:13

@VivekMishra не могли бы вы уточнить свой ответ

— 27.10.2018 12:13

Для большей ясности сначала покажите, как создается макет с помощью опубликованного вами кода.

— 27.10.2018 12:15

@VivekMishra, я разместил, пожалуйста, проверьте это

— 27.10.2018 12:17

Вы не можете создать желаемый пользовательский интерфейс, используя только один линейный макет. Вы должны использовать 4 линейных макета для желаемых результатов

— 27.10.2018 12:19

хорошо, можешь дать мне образец кода?

— 27.10.2018 12:22

Как я сказал ранее, для вашей задачи будет проще использовать относительную компоновку. Поэтому, если вы не знаете, как работает относительный макет, я бы посоветовал немного изучить его, а затем попробовать самостоятельно. Если вы столкнулись с какой-либо проблемой, вы можете спросить здесь

— 27.10.2018 12:24

@VivekMishraI Я не могу сделать это сам, поэтому я попросил помощи

— 27.10.2018 12:26

Я думаю, что они используют paddingRight и и и padding Bottom в imageView

— 27.10.2018 12:27

Лучше использовать маржу, чем заполнение для просмотра изображений.

— 27.10.2018 12:27

Можете ли вы дать образец, пожалуйста, я пробовал себя, я не могу понять, пожалуйста

— 27.10.2018 12:28

Я не собираюсь писать для него код. Я могу описать только шаги по его созданию. Сначала возьмите линейный макет с вертикальной ориентацией. Затем внутри него создайте еще один линейный макет с горизонтальной ориентацией. Этот макет будет содержать ваше изображение и текст «Образование». Это должно помочь вам начать работу.

— 27.10.2018 12:32

@VivekMishra, можешь помочь мне, если я застрял?

— 27.10.2018 12:34

Да, но по крайней мере попробуйте то, что я вам сказал

— 27.10.2018 12:35

@VivekMishra, я сделал, как вы мне сказали, какой следующий шаг в отношении Ёдгорбека

— 27.10.2018 13:20

@VivekMishra, пожалуйста, проверьте и мой код

— 27.10.2018 13:21

не используйте соответствующий родительский элемент для первого макета. Держите его в обертке.

— 27.10.2018 13:23

@Vivek Meshra, что делать дальше?

— 27.10.2018 13:24

@VivekMishra, я сделал, как вы мне сказали

— 27.10.2018 13:25

Теперь просто добавьте оставшиеся элементы в родительский вертикальный макет. Если вы хотите сохранить годы как отдельный элемент, храните их в отдельном горизонтальном расположении.

— 27.10.2018 13:27

@VivekMishra, вы видите обновленный снимок экрана, как я могу поместить текстовое изображение Я имею в виду текст обучения рядом с просмотром изображения, как на изображении выше

— 27.10.2018 13:39

сделайте обтекание ширины изображения и удалите правый тег поля

— 27.10.2018 13:41

android user-interface

27.10.2018 12:09

Коллекции (ArrayList , HashSet , HashMap)

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

 *layout  for first image.*


<?xml version = "1.0" encoding = "utf-8"?>
     <LinearLayout
      android:orientation = "vertical"
      xmlns:android = "http://schemas.android.com/apk/res/android" 
      android:layout_width = "match_parent"
      android:layout_height = "120dp"
      android:background = "@color/black_heading">


    <LinearLayout
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:orientation = "horizontal">

        <ImageView
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:src = "@drawable/checkbox_selector"
            android:layout_gravity = "center"
            />

        <TextView
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:layout_gravity = "center"
            android:text = "Education"
            android:textColor = "@color/white"
            android:textSize = "20sp" />

    </LinearLayout>

    <TextView
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:layout_gravity = "center"
        android:text = "Education"
        android:textColor = "@color/white"
        android:layout_marginStart = "12dp"
        android:textSize = "14sp" />
    <TextView
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:layout_gravity = "center"
        android:text = "Education"
        android:layout_marginStart = "12dp"
        android:textColor = "@color/white"
        android:textSize = "10sp" />
    <TextView
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:layout_gravity = "center"
        android:text = "Education"
        android:textColor = "@color/white"
        android:layout_marginStart = "12dp"
        android:textSize = "10sp" />


       </LinearLayout>

  **Layout for second image**
         <?xml version = "1.0" encoding = "utf-8"?>
      <LinearLayout
    android:orientation = "vertical"
    xmlns:android = "http://schemas.android.com/apk/res/android" 
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:background = "@color/white">

    <Toolbar
        android:id = "@+id/toolbar"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:background = "@color/black_heading">
    </Toolbar>

    <TextView
        android:layout_marginTop = "40dp"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:text = "jhdfjkhjwqhfjhwqjfhwjqf"
        android:layout_gravity = "center"
        android:gravity = "center"
        />
    <TextView
        android:layout_marginTop = "70dp"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:text = "jhdfjkhjwqhfjhwqjfhwjqf"
        android:layout_gravity = "center"
        android:gravity = "center"
        />
    <TextView
        android:layout_marginTop = "@dimen/_50sdp"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:text = "jhdfjkhjwqhfjhwqjfhwjqf"
        android:layout_gravity = "center"
        android:gravity = "center"
        />
    </LinearLayout>

  inside on create view in your activity

    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    toolbar.setTitle("Litabswait Task");

Я использовал, но получаю результат выше, можете ли вы его просмотреть, спасибо

— 27.10.2018 15:04

Я получаю странный результат, вы можете это проверить?

— 27.10.2018 15:07

Что это, пожалуйста, дайте мне знать

— 27.10.2018 15:22

umesh shakya, как я могу увеличить размер? Я имею в виду, вы правильно видите текст?

— 27.10.2018 16:03

27.10.2018 13:38